From 00c2880e61e3ef0a12d73e94db48f9aa7d3f2915 Mon Sep 17 00:00:00 2001 From: "gauthier.chombart" Date: Mon, 1 Jun 2026 13:07:43 +0200 Subject: [PATCH] edit TD FDS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit déplacement affichage des réponses --- exercices/Exo_FDS.html | 162 +++++++++++++++++------------------------ 1 file changed, 68 insertions(+), 94 deletions(-) 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 + '
Détails :
' + details.join('
') + '
'; + showScore(document.getElementById('fds-result'), correct, 16); } function verifyFT() { let correct = 0; - let total = 5; - let details = []; for (let i = 1; i <= 5; i++) { const select = document.getElementById('ft' + i); const userAnswer = select.value; const expectedAnswers = answers.ft[i]; + const isCorrect = expectedAnswers.includes(userAnswer); + const isUnanswered = userAnswer === ''; - if (userAnswer === '') { - details.push(`Q${i} : ❌ Pas de réponse`); - } else if (expectedAnswers.includes(userAnswer)) { - correct++; - details.push(`Q${i} : ✓ Correct`); - } else { - details.push(`Q${i} : ❌ Incorrect (réponse : ${expectedAnswers[0]})`); - } + if (isCorrect) correct++; + showInlineResult(select, isCorrect, isUnanswered, expectedAnswers[0]); } - const resultDiv = document.getElementById('ft-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 + '
Détails :
' + details.join('
') + '
'; + showScore(document.getElementById('ft-result'), correct, 5); } function verifyEtiquette() { let correct = 0; - let total = 10; - let details = []; for (let i = 1; i <= 10; i++) { const select = document.getElementById('eti' + i); const userAnswer = select.value; const expectedAnswers = answers.etiquette[i]; + const isCorrect = expectedAnswers.includes(userAnswer); + const isUnanswered = userAnswer === ''; - if (userAnswer === '') { - details.push(`Q${i} : ❌ Pas de réponse`); - } else if (expectedAnswers.includes(userAnswer)) { - correct++; - details.push(`Q${i} : ✓ Correct`); - } else { - details.push(`Q${i} : ❌ Incorrect (réponse : ${expectedAnswers[0]})`); - } + if (isCorrect) correct++; + showInlineResult(select, isCorrect, isUnanswered, expectedAnswers[0]); } - const resultDiv = document.getElementById('etiquette-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 + '
Détails :
' + details.join('
') + '
'; + showScore(document.getElementById('etiquette-result'), correct, 10); } function switchTab(tabName) {