@@ -531,7 +601,7 @@ select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px
@@ -644,14 +714,8 @@ function buildRow(qNum, selectId, answerAttr, text, options, badgeStyle) {
}
function generateQuizzes() {
- // FDS — shuffled, 16 rubriques
- const rubriqueOpts = Array.from({ length: 16 }, (_, i) => ({ value: String(i + 1), label: 'Rubrique ' + (i + 1) }));
- rubriqueOpts.push({ value: 'absent', label: 'Absent' });
- const fdsC = document.getElementById('fds-questions');
- fdsC.innerHTML = '';
- shuffleArray(fdsQuestions).forEach((q, i) => {
- fdsC.innerHTML += buildRow(i + 1, 'fds' + q.id, q.answer, q.text, rubriqueOpts, 'background:var(--amber-light);color:var(--amber-dark);');
- });
+ // FDS — glisser-déposer : banques d'étiquettes + cases de dépôt
+ buildFdsDnd();
// FT
const ftOpts = ftOptions.map(o => ({ value: o, label: o }));
@@ -670,6 +734,100 @@ function generateQuizzes() {
etiquetteQuestions.forEach((q, i) => {
etiC.innerHTML += buildRow(i + 1, 'eti' + q.id, q.answer, q.text, etiOpts, 'background:var(--teal-light);color:var(--teal-dark);');
});
+
+ // Bloque la vérification tant que toutes les questions ne sont pas répondues
+ wireVerifyGate('ft-questions', 'ft-verify');
+ wireVerifyGate('etiquette-questions', 'eti-verify');
+}
+
+/* ---- FDS : glisser-déposer ---- */
+function buildFdsDnd() {
+ const tile = (v, l) => `
${l}
`;
+ 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);
+ right += tile('absent', 'Absent');
+ document.getElementById('fds-bank-left').innerHTML = left;
+ document.getElementById('fds-bank-right').innerHTML = right;
+
+ const fdsC = document.getElementById('fds-questions');
+ fdsC.innerHTML = '';
+ shuffleArray(fdsQuestions).forEach((q, i) => {
+ fdsC.innerHTML += `
+
+
Q${i + 1}
+
${q.text}
+
+
`;
+ });
+
+ initFdsDnd();
+}
+
+function initFdsDnd() {
+ const slide = document.getElementById('slide-3');
+ const tiles = slide.querySelectorAll('.dnd-tile');
+ const slots = slide.querySelectorAll('.drop-slot');
+ let armed = null;
+
+ const resetResults = () => {
+ slide.querySelectorAll('.answer-label, .answer-icon').forEach(e => e.remove());
+ slide.querySelectorAll('.drop-slot').forEach(s => s.classList.remove('slot-correct', 'slot-wrong'));
+ const r = document.getElementById('fds-result');
+ r.className = 'result-message'; r.innerHTML = '';
+ };
+ const fill = (slot, v, l) => {
+ slot.dataset.value = v; slot.textContent = l; slot.classList.add('filled');
+ resetResults(); updateFdsGate();
+ };
+ const clear = (slot) => {
+ slot.dataset.value = ''; slot.textContent = ''; slot.classList.remove('filled');
+ resetResults(); updateFdsGate();
+ };
+
+ tiles.forEach(t => {
+ t.addEventListener('dragstart', e => {
+ e.dataTransfer.setData('text/plain', JSON.stringify({ v: t.dataset.value, l: t.dataset.label }));
+ t.classList.add('dragging');
+ });
+ t.addEventListener('dragend', () => t.classList.remove('dragging'));
+ t.addEventListener('click', () => {
+ if (armed === t) { t.classList.remove('armed'); armed = null; return; }
+ if (armed) armed.classList.remove('armed');
+ armed = t; t.classList.add('armed');
+ });
+ });
+
+ slots.forEach(s => {
+ s.addEventListener('dragover', e => { e.preventDefault(); s.classList.add('drag-over'); });
+ s.addEventListener('dragleave', () => s.classList.remove('drag-over'));
+ s.addEventListener('drop', e => {
+ e.preventDefault(); s.classList.remove('drag-over');
+ try { const d = JSON.parse(e.dataTransfer.getData('text/plain')); fill(s, d.v, d.l); } catch (_) {}
+ });
+ s.addEventListener('click', () => {
+ if (armed) { fill(s, armed.dataset.value, armed.dataset.label); armed.classList.remove('armed'); armed = null; }
+ else if (s.classList.contains('filled')) { clear(s); }
+ });
+ });
+
+ updateFdsGate();
+}
+
+function updateFdsGate() {
+ const slots = document.querySelectorAll('#slide-3 .drop-slot');
+ const all = Array.from(slots).every(s => (s.dataset.value || '') !== '');
+ document.getElementById('fds-verify').disabled = !all;
+}
+
+function wireVerifyGate(containerId, btnId) {
+ const container = document.getElementById(containerId);
+ const btn = document.getElementById(btnId);
+ if (!container || !btn) return;
+ const selects = Array.from(container.querySelectorAll('select'));
+ const update = () => { btn.disabled = !selects.every(s => s.value !== ''); };
+ selects.forEach(s => s.addEventListener('change', update));
+ update();
}
/* ======================== VÉRIFICATION ======================== */
@@ -686,7 +844,7 @@ function showInlineResult(selectEl, isCorrect, isUnanswered, correctAnswerText)
const icon = document.createElement('div');
icon.className = 'answer-icon';
icon.textContent = isUnanswered ? '❓' : (isCorrect ? '✅' : '❌');
- selectEl.after(icon);
+ selectEl.before(icon);
}
function showScore(resultDiv, correct, total) {
@@ -709,19 +867,38 @@ function showScore(resultDiv, correct, total) {
function verifyFDS() {
let correct = 0;
fdsQuestions.forEach(q => {
- const select = document.getElementById('fds' + q.id);
- const userAnswer = select.value;
+ const slot = document.getElementById('fds' + q.id);
+ const userAnswer = slot.dataset.value || '';
const expected = q.answer.split(',');
const isCorrect = expected.includes(userAnswer);
const labelText = expected.length > 1
? 'Rubriques ' + expected.join(' et ')
: (expected[0] === 'absent' ? 'Absent' : 'Rubrique ' + expected[0]);
if (isCorrect) correct++;
- showInlineResult(select, isCorrect, userAnswer === '', labelText);
+ showSlotResult(slot, isCorrect, userAnswer === '', labelText);
});
showScore(document.getElementById('fds-result'), correct, fdsQuestions.length);
}
+function showSlotResult(slot, isCorrect, isUnanswered, correctAnswerText) {
+ const row = slot.closest('.answer-row');
+ row.querySelector('.answer-label')?.remove();
+ row.querySelector('.answer-icon')?.remove();
+ slot.classList.remove('slot-correct', 'slot-wrong');
+
+ const label = document.createElement('div');
+ label.className = 'answer-label';
+ label.textContent = correctAnswerText;
+ slot.before(label);
+
+ const icon = document.createElement('div');
+ icon.className = 'answer-icon';
+ icon.textContent = isUnanswered ? '❓' : (isCorrect ? '✅' : '❌');
+ slot.before(icon);
+
+ if (!isUnanswered) slot.classList.add(isCorrect ? 'slot-correct' : 'slot-wrong');
+}
+
function verifyFT() {
let correct = 0;
ftQuestions.forEach(q => {
diff --git a/index.html b/index.html
index 03b8511..cfdf9a5 100644
--- a/index.html
+++ b/index.html
@@ -103,7 +103,7 @@