Technologies avancées du eLearning 2/exercices/Élèves

É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 que Number).

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 une string de longueur 1 ;
    • renvoie un booléen :
      • true si le caractère peut être contenu dans l'écriture d'un nombre ;
      • falsesinon ;
• 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

• https://codepen.io/lzbk/pen/EbLGKQ

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>&nbsp;: " + 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");