Reliez chaque question à la bonne section : cliquez sur un point à gauche, maintenez, puis glissez jusqu'au point de la section correspondante à droite.
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.
-
-
-
+
+
+
+
@@ -1112,7 +1173,6 @@ function finishEtiquette() {
/* 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');
@@ -1124,23 +1184,17 @@ function openEtiPop(hs, kind, clickedZone) {
document.getElementById('pop-title').textContent = z.label;
document.getElementById('pop-reg').textContent = z.reg;
+ // L'encadré s'affiche dans la colonne latérale, à côté de l'étiquette (plus de superposition).
+ const hint = document.getElementById('eti-side-hint');
+ if (hint) hint.hidden = true;
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;
+ const hint = document.getElementById('eti-side-hint');
+ if (hint) hint.hidden = false;
}
function resetEtiquette() { buildEtiquette(); }
@@ -1189,6 +1243,11 @@ function showEtiRecap() {
document.getElementById('eti-exercise').style.display = 'none';
document.getElementById('eti-recap').style.display = 'flex';
+
+ // Animation : l'étiquette glisse à gauche, le tableau apparaît à sa droite
+ const rl = document.getElementById('recap-layout');
+ if (rl) { rl.classList.remove('animate'); void rl.offsetWidth; rl.classList.add('animate'); }
+
const sa = document.querySelector('#slide-7 .scroll-area');
if (sa) sa.scrollTop = 0;
}
@@ -1336,8 +1395,8 @@ window.addEventListener('resize', () => { if (currentSlide === 5) drawFtLines();
function buildFdsDnd() {
const tile = (v, l) => `
${l}
`;
let left = '', right = '';
- for (let i = 1; i <= 8; i++) left += tile(String(i), 'R' + i);
- for (let i = 9; i <= 16; i++) right += tile(String(i), 'R' + i);
+ for (let i = 1; i <= 8; i++) left += tile(String(i), 'Rubrique ' + i);
+ for (let i = 9; i <= 16; i++) right += tile(String(i), 'Rubrique ' + i);
right += tile('absent', 'Absent');
document.getElementById('fds-bank-left').innerHTML = left;
document.getElementById('fds-bank-right').innerHTML = right;
@@ -1581,6 +1640,28 @@ function exporterPDF() {
setTimeout(() => w.print(), 300);
}
+/* ======================== SLIDE 1 — IDENTIFICATION ======================== */
+function selectFormateur(btn) {
+ document.querySelectorAll('.formateur-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ document.getElementById('idFormateur').value = btn.dataset.formateur;
+}
+function clearGroupeError() {
+ const g = document.getElementById('idGroupe');
+ g.style.borderColor = '';
+ document.getElementById('idGroupe-error').hidden = true;
+}
+function startPart1() {
+ const g = document.getElementById('idGroupe');
+ if (!g.value.trim()) {
+ g.style.borderColor = 'var(--coral-mid)';
+ document.getElementById('idGroupe-error').hidden = false;
+ g.focus();
+ return;
+ }
+ goTo(2);
+}
+
/* ======================== NAVIGATION ======================== */
function goTo(n) {
const cur = document.getElementById('slide-' + currentSlide);