diff --git a/.gitignore b/.gitignore index c05a2ea..89797da 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ .DS_Store -# Contient le mot de passe de la base SQL Server — à créer sur le serveur -# à partir de web.config.example (ne jamais versionner) +# Contient le mot de passe de la base SQL Server — à créer/éditer uniquement sur +# le serveur bsite.net à partir de web.config.example (ne jamais versionner) exercices/memory-pictogrammes/api/web.config diff --git a/data/ghs05-corrosif.jpg b/data/ghs05-corrosif.jpg new file mode 100644 index 0000000..a62caab Binary files /dev/null and b/data/ghs05-corrosif.jpg differ diff --git a/data/ghs07-nocif.jpg b/data/ghs07-nocif.jpg new file mode 100644 index 0000000..099549e Binary files /dev/null and b/data/ghs07-nocif.jpg differ diff --git a/data/ghs09-environnement.jpg b/data/ghs09-environnement.jpg new file mode 100644 index 0000000..5f310da Binary files /dev/null and b/data/ghs09-environnement.jpg differ diff --git a/exercices/Exo_BioCID.html b/exercices/Exo_BioCID.html index 508697d..5ab8def 100644 --- a/exercices/Exo_BioCID.html +++ b/exercices/Exo_BioCID.html @@ -1,519 +1,1006 @@ - - - Exercices Pratiques BioCID - Gauthier Chombart & Nathan Chauwin - - - +@media (max-width: 640px) { + .overview-grid { grid-template-columns: 1fr; } +} + - -
- - -
- -
-
+ +
+ + +
+ + +
+ + + + + + + + + + + +
+
+
+
+
Certibiocide — Travaux pratiques
+
Plateforme
BioCID
+

Maîtrisez la plateforme officielle de l'ANSES pour consulter les produits biocides autorisés et déclarés en France.

+ +
+
+ + +
+
+
Avant de commencer
+
Contexte & accès
+

BioCID est la plateforme officielle de l'ANSES pour consulter tous les produits biocides autorisés et déclarés en France. Cet exercice développe votre autonomie dans la consultation des produits.

+
+ 🎯 +
4 exercices vous attendent : recherche par nom, par type, par substance active, puis un cas de synthèse. Durée totale ≈ 30 min.
+
+
+
🌐
+
+
Plateforme BioCID — ANSES
+
Cliquez sur « Rechercher un produit » pour accéder à la base consultable
- -
-
-

🎯 Exercices Pratiques BioCID

-

Maîtriser la plateforme de recherche de produits biocides

-
- -
- -
-

Contexte

-
- BioCID est la plateforme officielle de l'ANSES pour consulter tous les produits biocides autorisés et déclarés en France. Cet exercice vous permettra de vous familiariser avec ses différents modes de recherche et de développer une autonomie dans la consultation des produits. -
-
- - -
-

Accès à la Plateforme

-
- -
-
- - -
-

Exercice 1 : Recherche par Nom de Produit

-
-
-
1
- Trouver un produit spécifique -
-
Durée : 5 minutes
-
    -
  • Recherchez un produit connu (ex. « Goliath », « Phobi », « Soricide »)
    • -
  • Notez le type de produit, la substance active, et le fabricant
    • -
  • Vérifiez la date d'autorisation du produit
    • -
  • Observez les conditions d'utilisation mentionnées
    • -
- - -
-
- - -
-

Exercice 2 : Recherche par Type de Produit

-
-
-
2
- Explorer les catégories disponibles -
-
Durée : 5 minutes
-
    -
  • Utilisez le filtre « Type de produit »
    • -
  • Sélectionnez « Rodenticides (TP14) » ou « Insecticides (TP18) »
    • -
  • Comptez combien de produits sont disponibles dans cette catégorie
    • -
  • Comparez avec une autre catégorie (ex. Désinfectants TP2/TP3/TP4)
    • -
- - -
-
- - -
-

Exercice 3 : Recherche par Substance Active

-
-
-
3
- Trouver tous les produits d'une même substance -
-
Durée : 5 minutes
-
    -
  • Recherchez une substance active (ex. « Brodifacoum », « Perméthrine »)
    • -
  • Listez au minimum 3 produits différents contenant cette substance
    • -
  • Observez si différents fabricants proposent des formulations variées
    • -
  • Comparez les concentrations de la substance active d'un produit à l'autre
    • -
- - -
-
- - -
-

Exercice 4 : Cas de Synthèse

-
-
Mise en situation réelle
-
- Un restaurant vous appelle pour vous demander un produit. En utilisant BioCID, vous devez présenter une recommandation argumentée. -
-
    -
  • Filtrez par type : « Désinfectants (TP2/TP3/TP4) » ou « Produits de lutte contre les nuisibles (TP14/TP18/TP20) »
    • -
  • Identifiez au minimum 3 produits applicables
    • -
  • Pour chacun, relevez : nom, fabricant, substance active, usage spécifique
    • -
  • Proposez un court argumentaire pour chaque produit
    • -
  • Bonus : Recherchez les fiches de sécurité (FDS) associées
    • -
-
-
- - -
-
-

💡 Astuces d'Utilisation & Bonnes Pratiques

