Retravaille les exercices FDS/FT/Étiquettes (slides 1, 3, 5, 7)
Slide 1 : blocage de la navigation tant que le nom du stagiaire/groupe n'est pas renseigné, et choix du formateur via boutons Nathan/Gauthier. Slide 3 : étiquettes renommées « Rubrique 1…16 » (au lieu de « R… ») et élargies. Slide 5 : suppression du tag « Partie 2/3 — FT ». Slide 7 : suppression du tag « Partie 3/3 — Étiquette » ; l'encadré de réponse s'affiche à côté de l'étiquette (plus en superposition) ; le récapitulatif fait glisser l'étiquette à gauche et affiche le tableau de réponses à sa droite.
This commit is contained in:
@@ -229,8 +229,8 @@
|
||||
.dnd-bank { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; }
|
||||
.dnd-tile {
|
||||
font-family: 'Syne', sans-serif;
|
||||
font-size: 12px; font-weight: 800;
|
||||
padding: 8px 10px; min-width: 66px; text-align: center;
|
||||
font-size: 12px; font-weight: 800; white-space: nowrap;
|
||||
padding: 8px 12px; min-width: 92px; text-align: center;
|
||||
border-radius: 8px;
|
||||
background: var(--amber-light); color: var(--amber-dark);
|
||||
border: 1px solid var(--amber);
|
||||
@@ -261,7 +261,7 @@
|
||||
.drop-slot.slot-wrong { border-color: #c62828; color: #c62828; }
|
||||
@media (max-width: 900px) {
|
||||
.dnd-layout { grid-template-columns: 1fr; }
|
||||
.dnd-bank { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
|
||||
.dnd-bank { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
|
||||
}
|
||||
/* SLIDE 5 — RELIER (MATCHING) */
|
||||
.match-hint { font-size: 12.5px; color: var(--text-muted); text-align: center; margin: -0.4rem 0 0.1rem; max-width: 640px; line-height: 1.5; }
|
||||
@@ -635,6 +635,60 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
.lbl-cols { grid-template-columns: 1fr; }
|
||||
.lbl-title { font-size: 26px; }
|
||||
}
|
||||
|
||||
/* ---- SLIDE 1 — sélection formateur + garde nom ---- */
|
||||
.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; }
|
||||
.identity-error { color: var(--coral); font-size: 12px; margin-top: 8px; line-height: 1.4; }
|
||||
.identity-error[hidden] { display: none; }
|
||||
|
||||
/* ---- SLIDE 7 — encadré de réponse sur le côté de l'étiquette ---- */
|
||||
#eti-stage {
|
||||
max-width: 980px;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 300px;
|
||||
align-items: start;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
#eti-stage .label-card { grid-column: 1; grid-row: 1; }
|
||||
#eti-stage .eti-pop,
|
||||
#eti-stage .eti-side-hint { grid-column: 2; grid-row: 1; align-self: start; }
|
||||
#eti-stage .eti-pop { position: relative; inset: auto; left: auto; top: auto; max-width: none; width: 100%; }
|
||||
.eti-side-hint {
|
||||
font-size: 12.5px; color: var(--teal-dark); line-height: 1.5;
|
||||
background: var(--teal-light); border: 1px dashed var(--teal-mid);
|
||||
border-radius: 10px; padding: 12px 14px;
|
||||
}
|
||||
.eti-side-hint[hidden] { display: none; }
|
||||
|
||||
/* ---- 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: 820px) {
|
||||
#eti-stage { grid-template-columns: 1fr; max-width: 680px; }
|
||||
#eti-stage .eti-pop,
|
||||
#eti-stage .eti-side-hint { grid-column: 1; grid-row: auto; }
|
||||
#eti-stage .label-card { grid-row: auto; }
|
||||
}
|
||||
@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>
|
||||
@@ -706,12 +760,18 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
<div class="identity-card">
|
||||
<div class="identity-title">👥 Identification du groupe</div>
|
||||
<div class="identity-fields">
|
||||
<input type="text" id="idGroupe" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off">
|
||||
<input type="text" id="idGroupe" placeholder="Nom du groupe / stagiaires (ex : Groupe 3 — Dupont / Martin)" autocomplete="off" oninput="clearGroupeError()">
|
||||
<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>
|
||||
<button class="btn btn-amber" onclick="goTo(2)" style="margin-top:1.5rem;">Commencer la partie 1 →</button>
|
||||
<div class="identity-error" id="idGroupe-error" hidden>⚠️ Renseignez le nom du stagiaire ou du groupe pour continuer.</div>
|
||||
</div>
|
||||
<button class="btn btn-amber" onclick="startPart1()" style="margin-top:1.5rem;">Commencer la partie 1 →</button>
|
||||
</div>
|
||||
|
||||
<!-- ============ SLIDE 2 — FDS INTRO ============ -->
|
||||
@@ -760,7 +820,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
<!-- ============ SLIDE 5 — FT : RELIER ============ -->
|
||||
<div class="slide" id="slide-5">
|
||||
<div class="scroll-area">
|
||||
<div class="section-tag" style="background:var(--coral-light);color:var(--coral);">Partie 2 / 3 — FT</div>
|
||||
<div class="slide-title">Sections de la fiche technique</div>
|
||||
<p class="match-hint">Reliez chaque question à la bonne section : cliquez sur un point à gauche, maintenez, puis glissez jusqu'au point de la section correspondante à droite.</p>
|
||||
<div class="match-wrap" id="ft-match">
|
||||
@@ -796,7 +855,6 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
|
||||
<!-- ---- PANNEAU A : exercice ---- -->
|
||||
<div id="eti-exercise" 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);">Partie 3 / 3 — Étiquette</div>
|
||||
<div class="slide-title">Zones de l'étiquette</div>
|
||||
|
||||
<div class="situation-box">
|
||||
@@ -865,6 +923,8 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
<div class="lbl-footer">FHER — 2, rue de Sèze, 75009 Paris — Tél. 01 23 45 67 89</div>
|
||||
</div>
|
||||
|
||||
<div class="eti-side-hint" id="eti-side-hint">👉 Cliquez une zone de l'étiquette : sa justification réglementaire s'affiche ici, à côté du bidon.</div>
|
||||
|
||||
<div class="eti-pop" id="eti-pop" hidden>
|
||||
<button class="pop-close" onclick="closeEtiPop()" aria-label="Fermer">×</button>
|
||||
<div class="pop-status" id="pop-status"></div>
|
||||
@@ -886,9 +946,10 @@ span.hotspot { display: inline; padding: 0 2px; -webkit-box-decoration-break: cl
|
||||
<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 class="actions-row">
|
||||
<button class="btn btn-outline" onclick="hideEtiRecap()">← Retour à l'exercice</button>
|
||||
@@ -1112,7 +1173,6 @@ function finishEtiquette() {
|
||||
/* Info-bulle réglementaire positionnée près de la zone cliquée */
|
||||
function openEtiPop(hs, kind, clickedZone) {
|
||||
const pop = document.getElementById('eti-pop');
|
||||
const stage = document.getElementById('eti-stage');
|
||||
const z = etiZoneById(clickedZone);
|
||||
|
||||
const statusEl = document.getElementById('pop-status');
|
||||
@@ -1124,23 +1184,17 @@ function openEtiPop(hs, kind, clickedZone) {
|
||||
document.getElementById('pop-title').textContent = z.label;
|
||||
document.getElementById('pop-reg').textContent = z.reg;
|
||||
|
||||
// L'encadré s'affiche dans la colonne latérale, à côté de l'étiquette (plus de superposition).
|
||||
const hint = document.getElementById('eti-side-hint');
|
||||
if (hint) hint.hidden = true;
|
||||
pop.hidden = false;
|
||||
// Positionnement relatif à la scène
|
||||
const sr = stage.getBoundingClientRect();
|
||||
const hr = hs.getBoundingClientRect();
|
||||
const popW = pop.offsetWidth, popH = pop.offsetHeight;
|
||||
let left = hr.left - sr.left + hr.width / 2 - popW / 2;
|
||||
left = Math.max(4, Math.min(left, sr.width - popW - 4));
|
||||
let top = hr.bottom - sr.top + 8;
|
||||
if (top + popH > sr.height) top = hr.top - sr.top - popH - 8; // bascule au-dessus si déborde
|
||||
if (top < 0) top = 4;
|
||||
pop.style.left = left + 'px';
|
||||
pop.style.top = top + 'px';
|
||||
}
|
||||
|
||||
function closeEtiPop() {
|
||||
const pop = document.getElementById('eti-pop');
|
||||
if (pop) pop.hidden = true;
|
||||
const hint = document.getElementById('eti-side-hint');
|
||||
if (hint) hint.hidden = false;
|
||||
}
|
||||
|
||||
function resetEtiquette() { buildEtiquette(); }
|
||||
@@ -1189,6 +1243,11 @@ function showEtiRecap() {
|
||||
|
||||
document.getElementById('eti-exercise').style.display = 'none';
|
||||
document.getElementById('eti-recap').style.display = 'flex';
|
||||
|
||||
// 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;
|
||||
}
|
||||
@@ -1336,8 +1395,8 @@ window.addEventListener('resize', () => { if (currentSlide === 5) drawFtLines();
|
||||
function buildFdsDnd() {
|
||||
const tile = (v, l) => `<div class="dnd-tile" draggable="true" data-value="${v}" data-label="${l}">${l}</div>`;
|
||||
let left = '', right = '';
|
||||
for (let i = 1; i <= 8; i++) left += tile(String(i), 'R' + i);
|
||||
for (let i = 9; i <= 16; i++) right += tile(String(i), 'R' + i);
|
||||
for (let i = 1; i <= 8; i++) left += tile(String(i), 'Rubrique ' + i);
|
||||
for (let i = 9; i <= 16; i++) right += tile(String(i), 'Rubrique ' + i);
|
||||
right += tile('absent', 'Absent');
|
||||
document.getElementById('fds-bank-left').innerHTML = left;
|
||||
document.getElementById('fds-bank-right').innerHTML = right;
|
||||
@@ -1581,6 +1640,28 @@ function exporterPDF() {
|
||||
setTimeout(() => w.print(), 300);
|
||||
}
|
||||
|
||||
/* ======================== SLIDE 1 — IDENTIFICATION ======================== */
|
||||
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 clearGroupeError() {
|
||||
const g = document.getElementById('idGroupe');
|
||||
g.style.borderColor = '';
|
||||
document.getElementById('idGroupe-error').hidden = true;
|
||||
}
|
||||
function startPart1() {
|
||||
const g = document.getElementById('idGroupe');
|
||||
if (!g.value.trim()) {
|
||||
g.style.borderColor = 'var(--coral-mid)';
|
||||
document.getElementById('idGroupe-error').hidden = false;
|
||||
g.focus();
|
||||
return;
|
||||
}
|
||||
goTo(2);
|
||||
}
|
||||
|
||||
/* ======================== NAVIGATION ======================== */
|
||||
function goTo(n) {
|
||||
const cur = document.getElementById('slide-' + currentSlide);
|
||||
|
||||
Reference in New Issue
Block a user