diff --git a/exercices/Exo_FDS.html b/exercices/Exo_FDS.html index 7e21295..c32ebd6 100644 --- a/exercices/Exo_FDS.html +++ b/exercices/Exo_FDS.html @@ -158,6 +158,22 @@ box-shadow: 0 8px 16px rgba(216, 90, 48, 0.1); } + .answer-label { + font-size: 0.82em; + font-weight: 700; + color: var(--coral); + white-space: nowrap; + padding: 4px 10px; + background: var(--coral-light); + border: 1px solid var(--coral-mid); + border-radius: 4px; + } + + .answer-icon { + font-size: 1.3em; + flex-shrink: 0; + } + .question-num { font-family: 'Syne', sans-serif; font-size: 0.9em; @@ -777,134 +793,92 @@ } }; + function showInlineResult(selectEl, isCorrect, isUnanswered, correctAnswerText) { + const row = selectEl.closest('.answer-row'); + row.querySelector('.answer-label')?.remove(); + row.querySelector('.answer-icon')?.remove(); + + const label = document.createElement('div'); + label.className = 'answer-label'; + label.textContent = correctAnswerText; + selectEl.before(label); + + const icon = document.createElement('div'); + icon.className = 'answer-icon'; + icon.textContent = isUnanswered ? '❓' : (isCorrect ? '✅' : '❌'); + selectEl.after(icon); + } + + function showScore(resultDiv, correct, total) { + const percentage = Math.round((correct / total) * 100); + if (percentage === 100) { + resultDiv.className = 'result-message success show'; + resultDiv.innerHTML = `🎉 Excellent ! ${correct}/${total} bonnes réponses (${percentage}%)`; + } else if (percentage >= 80) { + resultDiv.className = 'result-message success show'; + resultDiv.innerHTML = `✓ Très bien ! ${correct}/${total} bonnes réponses (${percentage}%)`; + } else if (percentage >= 60) { + resultDiv.className = 'result-message error show'; + resultDiv.innerHTML = `⚠️ À revoir ${correct}/${total} bonnes réponses (${percentage}%)`; + } else { + resultDiv.className = 'result-message error show'; + resultDiv.innerHTML = `❌ Insuffisant ${correct}/${total} bonnes réponses (${percentage}%)`; + } + } + function verifyFDS() { let correct = 0; - let total = 16; - let detailItems = []; fdsQuestions.forEach((question) => { const select = document.getElementById('fds' + question.id); - const qNum = parseInt(select.getAttribute('data-qnum')); const userAnswer = select.value; const expectedAnswers = question.answer.split(','); + const isCorrect = expectedAnswers.includes(userAnswer); + const isUnanswered = userAnswer === ''; - if (userAnswer === '') { - detailItems.push({ qNum, text: `Q${qNum} : ❌ Pas de réponse` }); - } else if (expectedAnswers.includes(userAnswer)) { - correct++; - detailItems.push({ qNum, text: `Q${qNum} : ✓ Correct` }); - } else { - const expected = expectedAnswers.length > 1 ? - 'Rubriques ' + expectedAnswers.join(' et ') : - (expectedAnswers[0] === 'absent' ? 'Absent' : 'Rubrique ' + expectedAnswers[0]); - detailItems.push({ qNum, text: `Q${qNum} : ❌ Incorrect (réponse : ${expected})` }); - } + const labelText = expectedAnswers.length > 1 + ? 'Rubriques ' + expectedAnswers.join(' et ') + : (expectedAnswers[0] === 'absent' ? 'Absent' : 'Rubrique ' + expectedAnswers[0]); + + if (isCorrect) correct++; + showInlineResult(select, isCorrect, isUnanswered, labelText); }); - detailItems.sort((a, b) => a.qNum - b.qNum); - const details = detailItems.map(item => item.text); - - const resultDiv = document.getElementById('fds-result'); - const percentage = Math.round((correct / total) * 100); - - let message = ''; - if (percentage === 100) { - resultDiv.className = 'result-message success show'; - message = `🎉 Excellent ! Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`; - } else if (percentage >= 80) { - resultDiv.className = 'result-message success show'; - message = `✓ Très bien ! Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`; - } else if (percentage >= 60) { - resultDiv.className = 'result-message error show'; - message = `⚠️ À revoir Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`; - } else { - resultDiv.className = 'result-message error show'; - message = `❌ Insuffisant Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`; - } - - resultDiv.innerHTML = message + '