@@ -717,14 +779,8 @@ function generateQuizzes() {
// FDS — glisser-déposer : banques d'étiquettes + cases de dépôt
buildFdsDnd();
- // FT
- const ftOpts = ftOptions.map(o => ({ value: o, label: o }));
- ftOpts.push({ value: 'absent', label: 'Absent' });
- const ftC = document.getElementById('ft-questions');
- ftC.innerHTML = '';
- ftQuestions.forEach((q, i) => {
- ftC.innerHTML += buildRow(i + 1, 'ft' + q.id, q.answer, q.text, ftOpts, 'background:var(--coral-light);color:var(--coral);');
- });
+ // FT — exercice « relier » (questions à gauche, sections à droite)
+ buildFtMatch();
// Étiquette
const etiOpts = etiquetteOptions.map(o => ({ value: o, label: o }));
@@ -736,10 +792,141 @@ function generateQuizzes() {
});
// Bloque la vérification tant que toutes les questions ne sont pas répondues
- wireVerifyGate('ft-questions', 'ft-verify');
wireVerifyGate('etiquette-questions', 'eti-verify');
}
+/* ---- FT : exercice « relier » ---- */
+const ftConnections = {}; // { qId: valeur de la section reliée }
+let ftDrag = null; // { qid } pendant un glissement
+let ftVerified = false;
+const SVGNS = 'http://www.w3.org/2000/svg';
+const FT_COLORS = { line: '#D85A30', temp: '#993C1D', ok: '#2e7d32', ko: '#c62828' };
+
+function qById(id) { return ftQuestions.find(q => String(q.id) === String(id)); }
+
+function buildFtMatch() {
+ Object.keys(ftConnections).forEach(k => delete ftConnections[k]);
+ ftDrag = null; ftVerified = false;
+
+ const leftC = document.getElementById('ft-left');
+ const rightC = document.getElementById('ft-right');
+ leftC.innerHTML = '';
+ rightC.innerHTML = '';
+
+ ftQuestions.forEach(q => {
+ const item = document.createElement('div');
+ item.className = 'match-item';
+ item.dataset.qid = q.id;
+ item.innerHTML = `
${q.text}`;
+ leftC.appendChild(item);
+ });
+
+ const sections = shuffleArray([...new Set(ftQuestions.map(q => q.answer))]);
+ sections.forEach(sec => {
+ const item = document.createElement('div');
+ item.className = 'match-item';
+ item.dataset.answer = sec;
+ item.innerHTML = `
${sec}`;
+ rightC.appendChild(item);
+ });
+
+ initFtMatch();
+ document.getElementById('ft-svg').innerHTML = '';
+ document.getElementById('ft-verify').disabled = true;
+}
+
+function resetFT() {
+ const r = document.getElementById('ft-result');
+ r.className = 'result-message'; r.innerHTML = '';
+ buildFtMatch();
+}
+
+function ftSvgRect() { return document.getElementById('ft-svg').getBoundingClientRect(); }
+function ftPointerPos(e) { const r = ftSvgRect(); return { x: e.clientX - r.left, y: e.clientY - r.top }; }
+function ftDotCenter(dot) {
+ const r = dot.getBoundingClientRect(); const s = ftSvgRect();
+ return { x: r.left + r.width / 2 - s.left, y: r.top + r.height / 2 - s.top };
+}
+
+function ftDrawLine(svg, a, b, color, dashed) {
+ const line = document.createElementNS(SVGNS, 'line');
+ line.setAttribute('x1', a.x); line.setAttribute('y1', a.y);
+ line.setAttribute('x2', b.x); line.setAttribute('y2', b.y);
+ line.setAttribute('stroke', color);
+ line.setAttribute('stroke-width', '3');
+ line.setAttribute('stroke-linecap', 'round');
+ if (dashed) line.setAttribute('stroke-dasharray', '6 5');
+ svg.appendChild(line);
+}
+
+function drawFtLines(tempEnd) {
+ const svg = document.getElementById('ft-svg');
+ if (!svg) return;
+ svg.innerHTML = '';
+ Object.entries(ftConnections).forEach(([qid, ans]) => {
+ const from = document.querySelector('.match-dot[data-side="left"][data-qid="' + qid + '"]');
+ const to = document.querySelector('.match-dot[data-side="right"][data-answer="' + CSS.escape(ans) + '"]');
+ if (!from || !to) return;
+ const color = ftVerified ? (ans === qById(qid).answer ? FT_COLORS.ok : FT_COLORS.ko) : FT_COLORS.line;
+ ftDrawLine(svg, ftDotCenter(from), ftDotCenter(to), color);
+ });
+ if (ftDrag && tempEnd) {
+ const from = document.querySelector('.match-dot[data-side="left"][data-qid="' + ftDrag.qid + '"]');
+ if (from) ftDrawLine(svg, ftDotCenter(from), tempEnd, FT_COLORS.temp, true);
+ }
+}
+
+function refreshFtState() {
+ ftQuestions.forEach(q => {
+ const dot = document.querySelector('.match-dot[data-side="left"][data-qid="' + q.id + '"]');
+ if (!dot) return;
+ const has = ftConnections[q.id] != null;
+ dot.classList.toggle('filled', has);
+ dot.closest('.match-item').classList.toggle('connected', has);
+ });
+ document.querySelectorAll('.match-dot[data-side="right"]').forEach(dot => {
+ const used = Object.values(ftConnections).includes(dot.dataset.answer);
+ dot.classList.toggle('filled', used);
+ dot.closest('.match-item').classList.toggle('connected', used);
+ });
+ const all = ftQuestions.every(q => ftConnections[q.id] != null);
+ document.getElementById('ft-verify').disabled = !all;
+}
+
+function initFtMatch() {
+ const wrap = document.getElementById('ft-match');
+ wrap.querySelectorAll('.match-dot[data-side="left"]').forEach(dot => {
+ dot.addEventListener('pointerdown', e => {
+ e.preventDefault();
+ const qid = dot.dataset.qid;
+ delete ftConnections[qid]; // repartir d'une question efface son lien
+ ftVerified = false;
+ document.getElementById('ft-result').className = 'result-message';
+ ftDrag = { qid };
+ dot.classList.add('active');
+ refreshFtState();
+ drawFtLines(ftPointerPos(e));
+ });
+ });
+}
+
+// Gestionnaires globaux (le glissement peut sortir de la zone)
+document.addEventListener('pointermove', e => {
+ if (!ftDrag) return;
+ drawFtLines(ftPointerPos(e));
+});
+document.addEventListener('pointerup', e => {
+ if (!ftDrag) return;
+ const target = document.elementFromPoint(e.clientX, e.clientY);
+ const answerDot = target && target.closest('.match-dot[data-side="right"]');
+ if (answerDot) ftConnections[ftDrag.qid] = answerDot.dataset.answer;
+ document.querySelectorAll('.match-dot.active').forEach(d => d.classList.remove('active'));
+ ftDrag = null;
+ refreshFtState();
+ drawFtLines();
+});
+window.addEventListener('resize', () => { if (currentSlide === 5) drawFtLines(); });
+
/* ---- FDS : glisser-déposer ---- */
function buildFdsDnd() {
const tile = (v, l) => `
${l}
`;
@@ -764,6 +951,12 @@ function buildFdsDnd() {
initFdsDnd();
}
+function resetFDS() {
+ const r = document.getElementById('fds-result');
+ r.className = 'result-message'; r.innerHTML = '';
+ buildFdsDnd();
+}
+
function initFdsDnd() {
const slide = document.getElementById('slide-3');
const tiles = slide.querySelectorAll('.dnd-tile');
@@ -900,14 +1093,12 @@ function showSlotResult(slot, isCorrect, isUnanswered, correctAnswerText) {
}
function verifyFT() {
+ ftVerified = true;
let correct = 0;
ftQuestions.forEach(q => {
- const select = document.getElementById('ft' + q.id);
- const userAnswer = select.value;
- const isCorrect = userAnswer === q.answer;
- if (isCorrect) correct++;
- showInlineResult(select, isCorrect, userAnswer === '', q.answer);
+ if (ftConnections[q.id] === q.answer) correct++;
});
+ drawFtLines();
showScore(document.getElementById('ft-result'), correct, ftQuestions.length);
}
@@ -959,10 +1150,11 @@ function exporterPDF() {
let scoreTotal = 0, nbTotal = 0;
- function partHtml(prefix, title, questions, selPrefix, answerLabelFn, expectedLabelFn, correctFn) {
+ function partHtml(prefix, title, questions, selPrefix, answerLabelFn, expectedLabelFn, correctFn, valueFn) {
const rows = questions.map((q, i) => {
- const sel = document.getElementById(selPrefix + q.id);
- const v = sel ? sel.value : '';
+ let v;
+ if (valueFn) { v = valueFn(q); }
+ else { const sel = document.getElementById(selPrefix + q.id); v = sel ? sel.value : ''; }
const ok = correctFn(q, v);
nbTotal++; if (ok) scoreTotal++;
const mark = v === '' ? '❓' : (ok ? '✓' : '✗');
@@ -975,7 +1167,7 @@ function exporterPDF() {
}
const p1 = partHtml('P1', 'Partie 1 — FDS (Fiche de Données de Sécurité)', fdsQuestions, 'fds', fdsAnswerLabel, fdsExpectedLabel, isFdsCorrect);
- const p2 = partHtml('P2', 'Partie 2 — FT (Fiche Technique)', ftQuestions, 'ft', textAnswerLabel, a => a, isTextCorrect);
+ const p2 = partHtml('P2', 'Partie 2 — FT (Fiche Technique)', ftQuestions, 'ft', textAnswerLabel, a => a, isTextCorrect, q => ftConnections[q.id] || '');
const p3 = partHtml('P3', 'Partie 3 — Étiquette', etiquetteQuestions, 'eti', textAnswerLabel, a => a, isTextCorrect);
const w = window.open('', '_blank');