L'étiquette est l'interface directe entre le produit et l'utilisateur. Elle communique rapidement les dangers essentiels, les EPI et les consignes d'utilisation.
🎯
-
Indiquez la zone de l'étiquette où trouver l'information : Identité, Pictogrammes, Mots d'avertissement, Mentions de danger, Conseils de prudence, Contenu net, Numéro d'urgence — ou « Absent ».
+
Sur une étiquette réelle (produit professionnel DÉS'INFECT), cliquez la zone qui répond à chaque question : nom commercial, pictogrammes, mention d'avertissement, phrases H, phrases P (EPI, premiers secours, élimination), contenu net et centre antipoison. Chaque clic ouvre la justification réglementaire de la zone.
-
+
-
Partie 3 / 3 — Étiquette
-
Zones de l'étiquette
-
-
-
-
-
+
+
+
+
Partie 3 / 3 — Étiquette
+
Zones de l'étiquette
+
+
+ 💬
+
Mise en situation — Vous intervenez chez un client avec un désinfectant de surfaces à usage exclusivement professionnel. Avant l'application, il vous interroge sur les dangers et les précautions du produit. Bidon en main, retrouvez rapidement sur l'étiquette chaque information demandée.
+
+
+
+ Question 1 / 9
+ —
+
+
+
+
+
+
+ 🇫🇷
+ DÉS'INFECT
+
+
+
+
+
+
Propriétés :
Désinfecte et désodorise les sanitaires. Produit strictement destiné à un usage professionnel.
+
Mode d'emploi :
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.
+
UFI : 1234-1234-1234-1234 Date de péremption : MM/AAAA N° LOT : 123456
+
+
+
+
+
Substances actives :
Chlorure de didécyldiméthylammonium (N°CAS 7173-51-5) à 75 g/kg ; acide glycolique (CAS 79-14-1) à 35 g/kg.
+
+
Précautions d'emploi :
+ Produit strictement professionnel (FR) — Lire le mode d'emploi ci-joint avant l'emploi.
+ Formule déposée au centre anti-poison de Nancy : 03 83 22 50 50.
+
+ 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.
+
+ P280 Porter des gants de protection, des vêtements de protection et un équipement de protection du visage.
+
+ 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.
+
+ P501 Éliminer le contenu / le récipient dans un point de collecte des déchets spéciaux ou dangereux.
+
+
+
+
+
+
+
+ Volume net :5 L
+
+
+
+
+
+ 🐟
+ 🧪
+ !
+
+
+ DANGER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Check-list d'étiquetage
+
Récapitulatif — l'étiquette annotée
+
Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la check-list officielle d'étiquetage des produits biocides (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.
+
+
+
+
+
+
+
+
+
+
+
@@ -741,19 +969,41 @@ const ftQuestions = [
];
const ftOptions = ["Description", "Propriétés biocides", "Conditionnements", "Utilisations"];
-const etiquetteQuestions = [
- { id: 1, text: "Quel est le nom du produit et le nom de l'entreprise ?", answer: "Identité" },
- { id: 2, text: "Quels pictogrammes de danger sont affichés ?", answer: "Pictogrammes" },
- { id: 3, text: "Quels sont les mots d'avertissement (« Attention » ou « Danger ») ?", answer: "Mots d'avertissement" },
- { id: 4, text: "Quelles sont les mentions de danger (H-statements) identifiées ?", answer: "Mentions de danger" },
- { id: 5, text: "Quels équipements de protection individuelle (EPI) sont recommandés ?", answer: "Conseils de prudence" },
- { id: 6, text: "Quels premiers secours sont indiqués ?", answer: "Conseils de prudence" },
- { id: 7, text: "Comment éliminer l'emballage après utilisation ?", answer: "Conseils de prudence" },
- { id: 8, text: "Quel est le contenu net du produit ?", answer: "Contenu net" },
- { id: 9, text: "Y a-t-il un numéro d'appel d'urgence mentionné ?", answer: "Numéro d'urgence" },
- { id: 10, text: "Quelles consignes de stockage sont affichées ?", answer: "Conseils de prudence" }
+/* 9 zones réglementaires de l'étiquette (ordre canonique = check-list FHER p.15).
+ zone : identifiant du hotspot correspondant dans l'étiquette
+ text : consigne affichée pendant l'exercice
+ label : intitulé check-list (réutilisé dans la synthèse et le PDF)
+ reg : justification réglementaire (info-bulle) — Guide FHER, Partie 3, p.10-12 */
+const etiZones = [
+ { zone: "z-nom", text: "Retrouvez le nom commercial du produit.",
+ 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", text: "Cliquez sur les pictogrammes de danger.",
+ 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", text: "Où figure la mention d'avertissement ?",
+ 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", text: "Repérez les mentions de danger (phrases 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", text: "Où sont indiqués les EPI à porter (phrases P) ?",
+ 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", text: "Où trouver les instructions de premiers 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", text: "Où sont les consignes d'élimination de l'emballage ?",
+ 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", text: "Retrouvez le contenu net du produit.",
+ label: "Contenu net",
+ reg: "Quantité nette de produit contenue dans l'emballage — mention générale du pavé d'information produit." },
+ { zone: "z-antipoison", text: "Où figurent les coordonnées du centre 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 etiquetteOptions = ["Identité", "Pictogrammes", "Mots d'avertissement", "Mentions de danger", "Conseils de prudence", "Contenu net", "Numéro d'urgence"];
+function etiZoneById(id) { return etiZones.find(z => z.zone === id); }
function shuffleArray(array) {
const a = [...array];
@@ -764,17 +1014,6 @@ function shuffleArray(array) {
return a;
}
-function buildRow(qNum, selectId, answerAttr, text, options, badgeStyle) {
- let opts = '';
- options.forEach(o => { opts += ``; });
- return `
-
-
Q${qNum}
-
${text}
-
-
`;
-}
-
function generateQuizzes() {
// FDS — glisser-déposer : banques d'étiquettes + cases de dépôt
buildFdsDnd();
@@ -782,17 +1021,183 @@ function generateQuizzes() {
// FT — exercice « relier » (questions à gauche, sections à droite)
buildFtMatch();
- // Étiquette
- const etiOpts = etiquetteOptions.map(o => ({ value: o, label: o }));
- etiOpts.push({ value: 'absent', label: 'Absent' });
- const etiC = document.getElementById('etiquette-questions');
- etiC.innerHTML = '';
- etiquetteQuestions.forEach((q, i) => {
- etiC.innerHTML += buildRow(i + 1, 'eti' + q.id, q.answer, q.text, etiOpts, 'background:var(--teal-light);color:var(--teal-dark);');
- });
+ // Étiquette — exercice à zones cliquables (hotspots)
+ buildEtiquette();
+}
- // Bloque la vérification tant que toutes les questions ne sont pas répondues
- wireVerifyGate('etiquette-questions', 'eti-verify');
+/* ---- Étiquette : zones cliquables ---- */
+let etiOrder = []; // ordre aléatoire des questions
+let etiPos = 0; // question courante
+let etiAnswers = {}; // { zoneCible : zoneCliquée en 1re tentative } — pour le PDF
+let etiFirstTry = {}; // { zoneCible : true si trouvée sans erreur }
+let etiCurError = false; // une erreur a-t-elle eu lieu sur la question courante
+let etiInit = false; // écouteur de clic posé une seule fois
+
+function buildEtiquette() {
+ etiOrder = shuffleArray(etiZones.map((_, i) => i));
+ etiPos = 0;
+ etiAnswers = {};
+ etiFirstTry = {};
+ etiCurError = false;
+
+ const card = document.getElementById('labelCard');
+ card.querySelectorAll('.hotspot').forEach(h => h.classList.remove('hs-correct', 'hs-wrong'));
+
+ closeEtiPop();
+ const r = document.getElementById('etiquette-result');
+ r.className = 'result-message'; r.innerHTML = '';
+ document.getElementById('eti-recap-btn').disabled = true;
+ document.getElementById('eti-exercise').style.display = 'flex';
+ document.getElementById('eti-recap').style.display = 'none';
+
+ if (!etiInit) {
+ card.addEventListener('click', onEtiClick);
+ etiInit = true;
+ }
+ renderEtiQuestion();
+}
+
+function renderEtiQuestion() {
+ const prog = document.getElementById('eti-progress');
+ const ques = document.getElementById('eti-question');
+ if (etiPos >= etiOrder.length) {
+ prog.textContent = 'Terminé';
+ ques.textContent = '✓ Les 9 zones ont été identifiées.';
+ return;
+ }
+ const z = etiZones[etiOrder[etiPos]];
+ prog.textContent = 'Question ' + (etiPos + 1) + ' / ' + etiZones.length;
+ ques.textContent = z.text;
+}
+
+function onEtiClick(e) {
+ const hs = e.target.closest('.hotspot');
+ if (!hs) return;
+ const clicked = hs.dataset.zone;
+
+ // Exploration libre une fois l'exercice terminé
+ if (etiPos >= etiOrder.length) {
+ openEtiPop(hs, 'info', clicked);
+ return;
+ }
+
+ const target = etiZones[etiOrder[etiPos]];
+ if (clicked === target.zone) {
+ hs.classList.remove('hs-wrong');
+ hs.classList.add('hs-correct');
+ if (etiAnswers[target.zone] === undefined) etiAnswers[target.zone] = clicked;
+ etiFirstTry[target.zone] = !etiCurError;
+ openEtiPop(hs, 'ok', clicked);
+ etiPos++;
+ etiCurError = false;
+ renderEtiQuestion();
+ if (etiPos >= etiOrder.length) finishEtiquette();
+ } else {
+ if (etiAnswers[target.zone] === undefined) etiAnswers[target.zone] = clicked; // 1re réponse (erronée) mémorisée
+ etiCurError = true;
+ etiFirstTry[target.zone] = false;
+ hs.classList.remove('hs-wrong'); void hs.offsetWidth; // relance l'animation
+ hs.classList.add('hs-wrong');
+ setTimeout(() => hs.classList.remove('hs-wrong'), 700);
+ openEtiPop(hs, 'ko', clicked);
+ }
+}
+
+function finishEtiquette() {
+ const correct = etiZones.filter(z => etiFirstTry[z.zone]).length;
+ showScore(document.getElementById('etiquette-result'), correct, etiZones.length);
+ document.getElementById('eti-recap-btn').disabled = false;
+}
+
+/* Info-bulle réglementaire positionnée près de la zone cliquée */
+function openEtiPop(hs, kind, clickedZone) {
+ const pop = document.getElementById('eti-pop');
+ const stage = document.getElementById('eti-stage');
+ const z = etiZoneById(clickedZone);
+
+ const statusEl = document.getElementById('pop-status');
+ pop.className = 'eti-pop ' + kind;
+ if (kind === 'ok') statusEl.innerHTML = '✅ Bonne zone';
+ else if (kind === 'ko') statusEl.innerHTML = '❌ Ce n\'est pas la bonne zone';
+ else statusEl.innerHTML = '🔎 ' + z.label;
+
+ document.getElementById('pop-title').textContent = z.label;
+ document.getElementById('pop-reg').textContent = z.reg;
+
+ pop.hidden = false;
+ // Positionnement relatif à la scène
+ const sr = stage.getBoundingClientRect();
+ const hr = hs.getBoundingClientRect();
+ const popW = pop.offsetWidth, popH = pop.offsetHeight;
+ let left = hr.left - sr.left + hr.width / 2 - popW / 2;
+ left = Math.max(4, Math.min(left, sr.width - popW - 4));
+ let top = hr.bottom - sr.top + 8;
+ if (top + popH > sr.height) top = hr.top - sr.top - popH - 8; // bascule au-dessus si déborde
+ if (top < 0) top = 4;
+ pop.style.left = left + 'px';
+ pop.style.top = top + 'px';
+}
+
+function closeEtiPop() {
+ const pop = document.getElementById('eti-pop');
+ if (pop) pop.hidden = true;
+}
+
+function resetEtiquette() { buildEtiquette(); }
+
+/* ---- Synthèse : étiquette annotée + check-list ---- */
+function showEtiRecap() {
+ closeEtiPop();
+ const stage = document.getElementById('recap-stage');
+ stage.innerHTML = '';
+
+ // Clone de l'étiquette, toutes zones en « correct » + numéros
+ const clone = document.getElementById('labelCard').cloneNode(true);
+ clone.removeAttribute('id');
+ clone.classList.add('recap');
+ clone.querySelectorAll('.hotspot').forEach(h => {
+ h.classList.remove('hs-wrong');
+ h.classList.add('hs-correct');
+ const idx = etiZones.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);
+ }
+ });
+ stage.appendChild(clone);
+
+ // Table check-list
+ const tbl = document.getElementById('checklist-table');
+ let rows = '