-
    -
  • Combinez plusieurs filtres pour affiner votre recherche (type + substance + fabricant)
    • -
  • Consultez toujours les fiches de sécurité (FDS) des produits avant recommandation
    • -
  • Vérifiez les conditions d'utilisation : usage professionnel vs. domestique
    • -
  • BioCID est mis à jour régulièrement avec les nouvelles autorisations et retraits
    • -
  • En cas de doute, contactez l'ANSES ou consultez un expert en biocides
    • -
  • Notez toujours les références exactes pour traçabilité (numéro d'AMM)
    • -
-
-
-
- -
-

Durée totale estimée : 30 minutes

-

Pour toute question sur BioCID : support.biocid@anses.fr

-

© 2026 Gauthier Chombart & Nathan Chauwin
Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants

-

Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants

-
+ Ouvrir ↗ +
+
+
👥 Identification du groupe
+
+ + + +
Formateur de la session
+
+ + +
+ +
+
- + +
+
+
Exercice 2 / 4 — 5 min
+
Recherche par type de produit
+

Explorez les catégories disponibles à l'aide des filtres par TP.

+
    +
  • +
    1Utilisez le filtre « Type de produit » et sélectionnez « Rodenticides (TP14) » ou « Insecticides (TP18) ». Combien de produits sont disponibles ?
    + +
    • +
  • +
    2Comparez avec une autre catégorie (ex. Désinfectants TP2 / TP3 / TP4). Que remarquez-vous ?
    + +
    • +
+
+
+ + +
+
+
Exercice 3 / 4 — 5 min
+
Recherche par substance active
+

Trouvez tous les produits partageant une même substance active.

+
    +
  • +
    1Recherchez une substance active (ex. « Brodifacoum », « Perméthrine ») et listez au minimum 3 produits différents qui la contiennent.
    + +
    • +
  • +
    2Différents fabricants proposent-ils des formulations variées ? Comparez les concentrations d'un produit à l'autre.
    + +
    • +
+
+
+ + +
+
+
Exercice 4 / 4 — Cas de synthèse
+
Mise en situation
+
+ 📞 +
Un restaurant vous appelle au sujet de votre prestation et souhaite choisir le produit entre plusieurs références. En utilisant la plateforme BioCID, présentez une recommandation argumentée.
+
+
    +
  • +
    1Filtrez par type : « Désinfectants (TP2/TP3/TP4) » ou « Lutte contre les nuisibles (TP14/TP18/TP20) ». Identifiez au minimum 3 produits applicables.
    + +
    • +
  • +
    2Pour chacun, relevez : nom, fabricant, substance active, usage spécifique.
    + +
    • +
  • +
    3Proposez un court argumentaire pour chaque produit. Bonus : recherchez les FDS associées.
    + +
    • +
+
+
+ + +
+
+
+
+
🎉
+
Exercice terminé
+
Astuces & bonnes pratiques
+
+
    +
  • Combinez plusieurs filtres pour affiner (type + substance + fabricant).
    • +
  • Consultez toujours les fiches de sécurité (FDS) avant toute recommandation.
    • +
  • Vérifiez les conditions d'utilisation : usage professionnel vs. domestique.
    • +
  • BioCID est mis à jour régulièrement (nouvelles autorisations et retraits).
    • +
  • En cas de doute, contactez l'ANSES ou consultez un expert en biocides.
    • +
  • Notez toujours les références exactes pour la traçabilité (numéro d'AMM).
    • +
+
+ + ✔ Corriger un rendu + +
+
+
+ + diff --git a/exercices/Exo_FDS.html b/exercices/Exo_FDS.html index f4c732c..db12305 100644 --- a/exercices/Exo_FDS.html +++ b/exercices/Exo_FDS.html @@ -1,906 +1,1724 @@ - - - TD FDS, FT et Étiquettes - - - + -
- - -
-
-
+ +
+ + +
+ + +
+ + + + + + + + +
+
+
+
+
Certibiocide — Travaux dirigés
+
FDS, FT
& Étiquettes
+

Maîtrisez les trois documents essentiels des produits biocides : fiche de sécurité, fiche technique et étiquetage réglementaire.

+ +
+
+ + +
+
+
Déroulé du TD
+
Trois documents, trois usages
+

Vous allez apprendre à localiser une information dans chacun des documents de référence d'un produit biocide.

+
+ ⏱️ +
Durée ≈ 30 min. Pour chaque question, sélectionnez la zone du document où trouver l'information, puis vérifiez votre score.
+
+
+
+
📄
+
Partie 1 — FDS
+
Fiche de Données de Sécurité — 16 rubriques
+
+
📋
+
Partie 2 — FT
+
Fiche Technique — mode d'emploi produit
+
+
+
🏷️
+
Partie 3 — Étiquette
+
Interface directe avec l'utilisateur
+
+
+
+
👥 Identification du groupe
+
+ + + +
Formateur de la session
+
+ + +
+
+ +
+
-
-
-

📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES

-

Maîtriser les documents essentiels des produits biocides

+ +
+
+
Partie 1 / 3 — 10 min
+
📄 Fiche de Données de Sécurité
+

La FDS est le document de référence pour connaître les dangers, les EPI, les premiers secours et l'élimination d'un produit biocide. Elle contient 16 rubriques standardisées (règlement REACH).

+
+ 🎯 +
Pour chaque question, indiquez dans quelle rubrique (1 à 16) trouver la réponse — ou « Absent » si l'information n'y figure pas. Les questions sont mélangées à chaque chargement.
+
+
+ + +
+
Où trouver l'information ?
+

Glissez-déposez la bonne rubrique dans chaque case — ou cliquez une étiquette puis une case.

+
+
+
+
+
+
+
+ + +
+
+
Partie 2 / 3 — 10 min
+
📋 Fiche Technique
+

La FT complète la FDS : elle fournit le mode d'emploi, les utilisations, les conditionnements et les compatibilités matières. C'est le document pratique de l'utilisateur.

+
+ 🎯 +
Indiquez la section de la FT où trouver chaque information : Description, Propriétés biocides, Conditionnements, Utilisations — ou « Absent ».
+
+
+ + +
+
+
Sections de la fiche technique
+

Reliez chaque question à la bonne section : cliquez sur un point à gauche, maintenez, puis glissez jusqu'au point de la section correspondante à droite.

+
+ +
+
+
+
+
+
+ + +
+
+
Partie 3 / 3 — 10 min
+
🏷️ Étiquetage
+

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.

+
+ 🎯 +
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. La justification réglementaire de chaque zone est fournie sur la page de correction de l'exercice.
+
+
+ + +
+
+ + +
+
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 + + +
+ + + Pictogramme SGH09 — danger pour le milieu aquatique + Pictogramme SGH05 — corrosif + Pictogramme SGH07 — nocif / irritant + + + DANGER +
+
+ +
FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89
-
- -
- - - -
+
- -
-
-

Partie 1 : Fiche de Données de Sécurité (FDS)

-
- Durée : 10 minutes - La FDS est le document de référence pour connaître les dangers, les EPI, les premiers secours et l'élimination des produits biocides. Elle contient 16 rubriques standards. -
-
- -
-

Questions d'analyse FDS

-

Pour chaque question, sélectionnez la rubrique FDS où trouver la réponse (Rubrique 1 à 16 ou « Absent »).

- -
- -
- - -
-
-
- - -
-
-

Partie 2 : Fiche Technique (FT)

-
- Durée : 10 minutes - La FT complète la FDS en fournissant le mode d'emploi, les utilisations, les conditionnements et les compatibilités matières. C'est le document pratique de l'utilisateur. -
-
- -
-

Questions d'analyse FT

-

Pour chaque question, sélectionnez la section FT où trouver la réponse (Description, Propriétés biocides, Conditionnements, Utilisations ou « Absent »).

- -
-
-
Q1
-
Quel est le nom du produit et qui est le fabricant ?
- -
- -
-
Q2
-
Sur quelles matières ce produit est-il compatible ?
- -
- -
-
Q3
-
Quel est (sont) le(s) type(s) de ce produit ?
- -
- -
-
Q4
-
Quels sont les types de conditionnements disponibles ?
- -
- -
-
Q5
-
Où retrouver les différents modes d'utilisation de ce produit ?
- -
-
- - -
-
-
- - -
-
-

Partie 3 : Étiquetage

-
- Durée : 10 minutes - 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. -
-
- -
-

Questions d'analyse d'étiquette

-

Pour chaque question, sélectionnez 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 »).

- -
-
-
Q1
-
Quel est le nom du produit et le nom de l'entreprise ?
- -
- -
-
Q2
-
Quels pictogrammes de danger sont affichés ?
- -
- -
-
Q3
-
Quels sont les mots d'avertissement (« Attention » ou « Danger ») ?
- -
- -
-
Q4
-
Quelles sont les mentions de danger (H-statements) identifiées ?
- -
- -
-
Q5
-
Quels équipements de protection individuelle (EPI) sont recommandés ?
- -
- -
-
Q6
-
Quels premiers secours sont indiqués ?
- -
- -
-
Q7
-
Comment éliminer l'emballage après utilisation ?
- -
- -
-
Q8
-
Quel est le contenu net du produit ?
- -
- -
-
Q9
-
Y a-t-il un numéro d'appel d'urgence mentionné ?
- -
- -
-
Q10
-
Quelles consignes de stockage sont affichées ?
- -
-
- - -
-
-
- - -
-

Synthèse Comparative

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DocumentUtilité PrincipaleMoment de ConsultationPublic
FDSSécurité, dangers, EPI, premiers secoursAVANT manipulationProfessionnels
FTMode d'emploi, applications, conditionnementsPour l'utilisationUtilisateurs finaux
ÉtiquetteDangers essentiels, interface rapideÀ chaque prise du produitTous les utilisateurs
-
- - -
-
-

💡 Clés de Succès

-
    -
  • FDS = Sécurité et dangers → À consulter AVANT manipulation
    • -
  • FT = Mode d'emploi et applications → À consulter pour l'utilisation
    • -
  • Étiquette = Interface rapide → Lecture obligatoire avant ouverture du produit
    • -
  • Les trois documents sont complémentaires, jamais redondants
    • -
  • Chaque document cible un besoin différent et un public différent
    • -
  • Un professionnel doit maîtriser les trois pour une utilisation sûre et efficace
    • -
-
-
-
- -
-

© 2026 Gauthier Chombart & Nathan Chauwin
Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants

-

Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants

-
+
- +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(); } + +/* ---- FT : exercice « relier » ---- */ +const ftConnections = {}; // { qId: valeur de la section reliée } +let ftDrag = null; // { qid } pendant un glissement +let ftVerified = false; +const SVGNS = 'http://www.w3.org/2000/svg'; +const FT_COLORS = { line: '#D85A30', temp: '#993C1D', ok: '#2e7d32', ko: '#c62828' }; + +function qById(id) { return ftQuestions.find(q => String(q.id) === String(id)); } + +function buildFtMatch() { + Object.keys(ftConnections).forEach(k => delete ftConnections[k]); + ftDrag = null; ftVerified = false; + + const leftC = document.getElementById('ft-left'); + const rightC = document.getElementById('ft-right'); + leftC.innerHTML = ''; + rightC.innerHTML = ''; + + ftQuestions.forEach(q => { + const item = document.createElement('div'); + item.className = 'match-item'; + item.dataset.qid = q.id; + item.innerHTML = `${q.text}
`; + leftC.appendChild(item); + }); + + const sections = shuffleArray([...new Set(ftQuestions.map(q => q.answer))]); + sections.forEach(sec => { + const item = document.createElement('div'); + item.className = 'match-item'; + item.dataset.answer = sec; + item.innerHTML = `
${sec}`; + rightC.appendChild(item); + }); + + initFtMatch(); + document.getElementById('ft-svg').innerHTML = ''; + refreshFtState(); +} + +function resetFT() { + const r = document.getElementById('ft-result'); + r.className = 'result-message'; r.innerHTML = ''; + buildFtMatch(); +} + +function ftSvgRect() { return document.getElementById('ft-svg').getBoundingClientRect(); } +function ftPointerPos(e) { const r = ftSvgRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; } +function ftDotCenter(dot) { + const r = dot.getBoundingClientRect(); const s = ftSvgRect(); + return { x: r.left + r.width / 2 - s.left, y: r.top + r.height / 2 - s.top }; +} + +function ftDrawLine(svg, a, b, color, dashed) { + const line = document.createElementNS(SVGNS, 'line'); + line.setAttribute('x1', a.x); line.setAttribute('y1', a.y); + line.setAttribute('x2', b.x); line.setAttribute('y2', b.y); + line.setAttribute('stroke', color); + line.setAttribute('stroke-width', '3'); + line.setAttribute('stroke-linecap', 'round'); + if (dashed) line.setAttribute('stroke-dasharray', '6 5'); + svg.appendChild(line); +} + +function drawFtLines(tempEnd) { + const svg = document.getElementById('ft-svg'); + if (!svg) return; + svg.innerHTML = ''; + Object.entries(ftConnections).forEach(([qid, ans]) => { + const from = document.querySelector('.match-dot[data-side="left"][data-qid="' + qid + '"]'); + const to = document.querySelector('.match-dot[data-side="right"][data-answer="' + CSS.escape(ans) + '"]'); + if (!from || !to) return; + const color = ftVerified ? (ans === qById(qid).answer ? FT_COLORS.ok : FT_COLORS.ko) : FT_COLORS.line; + ftDrawLine(svg, ftDotCenter(from), ftDotCenter(to), color); + }); + if (ftDrag && tempEnd) { + const from = document.querySelector('.match-dot[data-side="left"][data-qid="' + ftDrag.qid + '"]'); + if (from) ftDrawLine(svg, ftDotCenter(from), tempEnd, FT_COLORS.temp, true); + } +} + +function refreshFtState() { + ftQuestions.forEach(q => { + const dot = document.querySelector('.match-dot[data-side="left"][data-qid="' + q.id + '"]'); + if (!dot) return; + const has = ftConnections[q.id] != null; + dot.classList.toggle('filled', has); + dot.closest('.match-item').classList.toggle('connected', has); + }); + document.querySelectorAll('.match-dot[data-side="right"]').forEach(dot => { + const used = Object.values(ftConnections).includes(dot.dataset.answer); + dot.classList.toggle('filled', used); + dot.closest('.match-item').classList.toggle('connected', used); + }); + const all = ftQuestions.every(q => ftConnections[q.id] != null); + const btn = document.getElementById('ft-next'); + if (btn) btn.disabled = !all; +} + +function initFtMatch() { + const wrap = document.getElementById('ft-match'); + wrap.querySelectorAll('.match-dot[data-side="left"]').forEach(dot => { + dot.addEventListener('pointerdown', e => { + e.preventDefault(); + const qid = dot.dataset.qid; + delete ftConnections[qid]; // repartir d'une question efface son lien + ftVerified = false; + document.getElementById('ft-result').className = 'result-message'; + ftDrag = { qid }; + dot.classList.add('active'); + refreshFtState(); + drawFtLines(ftPointerPos(e)); + }); + }); +} + +// Gestionnaires globaux (le glissement peut sortir de la zone) +document.addEventListener('pointermove', e => { + if (!ftDrag) return; + drawFtLines(ftPointerPos(e)); +}); +document.addEventListener('pointerup', e => { + if (!ftDrag) return; + const target = document.elementFromPoint(e.clientX, e.clientY); + const answerDot = target && target.closest('.match-dot[data-side="right"]'); + if (answerDot) { marquerModifie(); ftConnections[ftDrag.qid] = answerDot.dataset.answer; } + document.querySelectorAll('.match-dot.active').forEach(d => d.classList.remove('active')); + ftDrag = null; + refreshFtState(); + drawFtLines(); +}); +window.addEventListener('resize', () => { if (currentSlide === 5) drawFtLines(); }); + +/* ---- FDS : glisser-déposer ---- */ +function buildFdsDnd() { + const tile = (v, l) => `
${l}
`; + let left = '', right = ''; + 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; + + const fdsC = document.getElementById('fds-questions'); + fdsC.innerHTML = ''; + shuffleArray(fdsQuestions).forEach((q, i) => { + fdsC.innerHTML += ` +
+
Q${i + 1}
+
${q.text}
+
+
`; + }); + + initFdsDnd(); +} + +function resetFDS() { + const r = document.getElementById('fds-result'); + r.className = 'result-message'; r.innerHTML = ''; + buildFdsDnd(); +} + +function initFdsDnd() { + const slide = document.getElementById('slide-3'); + const tiles = slide.querySelectorAll('.dnd-tile'); + const slots = slide.querySelectorAll('.drop-slot'); + let armed = null; + + const resetResults = () => { + slide.querySelectorAll('.answer-label, .answer-icon').forEach(e => e.remove()); + slide.querySelectorAll('.drop-slot').forEach(s => s.classList.remove('slot-correct', 'slot-wrong')); + const r = document.getElementById('fds-result'); + r.className = 'result-message'; r.innerHTML = ''; + }; + const fill = (slot, v, l) => { + marquerModifie(); + slot.dataset.value = v; slot.textContent = l; slot.classList.add('filled'); + resetResults(); updateFdsGate(); + }; + const clear = (slot) => { + slot.dataset.value = ''; slot.textContent = ''; slot.classList.remove('filled'); + resetResults(); updateFdsGate(); + }; + + tiles.forEach(t => { + t.addEventListener('dragstart', e => { + e.dataTransfer.setData('text/plain', JSON.stringify({ v: t.dataset.value, l: t.dataset.label })); + t.classList.add('dragging'); + }); + t.addEventListener('dragend', () => t.classList.remove('dragging')); + t.addEventListener('click', () => { + if (armed === t) { t.classList.remove('armed'); armed = null; return; } + if (armed) armed.classList.remove('armed'); + armed = t; t.classList.add('armed'); + }); + }); + + slots.forEach(s => { + s.addEventListener('dragover', e => { e.preventDefault(); s.classList.add('drag-over'); }); + s.addEventListener('dragleave', () => s.classList.remove('drag-over')); + s.addEventListener('drop', e => { + e.preventDefault(); s.classList.remove('drag-over'); + try { const d = JSON.parse(e.dataTransfer.getData('text/plain')); fill(s, d.v, d.l); } catch (_) {} + }); + s.addEventListener('click', () => { + if (armed) { fill(s, armed.dataset.value, armed.dataset.label); armed.classList.remove('armed'); armed = null; } + else if (s.classList.contains('filled')) { clear(s); } + }); + }); + + updateFdsGate(); +} + +function updateFdsGate() { + const slots = document.querySelectorAll('#slide-3 .drop-slot'); + const all = Array.from(slots).every(s => (s.dataset.value || '') !== ''); + const btn = document.getElementById('fds-next'); + if (btn) btn.disabled = !all; +} + +function wireVerifyGate(containerId, btnId) { + const container = document.getElementById(containerId); + const btn = document.getElementById(btnId); + if (!container || !btn) return; + const selects = Array.from(container.querySelectorAll('select')); + const update = () => { btn.disabled = !selects.every(s => s.value !== ''); }; + selects.forEach(s => s.addEventListener('change', update)); + update(); +} + +/* ======================== VÉRIFICATION ======================== */ +function showScore(resultDiv, correct, total) { + const p = Math.round((correct / total) * 100); + if (p === 100) { + resultDiv.className = 'result-message success show'; + resultDiv.innerHTML = `🎉 Excellent ! ${correct}/${total} bonnes réponses (${p}%)`; + } else if (p >= 80) { + resultDiv.className = 'result-message success show'; + resultDiv.innerHTML = `✓ Très bien ! ${correct}/${total} bonnes réponses (${p}%)`; + } else if (p >= 60) { + resultDiv.className = 'result-message error show'; + resultDiv.innerHTML = `⚠️ À revoir — ${correct}/${total} bonnes réponses (${p}%)`; + } else { + resultDiv.className = 'result-message error show'; + resultDiv.innerHTML = `❌ Insuffisant — ${correct}/${total} bonnes réponses (${p}%)`; + } +} + +function verifyFDS() { + let correct = 0; + fdsQuestions.forEach(q => { + const slot = document.getElementById('fds' + q.id); + const userAnswer = slot.dataset.value || ''; + const expected = q.answer.split(','); + const isCorrect = expected.includes(userAnswer); + const labelText = expected.length > 1 + ? 'Rubriques ' + expected.join(' et ') + : (expected[0] === 'absent' ? 'Absent' : 'Rubrique ' + expected[0]); + if (isCorrect) correct++; + showSlotResult(slot, isCorrect, userAnswer === '', labelText); + }); + showScore(document.getElementById('fds-result'), correct, fdsQuestions.length); +} + +function showSlotResult(slot, isCorrect, isUnanswered, correctAnswerText) { + const row = slot.closest('.answer-row'); + row.querySelector('.answer-label')?.remove(); + row.querySelector('.answer-icon')?.remove(); + slot.classList.remove('slot-correct', 'slot-wrong'); + + const label = document.createElement('div'); + label.className = 'answer-label'; + label.textContent = correctAnswerText; + slot.before(label); + + const icon = document.createElement('div'); + icon.className = 'answer-icon'; + icon.textContent = isUnanswered ? '❓' : (isCorrect ? '✅' : '❌'); + slot.before(icon); + + if (!isUnanswered) slot.classList.add(isCorrect ? 'slot-correct' : 'slot-wrong'); +} + +function verifyFT() { + ftVerified = true; + let correct = 0; + ftQuestions.forEach(q => { + if (ftConnections[q.id] === q.answer) correct++; + }); + drawFtLines(); + showScore(document.getElementById('ft-result'), correct, ftQuestions.length); +} + +/* ======================== EXPORT PDF ======================== */ +function escapeHtml(str) { + if (!str) return ''; + return String(str).replace(/&/g, '&').replace(//g, '>'); +} +function idVal(id) { + const el = document.getElementById(id); + return el ? el.value.trim() : ''; +} + +// Libellé lisible d'une réponse FDS (numéro de rubrique) et de l'attendu +function fdsAnswerLabel(v) { + if (!v) return '(non répondu)'; + if (v === 'absent') return 'Absent'; + return 'Rubrique ' + v; +} +function fdsExpectedLabel(answer) { + const parts = answer.split(','); + if (parts.length > 1) return 'Rubrique ' + parts.join(' ou '); + return parts[0] === 'absent' ? 'Absent' : 'Rubrique ' + parts[0]; +} +function textAnswerLabel(v) { + if (!v) return '(non répondu)'; + return v === 'absent' ? 'Absent' : v; +} + +function isFdsCorrect(q, v) { return v !== '' && q.answer.split(',').includes(v); } +function isTextCorrect(q, v) { return v !== '' && v === q.answer; } + +function exporterPDF() { + const groupe = idVal('idGroupe'); + const date = idVal('idDate') || new Date().toISOString().slice(0, 10); + const formateur = idVal('idFormateur'); + + let scoreTotal = 0, nbTotal = 0; + + function partHtml(prefix, title, questions, selPrefix, answerLabelFn, expectedLabelFn, correctFn, valueFn) { + const rows = questions.map((q, i) => { + let v; + if (valueFn) { v = valueFn(q); } + else { const sel = document.getElementById(selPrefix + q.id); v = sel ? sel.value : ''; } + const ok = correctFn(q, v); + nbTotal++; if (ok) scoreTotal++; + const mark = v === '' ? '❓' : (ok ? '✓' : '✗'); + return `
+
[${prefix}-Q${i + 1}] ${escapeHtml(q.text)}
+
Réponse du groupe : ${escapeHtml(answerLabelFn(v))} — Attendu : ${escapeHtml(expectedLabelFn(q.answer))} — ${mark}
+
`; + }).join(''); + return `

