Fusion de exos-rework dans main
Retravaille le TP Nuisibles : inversion accueil/identification, style BioCID, navigation regroupee dans la bottom bar, boutons d'action simplifies et encadres finaux recentres. # Conflicts: # .gitignore
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -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
|
||||
|
||||
BIN
data/ghs05-corrosif.jpg
Normal file
BIN
data/ghs05-corrosif.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
data/ghs07-nocif.jpg
Normal file
BIN
data/ghs07-nocif.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
data/ghs09-environnement.jpg
Normal file
BIN
data/ghs09-environnement.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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 @@
|
||||
<!-- Progress bar -->
|
||||
<div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
|
||||
|
||||
<!-- Phase badge -->
|
||||
<div class="phase-badge" id="phaseBadge" style="display:none"></div>
|
||||
|
||||
<!-- Bottom bar -->
|
||||
<div class="bottom-bar" id="bottomBar" style="display:none;">
|
||||
<button class="back-btn" id="backBtn" onclick="goBack()" style="display:none;">← Retour</button>
|
||||
<div class="slide-counter" id="slideCounter"></div>
|
||||
<div class="bottom-actions">
|
||||
<button class="footer-btn is-secondary" id="backBtn" onclick="goBack()" style="display:none;">← Retour</button>
|
||||
<button class="footer-btn is-secondary" id="footerHintBtn" onclick="showHintCurrent()" style="display:none;">💡 Besoin d'aide ?</button>
|
||||
<button class="footer-btn is-primary" id="footerNextBtn" onclick="goNext()" style="display:none;">Étape suivante →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal overlay -->
|
||||
@@ -666,48 +676,40 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 0 — IDENTIFICATION ======================== -->
|
||||
<!-- ======================== SLIDE 0 — ACCUEIL ======================== -->
|
||||
<div class="slide active fade-in" id="slide-0">
|
||||
<div class="deco-circle" style="width:320px;height:320px;background:var(--amber-light);top:-80px;left:-80px;opacity:0.5;"></div>
|
||||
<div style="text-align:center; z-index:1; width:100%;">
|
||||
<div class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
|
||||
<div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
|
||||
<div style="text-align:center;">
|
||||
<div class="hero-label">Certibiocide — Travaux pratiques</div>
|
||||
<div class="hero-title">Étude de cas<br>Nuisibles</div>
|
||||
<p class="hero-sub">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
|
||||
<button class="btn btn-amber" onclick="goTo(1)">Démarrer la mission →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 1 — CONTEXTE & IDENTIFICATION ======================== -->
|
||||
<div class="slide" id="slide-1">
|
||||
<div class="deco-circle" style="width:300px;height:300px;background:var(--amber-light);top:-60px;left:-60px;opacity:0.4;"></div>
|
||||
<div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
|
||||
<div class="slide-title">Identification du groupe</div>
|
||||
<p class="slide-intro" style="margin:0.5rem auto 0;max-width:420px;">Ces informations permettront au formateur de retrouver vos réponses.</p>
|
||||
<div class="id-form" style="margin-left:auto;margin-right:auto;">
|
||||
<div class="id-field">
|
||||
<label for="inputNom">Nom du stagiaire ou du groupe</label>
|
||||
<input type="text" id="inputNom" placeholder="Ex : Groupe 3 - Dupont / Martin" autocomplete="off">
|
||||
<div class="slide-title">Contexte & accès</div>
|
||||
<p class="slide-intro">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.</p>
|
||||
<div class="info-card" style="max-width:620px;">
|
||||
<span>🎯</span>
|
||||
<div>Vous allez définir un <strong>protocole d'intervention</strong>, trouver votre <strong>produit sur BioCID</strong>, puis réaliser l'<strong>analyse de risques</strong>.</div>
|
||||
</div>
|
||||
<div class="id-field">
|
||||
<label for="inputDate">Date de la session</label>
|
||||
<div class="identity-card" style="max-width:620px;margin-top:0.5rem;">
|
||||
<div class="identity-title">👥 Identification du groupe</div>
|
||||
<div class="identity-fields">
|
||||
<input type="text" id="inputNom" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
|
||||
<input type="date" id="inputDate">
|
||||
</div>
|
||||
<div class="id-field">
|
||||
<label>Formateur de la session</label>
|
||||
<div style="display:flex;gap:10px;margin-top:2px;">
|
||||
<div class="formateur-label">Formateur de la session</div>
|
||||
<div class="formateur-row">
|
||||
<button type="button" class="formateur-btn" id="btnNathan" onclick="selectFormateur('Nathan')">Nathan</button>
|
||||
<button type="button" class="formateur-btn" id="btnGauthier" onclick="selectFormateur('Gauthier')">Gauthier</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="idError" style="color:var(--coral);font-size:13px;margin-bottom:0.5rem;display:none;">Merci de renseigner au moins le nom du groupe.</div>
|
||||
<div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
|
||||
<button class="btn btn-teal" onclick="confirmIdentite()">Continuer →</button>
|
||||
<a href="correction-tp-nuisibles.html" class="btn btn-outline btn-teal">Corriger</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 1 — ACCUEIL ======================== -->
|
||||
<div class="slide" id="slide-1">
|
||||
<div class="deco-circle" style="width:400px;height:400px;background:var(--amber-light);top:-100px;right:-80px;opacity:0.6;"></div>
|
||||
<div class="deco-circle" style="width:200px;height:200px;background:var(--amber-light);bottom:60px;left:-60px;opacity:0.5;"></div>
|
||||
<div style="text-align:center; z-index:1;">
|
||||
<div class="hero-label">Formation</div>
|
||||
<div class="hero-title">CERTIBIOCIDE</div>
|
||||
<div style="font-family:'Syne',sans-serif;font-size:clamp(14px,2.5vw,22px);font-weight:600;color:var(--amber-mid);letter-spacing:0.04em;margin-bottom:1.5rem;">TRAVAUX PRATIQUES</div>
|
||||
<p class="hero-sub">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
|
||||
<button class="btn btn-teal" onclick="goTo(2)">Démarrer la mission →</button>
|
||||
<div id="idError" style="color:var(--coral);font-size:13px;margin-top:8px;display:none;">Merci de renseigner au moins le nom du groupe.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -715,8 +717,12 @@
|
||||
<div class="slide" id="slide-2">
|
||||
<div class="deco-circle" style="width:300px;height:300px;background:var(--amber-light);top:-60px;left:-60px;opacity:0.4;"></div>
|
||||
<div class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Étape 1 / 3</div>
|
||||
<div class="slide-title">Choisissez votre mission</div>
|
||||
<div class="slide-title">🎯 Choisissez votre mission</div>
|
||||
<p class="slide-intro">Chaque groupe choisit un cas pratique. Vous travaillerez avec ce scénario tout au long des 3 exercices.</p>
|
||||
<div class="info-card" style="margin-bottom:1.25rem;">
|
||||
<span>💡</span>
|
||||
<div>Le cas retenu conditionne <strong>tous les exercices suivants</strong> et apparaît dans le PDF final. Choisissez celui qui se rapproche le plus de votre pratique.</div>
|
||||
</div>
|
||||
<div class="case-grid">
|
||||
<div class="case-card" onclick="selectCase('punaises','🛏️','Hôtel — Punaises de lit','Infestation importante dans un hôtel')">
|
||||
<div class="case-icon">🛏️</div>
|
||||
@@ -744,9 +750,6 @@
|
||||
<div class="case-sub">Camping</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
<button class="btn btn-teal" id="btnConfirmCase" onclick="goTo(3)" style="display:none">Confirmer le choix →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 3 — CONSIGNES ======================== -->
|
||||
@@ -774,7 +777,6 @@
|
||||
<span>💡</span>
|
||||
<div>À tout moment, cliquez sur <strong>« Besoin d'aide ? »</strong> pour accéder à un indice. Le formateur corrigera à l'oral en fin de séance.</div>
|
||||
</div>
|
||||
<button class="btn btn-teal" onclick="goTo(4)">Commencer le TP 1 →</button>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 4 — TP1 INTRO ======================== -->
|
||||
@@ -792,7 +794,6 @@
|
||||
<div class="step-pill">2. Intervention</div>
|
||||
<div class="step-pill">3. Évaluation</div>
|
||||
</div>
|
||||
<button class="btn btn-amber" onclick="goTo(5)">Commencer →</button>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 5 — TP1 PREVENTION ======================== -->
|
||||
@@ -833,10 +834,6 @@
|
||||
<textarea class="answer-field" id="ans_prevention_4" placeholder="Votre réponse…" data-question="Éléments observés / preuve de présence du nuisible"></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="actions-row">
|
||||
<button class="hint-btn" onclick="showHint('prevention')">💡 Besoin d'aide ?</button>
|
||||
<button class="btn btn-amber" onclick="goTo(6)">Étape suivante →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -871,10 +868,6 @@
|
||||
<textarea class="answer-field" id="ans_intervention_3" placeholder="Votre réponse…" data-question="Type de produit (TP) et mode de traitement"></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="actions-row">
|
||||
<button class="hint-btn" onclick="showHint('intervention')">💡 Besoin d'aide ?</button>
|
||||
<button class="btn btn-amber" onclick="goTo(7)">Étape suivante →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -905,10 +898,6 @@
|
||||
<div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:680px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.75rem 0;">
|
||||
✅ <strong>TP 1 terminé !</strong> Préparez-vous à identifier le produit adapté à votre cas sur biocid-anses.fr.
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
<button class="hint-btn" onclick="showHint('evaluation')">💡 Besoin d'aide ?</button>
|
||||
<button class="btn btn-coral" onclick="goTo(8)">Passer au TP 2 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -930,7 +919,6 @@
|
||||
</div>
|
||||
<a href="https://biocid-anses.fr" target="_blank" class="resource-link">Ouvrir le site ↗</a>
|
||||
</div>
|
||||
<button class="btn btn-coral" onclick="goTo(9)">Commencer →</button>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 9 — TP2 FDS & AMM ======================== -->
|
||||
@@ -971,10 +959,6 @@
|
||||
<textarea class="answer-field" id="ans_fds_4" placeholder="Votre réponse…" data-question="Risques pour la santé"></textarea>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="actions-row">
|
||||
<button class="hint-btn" onclick="showHint('fds')">💡 Besoin d'aide ?</button>
|
||||
<button class="btn btn-coral" onclick="goTo(10)">Partie suivante →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1019,10 +1003,6 @@
|
||||
<div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:680px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.75rem 0;">
|
||||
✅ <strong>TP 2 terminé !</strong> Passez maintenant à l'analyse de risques complète.
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
<button class="hint-btn" onclick="showHint('epi')">💡 Besoin d'aide ?</button>
|
||||
<button class="btn btn-purple" onclick="goTo(11)">Passer au TP 3 →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1039,9 +1019,6 @@
|
||||
<div class="pyr-level" style="width:320px;background:#D85A30;">Communication</div>
|
||||
<div class="pyr-level" style="width:360px;background:#BA7517;">EPI (dernier recours)</div>
|
||||
</div>
|
||||
<div class="actions-row" style="margin-top:1rem;">
|
||||
<button class="btn btn-purple" onclick="goTo(12)">Remplir le tableau →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 12 — TP3 TABLEAU ======================== -->
|
||||
@@ -1110,10 +1087,6 @@
|
||||
<div style="background:var(--amber-light);border-radius:12px;padding:14px 18px;max-width:780px;width:100%;font-size:13px;color:var(--amber-dark);margin:0.25rem 0;">
|
||||
✅ <strong>TP 3 terminé !</strong> Présentez vos réponses au formateur pour la correction.
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
<button class="hint-btn" onclick="showHint('analyse')">💡 Aide générale</button>
|
||||
<button class="btn btn-blue" onclick="goTo(13)">Terminer la mission →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1143,15 +1116,10 @@
|
||||
<div class="final-card-sub">Analyse de risques</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submit-zone">
|
||||
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;">
|
||||
<button class="btn btn-teal" onclick="exporterPDF()">⬇ Télécharger en PDF</button>
|
||||
<a href="correction-tp-nuisibles.html" class="btn btn-outline btn-teal">Corriger</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:0.75rem;">
|
||||
<a href="https://biocid-anses.fr" target="_blank" class="btn btn-outline btn-teal" style="font-size:13px;padding:10px 20px;">biocid-anses.fr ↗</a>
|
||||
<button class="btn btn-teal" onclick="restartAll()">↺ Recommencer depuis le début</button>
|
||||
<div class="actions-row">
|
||||
<button class="btn btn-amber" onclick="exporterPDF()">⬇ Télécharger mes réponses (PDF)</button>
|
||||
<a href="corriger-exercice.html?exo=tp" class="btn btn-outline btn-teal">✔ Corriger un rendu</a>
|
||||
<button class="btn btn-outline btn-teal" onclick="restartAll()">↺ Recommencer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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, '<').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 = `
|
||||
<span class="restore-text">💾 Des réponses enregistrées${libelle} ont été retrouvées sur ce poste.</span>
|
||||
<span class="restore-actions">
|
||||
<button type="button" class="primary" id="btnRestaurer">Restaurer</button>
|
||||
<button type="button" id="btnRepartir">Repartir de zéro</button>
|
||||
</span>`;
|
||||
document.body.appendChild(bar);
|
||||
|
||||
document.getElementById('btnRestaurer').onclick = () => { appliquerSauvegarde(data); bar.remove(); };
|
||||
document.getElementById('btnRepartir').onclick = () => { effacerSauvegarde(); bar.remove(); };
|
||||
}
|
||||
|
||||
proposerRestauration();
|
||||
|
||||
updateUI();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -1,650 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Correction TP Nuisibles — Certibiocide</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../header-style.css"/>
|
||||
<style>
|
||||
body {
|
||||
padding: calc(36px + 70px) 20px 80px;
|
||||
}
|
||||
.wrap { max-width: 820px; margin: 0 auto; }
|
||||
.syne { font-family: 'Syne', sans-serif; }
|
||||
.eyebrow {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--amber);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
h1 {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.5px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* DROPZONE */
|
||||
#dropzone {
|
||||
background: #fff;
|
||||
border: 2px dashed rgba(186,117,23,0.35);
|
||||
border-radius: 16px;
|
||||
padding: 56px 24px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, background 0.2s;
|
||||
}
|
||||
#dropzone.drag { border-color: var(--amber); background: var(--amber-light); }
|
||||
#dropzone .icon { font-size: 40px; margin-bottom: 12px; }
|
||||
#dropzone p.title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 6px; }
|
||||
#dropzone p.sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }
|
||||
#filePicker { display: none; }
|
||||
.btn-pick {
|
||||
font-family: 'Syne', sans-serif;
|
||||
display: inline-block;
|
||||
background: var(--amber);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
padding: 10px 26px;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
}
|
||||
#status { margin-top: 16px; font-size: 13px; }
|
||||
#status.loading { color: var(--amber); }
|
||||
#status.error { color: var(--coral); }
|
||||
|
||||
/* RESULT */
|
||||
#result { display: none; }
|
||||
.toprow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
#fileName { font-size: 12.5px; color: var(--text-muted); }
|
||||
.btn-reset {
|
||||
font-family: 'Syne', sans-serif;
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 6px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.btn-reset:hover { border-color: var(--amber); color: var(--amber); }
|
||||
|
||||
.id-card { display: none; }
|
||||
|
||||
/* BANDEAU PARTICIPANTS */
|
||||
#participantsBanner {
|
||||
background: linear-gradient(135deg, var(--amber) 0%, #D8923A 100%);
|
||||
border-radius: 16px;
|
||||
padding: 20px 26px;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
#participantsBanner .pb-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#participantsBanner .pb-group {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.85;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
#participantsBanner .pb-names {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.id-card .label {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
color: var(--amber-dark);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.id-card .value { font-size: 14.5px; margin-top: 2px; }
|
||||
|
||||
.progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 13px; color: var(--text-muted); }
|
||||
.progress-track { flex: 1; height: 7px; background: rgba(0,0,0,0.08); border-radius: 6px; overflow: hidden; }
|
||||
.progress-fill { height: 100%; background: var(--teal); transition: width 0.4s ease; }
|
||||
.progress-row strong { font-family: 'Syne', sans-serif; color: var(--text); }
|
||||
|
||||
/* CARROUSEL DE THEMES */
|
||||
.carousel-wrap { margin-bottom: 36px; }
|
||||
.carousel-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.nav-btn {
|
||||
width: 38px; height: 38px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.nav-btn:hover { background: var(--amber-light); border-color: var(--amber); }
|
||||
.nav-btn:disabled { opacity: 0.3; cursor: default; }
|
||||
.nav-btn:disabled:hover { background: #fff; border-color: var(--border); }
|
||||
.dots { display: flex; gap: 7px; }
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.15); cursor: pointer; transition: background 0.15s, transform 0.15s; }
|
||||
.dot.active { background: var(--amber); transform: scale(1.3); }
|
||||
|
||||
.theme-panel {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 18px;
|
||||
padding: 26px 28px;
|
||||
min-height: 420px;
|
||||
}
|
||||
.theme-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.theme-icon {
|
||||
width: 44px; height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 22px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.theme-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; }
|
||||
.theme-count { font-size: 12.5px; color: var(--text-muted); margin-left: auto; }
|
||||
|
||||
.cards { display: flex; flex-direction: column; gap: 10px; }
|
||||
.qcard {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.qcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
|
||||
.qcard .badge {
|
||||
width: 22px; height: 22px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.qcard .badge.ok { background: var(--teal-light); color: var(--teal); }
|
||||
.qcard .badge.miss { background: var(--coral-light); color: var(--coral); }
|
||||
.qcard .qtext { flex: 1; }
|
||||
.qcard .qlabel { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
|
||||
.qcard .qanswer { font-size: 13.5px; white-space: pre-wrap; }
|
||||
.qcard .qanswer.empty { color: var(--coral); font-style: italic; }
|
||||
|
||||
.table-wrap {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px 18px;
|
||||
font-size: 13px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
/* TABLEAU ANALYSE DE RISQUES */
|
||||
.risk-table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
.risk-table th {
|
||||
font-family: 'Syne', sans-serif;
|
||||
text-align: left;
|
||||
font-size: 11.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--amber-dark);
|
||||
background: var(--amber-light);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.risk-table th:first-child { border-radius: 8px 0 0 8px; }
|
||||
.risk-table th:last-child { border-radius: 0 8px 8px 0; }
|
||||
.risk-table td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.risk-table tr:last-child td { border-bottom: none; }
|
||||
.meta-line { font-size: 12.5px; color: var(--text-muted); margin-top: 20px; }
|
||||
.meta-line strong { color: var(--text); }
|
||||
</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="wrap">
|
||||
<div id="participantsBanner" style="display:none;"></div>
|
||||
<div class="eyebrow">Certibiocide — Correction de TP</div>
|
||||
<h1>TP Nuisibles — Lecture du rendu</h1>
|
||||
|
||||
<div id="dropzone">
|
||||
<div class="icon">📄</div>
|
||||
<p class="title">Déposez le PDF du stagiaire ici</p>
|
||||
<p class="sub">ou cliquez pour sélectionner le fichier exporté depuis le TP</p>
|
||||
<label class="btn-pick">Choisir un fichier
|
||||
<input type="file" id="filePicker" accept="application/pdf">
|
||||
</label>
|
||||
<div id="status"></div>
|
||||
</div>
|
||||
|
||||
<div id="result">
|
||||
<div class="toprow">
|
||||
<span id="fileName"></span>
|
||||
<button class="btn-reset" onclick="resetAll()">↺ Charger un autre PDF</button>
|
||||
</div>
|
||||
|
||||
<div class="id-card" id="idCard"></div>
|
||||
|
||||
<div class="progress-row">
|
||||
<div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
|
||||
<span><strong id="progressCount"></strong> questions répondues</span>
|
||||
</div>
|
||||
|
||||
<div class="carousel-wrap">
|
||||
<div class="carousel-nav">
|
||||
<button class="nav-btn" id="prevBtn" onclick="goTo(currentTheme - 1)">←</button>
|
||||
<div class="dots" id="dots"></div>
|
||||
<button class="nav-btn" id="nextBtn" onclick="goTo(currentTheme + 1)">→</button>
|
||||
</div>
|
||||
<div id="themePanel"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="syne" style="font-size:16px;font-weight:800;margin-bottom:12px;color:var(--amber-dark);">Analyse de risques</h2>
|
||||
<div class="table-wrap" id="tp3Meta"></div>
|
||||
<div class="table-wrap" id="tp3Table" style="display:none;"></div>
|
||||
<p class="meta-line" id="suiviLine"></p>
|
||||
</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>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
|
||||
<script>
|
||||
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
|
||||
|
||||
// Thèmes regroupant les sections du TP, avec icône et couleur
|
||||
const THEMES = [
|
||||
{
|
||||
title: "Premier contact & diagnostic",
|
||||
icon: "🗣️", color: "purple",
|
||||
items: [
|
||||
"Questions posées au client lors du premier contact",
|
||||
"Conseils donnés en premier lieu",
|
||||
"Actions de prévention menées sur le site",
|
||||
"Éléments observés / preuve de présence du nuisible",
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Solutions envisagées",
|
||||
icon: "🧰", color: "blue",
|
||||
items: [
|
||||
"Solutions alternatives non-biocides",
|
||||
"Solutions biocides mises en place",
|
||||
"Type de produit (TP) et mode de traitement",
|
||||
"Suivi mis en place et durée",
|
||||
"Gestion des déchets",
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Produit & traçabilité",
|
||||
icon: "🧪", color: "teal",
|
||||
items: [
|
||||
"FDS trouvée (éléments principaux)",
|
||||
"Nom du produit et fabricant/fournisseur",
|
||||
"Numéro AMM",
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Sécurité & santé",
|
||||
icon: "🛡️", color: "coral",
|
||||
items: [
|
||||
"Risques pour la santé",
|
||||
"EPI à porter",
|
||||
"Risques environnement / dispersion accidentelle",
|
||||
"DL50 substance(s) active(s)",
|
||||
"Gestes de premiers secours",
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
const ALL_SECTIONS = THEMES.flatMap(t => t.items);
|
||||
|
||||
const COLOR_MAP = {
|
||||
purple: { bg: "var(--purple-light)", fg: "var(--purple)" },
|
||||
blue: { bg: "var(--blue-light)", fg: "var(--blue)" },
|
||||
teal: { bg: "var(--teal-light)", fg: "var(--teal)" },
|
||||
coral: { bg: "var(--coral-light)", fg: "var(--coral)" },
|
||||
};
|
||||
|
||||
function escapeRx(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
|
||||
function escapeHtml(s) {
|
||||
if (!s) return "";
|
||||
return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
||||
}
|
||||
function isEmpty(v) {
|
||||
if (!v) return true;
|
||||
const t = v.trim();
|
||||
return t === "" || /^\(sans réponse\)$/i.test(t);
|
||||
}
|
||||
|
||||
function captureBetween(text, label, nextLabels) {
|
||||
const startRx = new RegExp(escapeRx(label) + "\\s*:?\\s*", "i");
|
||||
const m = startRx.exec(text);
|
||||
if (!m) return "";
|
||||
const from = m.index + m[0].length;
|
||||
let to = text.length;
|
||||
for (const nl of nextLabels) {
|
||||
const endRx = new RegExp(escapeRx(nl), "i");
|
||||
const m2 = endRx.exec(text.slice(from));
|
||||
if (m2 && from + m2.index < to) to = from + m2.index;
|
||||
}
|
||||
return text.slice(from, to).trim();
|
||||
}
|
||||
|
||||
function parsePdfText(raw) {
|
||||
let clean = raw.replace(/\r/g, "").replace(/[ \t]+\n/g, "\n").replace(/\s+/g, " ").trim();
|
||||
// Retire les répétitions d'en-tête de page (ex: "17/06/2026 15:42 Résultats TP — ... about:blank 1/2")
|
||||
clean = clean.replace(/\d{1,2}\/\d{1,2}\/\d{4}\s+\d{1,2}:\d{2}\s+Résultats TP[^]*?about:blank\s*\d\/\d/gi, " ");
|
||||
|
||||
const meta = {
|
||||
nom: captureBetween(clean, "Groupe / Stagiaire", ["Date de session"]),
|
||||
date_session: captureBetween(clean, "Date de session", ["Formateur"]),
|
||||
formateur: captureBetween(clean, "Formateur", ["Cas pratique"]),
|
||||
cas: captureBetween(clean, "Cas pratique", ["Réponses TP1"]),
|
||||
};
|
||||
|
||||
// Sépare "Groupe N" du nom des participants (ex: "Groupe 1 Romain Kevin Valere Greg P")
|
||||
const groupMatch = /^Groupe\s*(\d+)\s*(.*)$/i.exec(meta.nom.trim());
|
||||
if (groupMatch) {
|
||||
meta.groupe = "Groupe " + groupMatch[1];
|
||||
meta.participants = groupMatch[2].trim();
|
||||
} else {
|
||||
meta.groupe = "";
|
||||
meta.participants = meta.nom.trim();
|
||||
}
|
||||
|
||||
const startIdx = clean.search(/Réponses TP1\s*&?\s*TP2/i);
|
||||
const endIdx = clean.search(/TP3\s*[—-]\s*Analyse de risques/i);
|
||||
const block = startIdx >= 0 ? clean.slice(startIdx, endIdx >= 0 ? endIdx : clean.length) : clean;
|
||||
|
||||
const answers = {};
|
||||
for (let i = 0; i < ALL_SECTIONS.length; i++) {
|
||||
const label = ALL_SECTIONS[i];
|
||||
const nextLabel = ALL_SECTIONS[i + 1];
|
||||
answers[label] = captureBetween(block, label, nextLabel ? [nextLabel] : []);
|
||||
}
|
||||
|
||||
const tp3Zone = endIdx >= 0 ? clean.slice(endIdx) : "";
|
||||
const tp3 = {
|
||||
intitule: captureBetween(tp3Zone, "Intitulé", ["Description"]),
|
||||
description: captureBetween(tp3Zone, "Description", ["Lieu"]),
|
||||
lieu: captureBetween(tp3Zone, "Lieu", ["Début prévu le"]),
|
||||
debut: captureBetween(tp3Zone, "Début prévu le", ["Étapes"]),
|
||||
};
|
||||
|
||||
// Tableau de risques : on découpe en s'appuyant sur les intitulés d'étapes connus du TP
|
||||
const KNOWN_STEPS = [
|
||||
"remplir la poudreuse",
|
||||
"sécurisation du site",
|
||||
"application traitements",
|
||||
"rangement du matériel. purger la perche",
|
||||
"retrait du nid",
|
||||
"gestion des déchets. élimination par des filiaires spé.",
|
||||
];
|
||||
let riskRows = [];
|
||||
const tableMatch = /Étapes\s*Risques\s*Mesures de prévention([\s\S]*?)(Réalisée par|$)/i.exec(tp3Zone);
|
||||
if (tableMatch) {
|
||||
let raw = tableMatch[1].trim();
|
||||
if (raw) {
|
||||
// Repère les positions de chaque étape connue dans le texte aplati
|
||||
const positions = [];
|
||||
KNOWN_STEPS.forEach(step => {
|
||||
const idx = raw.toLowerCase().indexOf(step.toLowerCase());
|
||||
if (idx >= 0) positions.push({ step, idx });
|
||||
});
|
||||
positions.sort((a, b) => a.idx - b.idx);
|
||||
|
||||
if (positions.length > 0) {
|
||||
for (let i = 0; i < positions.length; i++) {
|
||||
const from = positions[i].idx + positions[i].step.length;
|
||||
const to = i + 1 < positions.length ? positions[i + 1].idx : raw.length;
|
||||
let rest = raw.slice(from, to).trim();
|
||||
// rest contient "risque... mesure..." -> on coupe sur les mots clés de mesures (gants/masques, barrieres, etc.)
|
||||
const measureRx = /(gants\s*\/\s*masques\s*\/\s*lunettes[^.]*|barrieres\.?\s*epi)/i;
|
||||
const mm = measureRx.exec(rest);
|
||||
let risque = rest, mesure = "";
|
||||
if (mm) {
|
||||
risque = rest.slice(0, mm.index).trim();
|
||||
mesure = rest.slice(mm.index).trim();
|
||||
}
|
||||
risque = risque.replace(/^[\s\-–.]+/, "").trim();
|
||||
riskRows.push({ etape: positions[i].step, risque: risque || "—", mesure: mesure || "—" });
|
||||
}
|
||||
} else {
|
||||
riskRows.push({ etape: raw, risque: "", mesure: "" });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const mReal = clean.match(/Réalisée par\s*:\s*([^—\n]*)/i);
|
||||
const mVerif = clean.match(/Vérifiée par\s*:\s*([^—\n]*)/i);
|
||||
const mMaj = clean.match(/Mise à jour par\s*:\s*([^—\n]*)/i);
|
||||
|
||||
return {
|
||||
meta, answers, tp3, riskRows,
|
||||
suivi: {
|
||||
realise: mReal ? mReal[1].trim() : "",
|
||||
verifie: mVerif ? mVerif[1].trim() : "",
|
||||
maj: mMaj ? mMaj[1].trim() : "",
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let currentThemeData = null;
|
||||
let currentTheme = 0;
|
||||
|
||||
function renderThemePanel() {
|
||||
const theme = THEMES[currentTheme];
|
||||
const data = currentThemeData;
|
||||
const colors = COLOR_MAP[theme.color];
|
||||
const themeAnswered = theme.items.filter(s => !isEmpty(data.answers[s])).length;
|
||||
|
||||
document.getElementById("themePanel").innerHTML = `
|
||||
<div class="theme-panel">
|
||||
<div class="theme-head">
|
||||
<div class="theme-icon" style="background:${colors.bg};color:${colors.fg};">${theme.icon}</div>
|
||||
<div class="theme-title">${theme.title}</div>
|
||||
<div class="theme-count">${themeAnswered}/${theme.items.length}</div>
|
||||
</div>
|
||||
<div class="cards">
|
||||
${theme.items.map(label => {
|
||||
const value = data.answers[label] || "";
|
||||
const empty = isEmpty(value);
|
||||
return `
|
||||
<div class="qcard">
|
||||
<div class="badge ${empty ? 'miss' : 'ok'}">${empty ? '!' : '✓'}</div>
|
||||
<div class="qtext">
|
||||
<div class="qlabel">${escapeHtml(label)}</div>
|
||||
<div class="qanswer ${empty ? 'empty' : ''}">${empty ? 'Sans réponse' : escapeHtml(value)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById("prevBtn").disabled = currentTheme === 0;
|
||||
document.getElementById("nextBtn").disabled = currentTheme === THEMES.length - 1;
|
||||
document.querySelectorAll(".dot").forEach((d, i) => d.classList.toggle("active", i === currentTheme));
|
||||
}
|
||||
|
||||
function goTo(idx) {
|
||||
if (idx < 0 || idx >= THEMES.length) return;
|
||||
currentTheme = idx;
|
||||
renderThemePanel();
|
||||
}
|
||||
|
||||
function renderResult(data) {
|
||||
currentThemeData = data;
|
||||
currentTheme = 0;
|
||||
|
||||
const banner = document.getElementById("participantsBanner");
|
||||
if (data.meta.participants) {
|
||||
banner.style.display = "flex";
|
||||
banner.innerHTML = `
|
||||
<div class="pb-icon">👥</div>
|
||||
<div>
|
||||
<div class="pb-group">${escapeHtml(data.meta.groupe) || "Participants"}</div>
|
||||
<div class="pb-names">${escapeHtml(data.meta.participants)}</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
banner.style.display = "none";
|
||||
}
|
||||
|
||||
document.getElementById("idCard").innerHTML = `
|
||||
<div><div class="label">Groupe / Stagiaire</div><div class="value">${escapeHtml(data.meta.nom) || "—"}</div></div>
|
||||
<div><div class="label">Date de session</div><div class="value">${escapeHtml(data.meta.date_session) || "—"}</div></div>
|
||||
<div><div class="label">Formateur</div><div class="value">${escapeHtml(data.meta.formateur) || "—"}</div></div>
|
||||
<div><div class="label">Cas pratique</div><div class="value">${escapeHtml(data.meta.cas) || "—"}</div></div>
|
||||
`;
|
||||
|
||||
const answeredCount = ALL_SECTIONS.filter(s => !isEmpty(data.answers[s])).length;
|
||||
document.getElementById("progressFill").style.width = (answeredCount / ALL_SECTIONS.length * 100) + "%";
|
||||
document.getElementById("progressCount").textContent = `${answeredCount} / ${ALL_SECTIONS.length}`;
|
||||
|
||||
document.getElementById("dots").innerHTML = THEMES.map((_, i) =>
|
||||
`<div class="dot${i === 0 ? ' active' : ''}" onclick="goTo(${i})"></div>`
|
||||
).join("");
|
||||
|
||||
renderThemePanel();
|
||||
|
||||
document.getElementById("tp3Meta").innerHTML = `
|
||||
<p style="margin-bottom:6px;"><strong>Intitulé :</strong> ${escapeHtml(data.tp3.intitule) || '<em style="color:var(--coral)">—</em>'}</p>
|
||||
<p style="margin-bottom:6px;"><strong>Description :</strong> ${escapeHtml(data.tp3.description) || '<em style="color:var(--coral)">—</em>'}</p>
|
||||
<p style="margin-bottom:6px;"><strong>Lieu :</strong> ${escapeHtml(data.tp3.lieu) || '<em style="color:var(--coral)">—</em>'}</p>
|
||||
<p><strong>Début prévu le :</strong> ${escapeHtml(data.tp3.debut) || '<em style="color:var(--coral)">—</em>'}</p>
|
||||
`;
|
||||
|
||||
const tp3TableEl = document.getElementById("tp3Table");
|
||||
if (data.riskRows && data.riskRows.length > 0) {
|
||||
tp3TableEl.style.display = "block";
|
||||
tp3TableEl.innerHTML = `
|
||||
<table class="risk-table">
|
||||
<thead><tr><th>Étapes</th><th>Risques</th><th>Mesures de prévention</th></tr></thead>
|
||||
<tbody>
|
||||
${data.riskRows.map(r => `
|
||||
<tr>
|
||||
<td>${escapeHtml(r.etape) || "—"}</td>
|
||||
<td>${escapeHtml(r.risque) || "—"}</td>
|
||||
<td>${escapeHtml(r.mesure) || "—"}</td>
|
||||
</tr>
|
||||
`).join("")}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
} else {
|
||||
tp3TableEl.style.display = "none";
|
||||
}
|
||||
|
||||
document.getElementById("suiviLine").innerHTML =
|
||||
`Réalisée par : <strong>${escapeHtml(data.suivi.realise) || "—"}</strong> — Vérifiée par : <strong>${escapeHtml(data.suivi.verifie) || "—"}</strong> — Mise à jour par : <strong>${escapeHtml(data.suivi.maj) || "—"}</strong>`;
|
||||
|
||||
document.getElementById("dropzone").style.display = "none";
|
||||
document.getElementById("result").style.display = "block";
|
||||
}
|
||||
|
||||
async function handleFile(file) {
|
||||
if (!file) return;
|
||||
const statusEl = document.getElementById("status");
|
||||
statusEl.className = "loading";
|
||||
statusEl.textContent = "Lecture du PDF en cours…";
|
||||
document.getElementById("fileName").textContent = file.name;
|
||||
|
||||
try {
|
||||
const arrayBuffer = await file.arrayBuffer();
|
||||
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
|
||||
let fullText = "";
|
||||
for (let p = 1; p <= pdf.numPages; p++) {
|
||||
const page = await pdf.getPage(p);
|
||||
const content = await page.getTextContent();
|
||||
fullText += content.items.map(it => it.str).join(" ") + "\n";
|
||||
}
|
||||
const data = parsePdfText(fullText);
|
||||
renderResult(data);
|
||||
statusEl.textContent = "";
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
statusEl.className = "error";
|
||||
statusEl.textContent = "Impossible de lire ce PDF. Vérifiez qu'il s'agit bien d'un export du TP.";
|
||||
}
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
document.getElementById("result").style.display = "none";
|
||||
document.getElementById("dropzone").style.display = "block";
|
||||
document.getElementById("participantsBanner").style.display = "none";
|
||||
document.getElementById("status").textContent = "";
|
||||
document.getElementById("filePicker").value = "";
|
||||
document.getElementById("tp3Table").style.display = "none";
|
||||
}
|
||||
|
||||
const dropzone = document.getElementById("dropzone");
|
||||
dropzone.addEventListener("dragover", e => { e.preventDefault(); dropzone.classList.add("drag"); });
|
||||
dropzone.addEventListener("dragleave", () => dropzone.classList.remove("drag"));
|
||||
dropzone.addEventListener("drop", e => {
|
||||
e.preventDefault();
|
||||
dropzone.classList.remove("drag");
|
||||
const file = e.dataTransfer.files?.[0];
|
||||
if (file) handleFile(file);
|
||||
});
|
||||
document.getElementById("filePicker").addEventListener("change", e => handleFile(e.target.files?.[0]));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1204
exercices/corriger-exercice.html
Normal file
1204
exercices/corriger-exercice.html
Normal file
File diff suppressed because it is too large
Load Diff
15
index.html
15
index.html
@@ -103,7 +103,7 @@
|
||||
<div class="formation-card">
|
||||
<div class="formation-header">
|
||||
<div class="formation-icon">📋</div>
|
||||
<h3 class="formation-title">FDS & Étiquettes</h3>
|
||||
<h3 class="formation-title">FDS, FT & Étiquettes</h3>
|
||||
<p class="formation-subtitle">Aller plus loin</p>
|
||||
</div>
|
||||
<div class="formation-body">
|
||||
@@ -137,6 +137,19 @@
|
||||
<a href="exercices/memory-pictogrammes/memory.html" class="formation-link">Jouer</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Correction : page unique pour tous les exercices -->
|
||||
<div class="formation-card">
|
||||
<div class="formation-header">
|
||||
<div class="formation-icon">✅</div>
|
||||
<h3 class="formation-title">Corriger un exercice</h3>
|
||||
<p class="formation-subtitle">Correction des rendus</p>
|
||||
</div>
|
||||
<div class="formation-body">
|
||||
<p class="formation-description">Déposez le PDF exporté par un groupe et obtenez la lecture de son rendu. Page unique de correction pour l'ensemble des exercices.</p>
|
||||
<a href="exercices/corriger-exercice.html" class="formation-link">Corriger</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user