From a74df512010e0ef689002aec689b41e8574b21fb Mon Sep 17 00:00:00 2001 From: "gauthier.chombart" Date: Tue, 21 Jul 2026 08:16:05 +0200 Subject: [PATCH] Migre la navigation du TP Nuisibles dans la bottom bar Reprend le modele de footer d'Exo_BioCID : tous les boutons d'avancement et d'aide passent dans la barre du bas, pilotes par un slideConfig (bouton suivant, libelle, indice par slide). Supprime les boutons in-slide correspondants, gere la validation du nom de groupe et le deverrouillage du bouton apres choix du cas, et applique le style footer-btn (compteur a gauche, actions centrees). --- exercices/TP_Nuisibles.html | 146 ++++++++++++++++++++++-------------- 1 file changed, 89 insertions(+), 57 deletions(-) diff --git a/exercices/TP_Nuisibles.html b/exercices/TP_Nuisibles.html index 4f3fc19..9eb1d37 100644 --- a/exercices/TP_Nuisibles.html +++ b/exercices/TP_Nuisibles.html @@ -17,7 +17,7 @@ justify-content: center; padding: 2rem; padding-top: calc(70px + 2rem); - padding-bottom: calc(52px + 2rem); + padding-bottom: calc(84px + 2rem); opacity: 0; transition: opacity 0.4s ease; overflow-y: auto; @@ -42,38 +42,54 @@ .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 { @@ -599,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; @@ -642,8 +658,12 @@ @@ -692,8 +712,7 @@
- - Corriger + Corriger un rendu
@@ -734,9 +753,6 @@
Camping
-
- -
@@ -764,7 +780,6 @@ 💡
À tout moment, cliquez sur « Besoin d'aide ? » pour accéder à un indice. Le formateur corrigera à l'oral en fin de séance.
- @@ -782,7 +797,6 @@
2. Intervention
3. Évaluation
- @@ -823,10 +837,6 @@ -
- - -
@@ -861,10 +871,6 @@ -
- - -
@@ -895,10 +901,6 @@
✅ TP 1 terminé ! Préparez-vous à identifier le produit adapté à votre cas sur biocid-anses.fr.
-
- - -
@@ -920,7 +922,6 @@ Ouvrir le site ↗ - @@ -961,10 +962,6 @@ -
- - -
@@ -1009,10 +1006,6 @@
✅ TP 2 terminé ! Passez maintenant à l'analyse de risques complète.
-
- - -
@@ -1029,9 +1022,6 @@
Communication
EPI (dernier recours)
-
- -
@@ -1100,10 +1090,6 @@
✅ TP 3 terminé ! Présentez vos réponses au formateur pour la correction.
-
- - -
@@ -1154,6 +1140,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: '💡', @@ -1240,11 +1242,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(); @@ -1269,7 +1288,20 @@ 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 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) { @@ -1280,7 +1312,7 @@ function selectCase(key, icon, title, desc) { 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() {