Compare commits
12 Commits
090cbc19a2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 0b818414ed | |||
| f027dfcf4c | |||
| 34216a52f9 | |||
| f611bdcd7e | |||
| f7c846c85c | |||
| a74df51201 | |||
| 42650ca351 | |||
| 21a7359057 | |||
| 6bb7985512 | |||
| 8164b03cc4 | |||
| 317f98b711 | |||
| 2a85ced1e6 |
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,5 +1,6 @@
|
||||
|
||||
.DS_Store
|
||||
|
||||
# Contient le mot de passe SQL Server — à éditer uniquement sur bsite.net
|
||||
# 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
|
||||
|
||||
@@ -406,6 +406,15 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.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; }
|
||||
.formateur-btn {
|
||||
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); }
|
||||
.formateur-btn.active { background: var(--amber); border-color: var(--amber); color: #fff; }
|
||||
|
||||
/* DECO */
|
||||
.deco-circle { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; }
|
||||
@@ -492,7 +501,12 @@
|
||||
<div class="identity-fields">
|
||||
<input type="text" id="idGroupe" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off" oninput="clearGroupeWarning()">
|
||||
<input type="date" id="idDate">
|
||||
<input type="text" id="idFormateur" placeholder="Formateur (facultatif)" autocomplete="off">
|
||||
<input type="hidden" id="idFormateur">
|
||||
<div class="formateur-label">Formateur de la session</div>
|
||||
<div class="formateur-row">
|
||||
<button type="button" class="formateur-btn" data-formateur="Nathan" onclick="selectFormateur(this)">Nathan</button>
|
||||
<button type="button" class="formateur-btn" data-formateur="Gauthier" onclick="selectFormateur(this)">Gauthier</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="idWarning" style="display:none;margin-top:8px;font-size:12.5px;color:var(--coral);">⚠ Renseignez le nom du groupe pour continuer.</div>
|
||||
</div>
|
||||
@@ -689,6 +703,12 @@ function clearGroupeWarning() {
|
||||
if (w) w.style.display = 'none';
|
||||
}
|
||||
|
||||
function selectFormateur(btn) {
|
||||
document.querySelectorAll('.formateur-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.getElementById('idFormateur').value = btn.dataset.formateur;
|
||||
}
|
||||
|
||||
function goNext() {
|
||||
const cfg = slideConfig[currentSlide];
|
||||
if (!cfg || cfg.next == null) return;
|
||||
|
||||
@@ -647,21 +647,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
.eti-pop .pop-reg { color: var(--text-muted); }
|
||||
.eti-pop .pop-close { position: absolute; top: 5px; right: 8px; cursor: pointer; color: var(--text-muted); font-size: 16px; line-height: 1; border: none; background: none; padding: 2px; }
|
||||
|
||||
/* Check-list de synthèse (modèle FHER p.15) */
|
||||
.checklist-table {
|
||||
width: 100%; max-width: 780px; border-collapse: collapse;
|
||||
background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
|
||||
font-size: 12.5px; margin: 0.25rem 0 1rem;
|
||||
}
|
||||
.checklist-table th { background: var(--teal-light); color: var(--teal-dark); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--teal-mid); }
|
||||
.checklist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
|
||||
.checklist-table tr:last-child td { border-bottom: none; }
|
||||
.checklist-table td.cl-num { text-align: center; }
|
||||
.cl-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 10px; }
|
||||
.checklist-table strong { color: var(--text); }
|
||||
.cl-check { color: #2e7d32; font-weight: 700; }
|
||||
.cl-cross { color: #c62828; font-weight: 700; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.lbl-cols { grid-template-columns: 1fr; }
|
||||
.lbl-title { font-size: 26px; }
|
||||
@@ -687,20 +672,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ---- SLIDE 7 — récapitulatif : étiquette à gauche, tableau à droite ---- */
|
||||
.recap-layout { display: flex; gap: 20px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1120px; }
|
||||
.recap-layout #recap-stage { flex: 1 1 0; min-width: 0; max-width: 560px; }
|
||||
.recap-layout .checklist-table { flex: 1 1 0; min-width: 0; margin: 0; }
|
||||
.recap-layout.animate #recap-stage { animation: recapSlideLeft 0.5s ease both; }
|
||||
.recap-layout.animate .checklist-table { animation: recapSlideRight 0.5s ease both; }
|
||||
@keyframes recapSlideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
|
||||
@keyframes recapSlideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.recap-layout { flex-direction: column; align-items: center; }
|
||||
.recap-layout #recap-stage { flex: none; max-width: 560px; width: 100%; }
|
||||
.recap-layout .checklist-table { flex: none; width: 100%; max-width: 640px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -843,7 +814,7 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
<p class="slide-intro">L'étiquette est l'interface directe entre le produit et l'utilisateur. Elle communique rapidement les <strong>dangers essentiels</strong>, les <strong>EPI</strong> et les <strong>consignes d'utilisation</strong>.</p>
|
||||
<div class="info-card" style="background:var(--teal-light);color:var(--teal-dark);">
|
||||
<span>🎯</span>
|
||||
<div>Sur une <strong>étiquette réelle</strong> (produit professionnel DÉS'INFECT), <strong>cliquez la zone</strong> qui répond à chaque question : nom commercial, pictogrammes, mention d'avertissement, phrases H, phrases P (EPI, premiers secours, élimination), contenu net et centre antipoison. Chaque clic ouvre la <strong>justification réglementaire</strong> de la zone.</div>
|
||||
<div>Sur une <strong>étiquette réelle</strong> (produit professionnel DÉS'INFECT), <strong>cliquez la zone</strong> qui répond à chaque question : nom commercial, pictogrammes, mention d'avertissement, phrases H, phrases P (EPI, premiers secours, élimination), contenu net et centre antipoison. La <strong>justification réglementaire</strong> de chaque zone est fournie sur la page de correction de l'exercice.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -926,18 +897,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
<div id="etiquette-result" class="result-message"></div>
|
||||
</div>
|
||||
|
||||
<!-- ---- PANNEAU B : synthèse / check-list ---- -->
|
||||
<div id="eti-recap" hidden style="width:100%;display:flex;flex-direction:column;align-items:center;gap:0.75rem;">
|
||||
<div class="section-tag" style="background:var(--teal-light);color:var(--teal-dark);">Check-list d'étiquetage</div>
|
||||
<div class="slide-title">Récapitulatif — l'étiquette annotée</div>
|
||||
<p class="slide-intro">Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la <strong>check-list officielle d'étiquetage des produits biocides</strong> (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.</p>
|
||||
|
||||
<div class="recap-layout" id="recap-layout">
|
||||
<div class="eti-stage" id="recap-stage"></div>
|
||||
<table class="checklist-table" id="checklist-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -996,7 +955,7 @@ const fdsQuestions = [
|
||||
const ftQuestions = [
|
||||
{ id: 1, text: "Quel est le nom du produit et qui est le fabricant ?", answer: "Description" },
|
||||
{ id: 2, text: "Sur quelles matières ce produit est-il compatible ?", answer: "Absent" },
|
||||
{ id: 3, text: "Quel est (sont) le(s) type(s) de ce produit ?", answer: "Propriétés biocides" },
|
||||
{ id: 3, text: "Où se trouve la liste des TP (type de produit) ?", answer: "Propriétés biocides" },
|
||||
{ id: 4, text: "Quels sont les types de conditionnements disponibles ?", answer: "Conditionnements" },
|
||||
{ id: 5, text: "Où retrouver les différents modes d'utilisation de ce produit ?", answer: "Utilisations" }
|
||||
];
|
||||
@@ -1063,16 +1022,13 @@ let etiOrder = []; // ordre aléatoire des questions
|
||||
let etiPos = 0; // question courante
|
||||
let etiAnswers = {}; // { zoneCible : zoneCliquée en 1re tentative } — pour le PDF
|
||||
let etiFirstTry = {}; // { zoneCible : true si trouvée sans erreur }
|
||||
let etiCurError = false; // une erreur a-t-elle eu lieu sur la question courante
|
||||
let etiInit = false; // écouteur de clic posé une seule fois
|
||||
let etiRecapShown = false;// panneau récapitulatif affiché (slide 7)
|
||||
|
||||
function buildEtiquette() {
|
||||
etiOrder = shuffleArray(etiZones.map((_, i) => i));
|
||||
etiPos = 0;
|
||||
etiAnswers = {};
|
||||
etiFirstTry = {};
|
||||
etiCurError = false;
|
||||
|
||||
const card = document.getElementById('labelCard');
|
||||
card.querySelectorAll('.hotspot').forEach(h => h.classList.remove('hs-correct', 'hs-wrong'));
|
||||
@@ -1080,9 +1036,6 @@ function buildEtiquette() {
|
||||
closeEtiPop();
|
||||
const r = document.getElementById('etiquette-result');
|
||||
r.className = 'result-message'; r.innerHTML = '';
|
||||
etiRecapShown = false;
|
||||
document.getElementById('eti-exercise').style.display = 'flex';
|
||||
document.getElementById('eti-recap').style.display = 'none';
|
||||
if (currentSlide === 7) renderBarActions();
|
||||
|
||||
if (!etiInit) {
|
||||
@@ -1110,28 +1063,20 @@ function onEtiClick(e) {
|
||||
if (!hs) return;
|
||||
const clicked = hs.dataset.zone;
|
||||
|
||||
// Exercice terminé : plus d'interaction (les corrections sont dans la correction générale)
|
||||
// Exercice terminé : plus d'interaction (la correction est sur la page de correction).
|
||||
if (etiPos >= etiOrder.length) return;
|
||||
|
||||
marquerModifie();
|
||||
const target = etiZones[etiOrder[etiPos]];
|
||||
if (clicked === target.zone) {
|
||||
hs.classList.remove('hs-wrong');
|
||||
hs.classList.add('hs-correct');
|
||||
if (etiAnswers[target.zone] === undefined) etiAnswers[target.zone] = clicked;
|
||||
etiFirstTry[target.zone] = !etiCurError;
|
||||
|
||||
// La zone cliquée — bonne ou mauvaise — est enregistrée comme réponse, puis on passe
|
||||
// à la question suivante. Aucun retour de justesse n'est affiché ici : la correction
|
||||
// (étiquette annotée + check-list) est présentée sur la page de correction de l'exercice.
|
||||
etiAnswers[target.zone] = clicked;
|
||||
etiFirstTry[target.zone] = (clicked === target.zone);
|
||||
etiPos++;
|
||||
etiCurError = false;
|
||||
renderEtiQuestion();
|
||||
if (etiPos >= etiOrder.length) finishEtiquette();
|
||||
} else {
|
||||
if (etiAnswers[target.zone] === undefined) etiAnswers[target.zone] = clicked; // 1re réponse (erronée) mémorisée
|
||||
etiCurError = true;
|
||||
etiFirstTry[target.zone] = false;
|
||||
hs.classList.remove('hs-wrong'); void hs.offsetWidth; // relance l'animation
|
||||
hs.classList.add('hs-wrong');
|
||||
setTimeout(() => hs.classList.remove('hs-wrong'), 700);
|
||||
}
|
||||
}
|
||||
|
||||
function finishEtiquette() {
|
||||
@@ -1168,70 +1113,6 @@ function closeEtiPop() {
|
||||
|
||||
function resetEtiquette() { buildEtiquette(); }
|
||||
|
||||
/* ---- Synthèse : étiquette annotée + check-list ---- */
|
||||
function showEtiRecap() {
|
||||
closeEtiPop();
|
||||
const stage = document.getElementById('recap-stage');
|
||||
stage.innerHTML = '';
|
||||
|
||||
// Clone de l'étiquette, toutes zones en « correct » + numéros
|
||||
const clone = document.getElementById('labelCard').cloneNode(true);
|
||||
clone.removeAttribute('id');
|
||||
clone.classList.add('recap');
|
||||
clone.querySelectorAll('.hotspot').forEach(h => {
|
||||
h.classList.remove('hs-wrong');
|
||||
h.classList.add('hs-correct');
|
||||
const idx = etiZones.findIndex(z => z.zone === h.dataset.zone);
|
||||
if (idx >= 0) {
|
||||
const num = document.createElement('b');
|
||||
num.className = 'hs-num';
|
||||
num.textContent = idx + 1;
|
||||
h.insertBefore(num, h.firstChild);
|
||||
}
|
||||
});
|
||||
stage.appendChild(clone);
|
||||
|
||||
// Table check-list
|
||||
const tbl = document.getElementById('checklist-table');
|
||||
let rows = '<thead><tr><th style="width:34px;">N°</th><th>Élément d\'étiquetage</th><th>Base réglementaire</th><th style="width:70px;">Statut</th></tr></thead><tbody>';
|
||||
etiZones.forEach((z, i) => {
|
||||
const ok = etiFirstTry[z.zone];
|
||||
const answered = etiAnswers[z.zone] !== undefined;
|
||||
const statut = ok
|
||||
? '<span class="cl-check">✓ trouvé</span>'
|
||||
: (answered ? '<span class="cl-cross">✗ à revoir</span>' : '<span class="cl-cross">—</span>');
|
||||
rows += `<tr>
|
||||
<td class="cl-num"><span class="cl-badge">${i + 1}</span></td>
|
||||
<td><strong>${z.label}</strong></td>
|
||||
<td>${z.reg}</td>
|
||||
<td>${statut}</td>
|
||||
</tr>`;
|
||||
});
|
||||
rows += '</tbody>';
|
||||
tbl.innerHTML = rows;
|
||||
|
||||
document.getElementById('eti-exercise').style.display = 'none';
|
||||
document.getElementById('eti-recap').style.display = 'flex';
|
||||
etiRecapShown = true;
|
||||
renderBarActions();
|
||||
|
||||
// Animation : l'étiquette glisse à gauche, le tableau apparaît à sa droite
|
||||
const rl = document.getElementById('recap-layout');
|
||||
if (rl) { rl.classList.remove('animate'); void rl.offsetWidth; rl.classList.add('animate'); }
|
||||
|
||||
const sa = document.querySelector('#slide-7 .scroll-area');
|
||||
if (sa) sa.scrollTop = 0;
|
||||
}
|
||||
|
||||
function hideEtiRecap() {
|
||||
document.getElementById('eti-recap').style.display = 'none';
|
||||
document.getElementById('eti-exercise').style.display = 'flex';
|
||||
etiRecapShown = false;
|
||||
renderBarActions();
|
||||
const sa = document.querySelector('#slide-7 .scroll-area');
|
||||
if (sa) sa.scrollTop = 0;
|
||||
}
|
||||
|
||||
/* ---- FT : exercice « relier » ---- */
|
||||
const ftConnections = {}; // { qId: valeur de la section reliée }
|
||||
let ftDrag = null; // { qid } pendant un glissement
|
||||
@@ -1685,8 +1566,8 @@ function renderBarActions() {
|
||||
const bar = document.getElementById('barActions');
|
||||
if (!bar) return;
|
||||
bar.innerHTML = '';
|
||||
// Bouton retour intégré au groupe centré (sauf sur le récapitulatif, qui a son propre retour)
|
||||
if (history.length > 0 && !(currentSlide === 7 && etiRecapShown)) {
|
||||
// Bouton retour intégré au groupe centré
|
||||
if (history.length > 0) {
|
||||
barBtn(bar, '← Retour', 'is-secondary', goBack);
|
||||
}
|
||||
switch (currentSlide) {
|
||||
@@ -1713,14 +1594,9 @@ function renderBarActions() {
|
||||
barBtn(bar, 'Répondre aux questions →', 'is-primary', () => goTo(7));
|
||||
break;
|
||||
case 7:
|
||||
if (etiRecapShown) {
|
||||
barBtn(bar, '← Retour à l\'exercice', 'is-secondary', hideEtiRecap);
|
||||
barBtn(bar, 'Voir la synthèse générale →', 'is-primary', () => goTo(8));
|
||||
} else {
|
||||
barBtn(bar, '↺ Recommencer', 'is-secondary', resetEtiquette);
|
||||
barBtn(bar, 'Terminer l\'exercice →', 'is-primary', showEtiRecap,
|
||||
barBtn(bar, 'Terminer l\'exercice →', 'is-primary', () => goTo(8),
|
||||
{ id: 'eti-recap-btn', disabled: etiPos < etiOrder.length });
|
||||
}
|
||||
break;
|
||||
case 8:
|
||||
// Boutons placés sous le tableau comparatif, dans la slide (pas dans la bottom bar)
|
||||
|
||||
@@ -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,52 +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 {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
.id-field label {
|
||||
display: block;
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
.id-field input {
|
||||
width: 100%;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
padding: 12px 16px;
|
||||
border: 1.5px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
color: var(--text);
|
||||
}
|
||||
.id-field input:focus {
|
||||
outline: none;
|
||||
border-color: var(--amber);
|
||||
}
|
||||
/* Carte d'identité encadrée (modèle BioCID) */
|
||||
.id-card {
|
||||
/* IDENTIFICATION SCREEN — carte modèle BioCID / FDS */
|
||||
.identity-card {
|
||||
background: white;
|
||||
border: 0.5px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 20px 22px;
|
||||
border-radius: 14px;
|
||||
padding: 16px 18px;
|
||||
max-width: 460px;
|
||||
width: 100%;
|
||||
margin: 1.25rem auto;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.04);
|
||||
text-align: left;
|
||||
}
|
||||
.id-card .id-form { margin: 0; max-width: none; }
|
||||
.identity-card .identity-title {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--amber-dark);
|
||||
margin-bottom: 10px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.identity-fields { display: flex; flex-direction: column; gap: 8px; }
|
||||
.identity-fields input {
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
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;
|
||||
}
|
||||
.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 {
|
||||
@@ -599,7 +583,7 @@
|
||||
gap: 12px;
|
||||
max-width: 640px;
|
||||
width: 100%;
|
||||
margin: 1.5rem 0;
|
||||
margin: 1.5rem auto;
|
||||
}
|
||||
.final-card {
|
||||
background: white;
|
||||
@@ -631,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;
|
||||
@@ -672,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 -->
|
||||
@@ -691,52 +676,41 @@
|
||||
</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-card">
|
||||
<div class="id-form">
|
||||
<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 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>
|
||||
<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="corriger-exercice.html?exo=tp" 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 class="section-tag" style="background:var(--amber-light);color:var(--amber-dark);">Avant de commencer</div>
|
||||
<div class="slide-title">Certibiocide — Travaux pratiques</div>
|
||||
<p class="slide-intro">Votre mission, si vous l'acceptez : maîtriser l'identification, le traitement et la sécurité face aux nuisibles.</p>
|
||||
<div class="info-card">
|
||||
<span>🎯</span>
|
||||
<div>3 travaux pratiques vous attendent : 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>
|
||||
<button class="btn btn-teal" style="margin-top:1.5rem;" onclick="goTo(2)">Démarrer la mission →</button>
|
||||
</div>
|
||||
|
||||
<!-- ======================== SLIDE 2 — CHOIX DU CAS ======================== -->
|
||||
@@ -776,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 ======================== -->
|
||||
@@ -806,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 ======================== -->
|
||||
@@ -824,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 ======================== -->
|
||||
@@ -865,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>
|
||||
|
||||
@@ -903,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>
|
||||
|
||||
@@ -937,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>
|
||||
|
||||
@@ -962,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 ======================== -->
|
||||
@@ -1003,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>
|
||||
|
||||
@@ -1051,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>
|
||||
|
||||
@@ -1071,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 ======================== -->
|
||||
@@ -1142,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>
|
||||
|
||||
@@ -1175,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="corriger-exercice.html?exo=tp" 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>
|
||||
@@ -1196,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: '💡',
|
||||
@@ -1282,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();
|
||||
@@ -1311,26 +1280,19 @@ 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';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1342,7 +1304,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() {
|
||||
@@ -1412,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 ======================== */
|
||||
|
||||
@@ -319,6 +319,57 @@ h1 {
|
||||
vertical-align: top;
|
||||
}
|
||||
.annex th { background: var(--amber-light); font-family: 'Syne', sans-serif; font-size: 12px; }
|
||||
|
||||
/* ======= Corrigé de référence — étiquette annotée (repris du TD FDS) ======= */
|
||||
.recap-intro { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin: 0 0 16px; }
|
||||
.recap-layout { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
|
||||
.recap-stage { flex: 1 1 320px; min-width: 0; max-width: 560px; }
|
||||
.recap-layout .checklist-table { flex: 1 1 320px; min-width: 0; margin: 0; }
|
||||
|
||||
.label-card {
|
||||
position: relative;
|
||||
width: 100%; max-width: 640px;
|
||||
background: #fff; color: #1a1a18;
|
||||
border: 1px solid #d9d2c4; border-radius: 6px;
|
||||
padding: 16px 18px 0; overflow: hidden;
|
||||
font-family: 'DM Sans', sans-serif; font-size: 10.5px; line-height: 1.42;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.10);
|
||||
}
|
||||
.lbl-top { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #1a1a18; padding-bottom: 6px; margin-bottom: 10px; }
|
||||
.lbl-flag { font-size: 20px; }
|
||||
.lbl-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(24px, 5vw, 40px); letter-spacing: -0.01em; margin: 0; }
|
||||
.lbl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||||
.lbl-h { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
|
||||
.lbl-block { margin-bottom: 9px; }
|
||||
.lbl-small { color: #555; font-size: 9.5px; line-height: 1.6; margin-top: 4px; }
|
||||
.lbl-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; margin-top: 4px; padding: 10px 0; }
|
||||
.lbl-net { display: flex; flex-direction: column; gap: 2px; }
|
||||
.lbl-net span { font-size: 10px; }
|
||||
.lbl-net strong { font-family: 'Syne', sans-serif; font-size: 22px; line-height: 1; }
|
||||
.lbl-barcode { height: 42px; align-self: end; min-width: 90px; background: repeating-linear-gradient(90deg, #1a1a18 0 2px, #fff 2px 4px, #1a1a18 4px 5px, #fff 5px 9px); }
|
||||
.lbl-picto-wrap { display: flex; align-items: center; gap: 8px; }
|
||||
.pictos { display: flex; gap: 6px; align-items: center; }
|
||||
.ghs-img { width: 42px; height: 42px; object-fit: contain; display: block; }
|
||||
.lbl-danger { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 15px; color: #1a1a18; letter-spacing: 0.02em; }
|
||||
.lbl-footer { margin: 6px -18px 0; padding: 8px 18px; background: #2b2b28; color: #e8e2d5; text-align: center; font-size: 9px; line-height: 1.5; }
|
||||
|
||||
.hotspot { position: relative; border-radius: 5px; }
|
||||
span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
|
||||
.hotspot.hs-correct { background: rgba(46,125,50,0.14); outline: 1.5px solid #2e7d32; }
|
||||
.hs-num { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 9px; margin-right: 3px; vertical-align: middle; }
|
||||
|
||||
.checklist-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; font-size: 12.5px; }
|
||||
.checklist-table th { background: var(--teal-light); color: var(--teal); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; padding: 10px 12px; text-align: left; border-bottom: 2px solid var(--teal); }
|
||||
.checklist-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); vertical-align: top; }
|
||||
.checklist-table tr:last-child td { border-bottom: none; }
|
||||
.checklist-table td.cl-num { text-align: center; }
|
||||
.cl-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #2e7d32; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 10px; }
|
||||
.checklist-table strong { color: var(--text); }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.lbl-cols { grid-template-columns: 1fr; }
|
||||
.lbl-title { font-size: 26px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -618,6 +669,109 @@ function fdsExpectedLabel(part, q) {
|
||||
return parts[0] === "absent" ? "Absent de la FDS" : "Rubrique " + parts[0];
|
||||
}
|
||||
|
||||
/* ---- Corrigé de référence : l'étiquette annotée + check-list (repris du TD) ---- */
|
||||
const ETI_ZONES = [
|
||||
{ zone: "z-nom", label: "Nom commercial",
|
||||
reg: "Obligation CLP : le nom commercial doit être identique à celui figurant sur la FDS (Guide FHER, Partie 3 — I.2)." },
|
||||
{ zone: "z-picto", label: "Pictogrammes de danger",
|
||||
reg: "CLP : pictogrammes aux dimensions requises, regroupés avec la mention d'avertissement et les phrases H/P, se détachant nettement du fond (Partie 3 — I.5)." },
|
||||
{ zone: "z-mention", label: "Mention d'avertissement",
|
||||
reg: "CLP : « Danger » ou « Attention », disposée dans l'encart d'étiquetage avec pictogrammes et phrases H/P (Partie 3 — I.5)." },
|
||||
{ zone: "z-h", label: "Mentions de danger (phrases H)",
|
||||
reg: "CLP : les phrases H décrivent la nature du danger ; regroupées dans l'encart d'étiquetage (Partie 3 — I.5)." },
|
||||
{ zone: "z-p-epi", label: "Conseils de prudence — EPI",
|
||||
reg: "CLP : conseils de prudence P (ici P280). Six conseils P au maximum, sauf si la nature et la gravité des dangers l'exigent (CLP Art. 28-3) — Partie 3, I.5." },
|
||||
{ zone: "z-p-secours", label: "Premiers secours (phrases P)",
|
||||
reg: "BPR : indications relatives aux premiers soins (Partie 3 — II.8), traduites par les conseils P 3xx (contact, ingestion, inhalation)." },
|
||||
{ zone: "z-p-elim", label: "Élimination du produit et de l'emballage",
|
||||
reg: "BPR : instructions pour l'élimination en toute sécurité du produit et de son emballage, le cas échéant avec interdiction de le réutiliser (Partie 3 — II.10). Ici P501." },
|
||||
{ zone: "z-net", label: "Contenu net",
|
||||
reg: "Quantité nette de produit contenue dans l'emballage — mention générale du pavé d'information produit." },
|
||||
{ zone: "z-antipoison", label: "Centre antipoison / n° d'urgence",
|
||||
reg: "Coordonnées d'urgence complétant les instructions de premiers soins (Partie 3 — II.8) ; les mélanges dangereux sont déclarés aux centres antipoison (annexe VIII du CLP)." },
|
||||
];
|
||||
|
||||
const ETI_LABEL_CARD = `
|
||||
<div class="label-card recap">
|
||||
<div class="lbl-top">
|
||||
<span class="lbl-flag">🇫🇷</span>
|
||||
<span class="hotspot" data-zone="z-nom"><span class="lbl-title">DÉS'INFECT</span></span>
|
||||
</div>
|
||||
<div class="lbl-cols">
|
||||
<div class="lbl-col">
|
||||
<div class="lbl-block"><div class="lbl-h">Propriétés :</div>Désinfecte et désodorise les sanitaires. Produit strictement destiné à un usage professionnel.</div>
|
||||
<div class="lbl-block"><div class="lbl-h">Mode d'emploi :</div>Concentré à diluer : 5 % pour une activité fongicide, 1 % pour une activité bactéricide. Pulvériser sur les parois, laisser agir 5 à 15 min, rincer à l'eau claire. Type de formulation : concentré soluble (SL). Utilisable en TP2.</div>
|
||||
<div class="lbl-small">UFI : 1234-1234-1234-1234<br>Date de péremption : MM/AAAA<br>N° LOT : 123456</div>
|
||||
</div>
|
||||
<div class="lbl-col">
|
||||
<div class="lbl-block"><div class="lbl-h">Substances actives :</div>Chlorure de didécyldiméthylammonium (N°CAS 7173-51-5) à 75 g/kg ; acide glycolique (CAS 79-14-1) à 35 g/kg.</div>
|
||||
<div class="lbl-block">
|
||||
<div class="lbl-h">Précautions d'emploi :</div>
|
||||
<span>Produit strictement professionnel (FR) — Lire le mode d'emploi ci-joint avant l'emploi. </span>
|
||||
<span class="hotspot" data-zone="z-antipoison">Formule déposée au centre anti-poison de Nancy : 03 83 22 50 50.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-h">H302 Nocif en cas d'ingestion. H314 Provoque de graves brûlures de la peau et des lésions oculaires. H410 Très toxique pour les organismes aquatiques, entraîne des effets néfastes à long terme.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-p-epi">P280 Porter des gants de protection, des vêtements de protection et un équipement de protection du visage.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-p-secours">P301+P330+P331 EN CAS D'INGESTION : rincer la bouche, ne pas faire vomir. P305+P351+P338 EN CAS DE CONTACT AVEC LES YEUX : rincer avec précaution à l'eau pendant plusieurs minutes. P310 Appeler immédiatement un CENTRE ANTIPOISON ou un médecin.</span>
|
||||
<span> </span>
|
||||
<span class="hotspot" data-zone="z-p-elim">P501 Éliminer le contenu / le récipient dans un point de collecte des déchets spéciaux ou dangereux.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbl-bottom">
|
||||
<span class="hotspot" data-zone="z-net">
|
||||
<span class="lbl-net"><span>Volume net :</span><strong>5 L</strong></span>
|
||||
</span>
|
||||
<div class="lbl-barcode" aria-hidden="true"></div>
|
||||
<div class="lbl-picto-wrap">
|
||||
<span class="hotspot" data-zone="z-picto">
|
||||
<span class="pictos">
|
||||
<img class="ghs-img" src="../data/ghs09-environnement.jpg" alt="Pictogramme SGH09 — danger pour le milieu aquatique">
|
||||
<img class="ghs-img" src="../data/ghs05-corrosif.jpg" alt="Pictogramme SGH05 — corrosif">
|
||||
<img class="ghs-img" src="../data/ghs07-nocif.jpg" alt="Pictogramme SGH07 — nocif / irritant">
|
||||
</span>
|
||||
</span>
|
||||
<span class="hotspot" data-zone="z-mention"><span class="lbl-danger">DANGER</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lbl-footer">FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89</div>
|
||||
</div>`;
|
||||
|
||||
// Construit le corrigé de référence : étiquette annotée (zones numérotées) + check-list réglementaire.
|
||||
function buildEtiquetteRecapHtml() {
|
||||
const wrap = document.createElement("div");
|
||||
wrap.innerHTML = ETI_LABEL_CARD;
|
||||
const card = wrap.querySelector(".label-card");
|
||||
card.querySelectorAll(".hotspot").forEach(h => {
|
||||
h.classList.add("hs-correct");
|
||||
const idx = ETI_ZONES.findIndex(z => z.zone === h.dataset.zone);
|
||||
if (idx >= 0) {
|
||||
const num = document.createElement("b");
|
||||
num.className = "hs-num";
|
||||
num.textContent = idx + 1;
|
||||
h.insertBefore(num, h.firstChild);
|
||||
}
|
||||
});
|
||||
|
||||
let rows = '<thead><tr><th style="width:34px;">N°</th><th>Élément d\'étiquetage</th><th>Base réglementaire</th></tr></thead><tbody>';
|
||||
ETI_ZONES.forEach((z, i) => {
|
||||
rows += `<tr>
|
||||
<td class="cl-num"><span class="cl-badge">${i + 1}</span></td>
|
||||
<td><strong>${escapeHtml(z.label)}</strong></td>
|
||||
<td>${escapeHtml(z.reg)}</td>
|
||||
</tr>`;
|
||||
});
|
||||
rows += "</tbody>";
|
||||
|
||||
return `<p class="recap-intro">Les 9 zones réglementaires et leurs bonnes réponses, présentées comme la <strong>check-list officielle d'étiquetage des produits biocides</strong> (Guide FHER, p. 15) — un outil réutilisable en conditions réelles.</p>
|
||||
<div class="recap-layout">
|
||||
<div class="recap-stage">${card.outerHTML}</div>
|
||||
<table class="checklist-table">${rows}</table>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function parseFds(raw) {
|
||||
let clean = flatten(raw);
|
||||
clean = clean.replace(/FDS, FT (&|&) Étiquettes\s*[—–-]\s*Réponses\s*\([^)]*\)/gi, " ").replace(/\s+/g, " ").trim();
|
||||
@@ -644,7 +798,12 @@ function parseFds(raw) {
|
||||
}),
|
||||
}));
|
||||
|
||||
return { title: "FDS, FT & Étiquettes — Correction du rendu", meta, groups, scored: true };
|
||||
const annexes = [{
|
||||
title: "Récapitulatif — l'étiquette annotée (corrigé de référence)",
|
||||
html: buildEtiquetteRecapHtml(),
|
||||
}];
|
||||
|
||||
return { title: "FDS, FT & Étiquettes — Correction du rendu", meta, groups, scored: true, annexes };
|
||||
}
|
||||
|
||||
/* ======================= EXERCICE 3 — TP NUISIBLES ======================= */
|
||||
|
||||
55
exercices/memory-pictogrammes/api/README.md
Normal file
55
exercices/memory-pictogrammes/api/README.md
Normal file
@@ -0,0 +1,55 @@
|
||||
# API du classement Memory (ASP.NET + SQL Server)
|
||||
|
||||
Petit service **ASP.NET (C#) + SQL Server** qui héberge en ligne le
|
||||
**classement partagé** du jeu Memory. Tous les joueurs enregistrent leurs
|
||||
scores au même endroit et voient le même top 10 par mode (facile / normal /
|
||||
difficile).
|
||||
|
||||
> Adapté à l'hébergement **FreeASPHosting.net / bsite.net** (Windows, IIS,
|
||||
> base MSSQL 2016). Le fichier `scores.ashx` est compilé au vol par IIS :
|
||||
> **aucune étape de build**, il suffit de le déposer.
|
||||
|
||||
## Contenu
|
||||
|
||||
| Fichier | Rôle |
|
||||
|---|---|
|
||||
| `scores.ashx` | Point d'entrée de l'API (GET pour lire, POST pour enregistrer). Crée la table automatiquement au premier appel. |
|
||||
| `web.config.example` | Modèle de configuration à copier en `web.config`. |
|
||||
| `web.config` | **À créer sur le serveur** avec le mot de passe SQL Server (clé `MemoryDb`). Non versionné. |
|
||||
| `README.md` | Ce fichier. |
|
||||
|
||||
## Installation sur bsite.net
|
||||
|
||||
1. **Récupérer le mot de passe** de la base dans le panneau
|
||||
*Manage Databases*. La base existe déjà :
|
||||
- Serveur : `sql.bsite.net\MSSQL2016`
|
||||
- Base / utilisateur : `nextgnformation_reponses_exercices`
|
||||
|
||||
2. **Créer `web.config`** à partir du modèle (`cp web.config.example web.config`),
|
||||
puis remplacer `VOTRE_MOT_DE_PASSE` par le mot de passe réel dans la clé
|
||||
`MemoryDb`.
|
||||
|
||||
3. **Déposer le dossier `api/`** via *My Files*, au même endroit que
|
||||
`memory.html` (chemin attendu par le jeu :
|
||||
`exercices/memory-pictogrammes/api/scores.ashx`).
|
||||
|
||||
4. C'est prêt : au premier score enregistré (ou premier appel GET), la table
|
||||
`memory_scores` est créée automatiquement.
|
||||
|
||||
## Vérification rapide
|
||||
|
||||
- Lecture du classement :
|
||||
`GET https://nextgnformation.bsite.net/exercices/memory-pictogrammes/api/scores.ashx?difficulty=all`
|
||||
doit renvoyer `{"ok":true,"scores":[...]}`.
|
||||
|
||||
- Seuls les 10 meilleurs de chaque mode sont conservés : après chaque
|
||||
enregistrement, les scores hors top 10 du mode concerné sont supprimés.
|
||||
|
||||
## Points d'attention
|
||||
|
||||
- **Ne poussez jamais `web.config` avec le vrai mot de passe dans un dépôt
|
||||
public.** Éditez-le directement sur le serveur via *My Files*.
|
||||
- Les statistiques personnelles (« Vos statistiques ») restent stockées
|
||||
localement dans le navigateur de chaque joueur ; seul le classement est en ligne.
|
||||
- Le score étant calculé côté navigateur, l'API valide les types et les bornes
|
||||
mais ne garantit pas l'absence de triche (recalcul serveur possible plus tard).
|
||||
329
exercices/memory-pictogrammes/api/scores.ashx
Normal file
329
exercices/memory-pictogrammes/api/scores.ashx
Normal file
@@ -0,0 +1,329 @@
|
||||
<%@ WebHandler Language="C#" Class="ScoresHandler" %>
|
||||
/*
|
||||
* API du classement Memory (pictogrammes de sécurité) — ASP.NET + SQL Server.
|
||||
*
|
||||
* GET scores.ashx?difficulty=easy|normal|hard|all[&limit=10]
|
||||
* -> renvoie le classement (top N) trié par score décroissant.
|
||||
*
|
||||
* POST scores.ashx (corps JSON)
|
||||
* { playerName, userId, score, moves, timeSeconds, difficulty, isPerfect }
|
||||
* -> enregistre le score, ne conserve que le top N par difficulté,
|
||||
* renvoie { ok, saved, rank, isTop }.
|
||||
*
|
||||
* Seul le top N (défaut 10) de chaque mode est conservé : les scores plus
|
||||
* faibles sont supprimés après chaque insertion.
|
||||
*
|
||||
* Fichier compilé au vol par IIS : il suffit de le déposer, aucune build.
|
||||
* La chaîne de connexion est lue dans web.config (clé "MemoryDb").
|
||||
*/
|
||||
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Data;
|
||||
using System.Data.SqlClient;
|
||||
using System.IO;
|
||||
using System.Text;
|
||||
using System.Web;
|
||||
using System.Web.Configuration;
|
||||
using System.Web.Script.Serialization;
|
||||
|
||||
public class ScoresHandler : IHttpHandler
|
||||
{
|
||||
static readonly string[] Difficulties = { "easy", "normal", "hard" };
|
||||
const int TopN = 10;
|
||||
|
||||
public bool IsReusable { get { return false; } }
|
||||
|
||||
public void ProcessRequest(HttpContext ctx)
|
||||
{
|
||||
ctx.Response.ContentType = "application/json; charset=utf-8";
|
||||
ctx.Response.AddHeader("X-Content-Type-Options", "nosniff");
|
||||
|
||||
var connString = WebConfigurationManager.ConnectionStrings["MemoryDb"] != null
|
||||
? WebConfigurationManager.ConnectionStrings["MemoryDb"].ConnectionString
|
||||
: null;
|
||||
|
||||
if (string.IsNullOrEmpty(connString))
|
||||
{
|
||||
Fail(ctx, 500, "Configuration manquante (connectionString 'MemoryDb' dans web.config).");
|
||||
return;
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
using (var conn = new SqlConnection(connString))
|
||||
{
|
||||
conn.Open();
|
||||
EnsureTable(conn);
|
||||
|
||||
if (ctx.Request.HttpMethod == "GET")
|
||||
{
|
||||
HandleGet(ctx, conn);
|
||||
}
|
||||
else if (ctx.Request.HttpMethod == "POST")
|
||||
{
|
||||
HandlePost(ctx, conn);
|
||||
}
|
||||
else
|
||||
{
|
||||
ctx.Response.StatusCode = 405;
|
||||
ctx.Response.AddHeader("Allow", "GET, POST");
|
||||
Write(ctx, new Dictionary<string, object> {
|
||||
{ "ok", false }, { "error", "Méthode non autorisée." }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (Exception)
|
||||
{
|
||||
Fail(ctx, 500, "Erreur serveur.");
|
||||
}
|
||||
}
|
||||
|
||||
// --- Création de la table si besoin -------------------------------------
|
||||
void EnsureTable(SqlConnection conn)
|
||||
{
|
||||
const string sql =
|
||||
"IF NOT EXISTS (SELECT 1 FROM sys.tables WHERE name = 'memory_scores') " +
|
||||
"CREATE TABLE memory_scores (" +
|
||||
" id INT IDENTITY(1,1) PRIMARY KEY," +
|
||||
" player_name NVARCHAR(40) NOT NULL," +
|
||||
" user_id NVARCHAR(64) NOT NULL," +
|
||||
" score INT NOT NULL," +
|
||||
" moves INT NOT NULL," +
|
||||
" time_seconds INT NOT NULL," +
|
||||
" difficulty NVARCHAR(16) NOT NULL," +
|
||||
" is_perfect BIT NOT NULL DEFAULT 0," +
|
||||
" created_at DATETIME NOT NULL" +
|
||||
");";
|
||||
using (var cmd = new SqlCommand(sql, conn)) { cmd.ExecuteNonQuery(); }
|
||||
}
|
||||
|
||||
// --- GET : renvoie le classement ----------------------------------------
|
||||
void HandleGet(HttpContext ctx, SqlConnection conn)
|
||||
{
|
||||
var difficulty = (ctx.Request.QueryString["difficulty"] ?? "all").Trim();
|
||||
int limit;
|
||||
if (!int.TryParse(ctx.Request.QueryString["limit"], out limit)) limit = TopN;
|
||||
if (limit < 1) limit = 1;
|
||||
if (limit > TopN) limit = TopN;
|
||||
|
||||
var rows = new List<Dictionary<string, object>>();
|
||||
|
||||
if (difficulty == "all")
|
||||
{
|
||||
foreach (var diff in Difficulties)
|
||||
rows.AddRange(FetchTop(conn, diff, TopN));
|
||||
|
||||
rows.Sort(CompareRows);
|
||||
if (rows.Count > limit) rows = rows.GetRange(0, limit);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (Array.IndexOf(Difficulties, difficulty) < 0)
|
||||
{
|
||||
Fail(ctx, 400, "Difficulté inconnue.");
|
||||
return;
|
||||
}
|
||||
rows = FetchTop(conn, difficulty, limit);
|
||||
}
|
||||
|
||||
Write(ctx, new Dictionary<string, object> { { "ok", true }, { "scores", rows } });
|
||||
}
|
||||
|
||||
// --- POST : enregistre un score puis élague au top N --------------------
|
||||
void HandlePost(HttpContext ctx, SqlConnection conn)
|
||||
{
|
||||
string body;
|
||||
using (var reader = new StreamReader(ctx.Request.InputStream, Encoding.UTF8))
|
||||
body = reader.ReadToEnd();
|
||||
|
||||
Dictionary<string, object> data = null;
|
||||
try { data = new JavaScriptSerializer().Deserialize<Dictionary<string, object>>(body); }
|
||||
catch { data = null; }
|
||||
|
||||
if (data == null)
|
||||
{
|
||||
Fail(ctx, 400, "Corps JSON invalide.");
|
||||
return;
|
||||
}
|
||||
|
||||
var difficulty = Str(data, "difficulty");
|
||||
if (Array.IndexOf(Difficulties, difficulty) < 0)
|
||||
{
|
||||
Fail(ctx, 400, "Difficulté inconnue.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Nettoyage / bornage des entrées
|
||||
var playerName = Str(data, "playerName").Trim();
|
||||
playerName = StripControlChars(playerName);
|
||||
if (playerName.Length == 0) playerName = "Anonyme";
|
||||
if (playerName.Length > 40) playerName = playerName.Substring(0, 40);
|
||||
|
||||
var userId = OnlyIdChars(Str(data, "userId"));
|
||||
if (userId.Length > 64) userId = userId.Substring(0, 64);
|
||||
if (userId.Length == 0) userId = "anon";
|
||||
|
||||
int score = Clamp(Int(data, "score"), 0, 100000000);
|
||||
int moves = Clamp(Int(data, "moves"), 0, 100000);
|
||||
int time = Clamp(Int(data, "timeSeconds"), 0, 1000000);
|
||||
int isPerfect = Bool(data, "isPerfect") ? 1 : 0;
|
||||
|
||||
int insertedId;
|
||||
using (var cmd = new SqlCommand(
|
||||
"INSERT INTO memory_scores " +
|
||||
"(player_name, user_id, score, moves, time_seconds, difficulty, is_perfect, created_at) " +
|
||||
"OUTPUT INSERTED.id " +
|
||||
"VALUES (@name, @uid, @score, @moves, @time, @diff, @perfect, GETUTCDATE())", conn))
|
||||
{
|
||||
cmd.Parameters.Add("@name", SqlDbType.NVarChar, 40).Value = playerName;
|
||||
cmd.Parameters.Add("@uid", SqlDbType.NVarChar, 64).Value = userId;
|
||||
cmd.Parameters.Add("@score", SqlDbType.Int).Value = score;
|
||||
cmd.Parameters.Add("@moves", SqlDbType.Int).Value = moves;
|
||||
cmd.Parameters.Add("@time", SqlDbType.Int).Value = time;
|
||||
cmd.Parameters.Add("@diff", SqlDbType.NVarChar, 16).Value = difficulty;
|
||||
cmd.Parameters.Add("@perfect", SqlDbType.Bit).Value = isPerfect;
|
||||
insertedId = (int)cmd.ExecuteScalar();
|
||||
}
|
||||
|
||||
// Ne conserver que le top N pour ce mode
|
||||
using (var cmd = new SqlCommand(
|
||||
"WITH ranked AS (" +
|
||||
" SELECT id, ROW_NUMBER() OVER (" +
|
||||
" PARTITION BY difficulty ORDER BY score DESC, time_seconds ASC, id ASC) AS rn" +
|
||||
" FROM memory_scores WHERE difficulty = @diff" +
|
||||
") DELETE FROM memory_scores WHERE id IN (SELECT id FROM ranked WHERE rn > @topN)", conn))
|
||||
{
|
||||
cmd.Parameters.Add("@diff", SqlDbType.NVarChar, 16).Value = difficulty;
|
||||
cmd.Parameters.Add("@topN", SqlDbType.Int).Value = TopN;
|
||||
cmd.ExecuteNonQuery();
|
||||
}
|
||||
|
||||
// Le score inséré a-t-il survécu à l'élagage ? Quel rang ?
|
||||
var top = FetchTop(conn, difficulty, TopN);
|
||||
int? rank = null;
|
||||
for (int i = 0; i < top.Count; i++)
|
||||
{
|
||||
if ((int)top[i]["id"] == insertedId) { rank = i + 1; break; }
|
||||
}
|
||||
|
||||
Write(ctx, new Dictionary<string, object> {
|
||||
{ "ok", true },
|
||||
{ "saved", true },
|
||||
{ "isTop", rank.HasValue },
|
||||
{ "rank", rank.HasValue ? (object)rank.Value : null }
|
||||
});
|
||||
}
|
||||
|
||||
// --- Accès données -------------------------------------------------------
|
||||
List<Dictionary<string, object>> FetchTop(SqlConnection conn, string difficulty, int limit)
|
||||
{
|
||||
var result = new List<Dictionary<string, object>>();
|
||||
using (var cmd = new SqlCommand(
|
||||
"SELECT TOP (@limit) id, player_name, user_id, score, moves, time_seconds, " +
|
||||
"difficulty, is_perfect, created_at " +
|
||||
"FROM memory_scores WHERE difficulty = @diff " +
|
||||
"ORDER BY score DESC, time_seconds ASC, id ASC", conn))
|
||||
{
|
||||
cmd.Parameters.Add("@limit", SqlDbType.Int).Value = limit;
|
||||
cmd.Parameters.Add("@diff", SqlDbType.NVarChar, 16).Value = difficulty;
|
||||
using (var r = cmd.ExecuteReader())
|
||||
{
|
||||
while (r.Read())
|
||||
{
|
||||
result.Add(new Dictionary<string, object> {
|
||||
{ "id", (int)r["id"] },
|
||||
{ "playerName", r["player_name"].ToString() },
|
||||
{ "userId", r["user_id"].ToString() },
|
||||
{ "score", (int)r["score"] },
|
||||
{ "moves", (int)r["moves"] },
|
||||
{ "timeSeconds", (int)r["time_seconds"] },
|
||||
{ "difficulty", r["difficulty"].ToString() },
|
||||
{ "isPerfect", Convert.ToBoolean(r["is_perfect"]) },
|
||||
{ "date", ((DateTime)r["created_at"]).ToString("yyyy-MM-ddTHH:mm:ss") + "Z" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
int CompareRows(Dictionary<string, object> a, Dictionary<string, object> b)
|
||||
{
|
||||
int sa = (int)a["score"], sb = (int)b["score"];
|
||||
if (sa != sb) return sb - sa;
|
||||
return (int)a["timeSeconds"] - (int)b["timeSeconds"];
|
||||
}
|
||||
|
||||
// --- Sérialisation / helpers --------------------------------------------
|
||||
void Write(HttpContext ctx, object payload)
|
||||
{
|
||||
// On retire la clé "id" (interne) des lignes avant l'envoi.
|
||||
var scrubbed = Scrub(payload);
|
||||
ctx.Response.Write(new JavaScriptSerializer().Serialize(scrubbed));
|
||||
}
|
||||
|
||||
object Scrub(object payload)
|
||||
{
|
||||
var dict = payload as Dictionary<string, object>;
|
||||
if (dict != null && dict.ContainsKey("scores"))
|
||||
{
|
||||
var list = dict["scores"] as List<Dictionary<string, object>>;
|
||||
if (list != null)
|
||||
foreach (var row in list) row.Remove("id");
|
||||
}
|
||||
return payload;
|
||||
}
|
||||
|
||||
void Fail(HttpContext ctx, int status, string message)
|
||||
{
|
||||
ctx.Response.StatusCode = status;
|
||||
ctx.Response.Write(new JavaScriptSerializer().Serialize(
|
||||
new Dictionary<string, object> { { "ok", false }, { "error", message } }));
|
||||
}
|
||||
|
||||
static string Str(Dictionary<string, object> d, string key)
|
||||
{
|
||||
object v; return (d.TryGetValue(key, out v) && v != null) ? v.ToString() : "";
|
||||
}
|
||||
|
||||
static int Int(Dictionary<string, object> d, string key)
|
||||
{
|
||||
object v; int n;
|
||||
if (d.TryGetValue(key, out v) && v != null && int.TryParse(v.ToString(), out n)) return n;
|
||||
return 0;
|
||||
}
|
||||
|
||||
static bool Bool(Dictionary<string, object> d, string key)
|
||||
{
|
||||
object v;
|
||||
if (!d.TryGetValue(key, out v) || v == null) return false;
|
||||
if (v is bool) return (bool)v;
|
||||
var s = v.ToString().ToLowerInvariant();
|
||||
return s == "true" || s == "1";
|
||||
}
|
||||
|
||||
static int Clamp(int value, int min, int max)
|
||||
{
|
||||
if (value < min) return min;
|
||||
if (value > max) return max;
|
||||
return value;
|
||||
}
|
||||
|
||||
static string StripControlChars(string s)
|
||||
{
|
||||
var sb = new StringBuilder(s.Length);
|
||||
foreach (var c in s) if (!char.IsControl(c)) sb.Append(c);
|
||||
return sb.ToString();
|
||||
}
|
||||
|
||||
static string OnlyIdChars(string s)
|
||||
{
|
||||
var sb = new StringBuilder(s.Length);
|
||||
foreach (var c in s)
|
||||
if ((c >= 'A' && c <= 'Z') || (c >= 'a' && c <= 'z') || (c >= '0' && c <= '9') || c == '-')
|
||||
sb.Append(c);
|
||||
return sb.ToString();
|
||||
}
|
||||
}
|
||||
16
exercices/memory-pictogrammes/api/web.config.example
Normal file
16
exercices/memory-pictogrammes/api/web.config.example
Normal file
@@ -0,0 +1,16 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<configuration>
|
||||
<!--
|
||||
MODÈLE de configuration. Sur le serveur bsite.net :
|
||||
1. Copiez ce fichier en « web.config ».
|
||||
2. Renseignez le mot de passe fourni par le panneau « Manage Databases ».
|
||||
|
||||
Le vrai « web.config » n'est PAS versionné (voir .gitignore) afin de ne
|
||||
jamais exposer le mot de passe dans l'historique Git.
|
||||
-->
|
||||
<connectionStrings>
|
||||
<add name="MemoryDb"
|
||||
connectionString="Server=sql.bsite.net\MSSQL2016;Database=nextgnformation_reponses_exercices;User Id=nextgnformation_reponses_exercices;Password=VOTRE_MOT_DE_PASSE;"
|
||||
providerName="System.Data.SqlClient" />
|
||||
</connectionStrings>
|
||||
</configuration>
|
||||
@@ -93,6 +93,13 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ligne du joueur courant dans le classement */
|
||||
.rank-item.is-me {
|
||||
border-left-color: var(--amber-dark);
|
||||
background: linear-gradient(135deg, var(--amber-light), var(--white));
|
||||
box-shadow: 0 2px 8px rgba(186, 117, 23, 0.15);
|
||||
}
|
||||
|
||||
.rank-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,89 +1,113 @@
|
||||
/* ============================================
|
||||
LEADERBOARD & PLAYER STATISTICS
|
||||
============================================
|
||||
Le CLASSEMENT est désormais partagé EN LIGNE : tous les joueurs
|
||||
enregistrent leurs scores via l'API PHP (api/scores.php) et voient le
|
||||
même top 10 par mode de jeu.
|
||||
|
||||
Les STATISTIQUES PERSONNELLES (« Vos statistiques ») restent stockées
|
||||
localement dans le navigateur du joueur, car le serveur ne conserve que
|
||||
le top 10 de chaque mode (et non l'historique complet de chacun).
|
||||
============================================ */
|
||||
|
||||
/**
|
||||
* Manager du classement
|
||||
*/
|
||||
class LeaderboardManager {
|
||||
static KEY_LEADERBOARD = 'nextgn_leaderboard';
|
||||
static MAX_SCORES = 100;
|
||||
// Point d'entrée de l'API (relatif à memory.html) — ASP.NET + SQL Server
|
||||
static API_URL = 'api/scores.ashx';
|
||||
// Historique local des parties du joueur (pour ses stats perso)
|
||||
static KEY_HISTORY = 'nextgn_player_history';
|
||||
static MAX_HISTORY = 500;
|
||||
|
||||
// Cache mémoire du dernier classement récupéré (par difficulté)
|
||||
static _cache = {};
|
||||
|
||||
/**
|
||||
* Ajouter un score au classement
|
||||
* Enregistrer une partie :
|
||||
* - envoie le score au classement en ligne
|
||||
* - conserve la partie dans l'historique local (stats perso)
|
||||
* @returns {Promise<Object>} résultat de l'API ({ ok, isTop, rank } ou { ok:false })
|
||||
*/
|
||||
static addScore(gameData) {
|
||||
const scores = this.getAllScores();
|
||||
|
||||
const newScore = {
|
||||
sessionId: generateUUID(),
|
||||
static async addScore(gameData) {
|
||||
const record = {
|
||||
playerName: getPlayerName(),
|
||||
userId: getUserId(),
|
||||
score: gameData.score,
|
||||
moves: gameData.moves,
|
||||
timeSeconds: gameData.duration,
|
||||
difficulty: gameData.difficulty,
|
||||
date: new Date().toISOString(),
|
||||
isPerfect: gameData.moves === DIFFICULTY_MODES[gameData.difficulty].paires,
|
||||
won: gameData.won !== false
|
||||
won: gameData.won !== false,
|
||||
date: new Date().toISOString()
|
||||
};
|
||||
|
||||
scores.push(newScore);
|
||||
// 1) Historique local (statistiques personnelles)
|
||||
this._recordLocalHistory(record);
|
||||
|
||||
// Limiter à MAX_SCORES (garder les plus récents)
|
||||
if (scores.length > this.MAX_SCORES) {
|
||||
scores.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
scores.splice(this.MAX_SCORES);
|
||||
// 2) Classement en ligne
|
||||
try {
|
||||
const res = await fetch(this.API_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(record)
|
||||
});
|
||||
const data = await res.json();
|
||||
DEBUG.log('Score submitted:', data);
|
||||
return data;
|
||||
} catch (e) {
|
||||
console.error('Leaderboard submit error:', e);
|
||||
return { ok: false, error: 'network' };
|
||||
}
|
||||
|
||||
localStorage.setItem(this.KEY_LEADERBOARD, JSON.stringify(scores));
|
||||
|
||||
DEBUG.log('Score added:', newScore);
|
||||
|
||||
return newScore;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir tous les scores
|
||||
* Ajouter la partie à l'historique local du joueur
|
||||
*/
|
||||
static getAllScores() {
|
||||
static _recordLocalHistory(record) {
|
||||
const history = this._getLocalHistory();
|
||||
history.push(record);
|
||||
if (history.length > this.MAX_HISTORY) {
|
||||
history.splice(0, history.length - this.MAX_HISTORY);
|
||||
}
|
||||
try {
|
||||
const scores = JSON.parse(localStorage.getItem(this.KEY_LEADERBOARD)) || [];
|
||||
return scores;
|
||||
localStorage.setItem(this.KEY_HISTORY, JSON.stringify(history));
|
||||
} catch (e) {
|
||||
console.error('History save error:', e);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Historique local des parties du joueur
|
||||
*/
|
||||
static _getLocalHistory() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(this.KEY_HISTORY)) || [];
|
||||
} catch (e) {
|
||||
console.error('Leaderboard error:', e);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le classement (top X)
|
||||
* Récupérer le classement en ligne (top X) pour un mode donné.
|
||||
* @returns {Promise<Array>}
|
||||
*/
|
||||
static getLeaderboard(difficulty = 'all', limit = 10) {
|
||||
let scores = this.getAllScores();
|
||||
|
||||
// Filtrer par difficulté
|
||||
if (difficulty !== 'all') {
|
||||
scores = scores.filter(s => s.difficulty === difficulty);
|
||||
static async getLeaderboard(difficulty = 'all', limit = 10) {
|
||||
const url = `${this.API_URL}?difficulty=${encodeURIComponent(difficulty)}&limit=${limit}`;
|
||||
const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
|
||||
const data = await res.json();
|
||||
if (!data || data.ok !== true || !Array.isArray(data.scores)) {
|
||||
throw new Error('Réponse invalide du serveur');
|
||||
}
|
||||
|
||||
// Trier par score (décroissant)
|
||||
scores.sort((a, b) => {
|
||||
if (b.score !== a.score) {
|
||||
return b.score - a.score;
|
||||
}
|
||||
// En cas d'égalité, par temps
|
||||
return a.timeSeconds - b.timeSeconds;
|
||||
});
|
||||
|
||||
return scores.slice(0, limit);
|
||||
this._cache[difficulty] = data.scores;
|
||||
return data.scores;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les stats d'un joueur
|
||||
* Statistiques du joueur, calculées à partir de son historique LOCAL.
|
||||
*/
|
||||
static getPlayerStats(userId) {
|
||||
const scores = this.getAllScores().filter(s => s.userId === userId);
|
||||
static getPlayerStats() {
|
||||
const scores = this._getLocalHistory();
|
||||
|
||||
if (scores.length === 0) {
|
||||
return {
|
||||
@@ -116,61 +140,35 @@ class LeaderboardManager {
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir le rang d'un score
|
||||
* Mettre à jour l'affichage du classement (asynchrone).
|
||||
*/
|
||||
static getPlayerRank(userId, difficulty = 'all') {
|
||||
const leaderboard = this.getLeaderboard(difficulty, Infinity);
|
||||
const rank = leaderboard.findIndex(s => s.userId === userId) + 1;
|
||||
return rank > 0 ? rank : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier si c'est un nouveau record personnel
|
||||
*/
|
||||
static isPersonalRecord(userId, newScore) {
|
||||
const stats = this.getPlayerStats(userId);
|
||||
return newScore > stats.bestScore;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les statistiques globales
|
||||
*/
|
||||
static getGlobalStats() {
|
||||
const scores = this.getAllScores();
|
||||
|
||||
if (scores.length === 0) {
|
||||
return {
|
||||
totalGames: 0,
|
||||
totalPlayers: 0,
|
||||
averageScore: 0,
|
||||
highestScore: 0,
|
||||
fastestCompletion: Infinity
|
||||
};
|
||||
}
|
||||
|
||||
const uniquePlayers = new Set(scores.map(s => s.userId));
|
||||
const totalScore = scores.reduce((a, b) => a + b.score, 0);
|
||||
const highestScore = Math.max(...scores.map(s => s.score), 0);
|
||||
const fastestCompletion = Math.min(...scores.map(s => s.timeSeconds), Infinity);
|
||||
|
||||
return {
|
||||
totalGames: scores.length,
|
||||
totalPlayers: uniquePlayers.size,
|
||||
averageScore: Math.round(totalScore / scores.length),
|
||||
highestScore: highestScore,
|
||||
fastestCompletion: fastestCompletion === Infinity ? 0 : fastestCompletion
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour l'affichage du classement
|
||||
*/
|
||||
static updateDisplay(difficulty = 'all') {
|
||||
const leaderboard = this.getLeaderboard(difficulty, 10);
|
||||
static async updateDisplay(difficulty = 'all') {
|
||||
const leaderboardList = document.getElementById('leaderboard-list');
|
||||
|
||||
if (!leaderboardList) return;
|
||||
|
||||
// État de chargement
|
||||
leaderboardList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">⏳</div>
|
||||
<div class="empty-state-text">Chargement du classement…</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let leaderboard;
|
||||
try {
|
||||
leaderboard = await this.getLeaderboard(difficulty, 10);
|
||||
} catch (e) {
|
||||
console.error('Leaderboard load error:', e);
|
||||
leaderboardList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">⚠️</div>
|
||||
<div class="empty-state-text">Classement indisponible</div>
|
||||
<div class="empty-state-hint">Vérifiez votre connexion et réessayez.</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (leaderboard.length === 0) {
|
||||
leaderboardList.innerHTML = `
|
||||
<div class="empty-state">
|
||||
@@ -182,11 +180,15 @@ class LeaderboardManager {
|
||||
return;
|
||||
}
|
||||
|
||||
const myUserId = getUserId();
|
||||
leaderboardList.innerHTML = '';
|
||||
|
||||
leaderboard.forEach((score, index) => {
|
||||
const rankItem = document.createElement('div');
|
||||
rankItem.className = 'rank-item';
|
||||
if (score.userId === myUserId) {
|
||||
rankItem.classList.add('is-me');
|
||||
}
|
||||
|
||||
const rankNumber = this.getRankDisplay(index);
|
||||
const medal = index < 3 ? `class="rank-number medal-${index + 1}"` : 'class="rank-number"';
|
||||
@@ -209,92 +211,49 @@ class LeaderboardManager {
|
||||
leaderboardList.appendChild(rankItem);
|
||||
});
|
||||
|
||||
if (typeof analyticsManager !== 'undefined') {
|
||||
analyticsManager.track('leaderboard_viewed', { filter: difficulty });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mettre à jour les statistiques du joueur
|
||||
* Mettre à jour les statistiques du joueur (locales).
|
||||
*/
|
||||
static updatePlayerStats() {
|
||||
const userId = getUserId();
|
||||
const stats = this.getPlayerStats(userId);
|
||||
const stats = this.getPlayerStats();
|
||||
|
||||
// Remplir les éléments HTML
|
||||
document.getElementById('total-games').textContent = stats.totalGames;
|
||||
document.getElementById('best-score').textContent = formatNumber(stats.bestScore);
|
||||
document.getElementById('best-time').textContent = stats.bestTime === Infinity ? '--' : formatTime(stats.bestTime);
|
||||
document.getElementById('win-rate').textContent = `${stats.winRate}%`;
|
||||
const totalGamesEl = document.getElementById('total-games');
|
||||
const bestScoreEl = document.getElementById('best-score');
|
||||
const bestTimeEl = document.getElementById('best-time');
|
||||
const winRateEl = document.getElementById('win-rate');
|
||||
|
||||
// Ajouter des classes pour animation si valeurs élevées
|
||||
if (stats.bestScore > 5000) {
|
||||
document.getElementById('best-score').parentElement.classList.add('high-value');
|
||||
if (totalGamesEl) totalGamesEl.textContent = stats.totalGames;
|
||||
if (bestScoreEl) bestScoreEl.textContent = formatNumber(stats.bestScore);
|
||||
if (bestTimeEl) bestTimeEl.textContent = stats.bestTime === Infinity || stats.bestTime === 0 ? '--' : formatTime(stats.bestTime);
|
||||
if (winRateEl) winRateEl.textContent = `${stats.winRate}%`;
|
||||
|
||||
if (bestScoreEl && stats.bestScore > 5000) {
|
||||
bestScoreEl.parentElement.classList.add('high-value');
|
||||
}
|
||||
|
||||
if (stats.winRate >= 50) {
|
||||
document.getElementById('win-rate').parentElement.classList.add('high-value');
|
||||
if (winRateEl && stats.winRate >= 50) {
|
||||
winRateEl.parentElement.classList.add('high-value');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Afficher le rang du joueur
|
||||
* Effacer l'historique local du joueur (DEBUG).
|
||||
* N'affecte PAS le classement en ligne partagé.
|
||||
*/
|
||||
static updatePlayerRank(difficulty = 'all') {
|
||||
const userId = getUserId();
|
||||
const rank = this.getPlayerRank(userId, difficulty);
|
||||
|
||||
if (rank) {
|
||||
const rankDisplay = document.getElementById('player-rank');
|
||||
if (rankDisplay) {
|
||||
rankDisplay.textContent = `Vous êtes #{rank}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Afficher les statistiques globales
|
||||
*/
|
||||
static displayGlobalStats() {
|
||||
const globalStats = this.getGlobalStats();
|
||||
DEBUG.log('Global Statistics:', globalStats);
|
||||
|
||||
return globalStats;
|
||||
}
|
||||
|
||||
/**
|
||||
* Nettoyer les scores (DEBUG)
|
||||
*/
|
||||
static clearAll() {
|
||||
if (confirm('Êtes-vous ABSOLUMENT certain de vouloir supprimer TOUS les scores?')) {
|
||||
localStorage.removeItem(this.KEY_LEADERBOARD);
|
||||
this.updateDisplay();
|
||||
static clearLocalHistory() {
|
||||
if (confirm('Effacer VOS statistiques locales ? (le classement en ligne n\'est pas touché)')) {
|
||||
localStorage.removeItem(this.KEY_HISTORY);
|
||||
this.updatePlayerStats();
|
||||
DEBUG.log('✓ Tous les scores ont été supprimés');
|
||||
DEBUG.log('✓ Historique local effacé');
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Exporter les scores en CSV
|
||||
*/
|
||||
static exportCSV() {
|
||||
const scores = this.getAllScores();
|
||||
|
||||
let csv = 'Rang,Joueur,Score,Difficulté,Temps (s),Mouvements,Parfait,Date\n';
|
||||
|
||||
scores.forEach((score, index) => {
|
||||
csv += `${index + 1},"${score.playerName}",${score.score},"${score.difficulty}",${score.timeSeconds},${score.moves},${score.isPerfect ? 'Oui' : 'Non'},"${score.date}"\n`;
|
||||
});
|
||||
|
||||
const blob = new Blob([csv], { type: 'text/csv' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `leaderboard-${new Date().toISOString().slice(0, 10)}.csv`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir l'affichage du rang (numéro ou médaille)
|
||||
*/
|
||||
@@ -313,78 +272,11 @@ class LeaderboardManager {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Statistiques avancées
|
||||
*/
|
||||
class AdvancedStats {
|
||||
/**
|
||||
* Obtenir la distribution des scores par difficulté
|
||||
*/
|
||||
static getDistributionByDifficulty() {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
const distribution = {};
|
||||
|
||||
Object.keys(DIFFICULTY_MODES).forEach(difficulty => {
|
||||
distribution[difficulty] = scores.filter(s => s.difficulty === difficulty).length;
|
||||
});
|
||||
|
||||
return distribution;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la tendance temporelle
|
||||
*/
|
||||
static getTimelineTrend(days = 7) {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
const now = new Date();
|
||||
const timeline = {};
|
||||
|
||||
for (let i = 0; i < days; i++) {
|
||||
const date = new Date(now);
|
||||
date.setDate(date.getDate() - i);
|
||||
const dateStr = date.toISOString().slice(0, 10);
|
||||
timeline[dateStr] = scores.filter(s => s.date.slice(0, 10) === dateStr).length;
|
||||
}
|
||||
|
||||
return timeline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir la moyenne de temps par difficulté
|
||||
*/
|
||||
static getAverageTimeByDifficulty() {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
const averages = {};
|
||||
|
||||
Object.keys(DIFFICULTY_MODES).forEach(difficulty => {
|
||||
const diffScores = scores.filter(s => s.difficulty === difficulty);
|
||||
if (diffScores.length > 0) {
|
||||
const totalTime = diffScores.reduce((a, b) => a + b.timeSeconds, 0);
|
||||
averages[difficulty] = Math.round(totalTime / diffScores.length);
|
||||
}
|
||||
});
|
||||
|
||||
return averages;
|
||||
}
|
||||
|
||||
/**
|
||||
* Taux de réussite global
|
||||
*/
|
||||
static getGlobalSuccessRate() {
|
||||
const scores = LeaderboardManager.getAllScores();
|
||||
if (scores.length === 0) return 0;
|
||||
|
||||
const perfectGames = scores.filter(s => s.isPerfect).length;
|
||||
return Math.round((perfectGames / scores.length) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// INITIALISATION
|
||||
// ============================================
|
||||
|
||||
// Exporter pour utilisation globale
|
||||
window.LeaderboardManager = LeaderboardManager;
|
||||
window.AdvancedStats = AdvancedStats;
|
||||
|
||||
DEBUG.log('Leaderboard Manager initialized');
|
||||
DEBUG.log('Leaderboard Manager initialized (online mode)');
|
||||
|
||||
@@ -347,10 +347,14 @@ class MemoryGameEngine {
|
||||
achievements: achievements.map(a => a.id)
|
||||
});
|
||||
|
||||
// Sauvegarder score
|
||||
// Sauvegarder le score (classement en ligne) puis rafraîchir l'affichage
|
||||
LeaderboardManager.addScore({
|
||||
...gameData,
|
||||
score: finalScore.totalScore
|
||||
}).then(() => {
|
||||
const activeFilter = document.querySelector('.tab-btn.active')?.getAttribute('data-filter') || 'all';
|
||||
LeaderboardManager.updateDisplay(activeFilter);
|
||||
LeaderboardManager.updatePlayerStats();
|
||||
});
|
||||
|
||||
// Afficher modal victoire
|
||||
|
||||
@@ -292,10 +292,10 @@ function getRank(index) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifier si le score est dans le top 10
|
||||
* Vérifier si le score est dans le top 10 (classement en ligne, asynchrone)
|
||||
*/
|
||||
function isTopScore(score, difficulty = 'all') {
|
||||
const scores = LeaderboardManager.getLeaderboard(difficulty, 10);
|
||||
async function isTopScore(score, difficulty = 'all') {
|
||||
const scores = await LeaderboardManager.getLeaderboard(difficulty, 10);
|
||||
return scores.some(s => s.score === score.score && s.userId === score.userId);
|
||||
}
|
||||
|
||||
@@ -318,57 +318,25 @@ function formatDate(isoDate) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Obtenir les statistiques d'un joueur
|
||||
* Obtenir les statistiques locales du joueur
|
||||
*/
|
||||
function getPlayerStatistics(userId) {
|
||||
const scores = LeaderboardManager.getAllScores().filter(s => s.userId === userId);
|
||||
|
||||
if (scores.length === 0) {
|
||||
return {
|
||||
totalGames: 0,
|
||||
bestScore: 0,
|
||||
averageScore: 0,
|
||||
averageTime: 0,
|
||||
bestTime: Infinity,
|
||||
winRate: 0,
|
||||
perfectGames: 0
|
||||
};
|
||||
}
|
||||
|
||||
const bestScore = Math.max(...scores.map(s => s.score), 0);
|
||||
const totalScore = scores.reduce((a, b) => a + b.score, 0);
|
||||
const totalTime = scores.reduce((a, b) => a + b.timeSeconds, 0);
|
||||
const bestTime = Math.min(...scores.map(s => s.timeSeconds), Infinity);
|
||||
const perfectGames = scores.filter(s => s.isPerfect).length;
|
||||
const winRate = (perfectGames / scores.length) * 100;
|
||||
|
||||
return {
|
||||
totalGames: scores.length,
|
||||
bestScore: bestScore,
|
||||
averageScore: Math.round(totalScore / scores.length),
|
||||
averageTime: Math.round(totalTime / scores.length),
|
||||
bestTime: bestTime === Infinity ? 0 : bestTime,
|
||||
winRate: Math.round(winRate),
|
||||
perfectGames: perfectGames
|
||||
};
|
||||
function getPlayerStatistics() {
|
||||
return LeaderboardManager.getPlayerStats();
|
||||
}
|
||||
|
||||
/**
|
||||
* Déboguer : afficher tous les scores en console
|
||||
* Déboguer : afficher l'historique local du joueur en console
|
||||
*/
|
||||
function debugScores() {
|
||||
console.table(LeaderboardManager.getAllScores());
|
||||
console.table(LeaderboardManager._getLocalHistory());
|
||||
}
|
||||
|
||||
/**
|
||||
* Déboguer : nettoyer tous les scores
|
||||
* Déboguer : effacer les statistiques locales du joueur
|
||||
* (le classement en ligne partagé n'est pas affecté)
|
||||
*/
|
||||
function clearAllScores() {
|
||||
if (confirm('Êtes-vous sûr de vouloir supprimer tous les scores?')) {
|
||||
localStorage.removeItem('nextgn_leaderboard');
|
||||
console.log('✓ Tous les scores ont été supprimés');
|
||||
location.reload();
|
||||
}
|
||||
LeaderboardManager.clearLocalHistory();
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
12
index.html
12
index.html
@@ -32,8 +32,8 @@
|
||||
<div class="logo">Gauthier Chombart & Nathan Chauwin</div>
|
||||
<nav>
|
||||
<a href="#formations">Exercices interactifs</a>
|
||||
<a href="#documentation">Documentation</a>
|
||||
<a href="#rapports">Rapports de veille</a>
|
||||
<a href="#documentation" style="display:none;">Documentation</a>
|
||||
<a href="#rapports" style="display:none;">Rapports de veille</a>
|
||||
<a href="#about">À propos</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
@@ -53,8 +53,8 @@
|
||||
|
||||
<div class="cta-group">
|
||||
<a href="#formations" class="btn btn-primary">Suivre les exercices interactifs</a>
|
||||
<a href="#documentation" class="btn btn-secondary">Documentation</a>
|
||||
<a href="#rapports" class="btn btn-secondary">Rapports de veille</a>
|
||||
<a href="#documentation" class="btn btn-secondary" style="display:none;">Documentation</a>
|
||||
<a href="#rapports" class="btn btn-secondary" style="display:none;">Rapports de veille</a>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
@@ -154,7 +154,7 @@
|
||||
</section>
|
||||
|
||||
<!-- DOCUMENTATION TECHNIQUE SECTION -->
|
||||
<section id="documentation" class="documentation-section">
|
||||
<section id="documentation" class="documentation-section" style="display:none;">
|
||||
<div class="section-header">
|
||||
<h2>Documentation technique et biologie des espèces</h2>
|
||||
<p>Accédez à notre base de connaissances : études détaillées, analyses scientifiques et rapports techniques sur les nuisibles, les biocides et les enjeux réglementaires.</p>
|
||||
@@ -191,7 +191,7 @@
|
||||
</section>
|
||||
|
||||
<!-- RAPPORTS DE VEILLE HEBDOMADAIRES -->
|
||||
<section id="rapports" class="rapports-section">
|
||||
<section id="rapports" class="rapports-section" style="display:none;">
|
||||
<div class="section-header">
|
||||
<h2>Rapports de veille hebdomadaires</h2>
|
||||
<p>Suivez chaque semaine l'actualité réglementaire, les opportunités de marché et les tendances du secteur Certibiocide en France et en Europe.</p>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user