edit TD FDS
déplacement affichage des réponses
This commit is contained in:
@@ -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 = `<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() {
|
||||
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 = `<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>';
|
||||
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 = `<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>';
|
||||
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 = `<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>';
|
||||
showScore(document.getElementById('etiquette-result'), correct, 10);
|
||||
}
|
||||
|
||||
function switchTab(tabName) {
|
||||
|
||||
Reference in New Issue
Block a user