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 177 : | Ligne 177 : | ||
https://codepen.io/lzbk/pen/OOBYJq | https://codepen.io/lzbk/pen/OOBYJq | ||
− | <span class="mw-customtoggle- | + | <span class="mw-customtoggle-correction2">Voir une correction</span> |
− | <syntaxhighlight lang="javascript" line="line" class="mw-collapsible mw-collapsed" id="mw-customcollapsible- | + | <syntaxhighlight lang="javascript" line="line" class="mw-collapsible mw-collapsed" id="mw-customcollapsible-correction2">//pour savoir si un caractère est un nombre (ou peut en faire partie) |
function estNombre(char){ | function estNombre(char){ | ||
var resultat; | var resultat; |
Version du 14 décembre 2017 à 04:26
É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 : une analyse descendante
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 //pour savoir si un caractère est un nombre (ou peut en faire partie)
2 function estNombre(char){
3 var resultat;
4 switch(char){
5 case "0":
6 case "1":
7 case "2":
8 case "3":
9 case "4":
10 case "5":
11 case "6":
12 case "7":
13 case "8":
14 case "9":
15 case ".":
16 resultat = true;
17 break;
18 default:
19 resultat = false;
20 }
21 return resultat;
22 }
23
24 //Pour récupérer toutes les informations nécessaires
25 function traiterLigne(ligne){
26 var i=0;
27 var resultat = {"prenom":"",
28 "notes":[ ],
29 "moyenne":false};
30 while (i < ligne.length
31 && ligne.charAt(i) != " "
32 && ligne.charAt(i) != ":"){
33 resultat.prenom += ligne.charAt(i);
34 i++;
35 }
36 if(i==ligne.length){
37 resultat=false;
38 }
39 else{
40 let nbCourant = "",
41 somme = 0;
42 while(i <= ligne.length){
43 if (i < ligne.length
44 && estNombre(ligne.charAt(i))){
45 nbCourant += ligne.charAt(i); //chaine de caractère
46 }
47 else if(nbCourant!==""){
48 let laNote = Number(nbCourant);
49 somme += laNote ;
50 resultat.notes.push(laNote);
51 nbCourant = "";
52 }
53 i++;
54 }
55 if(resultat.notes.length>0){
56 resultat.moyenne = somme/resultat.notes.length
57 }
58 }
59 return resultat;
60 }
61
62 function ecrireLigne(semestre){
63 var resultat = "<i>" + semestre.prenom + "</i> : ";
64 for(let i=0; i<semestre.notes.length;i++){
65 if(i > 0){//pour les séparateurs
66 resultat = resultat +", "
67 }
68 if(semestre.notes[i]>=10){
69 resultat = resultat + "<b>" + semestre.notes[i] + "</b>";
70 }
71 else{
72 resultat = resultat + semestre.notes[i];
73 }
74 }
75 resultat = resultat + " → <u>" + semestre.moyenne + "</u>";
76 return resultat;
77 }
78
79 //prend un tableau du DOM et stocke les données extraites
80 //dans un tableau d'objets composites
81 function traiterClasse(id){
82 var elt = document.getElementById(id),
83 tableauDOM = elt.children;
84 for(let i=0;i<tableauDOM.length;i++){
85 tableauDOM[i].innerHTML = ecrireLigne(traiterLigne(tableauDOM[i].innerHTML));
86 }
87 }
88
89 //Programme principal
90 traiterClasse("fastoche");
91 traiterClasse("moyen");
92 traiterClasse("chaud");
Méthode 2 : création d'objets pour limiter le nombre de tours de boucles
Dans cette méthode, le code sera moins lisible car, en substance, les fonctions getPrenom()
, getNotes()
, moy()
seront traitées en une seule 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 traiterLigne(ligne)
est la fonction qui regroupe les traitements degetPrenom()
,getNotes()
etmoy()
.- cette fonction prendra en entrée une chaine de caractères contenant les informations non mises en forme ;
- elle renverra un objet composite muni de 3 attributs :
prenom
, le prénom de l'élève (string
) ;notes
, un tableau deNumber
avec les notes de l'élève ;moyenne
, unNumber
, sa moyenne ;
function ecrireLigne(semestre)
- prend un objet tel que celui renvoyé par
traiterLigne
; - et génère en conséquences une
string
mise en forme en HTML ;
- prend un objet tel que celui renvoyé par
- enfin
function traiterClasse(id)
:- prend
id
: une chaine de caractères contenant l'identifiant d'un élément du DOM ; - et modifie en conséquence cet élément du DOM.
- prend
Correction
https://codepen.io/lzbk/pen/OOBYJq
Voir une correction
1 //pour savoir si un caractère est un nombre (ou peut en faire partie)
2 function estNombre(char){
3 var resultat;
4 switch(char){
5 case "0":
6 case "1":
7 case "2":
8 case "3":
9 case "4":
10 case "5":
11 case "6":
12 case "7":
13 case "8":
14 case "9":
15 case ".":
16 resultat = true;
17 break;
18 default:
19 resultat = false;
20 }
21 return resultat;
22 }
23
24 //Pour récupérer toutes les informations nécessaires
25 function traiterLigne(ligne){
26 var i=0;
27 var resultat = {"prenom":"",
28 "notes":[ ],
29 "moyenne":false};
30 while (i < ligne.length
31 && ligne.charAt(i) != " "
32 && ligne.charAt(i) != ":"){
33 resultat.prenom += ligne.charAt(i);
34 i++;
35 }
36 if(i==ligne.length){
37 resultat=false;
38 }
39 else{
40 let nbCourant = "",
41 somme = 0;
42 while(i <= ligne.length){
43 if (i < ligne.length
44 && estNombre(ligne.charAt(i))){
45 nbCourant += ligne.charAt(i); //chaine de caractère
46 }
47 else if(nbCourant!==""){
48 let laNote = Number(nbCourant);
49 somme += laNote ;
50 resultat.notes.push(laNote);
51 nbCourant = "";
52 }
53 i++;
54 }
55 if(resultat.notes.length>0){
56 resultat.moyenne = somme/resultat.notes.length
57 }
58 }
59 return resultat;
60 }
61
62 function ecrireLigne(semestre){
63 var resultat = "<i>" + semestre.prenom + "</i> : ";
64 for(let i=0; i<semestre.notes.length;i++){
65 if(i > 0){//pour les séparateurs
66 resultat = resultat +", "
67 }
68 if(semestre.notes[i]>=10){
69 resultat = resultat + "<b>" + semestre.notes[i] + "</b>";
70 }
71 else{
72 resultat = resultat + semestre.notes[i];
73 }
74 }
75 resultat = resultat + " → <u>" + semestre.moyenne + "</u>";
76 return resultat;
77 }
78
79 //prend un tableau du DOM et stocke les données extraites
80 //dans un tableau d'objets composites
81 function traiterClasse(id){
82 var elt = document.getElementById(id),
83 tableauDOM = elt.children;
84 for(let i=0;i<tableauDOM.length;i++){
85 tableauDOM[i].innerHTML = ecrireLigne(traiterLigne(tableauDOM[i].innerHTML));
86 }
87 }
88
89 //Programme principal
90 traiterClasse("fastoche");
91 traiterClasse("moyen");
92 traiterClasse("chaud");