${title}

${rows}`; + } + + const p1 = partHtml('P1', 'Partie 1 — FDS (Fiche de Données de Sécurité)', fdsQuestions, 'fds', fdsAnswerLabel, fdsExpectedLabel, isFdsCorrect); + const p2 = partHtml('P2', 'Partie 2 — FT (Fiche Technique)', ftQuestions, 'ft', textAnswerLabel, a => a, isTextCorrect, q => ftConnections[q.id] || ''); + + // Partie 3 — Étiquette (zones cliquables) : ordre check-list + const p3rows = etiZones.map((z, i) => { + const given = etiAnswers[z.zone]; + const ok = given === z.zone; + nbTotal++; if (ok) scoreTotal++; + const givenLabel = given === undefined ? '(non répondu)' : (etiZoneById(given) ? etiZoneById(given).label : given); + const mark = given === undefined ? '❓' : (ok ? '✓' : '✗'); + return `
+
[P3-Q${i + 1}] ${escapeHtml(z.text)}
+
Zone désignée : ${escapeHtml(givenLabel)} — Attendu : ${escapeHtml(z.label)} — ${mark}
+
`; + }).join(''); + const p3 = `

Partie 3 — Étiquette (zones réglementaires)

${p3rows}`; + + const w = window.open('', '_blank'); + w.document.write(` + FDS, FT & Étiquettes — Réponses (${escapeHtml(groupe) || 'sans nom'}) + + +

