Gauthier/Site_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit TD FDS

Browse Source 
déplacement affichage des réponses
This commit is contained in:
gauthier.chombart
2026-06-01 13:07:43 +02:00
parent df3943bde3
commit 00c2880e61
1 changed files with 68 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
exercices/Exo_FDS.html
View File

@@ -158,6 +158,22 @@
box-shadow: 0 8px 16px rgba(216, 90, 48, 0.1); 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 { .question-num {
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: 0.9em; 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 = `<strong>🎉 Excellent !</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 80) {
resultDiv.className = 'result-message success show';
resultDiv.innerHTML = `<strong>✓ Très bien !</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 60) {
resultDiv.className = 'result-message error show';
resultDiv.innerHTML = `<strong>⚠️ À revoir</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
} else {
resultDiv.className = 'result-message error show';
resultDiv.innerHTML = `<strong>❌ Insuffisant</strong> ${correct}/${total} bonnes réponses (${percentage}%)`;
}
}
function verifyFDS() { function verifyFDS() {
let correct = 0; let correct = 0;
let total = 16;
let detailItems = [];
fdsQuestions.forEach((question) => { fdsQuestions.forEach((question) => {
const select = document.getElementById('fds' + question.id); const select = document.getElementById('fds' + question.id);
const qNum = parseInt(select.getAttribute('data-qnum'));
const userAnswer = select.value; const userAnswer = select.value;
const expectedAnswers = question.answer.split(','); const expectedAnswers = question.answer.split(',');
const isCorrect = expectedAnswers.includes(userAnswer);
const isUnanswered = userAnswer === '';
if (userAnswer === '') { const labelText = expectedAnswers.length > 1
detailItems.push({ qNum, text: `Q${qNum} : ❌ Pas de réponse` }); ? 'Rubriques ' + expectedAnswers.join(' et ')
} else if (expectedAnswers.includes(userAnswer)) { : (expectedAnswers[0] === 'absent' ? 'Absent' : 'Rubrique ' + expectedAnswers[0]);
correct++;
detailItems.push({ qNum, text: `Q${qNum} : ✓ Correct` }); if (isCorrect) correct++;
} else { showInlineResult(select, isCorrect, isUnanswered, labelText);
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})` });
}
}); });
detailItems.sort((a, b) => a.qNum - b.qNum); showScore(document.getElementById('fds-result'), correct, 16);
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 = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 80) {
resultDiv.className = 'result-message success show';
message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 60) {
resultDiv.className = 'result-message error show';
message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else {
resultDiv.className = 'result-message error show';
message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
}
resultDiv.innerHTML = message + '<div class="answer-detail"><strong>Détails :</strong><br>' + details.join('<br>') + '</div>';
} }
function verifyFT() { function verifyFT() {
let correct = 0; let correct = 0;
let total = 5;
let details = [];
for (let i = 1; i <= 5; i++) { for (let i = 1; i <= 5; i++) {
const select = document.getElementById('ft' + i); const select = document.getElementById('ft' + i);
const userAnswer = select.value; const userAnswer = select.value;
const expectedAnswers = answers.ft[i]; const expectedAnswers = answers.ft[i];
const isCorrect = expectedAnswers.includes(userAnswer);
const isUnanswered = userAnswer === '';
if (userAnswer === '') { if (isCorrect) correct++;
details.push(`Q${i} : ❌ Pas de réponse`); showInlineResult(select, isCorrect, isUnanswered, expectedAnswers[0]);
} else if (expectedAnswers.includes(userAnswer)) {
correct++;
details.push(`Q${i} : ✓ Correct`);
} else {
details.push(`Q${i} : ❌ Incorrect (réponse : ${expectedAnswers[0]})`);
}
} }
const resultDiv = document.getElementById('ft-result'); showScore(document.getElementById('ft-result'), correct, 5);
const percentage = Math.round((correct / total) * 100);
let message = '';
if (percentage === 100) {
resultDiv.className = 'result-message success show';
message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 80) {
resultDiv.className = 'result-message success show';
message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 60) {
resultDiv.className = 'result-message error show';
message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else {
resultDiv.className = 'result-message error show';
message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
}
resultDiv.innerHTML = message + '<div class="answer-detail"><strong>Détails :</strong><br>' + details.join('<br>') + '</div>';
} }
function verifyEtiquette() { function verifyEtiquette() {
let correct = 0; let correct = 0;
let total = 10;
let details = [];
for (let i = 1; i <= 10; i++) { for (let i = 1; i <= 10; i++) {
const select = document.getElementById('eti' + i); const select = document.getElementById('eti' + i);
const userAnswer = select.value; const userAnswer = select.value;
const expectedAnswers = answers.etiquette[i]; const expectedAnswers = answers.etiquette[i];
const isCorrect = expectedAnswers.includes(userAnswer);
const isUnanswered = userAnswer === '';
if (userAnswer === '') { if (isCorrect) correct++;
details.push(`Q${i} : ❌ Pas de réponse`); showInlineResult(select, isCorrect, isUnanswered, expectedAnswers[0]);
} else if (expectedAnswers.includes(userAnswer)) {
correct++;
details.push(`Q${i} : ✓ Correct`);
} else {
details.push(`Q${i} : ❌ Incorrect (réponse : ${expectedAnswers[0]})`);
}
} }
const resultDiv = document.getElementById('etiquette-result'); showScore(document.getElementById('etiquette-result'), correct, 10);
const percentage = Math.round((correct / total) * 100);
let message = '';
if (percentage === 100) {
resultDiv.className = 'result-message success show';
message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 80) {
resultDiv.className = 'result-message success show';
message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else if (percentage >= 60) {
resultDiv.className = 'result-message error show';
message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
} else {
resultDiv.className = 'result-message error show';
message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
}
resultDiv.innerHTML = message + '<div class="answer-detail"><strong>Détails :</strong><br>' + details.join('<br>') + '</div>';
} }
function switchTab(tabName) { function switchTab(tabName) {