Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajoute une slide d'introduction à l'exercice 1 de BioCID

Browse Source 
L'exercice 1 s'ouvre désormais sur une slide de présentation calquée
sur celles de l'exercice FDS : cercle décoratif, étiquette de section,
titre avec emoji, texte d'introduction et encadré d'information.

Les slides suivantes sont décalées d'un rang (2 à 6 deviennent 3 à 7),
le compteur passe à 7 étapes et les confettis se déclenchent sur la
nouvelle slide finale. Les questions et leurs champs sont inchangés.
This commit is contained in:
gauthier.chombart
2026-07-20 21:12:56 +02:00
parent 88b075fb88
commit 794ae69fa0
1 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
exercices/Exo_BioCID.html
View File

@@ -498,12 +498,22 @@
</div>
</div>
<!-- ============ SLIDE 2 — EXERCICE 1 ============ -->
<!-- ============ SLIDE 2 — EXERCICE 1 : INTRO ============ -->
<div class="slide" id="slide-2">
<div class="scroll-area">
<div class="deco-circle" style="width:280px;height:280px;background:var(--amber-light);top:-40px;right:-40px;opacity:0.5;"></div>
<div class="section-tag">Exercice 1 / 4 — 5 min</div>
<div class="slide-title">🔎 Recherche par nom de produit</div>
<p class="slide-intro">La recherche par nom est le chemin le plus direct dans BioCID : elle donne accès à la <strong>fiche complète</strong> d'un produit déjà identifié — son <strong>type</strong>, sa <strong>substance active</strong>, son <strong>fabricant</strong> et ses <strong>conditions d'utilisation</strong>.</p>
<div class="info-card">
<span>🎯</span>
<div>Pour chaque question, saisissez votre réponse dans le champ prévu. Vos réponses sont <strong>enregistrées automatiquement</strong> et reprises dans le PDF final.</div>
</div>
</div>
<!-- ============ SLIDE 3 — EXERCICE 1 : QUESTIONS ============ -->
<div class="slide" id="slide-3">
<div class="scroll-area">
<div class="slide-title">Recherche par nom de produit</div>
<p class="slide-intro">Trouvez un produit spécifique et relevez ses caractéristiques principales.</p>
<ul class="questions-list">
<li class="q-item">
<div class="q-head"><span class="q-num">1</span><span>Recherchez un produit connu (ex. « Goliath », « Phobi », « Soricide »). Notez son <strong>type de produit</strong>, sa <strong>substance active</strong> et son <strong>fabricant</strong>.</span></div>
@@ -521,8 +531,8 @@
</div>
</div>
<!-- ============ SLIDE 3 — EXERCICE 2 ============ -->
<div class="slide" id="slide-3">
<!-- ============ SLIDE 4 — EXERCICE 2 ============ -->
<div class="slide" id="slide-4">
<div class="scroll-area">
<div class="section-tag">Exercice 2 / 4 — 5 min</div>
<div class="slide-title">Recherche par type de produit</div>
@@ -540,8 +550,8 @@
</div>
</div>
<!-- ============ SLIDE 4 — EXERCICE 3 ============ -->
<div class="slide" id="slide-4">
<!-- ============ SLIDE 5 — EXERCICE 3 ============ -->
<div class="slide" id="slide-5">
<div class="scroll-area">
<div class="section-tag">Exercice 3 / 4 — 5 min</div>
<div class="slide-title">Recherche par substance active</div>
@@ -559,8 +569,8 @@
</div>
</div>
<!-- ============ SLIDE 5 — EXERCICE 4 (CAS DE SYNTHÈSE) ============ -->
<div class="slide" id="slide-5">
<!-- ============ SLIDE 6 — EXERCICE 4 (CAS DE SYNTHÈSE) ============ -->
<div class="slide" id="slide-6">
<div class="scroll-area">
<div class="section-tag" style="background:var(--coral-light);color:var(--coral);">Exercice 4 / 4 — Cas de synthèse</div>
<div class="slide-title">Mise en situation</div>
@@ -585,8 +595,8 @@
</div>
</div>
<!-- ============ SLIDE 6 — ASTUCES / FIN ============ -->
<div class="slide" id="slide-6">
<!-- ============ SLIDE 7 — ASTUCES / FIN ============ -->
<div class="slide" id="slide-7">
<div class="scroll-area">
<div class="deco-circle" style="width:320px;height:320px;background:var(--amber-light);bottom:-80px;right:-60px;opacity:0.5;"></div>
<div style="text-align:center;">
@@ -613,15 +623,16 @@
<script>
let currentSlide = 0;
let history = [];
const totalSlides = 6;
const totalSlides = 7;
// Configuration des boutons du footer par slide
const slideConfig = {
1: { next: 2, nextLabel: "Commencer l'exercice 1 →" },
2: { hint: 'ex1', next: 3, nextLabel: 'Exercice suivant →' },
3: { hint: 'ex2', next: 4, nextLabel: 'Exercice suivant →' },
4: { hint: 'ex3', next: 5, nextLabel: 'Cas de synthèse →' },
5: { next: 6, nextLabel: "Terminer l'exercice →" }
2: { next: 3, nextLabel: 'Aux questions →' },
3: { hint: 'ex1', next: 4, nextLabel: 'Exercice suivant →' },
4: { hint: 'ex2', next: 5, nextLabel: 'Exercice suivant →' },
5: { hint: 'ex3', next: 6, nextLabel: 'Cas de synthèse →' },
6: { next: 7, nextLabel: "Terminer l'exercice →" }
};
const hints = {
@@ -655,7 +666,7 @@ function goTo(n) {
const sa = next.querySelector('.scroll-area');
if (sa) sa.scrollTop = 0;
updateUI();
if (n === 6) setTimeout(launchConfetti, 200);
if (n === 7) setTimeout(launchConfetti, 200);
}
function goBack() {