TD — FDS, FT & Étiquettes

+

Groupe / Stagiaire : ${escapeHtml(groupe) || '—'}

+

Date de session : ${escapeHtml(date)}

+

Formateur : ${escapeHtml(formateur) || '—'}

+

Score global : ${scoreTotal} / ${nbTotal}

+ ${p1}${p2}${p3} + `); + w.document.close(); + 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); + const next = document.getElementById('slide-' + n); + if (!next) return; + history.push(currentSlide); + cur.classList.remove('active', 'fade-in'); + cur.style.display = 'none'; + currentSlide = n; + next.style.display = 'flex'; + setTimeout(() => next.classList.add('active', 'fade-in'), 10); + const sa = next.querySelector('.scroll-area'); + if (sa) sa.scrollTop = 0; + updateUI(); + if (n === 8) setTimeout(launchConfetti, 200); +} + +function goBack() { + if (history.length === 0) return; + const prev = history.pop(); + const cur = document.getElementById('slide-' + currentSlide); + const target = document.getElementById('slide-' + prev); + cur.classList.remove('active', 'fade-in'); + cur.style.display = 'none'; + currentSlide = prev; + target.style.display = 'flex'; + setTimeout(() => target.classList.add('active', 'fade-in'), 10); + updateUI(); +} + +/* Boutons centralisés dans la bottom bar, un jeu par slide */ +function barBtn(bar, html, cls, fn, opts) { + opts = opts || {}; + const b = document.createElement('button'); + b.className = 'footer-btn ' + cls; + b.innerHTML = html; + if (opts.id) b.id = opts.id; + if (opts.disabled) b.disabled = true; + b.addEventListener('click', fn); + bar.appendChild(b); + return b; +} + +function renderBarActions() { + const bar = document.getElementById('barActions'); + if (!bar) return; + bar.innerHTML = ''; + // Bouton retour intégré au groupe centré + if (history.length > 0) { + barBtn(bar, '← Retour', 'is-secondary', goBack); + } + switch (currentSlide) { + case 1: + barBtn(bar, 'Commencer la partie 1 →', 'is-primary', startPart1); + break; + case 2: + barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(3)); + break; + case 3: + barBtn(bar, '↺ Recommencer', 'is-secondary', resetFDS); + barBtn(bar, 'Passer à la partie 2 →', 'is-primary', () => goTo(4), { id: 'fds-next' }); + updateFdsGate(); + break; + case 4: + barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(5)); + break; + case 5: + barBtn(bar, '↺ Recommencer', 'is-secondary', resetFT); + barBtn(bar, 'Passer à la partie 3 →', 'is-primary', () => goTo(6), { id: 'ft-next' }); + refreshFtState(); + break; + case 6: + barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(7)); + break; + case 7: + barBtn(bar, '↺ Recommencer', 'is-secondary', resetEtiquette); + barBtn(bar, 'Terminer l\'exercice →', 'is-primary', () => goTo(8), + { id: 'eti-recap-btn', disabled: etiPos < etiOrder.length }); + break; + case 8: + // Boutons placés sous le tableau comparatif, dans la slide (pas dans la bottom bar) + break; + } +} + +function updateUI() { + document.getElementById('progressFill').style.width = + currentSlide === 0 ? '0%' : ((currentSlide / totalSlides) * 100) + '%'; + document.getElementById('slideCounter').textContent = + currentSlide === 0 ? '' : currentSlide + ' / ' + totalSlides; + document.getElementById('bottomBar').style.display = currentSlide === 0 ? 'none' : 'flex'; + renderBarActions(); +} + +function restartAll() { + history = []; + document.querySelectorAll('.slide').forEach(s => { s.classList.remove('active', 'fade-in'); s.style.display = 'none'; }); + document.querySelectorAll('.result-message').forEach(r => { r.className = 'result-message'; }); + generateQuizzes(); + currentSlide = 0; + const first = document.getElementById('slide-0'); + first.style.display = 'flex'; + setTimeout(() => first.classList.add('active', 'fade-in'), 10); + updateUI(); +} + +/* ======================== CONFETTIS ======================== */ +function launchConfetti() { + const canvas = document.getElementById('confettiCanvas'); + if (!canvas) return; + const ctx = canvas.getContext('2d'); + canvas.width = window.innerWidth; + canvas.height = window.innerHeight; + canvas.style.display = 'block'; + + const colors = ['#BA7517', '#D85A30', '#F5DFB8', '#633806', '#F0A855', '#E8C068', '#FF8C5A']; + const particles = Array.from({ length: 180 }, () => ({ + x: Math.random() * canvas.width, + y: -(Math.random() * canvas.height * 0.5), + w: Math.random() * 10 + 5, + h: Math.random() * 5 + 3, + color: colors[Math.floor(Math.random() * colors.length)], + rotation: Math.random() * Math.PI * 2, + rotSpeed: (Math.random() - 0.5) * 0.18, + vx: (Math.random() - 0.5) * 2.5, + vy: Math.random() * 3 + 2, + opacity: 1, + shape: Math.random() < 0.4 ? 'circle' : 'rect' + })); + + let rafId; + let start = null; + const totalDuration = 3800; + + function draw(ts) { + if (!start) start = ts; + const elapsed = ts - start; + + ctx.clearRect(0, 0, canvas.width, canvas.height); + let active = false; + + particles.forEach(p => { + p.x += p.vx; + p.y += p.vy; + p.vy += 0.04; + p.rotation += p.rotSpeed; + p.opacity = elapsed < totalDuration * 0.55 + ? 1 + : Math.max(0, 1 - (elapsed - totalDuration * 0.55) / (totalDuration * 0.45)); + + if (p.y < canvas.height + 20) active = true; + + ctx.save(); + ctx.translate(p.x, p.y); + ctx.rotate(p.rotation); + ctx.globalAlpha = p.opacity; + ctx.fillStyle = p.color; + if (p.shape === 'circle') { + ctx.beginPath(); + ctx.arc(0, 0, p.w / 2, 0, Math.PI * 2); + ctx.fill(); + } else { + ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h); + } + ctx.restore(); + }); + + if (active && elapsed < totalDuration * 1.3) { + rafId = requestAnimationFrame(draw); + } else { + canvas.style.display = 'none'; + ctx.clearRect(0, 0, canvas.width, canvas.height); + } + } + + if (rafId) cancelAnimationFrame(rafId); + rafId = requestAnimationFrame(draw); +} + +/* ======================== PROTECTION CONTRE LA PERTE DES RÉPONSES ======================== */ +/* Les réponses ne sont pas enregistrées : on avertit avant tout rechargement ou départ. + Le texte de la boîte est imposé par le navigateur, il n'est pas personnalisable. */ +let reponsesModifiees = false; +function marquerModifie() { reponsesModifiees = true; } + +// Les champs texte déclenchent input/change ; les parties FDS (glisser-déposer), +// FT (liaisons) et Étiquette (zones cliquables) appellent marquerModifie() directement. +document.addEventListener('input', marquerModifie, true); +document.addEventListener('change', marquerModifie, true); + +window.addEventListener('beforeunload', e => { + if (!reponsesModifiees) return; + e.preventDefault(); + e.returnValue = ''; +}); + +document.addEventListener('DOMContentLoaded', () => { + generateQuizzes(); + updateUI(); +}); + diff --git a/exercices/TP_Nuisibles.html b/exercices/TP_Nuisibles.html index 52ae58d..4e0c88e 100644 --- a/exercices/TP_Nuisibles.html +++ b/exercices/TP_Nuisibles.html @@ -17,7 +17,7 @@ justify-content: center; padding: 2rem; padding-top: calc(70px + 2rem); - padding-bottom: calc(52px + 2rem); + padding-bottom: calc(84px + 2rem); opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; @@ -38,73 +38,67 @@ transition: width 0.4s ease; } -/* PHASE INDICATOR */ -.phase-badge { - position: fixed; - top: 80px; right: 16px; - font-family: 'Syne', sans-serif; - font-size: 11px; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - padding: 4px 12px; - border-radius: 20px; - z-index: 100; -} - /* BOTTOM BAR */ .bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; - height: 52px; + height: 84px; background: rgba(250, 238, 218, 0.98); border-top: 2px solid var(--amber); display: flex; align-items: center; - justify-content: space-between; + justify-content: center; padding: 0 20px; z-index: 100; backdrop-filter: blur(10px); } - -/* SLIDE NAV */ +.bottom-actions { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; + justify-content: center; +} +.footer-btn { + font-family: 'Syne', sans-serif; + font-size: 13px; + font-weight: 600; + padding: 11px 24px; + border-radius: 40px; + border: 1.5px solid var(--amber); + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 6px; + line-height: 1; + transition: all 0.2s; +} +.footer-btn:hover { transform: translateY(-1px); } +.footer-btn:active { transform: scale(0.98); } +.footer-btn.is-primary { background: var(--amber); color: #fff; } +.footer-btn.is-primary:hover { background: var(--amber-dark); } +.footer-btn.is-secondary { background: transparent; color: var(--amber-dark); } +.footer-btn.is-secondary:hover { background: rgba(186,117,23,0.08); } .slide-counter { + position: absolute; + left: 20px; font-size: 12px; font-family: 'Syne', sans-serif; font-weight: 600; color: var(--amber-dark); } - -/* BACK BUTTON */ -.back-btn { - background: none; - border: 0.5px solid var(--amber); - border-radius: 20px; - padding: 6px 16px; - font-size: 12px; - color: var(--amber-dark); - cursor: pointer; - transition: all 0.2s; - font-family: 'DM Sans', sans-serif; +@media (max-width: 560px) { + .slide-counter { display: none; } } -.back-btn:hover { background: rgba(186,117,23,0.08); } /* FORMATEUR SELECTOR */ .formateur-btn { - font-family: 'Syne', sans-serif; - font-size: 14px; - font-weight: 600; - padding: 10px 24px; - border-radius: 30px; - border: 1.5px solid var(--border); - background: white; - color: var(--text-muted); - cursor: pointer; - transition: all 0.2s; - flex: 1; + flex: 1; font-family: 'DM Sans', sans-serif; font-size: 13.5px; + padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; + background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.2s ease; } -.formateur-btn:hover { border-color: var(--amber); color: var(--amber); } -.formateur-btn.selected { background: var(--amber-light); border-color: var(--amber); color: var(--amber-dark); font-weight: 700; } +.formateur-btn:hover { border-color: var(--amber); } +.formateur-btn.selected { background: var(--amber); border-color: var(--amber); color: #fff; } /* CARDS & BUTTONS */ .btn { @@ -246,40 +240,42 @@ .q-item { flex-direction: column; align-items: stretch; } .q-item .q-head { display: flex; align-items: flex-start; gap: 12px; } -/* IDENTIFICATION SCREEN */ -.id-form { +/* IDENTIFICATION SCREEN — carte modèle BioCID / FDS */ +.identity-card { + background: white; + border: 0.5px solid var(--border); + border-radius: 14px; + padding: 16px 18px; + max-width: 460px; width: 100%; - max-width: 420px; - display: flex; - flex-direction: column; - gap: 14px; - margin: 1.25rem 0; + margin: 1.25rem auto; + text-align: left; } -.id-field label { - display: block; +.identity-card .identity-title { font-family: 'Syne', sans-serif; - font-size: 11px; + font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; - color: var(--text-muted); - margin-bottom: 6px; - text-align: left; + color: var(--amber-dark); + margin-bottom: 10px; + display: flex; align-items: center; gap: 6px; } -.id-field input { - width: 100%; +.identity-fields { display: flex; flex-direction: column; gap: 8px; } +.identity-fields input { font-family: 'DM Sans', sans-serif; - font-size: 15px; - padding: 12px 16px; - border: 1.5px solid var(--border); - border-radius: 10px; - background: white; + font-size: 13.5px; color: var(--text); + background: var(--bg); + border: 1px solid var(--border); + border-radius: 10px; + padding: 9px 13px; + width: 100%; + box-sizing: border-box; } -.id-field input:focus { - outline: none; - border-color: var(--amber); -} +.identity-fields input:focus { outline: none; border-color: var(--amber); background: white; } +.formateur-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 2px; } +.formateur-row { display: flex; gap: 8px; } /* TABLE FORM CONTROLS */ .risk-table input, .risk-table textarea { @@ -496,6 +492,19 @@ line-height: 1.6; margin-bottom: 1.5rem; } +.info-card { + background: var(--amber-light); + border-radius: 12px; + padding: 16px 20px; + max-width: 620px; + width: 100%; + font-size: 14px; + color: var(--amber-dark); + line-height: 1.6; + display: flex; + gap: 10px; + align-items: flex-start; +} .steps-row { display: flex; gap: 8px; @@ -574,7 +583,7 @@ gap: 12px; max-width: 640px; width: 100%; - margin: 1.5rem 0; + margin: 1.5rem auto; } .final-card { background: white; @@ -606,7 +615,7 @@ /* SCROLLABLE AREA */ .scroll-area { overflow-y: auto; - max-height: calc(100vh - 232px); + max-height: calc(100vh - 200px); width: 100%; display: flex; flex-direction: column; @@ -647,13 +656,14 @@
- - - @@ -666,48 +676,40 @@
- +
-
-
-
Avant de commencer
-
Identification du groupe
-

Ces informations permettront au formateur de retrouver vos réponses.

-
-
- - -
-
- - -
-
- -
- - -
-
-
- -
- - Corriger -
+
+
+
+
Certibiocide — Travaux pratiques
+
Étude de cas
Nuisibles
+

Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.

+
- +
-
-
-
-
Formation
-
CERTIBIOCIDE
-
TRAVAUX PRATIQUES
-

Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.

- +
+
Avant de commencer
+
Contexte & accès
+

3 travaux pratiques vous attendent : protocole d'intervention, recherche produit sur BioCID, puis analyse de risques. Ces informations permettront au formateur de retrouver vos réponses.

+
+ 🎯 +
Vous allez définir un protocole d'intervention, trouver votre produit sur BioCID, puis réaliser l'analyse de risques.
+
+
+
👥 Identification du groupe
+
+ + +
Formateur de la session
+
+ + +
+
+
@@ -715,8 +717,12 @@
Étape 1 / 3
-
Choisissez votre mission
+
🎯 Choisissez votre mission

Chaque groupe choisit un cas pratique. Vous travaillerez avec ce scénario tout au long des 3 exercices.

+
+ 💡 +
Le cas retenu conditionne tous les exercices suivants et apparaît dans le PDF final. Choisissez celui qui se rapproche le plus de votre pratique.
+
🛏️
@@ -744,9 +750,6 @@
Camping
-
- -
@@ -774,7 +777,6 @@ 💡
À tout moment, cliquez sur « Besoin d'aide ? » pour accéder à un indice. Le formateur corrigera à l'oral en fin de séance.
-
@@ -792,7 +794,6 @@
2. Intervention
3. Évaluation
-
@@ -833,10 +834,6 @@ -
- - -
@@ -871,10 +868,6 @@ -
- - -
@@ -905,10 +898,6 @@
✅ TP 1 terminé ! Préparez-vous à identifier le produit adapté à votre cas sur biocid-anses.fr.
-
- - -
@@ -930,7 +919,6 @@ Ouvrir le site ↗ - @@ -971,10 +959,6 @@ -
- - -
@@ -1019,10 +1003,6 @@
✅ TP 2 terminé ! Passez maintenant à l'analyse de risques complète.
-
- - -
@@ -1039,9 +1019,6 @@
Communication
EPI (dernier recours)
-
- -
@@ -1110,10 +1087,6 @@
✅ TP 3 terminé ! Présentez vos réponses au formateur pour la correction.
-
- - -
@@ -1143,15 +1116,10 @@
Analyse de risques
-
-
- - Corriger -
-
-
- biocid-anses.fr ↗ - +
+ + ✔ Corriger un rendu +
@@ -1164,6 +1132,22 @@ const totalSlides = 13; const selectedCase = { key: '', icon: '', title: '', desc: '' }; const stagiaire = { nom: '', date: '', formateur: '' }; +// Configuration des boutons du footer par slide (modèle BioCID) +const slideConfig = { + 1: { next: 2, nextLabel: 'Continuer →' }, + 2: { next: 3, nextLabel: 'Confirmer le choix →' }, + 3: { next: 4, nextLabel: 'Commencer le TP 1 →' }, + 4: { next: 5, nextLabel: 'Commencer →' }, + 5: { next: 6, nextLabel: 'Étape suivante →', hint: 'prevention' }, + 6: { next: 7, nextLabel: 'Étape suivante →', hint: 'intervention' }, + 7: { next: 8, nextLabel: 'Passer au TP 2 →', hint: 'evaluation' }, + 8: { next: 9, nextLabel: 'Commencer →' }, + 9: { next: 10, nextLabel: 'Partie suivante →', hint: 'fds' }, + 10: { next: 11, nextLabel: 'Passer au TP 3 →', hint: 'epi' }, + 11: { next: 12, nextLabel: 'Remplir le tableau →' }, + 12: { next: 13, nextLabel: 'Terminer la mission →', hint: 'analyse' } +}; + const hints = { prevention: { icon: '💡', @@ -1250,11 +1234,28 @@ function goTo(n) { currentSlide = n; next.style.display = 'flex'; setTimeout(() => { next.classList.add('active', 'fade-in'); }, 10); + const sa = next.querySelector('.scroll-area'); + if (sa) sa.scrollTop = 0; if (n === 13) setTimeout(launchConfetti, 200); updateUI(); updateCaseBanners(); } +function goNext() { + const cfg = slideConfig[currentSlide]; + if (!cfg || cfg.next == null) return; + // Slide 1 : validation du nom du groupe avant de continuer + if (currentSlide === 1) { confirmIdentite(); return; } + // Slide 2 : un cas doit être sélectionné + if (currentSlide === 2 && !selectedCase.key) return; + goTo(cfg.next); +} + +function showHintCurrent() { + const cfg = slideConfig[currentSlide]; + if (cfg && cfg.hint) showHint(cfg.hint); +} + function goBack() { if (history.length === 0) return; const prev = history.pop(); @@ -1279,37 +1280,31 @@ function updateUI() { if (bottomBar) bottomBar.style.display = currentSlide === 0 ? 'none' : 'flex'; const backBtn = document.getElementById('backBtn'); - backBtn.style.display = history.length > 0 ? 'block' : 'none'; + backBtn.style.display = history.length > 0 ? 'inline-flex' : 'none'; - const badge = document.getElementById('phaseBadge'); - if (currentSlide === 0 || currentSlide === 1 || currentSlide === 2 || currentSlide === 3 || currentSlide === 13) { - badge.style.display = 'none'; - } else if (currentSlide >= 4 && currentSlide <= 7) { - badge.style.display = 'block'; - badge.style.background = 'var(--amber-light)'; - badge.style.color = 'var(--amber-dark)'; - badge.textContent = 'TP 1 — Protocole'; - } else if (currentSlide >= 8 && currentSlide <= 10) { - badge.style.display = 'block'; - badge.style.background = 'var(--coral-light)'; - badge.style.color = 'var(--coral)'; - badge.textContent = 'TP 2 — Produit'; - } else if (currentSlide >= 11 && currentSlide <= 12) { - badge.style.display = 'block'; - badge.style.background = 'var(--amber-light)'; - badge.style.color = 'var(--amber-dark)'; - badge.textContent = 'TP 3 — Risques'; + const cfg = slideConfig[currentSlide] || {}; + const hintBtn = document.getElementById('footerHintBtn'); + const nextBtn = document.getElementById('footerNextBtn'); + hintBtn.style.display = cfg.hint ? 'inline-flex' : 'none'; + if (cfg.next != null) { + // Slide 2 : le bouton n'apparaît qu'une fois le cas choisi + const gated = currentSlide === 2 && !selectedCase.key; + nextBtn.style.display = gated ? 'none' : 'inline-flex'; + nextBtn.textContent = cfg.nextLabel; + } else { + nextBtn.style.display = 'none'; } } function selectCase(key, icon, title, desc) { + marquerModifie(); selectedCase.key = key; selectedCase.icon = icon; selectedCase.title = title; selectedCase.desc = desc; document.querySelectorAll('.case-card').forEach(c => c.classList.remove('selected')); event.currentTarget.classList.add('selected'); - document.getElementById('btnConfirmCase').style.display = 'inline-flex'; + updateUI(); } function updateCaseBanners() { @@ -1379,7 +1374,7 @@ function confirmIdentite() { document.getElementById('idError').style.display = 'none'; stagiaire.nom = nom; stagiaire.date = date || new Date().toISOString().slice(0, 10); - goTo(1); + goTo(2); } /* ======================== TABLEAU TP3 — LIGNES DYNAMIQUES ======================== */ @@ -1606,6 +1601,156 @@ function escapeHtml(str) { return str.replace(/&/g, '&').replace(//g, '>'); } +/* ======================== SAUVEGARDE AUTOMATIQUE ======================== */ +/* Les réponses sont enregistrées dans le navigateur au fil de la saisie, puis + proposées à la restauration au rechargement. En file://, localStorage peut être + indisponible (Safari) : dans ce cas la page fonctionne normalement, sans filet. */ +const CLE_SAUVEGARDE = 'certibiocide:tp-nuisibles:v1'; + +let reponsesModifiees = false; +function marquerModifie() { reponsesModifiees = true; sauvegarder(); } + +document.addEventListener('input', marquerModifie, true); +document.addEventListener('change', marquerModifie, true); + +// Avertit avant tout rechargement ou départ. Le texte de la boîte est imposé +// par le navigateur, il n'est pas personnalisable. +window.addEventListener('beforeunload', e => { + if (!reponsesModifiees) return; + e.preventDefault(); + e.returnValue = ''; +}); + +function etatCourant() { + const champs = {}; + document.querySelectorAll('input[id], textarea[id]').forEach(el => { + if (el.value) champs[el.id] = el.value; + }); + // Les cellules du tableau TP3 n'ont pas d'id : on les repère par leur position. + const risques = Array.from(document.querySelectorAll('#riskTableBody .risk-row')) + .map(row => Array.from(row.querySelectorAll('.risk-cell')).map(c => c.value)); + + return { + savedAt: new Date().toISOString(), + slide: currentSlide, + champs, + risques, + cas: selectedCase.key || '', + formateur: stagiaire.formateur || '', + nom: stagiaire.nom || '', + date: stagiaire.date || '', + }; +} + +let minuteurSauvegarde = null; +function sauvegarder() { + clearTimeout(minuteurSauvegarde); + minuteurSauvegarde = setTimeout(() => { + try { + localStorage.setItem(CLE_SAUVEGARDE, JSON.stringify(etatCourant())); + } catch (e) { /* navigation privée ou quota : on continue sans sauvegarde */ } + }, 400); +} + +function lireSauvegarde() { + try { return JSON.parse(localStorage.getItem(CLE_SAUVEGARDE)); } + catch (e) { return null; } +} +function effacerSauvegarde() { + try { localStorage.removeItem(CLE_SAUVEGARDE); } catch (e) {} +} + +function appliquerSauvegarde(data) { + Object.entries(data.champs || {}).forEach(([id, v]) => { + const el = document.getElementById(id); + if (el) el.value = v; + }); + + // Recrée autant de lignes de risques que nécessaire avant de les remplir + const risques = data.risques || []; + const tbody = document.getElementById('riskTableBody'); + while (tbody.querySelectorAll('.risk-row').length < risques.length) addRiskRow(); + tbody.querySelectorAll('.risk-row').forEach((row, i) => { + const valeurs = risques[i] || []; + row.querySelectorAll('.risk-cell').forEach((cell, j) => { cell.value = valeurs[j] || ''; }); + }); + + // Le cas pratique et le formateur passent par leurs boutons, qui remettent + // aussi l'interface (carte sélectionnée, bouton de confirmation) dans le bon état. + if (data.cas) { + const carte = Array.from(document.querySelectorAll('.case-card')) + .find(c => (c.getAttribute('onclick') || '').includes("'" + data.cas + "'")); + if (carte) carte.click(); + } + if (data.formateur) { + const btn = document.getElementById('btn' + data.formateur); + if (btn) btn.click(); + } + stagiaire.nom = data.nom || stagiaire.nom; + stagiaire.date = data.date || stagiaire.date; + + reponsesModifiees = true; + if (typeof data.slide === 'number' && data.slide > 0) goTo(data.slide); + updateUI(); +} + +/* Bandeau de restauration : on ne restaure jamais sans demander, pour qu'un + nouveau groupe n'hérite pas des réponses du précédent sur un poste partagé. */ +function injecterStylesBandeau() { + const style = document.createElement('style'); + style.textContent = ` + .restore-bar { + position: fixed; top: 84px; left: 50%; transform: translateX(-50%); + z-index: 900; max-width: min(680px, calc(100vw - 32px)); + display: flex; align-items: center; gap: 16px; flex-wrap: wrap; + background: var(--white); border: 1.5px solid var(--amber); + border-radius: 14px; padding: 14px 18px; + box-shadow: 0 8px 28px rgba(0,0,0,0.12); font-size: 13.5px; + } + .restore-bar .restore-text { flex: 1; min-width: 220px; line-height: 1.5; } + .restore-bar .restore-actions { display: flex; gap: 8px; flex-shrink: 0; } + .restore-bar button { + font-family: 'Syne', sans-serif; font-weight: 700; font-size: 12.5px; + padding: 8px 16px; border-radius: 20px; cursor: pointer; + border: 1px solid var(--border); background: transparent; color: var(--text-muted); + } + .restore-bar button:hover { border-color: var(--amber); color: var(--amber); } + .restore-bar button.primary { + background: var(--amber); border-color: var(--amber); color: #fff; + } + .restore-bar button.primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); color: #fff; } + `; + document.head.appendChild(style); +} + +function proposerRestauration() { + const data = lireSauvegarde(); + if (!data) return; + const aDesReponses = (data.champs && Object.keys(data.champs).length > 0) + || (data.risques || []).some(r => r.some(v => v)); + if (!aDesReponses) return; + + const quand = new Date(data.savedAt); + const libelle = isNaN(quand.getTime()) ? '' : + ` du ${quand.toLocaleDateString('fr-FR')} à ${quand.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`; + + injecterStylesBandeau(); + const bar = document.createElement('div'); + bar.className = 'restore-bar'; + bar.innerHTML = ` + 💾 Des réponses enregistrées${libelle} ont été retrouvées sur ce poste. + + + + `; + document.body.appendChild(bar); + + document.getElementById('btnRestaurer').onclick = () => { appliquerSauvegarde(data); bar.remove(); }; + document.getElementById('btnRepartir').onclick = () => { effacerSauvegarde(); bar.remove(); }; +} + +proposerRestauration(); + updateUI(); diff --git a/exercices/correction-tp-nuisibles.html b/exercices/correction-tp-nuisibles.html deleted file mode 100644 index 8355993..0000000 --- a/exercices/correction-tp-nuisibles.html +++ /dev/null @@ -1,650 +0,0 @@ - - - - - -Correction TP Nuisibles — Certibiocide - - - - - -
- - -
- -
- -
Certibiocide — Correction de TP
-

TP Nuisibles — Lecture du rendu

- -
-
📄
-

Déposez le PDF du stagiaire ici

-

ou cliquez pour sélectionner le fichier exporté depuis le TP

- -
-
- -
-
- - -
- -
- -
-
- questions répondues -
- -
-
- -
- -
-
-
- -

Analyse de risques

-
- -

-
-
- - - - - - - diff --git a/exercices/corriger-exercice.html b/exercices/corriger-exercice.html new file mode 100644 index 0000000..8877969 --- /dev/null +++ b/exercices/corriger-exercice.html @@ -0,0 +1,1204 @@ + + + + + +Corriger un exercice — Certibiocide + + + + + +
+ + +
+ +
+
+
Certibiocide — Correction des rendus
+

Corriger un exercice

+

Sélectionnez l'exercice concerné, puis déposez le fichier PDF exporté par le groupe. Les réponses s'affichent directement ici, exercice par exercice.

+ +

1 Choisissez l'exercice à corriger

+
+
+ + +
+
+ + +
+
+ + +
+
+ +

2 Déposez le rendu PDF

+
+
📄
+

Déposez le PDF du groupe ici

+

ou cliquez pour sélectionner le fichier exporté depuis l'exercice

+ +
Sélectionnez d'abord un exercice ci-dessus.
+
+
+ +
+ +
Certibiocide — Correction d'exercice
+

+ +
+ + +
+ +
+
+ +
+ +
+
+ +
+ +
+
+
+ +
+
+
+ + + + + + + diff --git a/index.html b/index.html index 03b8511..c9aa315 100644 --- a/index.html +++ b/index.html @@ -103,7 +103,7 @@
📋
-

FDS & Étiquettes

+

FDS, FT & Étiquettes

Aller plus loin

@@ -137,6 +137,19 @@ Jouer
+ + +
+
+
✅
+

Corriger un exercice

+

Correction des rendus

+
+
+

Déposez le PDF exporté par un groupe et obtenez la lecture de son rendu. Page unique de correction pour l'ensemble des exercices.

+ Corriger +
+