gauthier.chombart
44be41b2b2
Header, footer, titres et balises meta de toutes les pages actives : remplace NextGN Formation par Gauthier Chombart & Nathan Chauwin. Nouveau pied de page uniforme mentionnant les droits reserves et le statut de formateurs independants (dossier archives/ laisse inchange). Integre aussi la refonte du jeu Memory (CSS/JS/HUD/leaderboard) et ajoute le rapport de veille Certibiocide semaine 28.
907 lines
41 KiB
HTML
907 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TD FDS, FT et Étiquettes</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../header-style.css"/>
|
|
<style>
|
|
body {
|
|
padding-top: 70px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: var(--amber-light);
|
|
}
|
|
|
|
.page-header {
|
|
background: linear-gradient(135deg, var(--amber-light) 0%, rgba(24, 95, 165, 0.05) 100%);
|
|
color: var(--text);
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
border-bottom: 3px solid var(--amber);
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 2.2em;
|
|
margin-bottom: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
color: var(--text);
|
|
}
|
|
|
|
.page-header p {
|
|
font-size: 1em;
|
|
opacity: 0.8;
|
|
font-weight: 400;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.content {
|
|
padding: 50px 40px;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 40px;
|
|
animation: fadeIn 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
h2 {
|
|
font-family: 'Syne', sans-serif;
|
|
color: var(--text);
|
|
font-size: 1.6em;
|
|
margin-bottom: 15px;
|
|
border-bottom: 3px solid var(--amber);
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
h2::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--amber);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
h3 {
|
|
color: var(--text);
|
|
font-size: 1.15em;
|
|
margin: 25px 0 15px 0;
|
|
font-weight: 700;
|
|
font-family: 'Syne', sans-serif;
|
|
}
|
|
|
|
.intro {
|
|
background: var(--coral-light);
|
|
padding: 20px;
|
|
border-left: 4px solid var(--coral-mid);
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
font-size: 0.95em;
|
|
color: var(--text-muted);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.intro strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.tab-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 30px;
|
|
border-bottom: 2px solid var(--border);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-button {
|
|
font-family: 'Syne', sans-serif;
|
|
background: transparent;
|
|
border: none;
|
|
padding: 12px 20px;
|
|
font-size: 0.95em;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
color: var(--amber);
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: var(--amber);
|
|
border-bottom: 3px solid var(--amber);
|
|
padding-bottom: 9px;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
.answer-row {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.answer-row:hover {
|
|
border-color: var(--amber);
|
|
box-shadow: 0 8px 16px rgba(186, 117, 23, 0.1);
|
|
}
|
|
|
|
.answer-label {
|
|
font-size: 0.82em;
|
|
font-weight: 700;
|
|
color: var(--amber-dark);
|
|
white-space: nowrap;
|
|
padding: 4px 10px;
|
|
background: var(--amber-light);
|
|
border: 1px solid var(--amber);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.answer-icon {
|
|
font-size: 1.3em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.question-num {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 0.9em;
|
|
font-weight: 700;
|
|
color: var(--amber);
|
|
min-width: 35px;
|
|
text-align: center;
|
|
}
|
|
|
|
.question-text {
|
|
flex-grow: 1;
|
|
font-size: 0.95em;
|
|
color: var(--text);
|
|
font-weight: 500;
|
|
}
|
|
|
|
select {
|
|
font-family: 'DM Sans', sans-serif;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--amber-light);
|
|
color: var(--text);
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 180px;
|
|
}
|
|
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--amber);
|
|
box-shadow: 0 0 0 3px rgba(186, 117, 23, 0.1);
|
|
}
|
|
|
|
.verify-btn {
|
|
font-family: 'Syne', sans-serif;
|
|
background: var(--amber);
|
|
color: var(--white);
|
|
border: none;
|
|
padding: 12px 30px;
|
|
border-radius: 40px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
transition: all 0.3s ease;
|
|
margin-top: 20px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.verify-btn:hover {
|
|
background: var(--amber-dark);
|
|
box-shadow: 0 8px 16px rgba(186, 117, 23, 0.25);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.result-message {
|
|
margin-top: 20px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
font-weight: 700;
|
|
display: none;
|
|
}
|
|
|
|
.result-message.show {
|
|
display: block;
|
|
}
|
|
|
|
.result-message.success {
|
|
background: var(--amber-light);
|
|
border: 2px solid var(--amber-mid);
|
|
color: var(--amber-dark);
|
|
}
|
|
|
|
.result-message.error {
|
|
background: var(--coral-light);
|
|
border: 2px solid var(--coral-mid);
|
|
color: var(--coral);
|
|
}
|
|
|
|
.comparison-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
background: var(--amber-light);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.comparison-table th {
|
|
background: var(--amber-light);
|
|
color: var(--amber-dark);
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-family: 'Syne', sans-serif;
|
|
font-weight: 700;
|
|
border-bottom: 2px solid var(--amber);
|
|
}
|
|
|
|
.comparison-table td {
|
|
padding: 15px;
|
|
border-bottom: 2px solid var(--amber);
|
|
color: var(--text-muted);
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.comparison-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.comparison-table tr:hover {
|
|
background: var(--bg);
|
|
}
|
|
|
|
.comparison-table strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
footer {
|
|
background: var(--bg);
|
|
padding: 25px;
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.content {
|
|
padding: 25px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.answer-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
|
|
<nav>
|
|
<a href="../index.html">Accueil</a>
|
|
<a href="../index.html#formations">Exercices</a>
|
|
<a href="../index.html#documentation">Documentation</a>
|
|
<a href="../index.html#rapports">Rapports</a>
|
|
<a href="../index.html#about">À propos</a>
|
|
<a href="../index.html#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressBar"></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="page-header">
|
|
<h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
|
|
<p>Maîtriser les documents essentiels des produits biocides</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<!-- TABS NAVIGATION -->
|
|
<div class="tab-container">
|
|
<button class="tab-button active" onclick="switchTab('fds')">📄 FDS (Fiche Sécurité)</button>
|
|
<button class="tab-button" onclick="switchTab('ft')">📋 FT (Fiche Technique)</button>
|
|
<button class="tab-button" onclick="switchTab('etiquette')">🏷️ Étiquetage</button>
|
|
</div>
|
|
|
|
<!-- ====== TAB FDS ====== -->
|
|
<div id="fds" class="tab-content active">
|
|
<div class="section">
|
|
<h2>Partie 1 : Fiche de Données de Sécurité (FDS)</h2>
|
|
<div class="intro">
|
|
<strong>Durée : 10 minutes</strong>
|
|
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.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Questions d'analyse FDS</h3>
|
|
<p style="margin-bottom: 20px; color: #555;">Pour chaque question, sélectionnez la rubrique FDS où trouver la réponse (Rubrique 1 à 16 ou « Absent »).</p>
|
|
|
|
<div id="fds-questions">
|
|
<!-- Les questions seront générées et mélangées par JavaScript -->
|
|
</div>
|
|
|
|
<button class="verify-btn" onclick="verifyFDS()">✓ Vérifier les réponses</button>
|
|
<div id="fds-result" class="result-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== TAB FT ====== -->
|
|
<div id="ft" class="tab-content">
|
|
<div class="section">
|
|
<h2>Partie 2 : Fiche Technique (FT)</h2>
|
|
<div class="intro">
|
|
<strong>Durée : 10 minutes</strong>
|
|
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.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Questions d'analyse FT</h3>
|
|
<p style="margin-bottom: 20px; color: #555;">Pour chaque question, sélectionnez la section FT où trouver la réponse (Description, Propriétés biocides, Conditionnements, Utilisations ou « Absent »).</p>
|
|
|
|
<div id="ft-questions">
|
|
<div class="answer-row">
|
|
<div class="question-num">Q1</div>
|
|
<div class="question-text">Quel est le nom du produit et qui est le fabricant ?</div>
|
|
<select id="ft1" data-answer="Description">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Description">Description</option>
|
|
<option value="Propriétés biocides">Propriétés biocides</option>
|
|
<option value="Conditionnements">Conditionnements</option>
|
|
<option value="Utilisations">Utilisations</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q2</div>
|
|
<div class="question-text">Sur quelles matières ce produit est-il compatible ?</div>
|
|
<select id="ft2" data-answer="Description">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Description">Description</option>
|
|
<option value="Propriétés biocides">Propriétés biocides</option>
|
|
<option value="Conditionnements">Conditionnements</option>
|
|
<option value="Utilisations">Utilisations</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q3</div>
|
|
<div class="question-text">Quel est (sont) le(s) type(s) de ce produit ?</div>
|
|
<select id="ft3" data-answer="Propriétés biocides">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Description">Description</option>
|
|
<option value="Propriétés biocides">Propriétés biocides</option>
|
|
<option value="Conditionnements">Conditionnements</option>
|
|
<option value="Utilisations">Utilisations</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q4</div>
|
|
<div class="question-text">Quels sont les types de conditionnements disponibles ?</div>
|
|
<select id="ft4" data-answer="Conditionnements">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Description">Description</option>
|
|
<option value="Propriétés biocides">Propriétés biocides</option>
|
|
<option value="Conditionnements">Conditionnements</option>
|
|
<option value="Utilisations">Utilisations</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q5</div>
|
|
<div class="question-text">Où retrouver les différents modes d'utilisation de ce produit ?</div>
|
|
<select id="ft5" data-answer="Utilisations">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Description">Description</option>
|
|
<option value="Propriétés biocides">Propriétés biocides</option>
|
|
<option value="Conditionnements">Conditionnements</option>
|
|
<option value="Utilisations">Utilisations</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="verify-btn" onclick="verifyFT()">✓ Vérifier les réponses</button>
|
|
<div id="ft-result" class="result-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== TAB ÉTIQUETAGE ====== -->
|
|
<div id="etiquette" class="tab-content">
|
|
<div class="section">
|
|
<h2>Partie 3 : Étiquetage</h2>
|
|
<div class="intro">
|
|
<strong>Durée : 10 minutes</strong>
|
|
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.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h3>Questions d'analyse d'étiquette</h3>
|
|
<p style="margin-bottom: 20px; color: #555;">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 »).</p>
|
|
|
|
<div id="etiquette-questions">
|
|
<div class="answer-row">
|
|
<div class="question-num">Q1</div>
|
|
<div class="question-text">Quel est le nom du produit et le nom de l'entreprise ?</div>
|
|
<select id="eti1" data-answer="Identité">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q2</div>
|
|
<div class="question-text">Quels pictogrammes de danger sont affichés ?</div>
|
|
<select id="eti2" data-answer="Pictogrammes">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q3</div>
|
|
<div class="question-text">Quels sont les mots d'avertissement (« Attention » ou « Danger ») ?</div>
|
|
<select id="eti3" data-answer="Mots d'avertissement">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q4</div>
|
|
<div class="question-text">Quelles sont les mentions de danger (H-statements) identifiées ?</div>
|
|
<select id="eti4" data-answer="Mentions de danger">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q5</div>
|
|
<div class="question-text">Quels équipements de protection individuelle (EPI) sont recommandés ?</div>
|
|
<select id="eti5" data-answer="Conseils de prudence">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q6</div>
|
|
<div class="question-text">Quels premiers secours sont indiqués ?</div>
|
|
<select id="eti6" data-answer="Conseils de prudence">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q7</div>
|
|
<div class="question-text">Comment éliminer l'emballage après utilisation ?</div>
|
|
<select id="eti7" data-answer="Conseils de prudence">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q8</div>
|
|
<div class="question-text">Quel est le contenu net du produit ?</div>
|
|
<select id="eti8" data-answer="Contenu net">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q9</div>
|
|
<div class="question-text">Y a-t-il un numéro d'appel d'urgence mentionné ?</div>
|
|
<select id="eti9" data-answer="Numéro d'urgence">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="answer-row">
|
|
<div class="question-num">Q10</div>
|
|
<div class="question-text">Quelles consignes de stockage sont affichées ?</div>
|
|
<select id="eti10" data-answer="Conseils de prudence">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="Identité">Identité</option>
|
|
<option value="Pictogrammes">Pictogrammes</option>
|
|
<option value="Mots d'avertissement">Mots d'avertissement</option>
|
|
<option value="Mentions de danger">Mentions de danger</option>
|
|
<option value="Conseils de prudence">Conseils de prudence</option>
|
|
<option value="Contenu net">Contenu net</option>
|
|
<option value="Numéro d'urgence">Numéro d'urgence</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="verify-btn" onclick="verifyEtiquette()">✓ Vérifier les réponses</button>
|
|
<div id="etiquette-result" class="result-message"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ====== SYNTHÈSE COMPARATIVE ====== -->
|
|
<div class="section">
|
|
<h2>Synthèse Comparative</h2>
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Document</th>
|
|
<th>Utilité Principale</th>
|
|
<th>Moment de Consultation</th>
|
|
<th>Public</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>FDS</strong></td>
|
|
<td>Sécurité, dangers, EPI, premiers secours</td>
|
|
<td>AVANT manipulation</td>
|
|
<td>Professionnels</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>FT</strong></td>
|
|
<td>Mode d'emploi, applications, conditionnements</td>
|
|
<td>Pour l'utilisation</td>
|
|
<td>Utilisateurs finaux</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Étiquette</strong></td>
|
|
<td>Dangers essentiels, interface rapide</td>
|
|
<td>À chaque prise du produit</td>
|
|
<td>Tous les utilisateurs</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- CLÉS DE SUCCÈS -->
|
|
<div class="section">
|
|
<div class="tips">
|
|
<h3>💡 Clés de Succès</h3>
|
|
<ul>
|
|
<li><strong>FDS = Sécurité et dangers</strong> → À consulter AVANT manipulation</li>
|
|
<li><strong>FT = Mode d'emploi et applications</strong> → À consulter pour l'utilisation</li>
|
|
<li><strong>Étiquette = Interface rapide</strong> → Lecture obligatoire avant ouverture du produit</li>
|
|
<li>Les trois documents sont <strong>complémentaires</strong>, jamais redondants</li>
|
|
<li>Chaque document cible un besoin différent et un public différent</li>
|
|
<li>Un professionnel doit maîtriser les trois pour une utilisation sûre et efficace</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2026 Gauthier Chombart & Nathan Chauwin<br>Tous droits réservés — Formations Certibiocide & Techniques — Formateurs indépendants</p>
|
|
<p style="margin-top: 10px; opacity: 0.6;">Tous droits réservés — Gauthier Chombart & Nathan Chauwin — Formateurs indépendants</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Questions FDS avec réponses
|
|
const fdsQuestions = [
|
|
{ id: 1, text: "Quel est le nom du produit et qui est le fabricant ?", answer: "1" },
|
|
{ id: 2, text: "Quels sont les dangers du produit ?", answer: "2" },
|
|
{ id: 3, text: "Quelles sont les molécules actives et leurs concentrations ?", answer: "3" },
|
|
{ id: 4, text: "Quels gestes adopter en premiers secours ?", answer: "4" },
|
|
{ id: 5, text: "En cas d'incendie, quels sont les moyens d'extinction conseillés ?", answer: "5" },
|
|
{ id: 6, text: "Que faire en cas de dispersion accidentelle ?", answer: "6" },
|
|
{ id: 7, text: "Dans quelles conditions stocker mon produit ?", answer: "7" },
|
|
{ id: 8, text: "Quels équipements de protection individuelle (EPI) dois-je porter ?", answer: "8" },
|
|
{ id: 9, text: "Quel est le pH de ce produit ?", answer: "9" },
|
|
{ id: 10, text: "Le produit est-il stable dans des conditions normales ?", answer: "10" },
|
|
{ id: 11, text: "Quels sont les effets potentiels sur la santé ?", answer: "11" },
|
|
{ id: 12, text: "Quel est le degré de toxicité pour les poissons ? Potentiel de bioaccumulation ?", answer: "12" },
|
|
{ id: 13, text: "Comment éliminer le produit ?", answer: "13" },
|
|
{ id: 14, text: "Est-ce que mon produit est classé dangereux pour le transport ?", answer: "14" },
|
|
{ id: 15, text: "En cas d'ingestion du produit, que faire ?", answer: "4,11" },
|
|
{ id: 16, text: "Où trouver le mode d'emploi du produit ?", answer: "absent" }
|
|
];
|
|
|
|
function shuffleArray(array) {
|
|
const newArray = [...array];
|
|
for (let i = newArray.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
|
|
}
|
|
return newArray;
|
|
}
|
|
|
|
function generateFDSQuestions() {
|
|
const shuffled = shuffleArray(fdsQuestions);
|
|
const container = document.getElementById('fds-questions');
|
|
container.innerHTML = '';
|
|
|
|
shuffled.forEach((question, index) => {
|
|
const qNum = index + 1;
|
|
const selectId = 'fds' + question.id;
|
|
const answerAttr = question.answer;
|
|
|
|
const html = `
|
|
<div class="answer-row">
|
|
<div class="question-num">Q${qNum}</div>
|
|
<div class="question-text">${question.text}</div>
|
|
<select id="${selectId}" data-answer="${answerAttr}" data-qnum="${qNum}">
|
|
<option value="">-- Sélectionner --</option>
|
|
<option value="1">Rubrique 1</option>
|
|
<option value="2">Rubrique 2</option>
|
|
<option value="3">Rubrique 3</option>
|
|
<option value="4">Rubrique 4</option>
|
|
<option value="5">Rubrique 5</option>
|
|
<option value="6">Rubrique 6</option>
|
|
<option value="7">Rubrique 7</option>
|
|
<option value="8">Rubrique 8</option>
|
|
<option value="9">Rubrique 9</option>
|
|
<option value="10">Rubrique 10</option>
|
|
<option value="11">Rubrique 11</option>
|
|
<option value="12">Rubrique 12</option>
|
|
<option value="13">Rubrique 13</option>
|
|
<option value="14">Rubrique 14</option>
|
|
<option value="15">Rubrique 15</option>
|
|
<option value="16">Rubrique 16</option>
|
|
<option value="absent">Absent</option>
|
|
</select>
|
|
</div>
|
|
`;
|
|
container.innerHTML += html;
|
|
});
|
|
}
|
|
|
|
const answers = {
|
|
ft: {
|
|
1: ['Description'],
|
|
2: ['Description'],
|
|
3: ['Propriétés biocides'],
|
|
4: ['Conditionnements'],
|
|
5: ['Utilisations']
|
|
},
|
|
etiquette: {
|
|
1: ['Identité'],
|
|
2: ['Pictogrammes'],
|
|
3: ['Mots d\'avertissement'],
|
|
4: ['Mentions de danger'],
|
|
5: ['Conseils de prudence'],
|
|
6: ['Conseils de prudence'],
|
|
7: ['Conseils de prudence'],
|
|
8: ['Contenu net'],
|
|
9: ['Numéro d\'urgence'],
|
|
10: ['Conseils de prudence']
|
|
}
|
|
};
|
|
|
|
function showInlineResult(selectEl, isCorrect, isUnanswered, correctAnswerText) {
|
|
const row = selectEl.closest('.answer-row');
|
|
row.querySelector('.answer-label')?.remove();
|
|
row.querySelector('.answer-icon')?.remove();
|
|
|
|
const label = document.createElement('div');
|
|
label.className = 'answer-label';
|
|
label.textContent = correctAnswerText;
|
|
selectEl.before(label);
|
|
|
|
const icon = document.createElement('div');
|
|
icon.className = 'answer-icon';
|
|
icon.textContent = isUnanswered ? '❓' : (isCorrect ? '✅' : '❌');
|
|
selectEl.after(icon);
|
|
}
|
|
|
|
function showScore(resultDiv, correct, total) {
|
|
const percentage = Math.round((correct / total) * 100);
|
|
if (percentage === 100) {
|
|
resultDiv.className = 'result-message success show';
|
|
resultDiv.innerHTML = `<strong>🎉 Excellent !</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 80) {
|
|
resultDiv.className = 'result-message success show';
|
|
resultDiv.innerHTML = `<strong>✓ Très bien !</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 60) {
|
|
resultDiv.className = 'result-message error show';
|
|
resultDiv.innerHTML = `<strong>⚠️ À revoir</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else {
|
|
resultDiv.className = 'result-message error show';
|
|
resultDiv.innerHTML = `<strong>❌ Insuffisant</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
}
|
|
}
|
|
|
|
function verifyFDS() {
|
|
let correct = 0;
|
|
|
|
fdsQuestions.forEach((question) => {
|
|
const select = document.getElementById('fds' + question.id);
|
|
const userAnswer = select.value;
|
|
const expectedAnswers = question.answer.split(',');
|
|
const isCorrect = expectedAnswers.includes(userAnswer);
|
|
const isUnanswered = userAnswer === '';
|
|
|
|
const labelText = expectedAnswers.length > 1
|
|
? 'Rubriques ' + expectedAnswers.join(' et ')
|
|
: (expectedAnswers[0] === 'absent' ? 'Absent' : 'Rubrique ' + expectedAnswers[0]);
|
|
|
|
if (isCorrect) correct++;
|
|
showInlineResult(select, isCorrect, isUnanswered, labelText);
|
|
});
|
|
|
|
showScore(document.getElementById('fds-result'), correct, 16);
|
|
}
|
|
|
|
function verifyFT() {
|
|
let correct = 0;
|
|
|
|
for (let i = 1; i <= 5; i++) {
|
|
const select = document.getElementById('ft' + i);
|
|
const userAnswer = select.value;
|
|
const expectedAnswers = answers.ft[i];
|
|
const isCorrect = expectedAnswers.includes(userAnswer);
|
|
const isUnanswered = userAnswer === '';
|
|
|
|
if (isCorrect) correct++;
|
|
showInlineResult(select, isCorrect, isUnanswered, expectedAnswers[0]);
|
|
}
|
|
|
|
showScore(document.getElementById('ft-result'), correct, 5);
|
|
}
|
|
|
|
function verifyEtiquette() {
|
|
let correct = 0;
|
|
|
|
for (let i = 1; i <= 10; i++) {
|
|
const select = document.getElementById('eti' + i);
|
|
const userAnswer = select.value;
|
|
const expectedAnswers = answers.etiquette[i];
|
|
const isCorrect = expectedAnswers.includes(userAnswer);
|
|
const isUnanswered = userAnswer === '';
|
|
|
|
if (isCorrect) correct++;
|
|
showInlineResult(select, isCorrect, isUnanswered, expectedAnswers[0]);
|
|
}
|
|
|
|
showScore(document.getElementById('etiquette-result'), correct, 10);
|
|
}
|
|
|
|
function switchTab(tabName) {
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(tabName).classList.add('active');
|
|
event.target.classList.add('active');
|
|
}
|
|
|
|
window.addEventListener('scroll', () => {
|
|
const scrollTop = window.scrollY;
|
|
const docHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
document.getElementById('progressBar').style.width = scrollPercent + '%';
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
generateFDSQuestions();
|
|
document.querySelectorAll('.section').forEach((section, index) => {
|
|
section.style.animationDelay = (index * 0.1) + 's';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|