Technologies avancées du eLearning 2/exercices/Élèves
De GBLL, TAL, ALAO, etc.
< Cours:Technologies avancées du eLearning 2
Énoncé
On a un document HTML, qui contient une liste d’étudiant avec les notes obtenues lors du semestre, sous la forme suivante :
<h2>Facile</h2>
<ul id="fastoche">
<li>Maegan : 4, 8, 10, 12</li>
<li>Ajay : 15, 16, 12, 16</li>
<li>Sheri : 9, 10, 11, 15</li>
<li>Marianne : 10, 10, 10, 10</li>
</ul>
<h2>Moins facile</h2>
<ul id = "moyen">
<li>Gus : 4, 5.5, 9, 9.5, 10</li>
<li>Sammy : 3, 17</li>
<li>Belinda : 8.5, 11, 20</li>
</ul>
<h2>Très difficile</h2>
<ul id="chaud">
<li>Brayden: 12, 14 , 8.5 ; 12 ;</li>
<li>Kassidy : 13, 3.5 ;</li>
<li>Jonas : 18, 19, 16.5, 10.</li>
</ul>
On veut créer du code qui permette automatiquement de :
- Mettre en italiques le nom de l’élève ;
- Mettre en gras les notes supérieures à la moyenne ;
- Calculer et souligner la moyenne.
Informations utiles
DOMelt.children
→ renvoie un tableau avec la liste des enfants d’un élément ;mot.charAt(i)
→ (i+1)e caractère d’une chaine ;chaineOuTableau.length
→ nombre d’éléments ;Number("25")
→25
(en tant queNumber
).
Méthode 1
On va procéder progressivement et créer un ensemble de fonctions que nous regrouperons ensuite :
function getEleves(id)
id
est une chaine de caractères contenant l'identifiant d'un élément du DOM ;- renvoie la liste des éléments contenus dans l'élément d'identifiant du DOM ;
function getPrenom(ligne)
ligne
est une chaine de caractères (telle que le contenu des<li>
ci-dessus ;- renvoie une chaine de caractères ne contenant que le prénom de l'élève ;
function getNotes(ligne)
ligne
est une chaine de caractères (telle que le contenu des<li>
ci-dessus ;- renvoie un tableau de
Number
avec toutes les notes ; - cette fonction nécessite une autre fonction :
function estNombre(caractere)
caractere
est un caractère (ou unestring
de longueur 1 ;- renvoie un booléen :
true
si le caractère peut être contenu dans l'écriture d'un nombre ;false
sinon ;
function moy(tabNotes)
tabNotes
est un tableau de notes (Number
) ;- renvoie un
Number
représentant la moyenne des nombres dans le tableau ;
function bilan(ligne)
ligne
est une chaine de caractères (telle que le contenu des<li>
ci-dessus ;- renvoie une chaine de caractère répondant aux contraintes de l'énoncé ;
function traite(id)
id
est un identifiant d'élément du DOM qui contient une liste d'élève ;- remplace le contenu de l'élément par les informations mises en forme.
Correction
Voir une correction
1 function getEleves(id){
2 //récupère les élèves d'une liste quelconque
3 var elt = document.getElementById(id);
4 return elt.children;
5 }
6
7 /**************************
8 * Traitement d'une ligne *
9 **************************/
10 //pour récupérer un prénom
11 function getPrenom(ligne){
12 var i=0;
13 var resultat = "";
14 while (i < ligne.length
15 && ligne.charAt(i) != " "
16 && ligne.charAt(i) != ":"){
17 resultat += ligne.charAt(i);
18 i++;
19 }
20 if(i==ligne.length){
21 resultat=false;
22 }
23 return resultat;
24 }
25
26 //pour savoir si un caractère est un nombre (ou peut en faire partie)
27 function estNombre(char){
28 var resultat;
29 //voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch
30 switch(char){
31 case "0":
32 case "1":
33 case "2":
34 case "3":
35 case "4":
36 case "5":
37 case "6":
38 case "7":
39 case "8":
40 case "9":
41 case ".":
42 resultat = true;
43 break;
44 default:
45 resultat = false;
46 }
47 return resultat;
48 }
49
50 function getNotes(ligne){
51 var resultat = [],
52 nbCourant = -1; //utilisé pour savoir si on a passé les ':'
53 for(let i=0;i<ligne.length;i++){
54 if(nbCourant == -1){//nbCourant reste à -1
55 if(ligne.charAt(i) == ":"){//jusqu'à ce qu'on ait trouvé ":"
56 nbCourant = "";
57 }
58 }
59 //on a passé les ":"
60 else if(estNombre(ligne.charAt(i))){
61 //on a un chiffre on l'ajoute au nombre courant
62 nbCourant += ligne.charAt(i); //chaine de caractère
63 }
64 else if(nbCourant!==""){
65 /* on était en train de copier un nombre
66 sinon nbCourant vaudrait -1 ou "" */
67 resultat.push(Number(nbCourant));
68 nbCourant = "";
69 }
70 }
71 if(nbCourant!=="" && nbCourant!==-1){
72 /* si la ligne se termine par un nombre il faut l'ajouter au résultat avant de partir…*/
73 resultat.push(Number(nbCourant));
74 }
75 return resultat ;
76 }
77
78 function moy(tabNotes){
79 let i=0,
80 somme = 0;
81 while(i<tabNotes.length){
82 somme = somme + tabNotes[i];
83 i++;
84 }
85 return somme/tabNotes.length ;
86 }
87
88 function bilan(ligne){
89 var resultat = "";
90 var tabNotes = getNotes(ligne);
91 for(let i=0; i<tabNotes.length;i++){
92 if(resultat != ""){//pour les séparateurs
93 resultat = resultat +", "
94 }
95 if(tabNotes[i]>=10){
96 resultat = resultat + "<b>" + tabNotes[i] + "</b>";
97 }
98 else{
99 resultat = resultat + tabNotes[i];
100 }
101 }
102 resultat = "<i>" + getPrenom(ligne) + "</i> : " + resultat + " → <u>" + moy(tabNotes) + "</u>";
103 return resultat;
104 }
105
106 function traiter(id){
107 var tabElt = getEleves(id);
108 for(let i=0;i<tabElt.length;i++){
109 tabElt[i].innerHTML = bilan(tabElt[i].innerHTML);
110 }
111 }
112
113 //Exécution :
114 traiter("fastoche");
115 traiter("moyen");
116 traiter("chaud");