Retravaille l'exercice FDS : étiquette libre et corrigé déplacé
- Slide 5 (FT) : reformule la question sur le type de produit en « Où se trouve la liste des TP (type de produit) ? » - Slide 7 : l'utilisateur peut désormais cliquer n'importe quelle zone, même incorrecte ; le clic est enregistré et l'exercice avance. - Slide 7 : « Terminer l'exercice » mène directement à la synthèse ; le récapitulatif « l'étiquette annotée » quitte le déroulé des slides. - Déplace ce récapitulatif (étiquette annotée + check-list réglementaire) vers corriger-exercice.html, en corrigé de référence du rendu FDS.
This commit is contained in:
@@ -319,6 +319,57 @@ h1 {
|
||||
vertical-align: top;
|
||||
}
|
||||
.annex th { background: var(--amber-light); font-family: 'Syne', sans-serif; font-size: 12px; }
|
||||
|
||||
/* ======= Corrigé de référence — étiquette annotée (repris du TD FDS) ======= */
|
||||
.recap-intro { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 16px; }
|
||||
.recap-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
|
||||
.recap-stage { flex: 1 1 320px; min-width: 0; max-width: 560px; }
|
||||
.recap-layout .checklist-table { flex: 1 1 320px; min-width: 0; margin: 0; }
|
||||
|
||||
.label-card {
|
||||
position: relative;
|
||||
width: 100%; max-width: 640px;
|
||||
background: #fff; color: #1a1a18;
|
||||
border: 1px solid #d9d2c4; border-radius: 6px;
|
||||
padding: 16px 18px 0; overflow: hidden;
|
||||
font-family: 'DM Sans', sans-serif; font-size: 10.5px; line-height: 1.42;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.10);
|
||||
}
|
||||
.lbl-top { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #1a1a18; padding-bottom: 6px; margin-bottom: 10px; }
|
||||
.lbl-flag { font-size: 20px; }
|
||||
.lbl-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(24px, 5vw, 40px); letter-spacing: -0.01em; margin: 0; }
|
||||
.lbl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.lbl-h { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
|
||||
.lbl-block { margin-bottom: 9px; }
|
||||
.lbl-small { color: #555; font-size: 9.5px; line-height: 1.6; margin-top: 4px; }
|
||||
.lbl-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; margin-top: 4px; padding: 10px 0; }
|
||||
.lbl-net { display: flex; flex-direction: column; gap: 2px; }
|
||||
.lbl-net span { font-size: 10px; }
|
||||
.lbl-net strong { font-family: 'Syne', sans-serif; font-size: 22px; line-height: 1; }
|
||||
.lbl-barcode { height: 42px; align-self: end; min-width: 90px; background: repeating-linear-gradient(90deg, #1a1a18 0 2px, #fff 2px 4px, #1a1a18 4px 5px, #fff 5px 9px); }
|
||||
.lbl-picto-wrap { display: flex; align-items: center; gap: 8px; }
|
||||
.pictos { display: flex; gap: 6px; align-items: center; }
|
||||
.ghs-img { width: 42px; height: 42px; object-fit: contain; display: block; }
|
||||
.lbl-danger { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; color: #1a1a18; letter-spacing: 0.02em; }
|
||||
.lbl-footer { margin: 6px -18px 0; padding: 8px 18px; background: #2b2b28; color: #e8e2d5; text-align: center; font-size: 9px; line-height: 1.5; }
|
||||
|
||||
.hotspot { position: relative; border-radius: 5px; }
|
||||
span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
|
||||
.hotspot.hs-correct { background: rgba(46,125,50,0.14); outline: 1.5px solid #2e7d32; }
|
||||
.hs-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 9px; margin-right: 3px; vertical-align: middle; }
|
||||
|
||||
.checklist-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
|
||||
.checklist-table th { background: var(--teal-light); color: var(--teal); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--teal); }
|
||||
.checklist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
|
||||
.checklist-table tr:last-child td { border-bottom: none; }
|
||||
.checklist-table td.cl-num { text-align: center; }
|
||||
.cl-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 10px; }
|
||||
.checklist-table strong { color: var(--text); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lbl-cols { grid-template-columns: 1fr; }
|
||||
.lbl-title { font-size: 26px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -618,6 +669,109 @@ function fdsExpectedLabel(part, q) {
|
||||
return parts[0] === "absent" ? "Absent de la FDS" : "Rubrique " + parts[0];
|
||||
}
|
||||
|
||||
/* ---- Corrigé de référence : l'étiquette annotée + check-list (repris du TD) ---- */
|
||||
const ETI_ZONES = [
|
||||
{ zone: "z-nom", label: "Nom commercial",
|
||||
reg: "Obligation CLP : le nom commercial doit être identique à celui figurant sur la FDS (Guide FHER, Partie 3 — I.2)." },
|
||||
{ zone: "z-picto", label: "Pictogrammes de danger",
|
||||
reg: "CLP : pictogrammes aux dimensions requises, regroupés avec la mention d'avertissement et les phrases H/P, se détachant nettement du fond (Partie 3 — I.5)." },
|
||||
{ zone: "z-mention", label: "Mention d'avertissement",
|
||||
reg: "CLP : « Danger » ou « Attention », disposée dans l'encart d'étiquetage avec pictogrammes et phrases H/P (Partie 3 — I.5)." },
|
||||
{ zone: "z-h", label: "Mentions de danger (phrases H)",
|
||||
reg: "CLP : les phrases H décrivent la nature du danger ; regroupées dans l'encart d'étiquetage (Partie 3 — I.5)." },
|
||||
{ zone: "z-p-epi", label: "Conseils de prudence — EPI",
|
||||
reg: "CLP : conseils de prudence P (ici P280). Six conseils P au maximum, sauf si la nature et la gravité des dangers l'exigent (CLP Art. 28-3) — Partie 3, I.5." },
|
||||
{ zone: "z-p-secours", label: "Premiers secours (phrases P)",
|
||||
reg: "BPR : indications relatives aux premiers soins (Partie 3 — II.8), traduites par les conseils P 3xx (contact, ingestion, inhalation)." },
|
||||
{ zone: "z-p-elim", label: "Élimination du produit et de l'emballage",
|
||||
reg: "BPR : instructions pour l'élimination en toute sécurité du produit et de son emballage, le cas échéant avec interdiction de le réutiliser (Partie 3 — II.10). Ici P501." },
|
||||
{ zone: "z-net", label: "Contenu net",
|
||||
reg: "Quantité nette de produit contenue dans l'emballage — mention générale du pavé d'information produit." },
|
||||
{ zone: "z-antipoison", label: "Centre antipoison / n° d'urgence",
|
||||
reg: "Coordonnées d'urgence complétant les instructions de premiers soins (Partie 3 — II.8) ; les mélanges dangereux sont déclarés aux centres antipoison (annexe VIII du CLP)." },
|
||||
];
|
||||
|
||||
const ETI_LABEL_CARD = `
|
||||
<div class="label-card recap">
|
||||
<div class="lbl-top">
|
||||
<span class="lbl-flag">🇫🇷</span>
|
||||
<span class="hotspot" data-zone="z-nom"><span class="lbl-title">DÉS'INFECT</span></span>
|
||||
</div>
|
||||
<div class="lbl-cols">
|
||||
<div class="lbl-col">
|
||||
<div class="lbl-block"><div class="lbl-h">Propriétés :</div>Désinfecte et désodorise les sanitaires. Produit strictement destiné à un usage professionnel.</div>
|
||||
<div class="lbl-block"><div class="lbl-h">Mode d'emploi :</div>Concentré à diluer : 5 % pour une activité fongicide, 1 % pour une activité bactéricide. Pulvériser sur les parois, laisser agir 5 à 15 min, rincer à l'eau claire. Type de formulation : concentré soluble (SL). Utilisable en TP2.</div>
|
||||
<div class="lbl-small">UFI : 1234-1234-1234-1234<br>Date de péremption : MM/AAAA<br>N° LOT : 123456</div>
|
||||
</div>
|
||||
<div class="lbl-col">
|
||||
<div class="lbl-block"><div class="lbl-h">Substances actives :</div>Chlorure de didécyldiméthylammonium (N°CAS 7173-51-5) à 75 g/kg ; acide glycolique (CAS 79-14-1) à 35 g/kg.</div>
|
||||
<div class="lbl-block">
|
||||
<div class="lbl-h">Précautions d'emploi :</div>
|
||||
<span>Produit strictement professionnel (FR) — Lire le mode d'emploi ci-joint avant l'emploi. </span>
|
||||
<span class="hotspot" data-zone="z-antipoison">Formule déposée au centre anti-poison de Nancy : 03 83 22 50 50.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-h">H302 Nocif en cas d'ingestion. H314 Provoque de graves brûlures de la peau et des lésions oculaires. H410 Très toxique pour les organismes aquatiques, entraîne des effets néfastes à long terme.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-p-epi">P280 Porter des gants de protection, des vêtements de protection et un équipement de protection du visage.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-p-secours">P301+P330+P331 EN CAS D'INGESTION : rincer la bouche, ne pas faire vomir. P305+P351+P338 EN CAS DE CONTACT AVEC LES YEUX : rincer avec précaution à l'eau pendant plusieurs minutes. P310 Appeler immédiatement un CENTRE ANTIPOISON ou un médecin.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-p-elim">P501 Éliminer le contenu / le récipient dans un point de collecte des déchets spéciaux ou dangereux.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbl-bottom">
|
||||
<span class="hotspot" data-zone="z-net">
|
||||
<span class="lbl-net"><span>Volume net :</span><strong>5 L</strong></span>
|
||||
</span>
|
||||
<div class="lbl-barcode" aria-hidden="true"></div>
|
||||
<div class="lbl-picto-wrap">
|
||||
<span class="hotspot" data-zone="z-picto">
|
||||
<span class="pictos">
|
||||
<img class="ghs-img" src="../data/ghs09-environnement.jpg" alt="Pictogramme SGH09 — danger pour le milieu aquatique">
|
||||
<img class="ghs-img" src="../data/ghs05-corrosif.jpg" alt="Pictogramme SGH05 — corrosif">
|
||||
<img class="ghs-img" src="../data/ghs07-nocif.jpg" alt="Pictogramme SGH07 — nocif / irritant">
|
||||
</span>
|
||||
</span>
|
||||
<span class="hotspot" data-zone="z-mention"><span class="lbl-danger">DANGER</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbl-footer">FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89</div>
|
||||
</div>`;
|
||||
|
||||
// Construit le corrigé de référence : étiquette annotée (zones numérotées) + check-list réglementaire.
|
||||
function buildEtiquetteRecapHtml() {
|
||||
const wrap = document.createElement("div");
|
||||
wrap.innerHTML = ETI_LABEL_CARD;
|
||||
const card = wrap.querySelector(".label-card");
|
||||
card.querySelectorAll(".hotspot").forEach(h => {
|
||||
h.classList.add("hs-correct");
|
||||
const idx = ETI_ZONES.findIndex(z => z.zone === h.dataset.zone);
|
||||
if (idx >= 0) {
|
||||
const num = document.createElement("b");
|
||||
num.className = "hs-num";
|
||||
num.textContent = idx + 1;
|
||||
h.insertBefore(num, h.firstChild);
|
||||
}
|
||||
});
|
||||
|
||||
let rows = '<thead><tr><th style="width:34px;">N°</th><th>Élément d\'étiquetage</th><th>Base réglementaire</th></tr></thead><tbody>';
|
||||
ETI_ZONES.forEach((z, i) => {
|
||||
rows += `<tr>
|
||||
<td class="cl-num"><span class="cl-badge">${i + 1}</span></td>
|
||||
<td><strong>${escapeHtml(z.label)}</strong></td>
|
||||
<td>${escapeHtml(z.reg)}</td>
|
||||
</tr>`;
|
||||
});
|
||||
rows += "</tbody>";
|
||||
|
||||
return `<p class="recap-intro">Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la <strong>check-list officielle d'étiquetage des produits biocides</strong> (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.</p>
|
||||
<div class="recap-layout">
|
||||
<div class="recap-stage">${card.outerHTML}</div>
|
||||
<table class="checklist-table">${rows}</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function parseFds(raw) {
|
||||
let clean = flatten(raw);
|
||||
clean = clean.replace(/FDS, FT (&|&) Étiquettes\s*[—–-]\s*Réponses\s*\([^)]*\)/gi, " ").replace(/\s+/g, " ").trim();
|
||||
@@ -644,7 +798,12 @@ function parseFds(raw) {
|
||||
}),
|
||||
}));
|
||||
|
||||
return { title: "FDS, FT & Étiquettes — Correction du rendu", meta, groups, scored: true };
|
||||
const annexes = [{
|
||||
title: "Récapitulatif — l'étiquette annotée (corrigé de référence)",
|
||||
html: buildEtiquetteRecapHtml(),
|
||||
}];
|
||||
|
||||
return { title: "FDS, FT & Étiquettes — Correction du rendu", meta, groups, scored: true, annexes };
|
||||
}
|
||||
|
||||
/* ======================= EXERCICE 3 — TP NUISIBLES ======================= */
|
||||
|
||||
Reference in New Issue
Block a user