46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const correct_answer_index = 2; // The 3rd answer is correct
|
|
const answerButtons = document.querySelectorAll('.btn-answer');
|
|
const nextButton = document.getElementById('next-question-btn');
|
|
const toastContainer = document.getElementById('toast-container');
|
|
|
|
answerButtons.forEach((button, index) => {
|
|
button.addEventListener('click', () => {
|
|
// Disable all buttons
|
|
answerButtons.forEach(btn => btn.disabled = true);
|
|
|
|
let is_correct = (index === correct_answer_index);
|
|
|
|
if (is_correct) {
|
|
button.classList.add('correct');
|
|
showToast('Bonne réponse !', 'success');
|
|
} else {
|
|
button.classList.add('incorrect');
|
|
answerButtons[correct_answer_index].classList.add('correct');
|
|
showToast('Réponse incorrecte.', 'danger');
|
|
}
|
|
|
|
// Show the next question button
|
|
nextButton.classList.remove('d-none');
|
|
});
|
|
});
|
|
|
|
function showToast(message, type) {
|
|
const toastHTML = `
|
|
<div class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
${message}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
toastContainer.innerHTML = toastHTML;
|
|
const toastEl = toastContainer.querySelector('.toast');
|
|
const toast = new bootstrap.Toast(toastEl, { delay: 3000 });
|
|
toast.show();
|
|
}
|
|
});
|