Différences entre versions de « Technologies avancées du eLearning 2/exercices/Élèves »
De GBLL, TAL, ALAO, etc.
< Cours:Technologies avancées du eLearning 2
Ligne 58 : | Ligne 58 : | ||
== Correction == | == Correction == | ||
https://codepen.io/lzbk/pen/EbLGKQ | https://codepen.io/lzbk/pen/EbLGKQ | ||
− | + | <syntaxhighlight lang="javascript" class="mw-collapsible mw-collapsed">function getEleves(id){ | |
− | <syntaxhighlight lang="javascript" class="mw-collapsible">function getEleves(id){ | ||
//récupère les élèves d'une liste quelconque | //récupère les élèves d'une liste quelconque | ||
var elt = document.getElementById(id); | var elt = document.getElementById(id); |
Version du 7 décembre 2017 à 13:42
É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
https://codepen.io/lzbk/pen/EbLGKQ
function getEleves(id){
//récupère les élèves d'une liste quelconque
var elt = document.getElementById(id);
return elt.children;
}
/**************************
* Traitement d'une ligne *
**************************/
//pour récupérer un prénom
function getPrenom(ligne){
var i=0;
var resultat = "";
while (i < ligne.length
&& ligne.charAt(i) != " "
&& ligne.charAt(i) != ":"){
resultat += ligne.charAt(i);
i++;
}
if(i==ligne.length){
resultat=false;
}
return resultat;
}
//pour savoir si un caractère est un nombre (ou peut en faire partie)
function isNumber(char){
var resultat;
switch(char){
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
case ".":
resultat = true;
break;
default:
resultat = false;
}
return resultat;
}
function getNotes(ligne){
var resultat = [],
nbCourant = -1; //utilisé pour savoir si on a passé les ':'
for(let i=0;i<ligne.length;i++){
if(nbCourant == -1){//nbCourant reste à -1
if(ligne.charAt(i) == ":"){//jusqu'à ce qu'on ait trouvé ":"
nbCourant = "";
}
}
//on a passé les ":"
else if(isNumber(ligne.charAt(i))){
//on a un chiffre on l'ajoute au nombre courant
nbCourant += ligne.charAt(i); //chaine de caractère
}
else if(nbCourant!==""){
/* on était en train de copier un nombre
sinon nbCourant vaudrait -1 ou "" */
resultat.push(Number(nbCourant));
nbCourant = "";
}
}
if(nbCourant!=="" && nbCourant!==-1){
/* si la ligne se termine par un nombre il faut l'ajouter au résultat avant de partir…*/
resultat.push(Number(nbCourant));
}
return resultat ;
}
function moyenne(tabNotes){
let i=0,
somme = 0;
while(i<tabNotes.length){
somme = somme + tabNotes[i];
i++;
}
return somme/tabNotes.length ;
}
function ecritNotes(tabNotes){
var resultat = "";
for(let i=0; i<tabNotes.length;i++){
if(resultat != ""){//pour les séparateurs
resultat = resultat +", "
}
if(tabNotes[i]>=10){
resultat = resultat + "<b>" + tabNotes[i] + "</b>";
}
else{
resultat = resultat + tabNotes[i];
}
}
resultat = resultat + " → <u>" + moyenne(tabNotes) + "</u>";
return resultat;
}
console.log(getPrenom("Gus : 4, 5.5, 9, 9.5, 10"), getPrenom("Brayden: 12, 14 , 8.5 ; 12 ;"), getPrenom("CeciN'estPasUneLigneAvecUnPrenom"));
//getNotes
console.log("getNotes :", ecritNotes(getNotes("Gus : 4, 5.5, 9, 9.5, 10")), moyenne(getNotes("Brayden: 12, 14 , 8.5 ; 12 ;")), getNotes("CeciN'estPasUneLigneAvec des notes"));