1101 lines
48 KiB
HTML
1101 lines
48 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">
|
|
<style>
|
|
:root {
|
|
--teal: #0F6E56;
|
|
--teal-mid: #1D9E75;
|
|
--teal-light: #E1F5EE;
|
|
--teal-dark: #085041;
|
|
--amber: #BA7517;
|
|
--amber-light: #FAEEDA;
|
|
--amber-dark: #633806;
|
|
--coral: #993C1D;
|
|
--coral-mid: #D85A30;
|
|
--coral-light: #FAECE7;
|
|
--purple: #534AB7;
|
|
--purple-light: #EEEDFE;
|
|
--purple-dark: #3C3489;
|
|
--blue: #185FA5;
|
|
--blue-light: #E6F1FB;
|
|
--bg: #F7F6F2;
|
|
--white: #FFFFFF;
|
|
--text: #1a1a18;
|
|
--text-muted: #6b6a65;
|
|
--border: rgba(0,0,0,0.1);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
padding-top: 70px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* HEADER NAVIGATION */
|
|
.nav-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 70px;
|
|
background: var(--white);
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 40px;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(255, 255, 255, 0.95);
|
|
}
|
|
|
|
.header-logo {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.5px;
|
|
background: linear-gradient(135deg, var(--teal-mid), var(--coral-mid));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-nav {
|
|
display: flex;
|
|
gap: 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-nav a {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.header-nav a:hover {
|
|
color: var(--blue);
|
|
}
|
|
|
|
.header-nav a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -4px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--blue);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.header-nav a:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: var(--white);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(135deg, var(--blue-light) 0%, rgba(24, 95, 165, 0.05) 100%);
|
|
color: var(--text);
|
|
padding: 50px 40px;
|
|
text-align: center;
|
|
border-bottom: 3px solid var(--blue);
|
|
}
|
|
|
|
header h1 {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 2.2em;
|
|
margin-bottom: 10px;
|
|
font-weight: 800;
|
|
letter-spacing: -0.5px;
|
|
color: var(--text);
|
|
}
|
|
|
|
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(--blue);
|
|
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(--blue);
|
|
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(--coral-mid);
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: var(--coral-mid);
|
|
border-bottom: 3px solid var(--coral-mid);
|
|
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(--coral-mid);
|
|
box-shadow: 0 8px 16px rgba(216, 90, 48, 0.1);
|
|
}
|
|
|
|
.question-num {
|
|
font-family: 'Syne', sans-serif;
|
|
font-size: 0.9em;
|
|
font-weight: 700;
|
|
color: var(--coral-mid);
|
|
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(--white);
|
|
color: var(--text);
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
min-width: 180px;
|
|
}
|
|
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--coral-mid);
|
|
box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.1);
|
|
}
|
|
|
|
.verify-btn {
|
|
font-family: 'Syne', sans-serif;
|
|
background: var(--coral-mid);
|
|
color: var(--white);
|
|
border: none;
|
|
padding: 12px 30px;
|
|
border-radius: 6px;
|
|
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(--coral);
|
|
box-shadow: 0 8px 16px rgba(216, 90, 48, 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(--teal-light);
|
|
border: 2px solid var(--teal-mid);
|
|
color: var(--teal-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(--white);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.comparison-table th {
|
|
background: var(--coral-light);
|
|
color: var(--coral);
|
|
padding: 15px;
|
|
text-align: left;
|
|
font-family: 'Syne', sans-serif;
|
|
font-weight: 700;
|
|
border-bottom: 2px solid var(--coral-mid);
|
|
}
|
|
|
|
.comparison-table td {
|
|
padding: 15px;
|
|
border-bottom: 1px solid var(--border);
|
|
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);
|
|
}
|
|
|
|
.progress {
|
|
height: 3px;
|
|
background: var(--border);
|
|
margin: 0;
|
|
border-radius: 0;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 70px;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 100%;
|
|
background: var(--coral-mid);
|
|
width: 0%;
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-header {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.header-logo {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header-nav {
|
|
gap: 15px;
|
|
}
|
|
|
|
.header-nav a {
|
|
font-size: 10px;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.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 NAVIGATION -->
|
|
<header>
|
|
<div class="logo">NextGN Formation</div>
|
|
<nav>
|
|
<a href="#formations">Exercices interactifs</a>
|
|
<a href="#documentation">Documentation</a>
|
|
<a href="#rapports">Rapports de veille</a>
|
|
<a href="#about">À propos</a>
|
|
<a href="#contact">Contact</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
|
|
<p>Maîtriser les documents essentiels des produits biocides</p>
|
|
</header>
|
|
|
|
<div class="progress">
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
</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><strong>Objectif pédagogique :</strong> Acquérir une autonomie dans la lecture et l'interprétation des documents réglementaires</p>
|
|
<p style="margin-top: 15px; font-size: 0.95em;">Ces documents sont obligatoires pour tout produit biocide mis sur le marché en France.</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" }
|
|
];
|
|
|
|
// Mélanger aléatoirement les questions
|
|
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;
|
|
}
|
|
|
|
// Générer les questions FDS mélangées
|
|
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;
|
|
});
|
|
}
|
|
|
|
// Answers mapping
|
|
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 verifyFDS() {
|
|
let correct = 0;
|
|
let total = 16;
|
|
let details = [];
|
|
|
|
fdsQuestions.forEach((question) => {
|
|
const select = document.getElementById('fds' + question.id);
|
|
const qNum = select.getAttribute('data-qnum');
|
|
const userAnswer = select.value;
|
|
const expectedAnswers = question.answer.split(',');
|
|
|
|
if (userAnswer === '') {
|
|
details.push(`Q${qNum}: ❌ Pas de réponse`);
|
|
} else if (expectedAnswers.includes(userAnswer)) {
|
|
correct++;
|
|
details.push(`Q${qNum}: ✓ Correct`);
|
|
} else {
|
|
const expected = expectedAnswers.length > 1 ?
|
|
'Rubriques ' + expectedAnswers.join(' et ') :
|
|
(expectedAnswers[0] === 'absent' ? 'Absent' : 'Rubrique ' + expectedAnswers[0]);
|
|
details.push(`Q${qNum}: ❌ Incorrect (réponse: ${expected})`);
|
|
}
|
|
});
|
|
|
|
const resultDiv = document.getElementById('fds-result');
|
|
const percentage = Math.round((correct / total) * 100);
|
|
|
|
let message = '';
|
|
if (percentage === 100) {
|
|
resultDiv.className = 'result-message success';
|
|
message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 80) {
|
|
resultDiv.className = 'result-message success';
|
|
message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 60) {
|
|
resultDiv.className = 'result-message error';
|
|
message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else {
|
|
resultDiv.className = 'result-message error';
|
|
message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
}
|
|
|
|
resultDiv.innerHTML = message + '<div class="answer-detail"><strong>Détails :</strong><br>' + details.join('<br>') + '</div>';
|
|
}
|
|
|
|
function verifyFT() {
|
|
let correct = 0;
|
|
let total = 5;
|
|
let details = [];
|
|
|
|
for (let i = 1; i <= 5; i++) {
|
|
const select = document.getElementById('ft' + i);
|
|
const userAnswer = select.value;
|
|
const expectedAnswers = answers.ft[i];
|
|
|
|
if (userAnswer === '') {
|
|
details.push(`Q${i}: ❌ Pas de réponse`);
|
|
} else if (expectedAnswers.includes(userAnswer)) {
|
|
correct++;
|
|
details.push(`Q${i}: ✓ Correct`);
|
|
} else {
|
|
details.push(`Q${i}: ❌ Incorrect (réponse: ${expectedAnswers[0]})`);
|
|
}
|
|
}
|
|
|
|
const resultDiv = document.getElementById('ft-result');
|
|
const percentage = Math.round((correct / total) * 100);
|
|
|
|
let message = '';
|
|
if (percentage === 100) {
|
|
resultDiv.className = 'result-message success';
|
|
message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 80) {
|
|
resultDiv.className = 'result-message success';
|
|
message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 60) {
|
|
resultDiv.className = 'result-message error';
|
|
message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else {
|
|
resultDiv.className = 'result-message error';
|
|
message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
}
|
|
|
|
resultDiv.innerHTML = message + '<div class="answer-detail"><strong>Détails :</strong><br>' + details.join('<br>') + '</div>';
|
|
}
|
|
|
|
function verifyEtiquette() {
|
|
let correct = 0;
|
|
let total = 10;
|
|
let details = [];
|
|
|
|
for (let i = 1; i <= 10; i++) {
|
|
const select = document.getElementById('eti' + i);
|
|
const userAnswer = select.value;
|
|
const expectedAnswers = answers.etiquette[i];
|
|
|
|
if (userAnswer === '') {
|
|
details.push(`Q${i}: ❌ Pas de réponse`);
|
|
} else if (expectedAnswers.includes(userAnswer)) {
|
|
correct++;
|
|
details.push(`Q${i}: ✓ Correct`);
|
|
} else {
|
|
details.push(`Q${i}: ❌ Incorrect (réponse: ${expectedAnswers[0]})`);
|
|
}
|
|
}
|
|
|
|
const resultDiv = document.getElementById('etiquette-result');
|
|
const percentage = Math.round((correct / total) * 100);
|
|
|
|
let message = '';
|
|
if (percentage === 100) {
|
|
resultDiv.className = 'result-message success';
|
|
message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 80) {
|
|
resultDiv.className = 'result-message success';
|
|
message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else if (percentage >= 60) {
|
|
resultDiv.className = 'result-message error';
|
|
message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
} else {
|
|
resultDiv.className = 'result-message error';
|
|
message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
|
|
}
|
|
|
|
resultDiv.innerHTML = message + '<div class="answer-detail"><strong>Détails :</strong><br>' + details.join('<br>') + '</div>';
|
|
}
|
|
|
|
function switchTab(tabName) {
|
|
const contents = document.querySelectorAll('.tab-content');
|
|
contents.forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
|
|
const buttons = document.querySelectorAll('.tab-button');
|
|
buttons.forEach(button => {
|
|
button.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();
|
|
const sections = document.querySelectorAll('.section');
|
|
sections.forEach((section, index) => {
|
|
section.style.animationDelay = (index * 0.1) + 's';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|