Technologies avancées du eLearning 2/exercices/Équipe
De GBLL, TAL, ALAO, etc.
< Cours:Technologies avancées du eLearning 2Révision datée du 18 novembre 2020 à 11:28 par Loizbek (discussion | contributions) (Loizbek a déplacé la page Cours:Mathieu Loiseau/Cours/Master DDL — Parcours DILIPEM/M2 — technologies avancées du eLearning 2/exercices/Équipe vers Cours:Technologies avancées du eLearning 2/exercices/Équipe sans laisser de redirection)
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.
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="equipe.js"></script>
6 <link type="text/css" rel="stylesheet" href="style.css" />
7 <script type="text/javascript">
8 function init(){
9 var monEquipe = new Equipe("DILIPEM", "logo.svg") ;
10 //Test de la méthode nomEq()
11 if(monEquipe.nomEq() == "DILIPEM"){
12 console.log("Bravo nomEq() marche.");
13 }
14 else{
15 console.error("Attention à la méthode nomEq() (ou au constructeur)");
16 }
17 //test de la méthode nbMembres()
18 if(monEquipe.nbMembres() === 0){
19 console.log("Bravo, il y a des chances que nbMembres() fonctionne");
20 }
21 else{
22 console.error("Attention à nbMembres (ou au constructeur)");
23 }
24 //test de l'ajout de membres
25 monEquipe.ajoutMembre("Jean-Pierre") ;
26 monEquipe.ajoutMembre("Jacqueline") ;
27 if(monEquipe.nbMembres() === 2){
28 console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
29 }
30 else{
31 console.error("Attention à nbMembres (ou à nbMembres)");
32 }
33 var elt = document.getElementsByTagName('body')[0];
34 console.log(elt);
35 elt.innerHTML = monEquipe.toHTML();
36 }
37 window.onload=init;
38 </script>
39 </head>
40 <body>
41 </body>
42 </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.
1 class Equipe{
2 constructor(nomEq, logo, parentId){
3 //on récupère l'élément parent d'après parentId
4 var parent = document.getElementById(parentId),
5 //on vérifie qu'il existe
6 res = (parent != null) ;
7 if(res){
8 this.elt = document.createElement("article");
9 parent.appendChild(this.elt);
10 this.logo = document.createElement("img");
11 this.logo.src = logo ;
12 this.logo.style="float:left; height:64px;margin-right:1em;";
13 this.elt.appendChild(this.logo);
14 this.nom = document.createElement("h1");
15 this.nom.innerHTML = nomEq;
16 this.elt.appendChild(this.nom);
17 this.listeMembres = document.createElement("ul");
18 this.elt.appendChild(this.listeMembres);
19 }
20 else{
21 console.error("No element with id “"+parentId+"”");
22 }
23 return res;
24 }
25 nomEq(){
26 return this.nom.innerHTML;
27 }
28
29 nbMembres(){
30 return this.listeMembres.children.length;
31 }
32
33 ajoutMembre(nom){
34 var tmpElt = document.createElement("li");
35 tmpElt.innerHTML = nom;
36 this.listeMembres.appendChild(tmpElt);
37 }
38 }
Créer une fonction qui appelle AjoutMembre
et l'associer à un bouton
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Test équipe</title>
6 <script type="text/javascript" src="equipe.js"></script>
7 <link type="text/css" rel="stylesheet" href="style.css" />
8 <script type="text/javascript">
9 function init(){
10 var monEquipe = new Equipe("DILIPEM", "logo.svg", "test") ;
11 //Test de la méthode nomEq()
12 if(monEquipe.nomEq() == "DILIPEM"){
13 console.log("Bravo nomEq() marche.");
14 }
15 else{
16 console.error("Attention à la méthode nomEq() (ou au constructeur)");
17 }
18 //test de la méthode nbMembres()
19 if(monEquipe.nbMembres() === 0){
20 console.log("Bravo, il y a des chances que nbMembres() fonctionne");
21 }
22 else{
23 console.error("Attention à nbMembres (ou au constructeur)");
24 }
25 //test de l'ajout de membres
26 monEquipe.ajoutMembre("Jean-Pierre") ;
27 monEquipe.ajoutMembre("Jacqueline") ;
28 if(monEquipe.nbMembres() === 2){
29 console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
30 }
31 else{
32 console.error("Attention à nbMembres (ou à nbMembres)");
33 }
34
35 function addMembers(){
36 //fonction qui accède à monEquipe
37 }
38 //associer addMembers à l'evt onclick du bouton
39 }
40 window.onload=init;
41 </script>
42 </head>
43 <body>
44 <div id="test"> </div>
45 <button id="AjouterMembres">Ajouter des membres à l'équipe</button>
46 </body>
47 </html>
Voir une correction
1 //Partie manquante ci-dessus
2 function addMembers(){
3 var message = "Saisir le nom du membre, “stop” pour arrêter.",
4 membre = prompt(message);
5 while(membre != "stop" &&
6 membre != null){
7 monEquipe.ajoutMembre(membre);
8 membre = prompt(message);
9 }
10 }
11 document.getElementById("AjouterMembres").onclick = addMembers;
12 //Modification à apporter dans la classe Equipe pour pouvoir supprimer des éléments
13 ajoutMembre(nom){
14 var tmpElt = document.createElement("li");
15 tmpElt.innerHTML = nom;
16 this.listeMembres.appendChild(tmpElt);
17 /*on voit ici qu'on peut créer une fonction en la mettant dans une variable
18 c'est la même chose que ce qu'on faisait en disant que window.onload = init ;
19 sauf que ce qu'on fait ici, c'est qu'on la déclare directement dans la variable
20 au lieu de la créer d'abord*/
21 tmpElt.onclick = function(){
22 //cette fonction est la méthode onclick d'un élément du DOM
23 //le this représente donc l'élément cliqué lors du déclenchement de l'évènement
24 //et non l'instance de l'objet Equipe. Et ce bien que la méthode ajoutMembre
25 //soit une méthode de la classe Equipe.
26 this.remove();
27 };
28 }
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
1 function supprimerMembre(){
2 this.remove();
3 }
4
5 class Equipe{
6 constructor(nomEq, logo, parentId, score){
7 //on récupère l'élément parent d'après parentId
8 var parent = document.getElementById(parentId),
9 //on vérifie qu'il existe
10 res = (parent != null) ;
11 if(res){
12 this.elt = document.createElement("article");
13 parent.appendChild(this.elt);
14 this.nom = document.createElement("h1");
15 this.nom.innerHTML = nomEq;
16 this.elt.appendChild(this.nom);
17 this.logo = document.createElement("img");
18 this.logo.src = logo;
19 this.elt.appendChild(this.logo);
20 this.listeMembres = document.createElement("ul");
21 this.elt.appendChild(this.listeMembres);
22 this.score = 0;
23 this.scoreElt = document.createElement("p");
24 this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
25 this.elt.appendChild(this.scoreElt);
26 }
27 else{
28 console.error("No element with id “"+parentId+"”");
29 }
30 return res;
31 }
32
33 nomEq(){
34 return this.nom.innerHTML;
35 }
36
37 nbMembres(){
38 return this.listeMembres.children.length;
39 }
40
41 ajoutMembre(nom){
42 this.membre = document.createElement("li");
43 this.membre.innerHTML = nom;
44 this.listeMembres.appendChild(this.membre);
45 this.membre.addEventListener("click", supprimerMembre);
46 }
47 plus1(){
48 this.score++;
49 this.scoreElt.innerHTML = "Score de l'équipe = " + this.score;
50 }
51 }
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <script type="text/javascript" src="equipeDOM.js"></script>
6 <link type="text/css" rel="stylesheet" href="style.css" />
7 <script type="text/javascript">
8 function init(){
9 var scoreDILIPEM = 0;
10 var scoreFLE = 0;
11 var monEquipe = new Equipe("DILIPEM", "logo.svg", "contenu", scoreDILIPEM);
12 var monEquipe2 = new Equipe("FLE", "logo.svg", "contenu2", scoreFLE)
13
14 //Test de la méthode nomEq()
15 if(monEquipe.nomEq() == "DILIPEM"){
16 console.log("Bravo nomEq() marche.");
17 }
18 else{
19 console.error("Attention à la méthode nomEq() (ou au constructeur)");
20 }
21
22 //test de la méthode nbMembres()
23 if(monEquipe.nbMembres() === 0){
24 console.log("Bravo, il y a des chances que nbMembres() fonctionne");
25 }
26 else{
27 console.error("Attention à nbMembres (ou au constructeur)");
28 }
29
30 //test de l'ajout de membres
31 monEquipe.ajoutMembre("Jean-Pierre") ;
32 monEquipe.ajoutMembre("Jacqueline") ;
33 if(monEquipe.nbMembres() === 2){
34 console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
35 }
36 else{
37 console.error("Attention à nbMembres (ou à nbMembres)");
38 }
39
40 var addDILIPEM = document.getElementById("addDILIPEM");
41 addDILIPEM.addEventListener("click", addMembersDILIPEM);
42 var addFLE = document.getElementById("addFLE");
43 addFLE.addEventListener("click", addMembersFLE);
44
45 function addMembersDILIPEM() {
46 var ajout = prompt("Ajoute un membre");
47 while (ajout != "stop" && ajout != "" && ajout != null) {
48 monEquipe.ajoutMembre(ajout);
49 ajout = prompt("Entrez le nom d'un membre");
50 }
51 }
52
53 function addMembersFLE() {
54 var ajout = prompt("Ajoute un membre");
55 while (ajout != "stop" && ajout != "" && ajout != null) {
56 monEquipe2.ajoutMembre(ajout);
57 ajout = prompt("Entrez le nom d'un membre");
58 }
59 }
60
61 var ajoutScoreDILIPEM = document.getElementById("ajoutScoreDILIPEM");
62 ajoutScoreDILIPEM.addEventListener("click", ajoutPointDILIPEM);
63
64 function ajoutPointDILIPEM() {
65 monEquipe.plus1();
66 }
67
68 var ajoutScoreFLE = document.getElementById("ajoutScoreFLE");
69 ajoutScoreFLE.addEventListener("click", ajoutPointFLE);
70
71 function ajoutPointFLE() {
72 monEquipe2.plus1();
73 }
74 }
75 window.onload = init;
76 </script>
77 </head>
78 <body>
79 <div id="contenu"></div>
80 <button id="addDILIPEM">Ajouter des membres à l'équipe</button>
81 <button id="ajoutScoreDILIPEM">+1</button>
82 <div id="contenu2"></div>
83 <button id="addFLE">Ajouter des membres à l'équipe</button>
84 <button id="ajoutScoreFLE">+1</button>
85 </body>
86 </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
Classe Equipe
1 class Equipe{
2 constructor(nomEq, logo, parentId){
3 //on récupère l'élément parent d'après parentId
4 var parent = document.getElementById(parentId),
5 //on vérifie qu'il existe
6 res = (parent != null) ;
7 if(res){
8 this.elt = document.createElement("article");
9 this.elt.className = "team";
10 parent.appendChild(this.elt);
11 this.nom = document.createElement("h1");
12 this.nom.innerHTML = nomEq;
13 this.elt.appendChild(this.nom);
14 this.listeMembres = document.createElement("ul");
15 this.elt.appendChild(this.listeMembres);
16 this.logo = document.createElement("div");
17 this.logo.className = "logo";
18 var img = document.createElement("img");
19 img.src = logo ;
20 this.logo.appendChild(img);
21 this.elt.appendChild(this.logo);
22 this.score = new ScoreManager(this.elt, this.logo);
23 }
24 else{
25 console.error("No element with id “"+parentId+"”");
26 }
27 return res;
28 }
29
30 nomEq(){
31 return this.nom.innerHTML;
32 }
33
34 nbMembres(){
35 return this.listeMembres.children.length;
36 }
37
38 ajoutMembre(nom){
39 var tmpElt = document.createElement("li");
40 tmpElt.innerHTML = nom;
41 this.listeMembres.appendChild(tmpElt);
42 tmpElt.onclick = function(){
43 this.remove();
44 }
45 }
46
47 getScore(){
48 return this.score.getScore();
49 }
50 }
Classe ScoreManager
1 class ScoreManager{
2 constructor(displayParent, buttonParent){
3 if(typeof buttonParent == "undefined"){
4 buttonParent = displayParent;
5 }
6 this.score = 0;
7 this.plus1elt = document.createElement("button");
8 this.plus1elt.innerHTML = "+1";
9 this.scoreElt = document.createElement("p");
10 this.scoreElt.className = "score";
11 var self = this ;
12 this.plus1elt.onclick = function(){
13 self.plus1();
14 self.renderScore();
15 }
16 displayParent.appendChild(this.scoreElt);
17 buttonParent.appendChild(this.plus1elt);
18 this.renderScore()
19 }
20
21 getScore(){
22 return this.score ;
23 }
24
25 renderScore(){
26 this.scoreElt.innerHTML = this.score;
27 }
28
29 setButtonLabel(label){
30 this.plus1elt.innerHTML = label;
31 }
32
33 plus1(){
34 this.score++;
35 }
36
37 reset(){
38 this.score = 0;
39 }
40 }
Document HTML
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Test équipe</title>
6 <script type="text/javascript" src="score.js"></script>
7 <script type="text/javascript" src="equipe.js"></script>
8 <link type="text/css" rel="stylesheet" href="style.css" />
9 <script type="text/javascript">
10 function init(){
11 var monEquipe = new Equipe("DILIPEM", "2.png", "test") ;
12 //Test de la méthode nomEq()
13 if(monEquipe.nomEq() == "DILIPEM"){
14 console.log("Bravo nomEq() marche.");
15 }
16 else{
17 console.error("Attention à la méthode nomEq() (ou au constructeur)");
18 }
19 //test de la méthode nbMembres()
20 if(monEquipe.nbMembres() === 0){
21 console.log("Bravo, il y a des chances que nbMembres() fonctionne");
22 }
23 else{
24 console.error("Attention à nbMembres (ou au constructeur)");
25 }
26 //test de l'ajout de membres
27 monEquipe.ajoutMembre("Jean-Pierre") ;
28 monEquipe.ajoutMembre("Jacqueline") ;
29 if(monEquipe.nbMembres() === 2){
30 console.log("Bravo, il y a des chances que nbMembres() et ajoutMembre() fonctionnent.");
31 }
32 else{
33 console.error("Attention à nbMembres (ou à nbMembres)");
34 }
35 var elt = document.getElementsByTagName('body')[0];
36 console.log(elt);
37
38 function addMembers(equipe){
39 var message = "Saisir le nom du membre, “stop” pour arrêter.",
40 membre = prompt(message);
41 while(membre != "stop" &&
42 membre != null){
43 equipe.ajoutMembre(membre);
44 membre = prompt(message);
45 }
46 }
47 var leurEquipe = new Equipe("IdL", "4.png", "test") ;
48 document.getElementById("AjouterMembres").onclick = function(){addMembers(monEquipe);};
49 document.getElementById("AjouterMembres2").onclick = function(){addMembers(leurEquipe);};
50
51 }
52 window.onload=init;
53 </script>
54 </head>
55 <body>
56 <header>
57 <div id="test"> </div>
58 </header>
59 <h2>Ajout de membres</h2>
60 <button style="clear:both" id="AjouterMembres">Équipe 1</button>
61 <button style="clear:both" id="AjouterMembres2">Équipe 2</button>
62
63 </body>
64 </html>
Exemple de feuille de style
1 body{
2 padding:0;
3 margin:0;
4 }
5
6 header{
7 height: 400px;
8 background-color: #cacaca;
9 margin: 0px;
10 padding: 3px;
11 position: relative;
12 }
13
14 .team{
15 padding-right: 3em;
16 width:400px;
17 top:0;
18 position:absolute;
19 }
20
21 .team:nth-child(2n+1){
22 padding-left:70px;
23 left:0;
24 }
25
26 .team:nth-child(2n){
27 padding-right:70px;
28 right:0;;
29 }
30
31 .score{
32 position:absolute;
33 margin:0;
34 font-weight:bold;
35 font-family:monotype;
36 font-size : 32px;
37 background-color:black;
38 color: green;
39 padding:5px;
40 text-align:center;
41 }
42
43 .team:nth-child(2n+1) .logo{
44 width:64px;
45 position:absolute;
46 top:0;
47 left:0;
48 text-align:left;
49 }
50
51 .team:nth-child(2n) .logo{
52 width:64px;
53 position:absolute;
54 top:0;
55 right:0;
56 text-align:right;
57 }
58
59 .team img{
60 margin-bottom:2px;
61 height:64px;
62 display:block;
63 }
64
65 .team:nth-child(2n+1) h1, .team:nth-child(2n+1) ul{
66 text-align: left;
67 }
68
69 .team:nth-child(2n) h1, .team:nth-child(2n+1) ul{
70 text-align: right;
71 }
72
73 .team:nth-child(2n) .score{
74 top:0;
75 left:0;
76 }
77
78 .team:nth-child(2n+1) .score{
79 top:0;
80 right:0;
81 }
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 ?
1 //fonction utilitaire qui tire au sort un entier de l'intervalle [min ; max[
2 function getRandomInt(min, max){
3 min = Math.ceil(min);
4 max = Math.floor(max);
5 return Math.floor(Math.random() * (max-min) + min) ;
6 }
7
8 //Classe Jeu
9 class Jeu{
10 //Crée un objet Jeu à partir de deux objets Equipe
11 constructor(equipe1, equipe2){
12 this.equipes = [equipe1, equipe2];
13 }
14
15 //Renvoie l'équipe (objet) en train de gagner
16 getWinner(){
17 var res = false;
18 var score1 = ;
19 var score2 = this.equipes[1].getScore();
20 if(this.equipes[0].getScore() < this.equipes[1].getScore()){
21 res = this.equipes[1];
22 }
23 else if(this.equipes[0].getScore() > this.equipes[1].getScore()){
24 res = this.equipes[0];
25 }
26 return res ;
27 }
28
29 //renvoie le nom (string) de l'équipe qui gagne
30 getWinnerName(){
31 var res = "Match nul",
32 winner = this.getWinner();
33 if(winner !== false){
34 res = winner.getName();
35 }
36 return winner ;
37 }
38
39 //Renvoie une équipe (objet) tirée au sort.
40 pickTeam(){
41 return this.equipes[getRandomInt(0,2)];
42 }
43 }