Correction module 3 ex 1 pour 3TQTS

assets/atelier-m3-m4.css

@@ -41,6 +41,7 @@
 .at-tri button{padding:.2rem .6rem;font-size:.85rem}
 .at-tri__lib.est-juste{color:var(--juste,#1E7A4C);font-weight:600}
 .at-tri__lib.est-faux{color:var(--erreur,#B03A2E)}
+.at-tri__verdict{grid-column:1 / -1;font-size:.88rem;margin:0 0 .35rem}
 .at-score{font-weight:600;margin-top:.6rem}
 
 /* ---------- comparaison en deux colonnes ---------- */

assets/atelier-m3-m4.js

@@ -33,8 +33,13 @@ const poserQuiz = (typeof window.quiz === 'function') ? window.quiz : function(e
    ===================================================================== */
 
 /* ---------- tri caractère ou paragraphe ---------- */
-const triEl = document.getElementById('at-tri');
-if(triEl){
+/* Le retour visuel ne dépend pas de la feuille de style : les couleurs et le
+   verdict sont écrits directement dans le DOM, pour que l'exercice fonctionne
+   même si atelier-m3-m4.css n'est pas chargé. */
+(function(){
+  const triEl = document.getElementById('at-tri');
+  if(!triEl) return;
+
   const CP = [
     ["Mettre un mot en gras","c"],
     ["Centrer un titre","p"],
@@ -49,32 +54,77 @@ if(triEl){
     ["Espacer deux paragraphes","p"],
     ["Changer la taille en points","c"]
   ];
+  const NOM = {c:'Caractère', p:'Paragraphe'};
+  const VERT = '#1E7A4C', ROUGE = '#B03A2E';
+
   const scoreEl = document.getElementById('at-tri-score');
-  let faits = {};
-  function rendre(){
-    triEl.innerHTML = CP.map(function(r,i){
-      const etat = faits[i];
-      const cls = etat === undefined ? '' : (etat ? ' est-juste' : ' est-faux');
-      return '<div class="at-tri__lib'+cls+'">'+r[0]+'</div>'
-        + '<button type="button" data-i="'+i+'" data-v="c">C</button>'
-        + '<button type="button" data-i="'+i+'" data-v="p">P</button>';
-    }).join('');
-    const n = Object.keys(faits).length;
-    const bons = Object.keys(faits).filter(function(k){return faits[k];}).length;
-    scoreEl.textContent = n
-      ? bons+' sur '+n+' classés correctement'
-        + (n === CP.length ? (bons === CP.length ? '. Tout juste.' : '. Reprends ceux en rouge.') : '')
-      : '';
-  }
-  triEl.addEventListener('click', function(e){
-    const b = e.target.closest('button'); if(!b) return;
-    const i = +b.dataset.i;
-    faits[i] = (b.dataset.v === CP[i][1]);
-    rendre();
+  const lignes = [];
+
+  CP.forEach(function(r, i){
+    const lib = document.createElement('div');
+    lib.className = 'at-tri__lib';
+    lib.textContent = r[0];
+
+    const bc = document.createElement('button');
+    bc.type = 'button'; bc.textContent = 'C'; bc.dataset.v = 'c';
+    const bp = document.createElement('button');
+    bp.type = 'button'; bp.textContent = 'P'; bp.dataset.v = 'p';
+
+    const verdict = document.createElement('div');
+    verdict.className = 'at-tri__verdict';
+    verdict.style.gridColumn = '1 / -1';
+    verdict.style.fontSize = '.88rem';
+    verdict.style.margin = '0 0 .35rem';
+    verdict.style.minHeight = '0';
+
+    triEl.appendChild(lib); triEl.appendChild(bc); triEl.appendChild(bp);
+    triEl.appendChild(verdict);
+    lignes.push({lib:lib, bc:bc, bp:bp, verdict:verdict, juste:null});
+
+    [bc, bp].forEach(function(b){
+      b.addEventListener('click', function(){
+        const choix = b.dataset.v;
+        const ok = (choix === r[1]);
+        const L = lignes[i];
+        L.juste = ok;
+        L.lib.style.color = ok ? VERT : ROUGE;
+        L.lib.style.fontWeight = ok ? '600' : '400';
+        L.bc.setAttribute('aria-pressed', String(choix === 'c'));
+        L.bp.setAttribute('aria-pressed', String(choix === 'p'));
+        L.verdict.style.color = ok ? VERT : ROUGE;
+        L.verdict.textContent = ok
+          ? NOM[choix] + ', exact.'
+          : NOM[choix] + ', non. C\u2019est un réglage de ' + NOM[r[1]].toLowerCase() + '.';
+        majScore();
+      });
+    });
   });
-  document.getElementById('at-tri-reset').addEventListener('click', function(){ faits = {}; rendre(); });
-  rendre();
-}
+
+  function majScore(){
+    if(!scoreEl) return;
+    const faits = lignes.filter(function(L){ return L.juste !== null; });
+    const bons = faits.filter(function(L){ return L.juste; }).length;
+    if(!faits.length){ scoreEl.textContent = ''; return; }
+    scoreEl.textContent = bons + ' sur ' + faits.length + ' classés correctement'
+      + (faits.length === CP.length
+          ? (bons === CP.length ? '. Tout juste.' : '. Reprends ceux en rouge.')
+          : '');
+  }
+
+  const reset = document.getElementById('at-tri-reset');
+  if(reset){
+    reset.addEventListener('click', function(){
+      lignes.forEach(function(L){
+        L.juste = null;
+        L.lib.style.color = ''; L.lib.style.fontWeight = '';
+        L.verdict.textContent = '';
+        L.bc.setAttribute('aria-pressed','false');
+        L.bp.setAttribute('aria-pressed','false');
+      });
+      majScore();
+    });
+  }
+})();
 
 /* ---------- atelier de mise en forme ---------- */
 const apercu = document.getElementById('at-apercu');
@@ -105,7 +155,8 @@ if(apercu){
   }
   ['at-police','at-taille','at-retrait','at-espace','at-interligne','at-bordure','at-gras','at-italique']
     .forEach(function(id){ document.getElementById(id).addEventListener('input', maj); });
-  document.getElementById('at-align').addEventListener('click', function(e){
+  const alignEl = document.getElementById('at-align');
+  if(alignEl) alignEl.addEventListener('click', function(e){
     const b = e.target.closest('button'); if(!b) return;
     document.querySelectorAll('#at-align button').forEach(function(x){ x.setAttribute('aria-pressed','false'); });
     b.setAttribute('aria-pressed','true');
@@ -175,7 +226,8 @@ if(page){
   }
   ['at-m-haut','at-m-bas','at-m-gauche','at-m-droite','at-entete','at-pied']
     .forEach(function(id){ document.getElementById(id).addEventListener('input', majPage); });
-  document.getElementById('at-orient').addEventListener('click', function(e){
+  const orientEl = document.getElementById('at-orient');
+  if(orientEl) orientEl.addEventListener('click', function(e){
     const b = e.target.closest('button'); if(!b) return;
     document.querySelectorAll('#at-orient button').forEach(function(x){ x.setAttribute('aria-pressed','false'); });
     b.setAttribute('aria-pressed','true');