diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..08f9393 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,74 @@ + +body { + background-color: #F8F9FA; + color: #0B2340; + font-family: 'Helvetica Neue', Arial, sans-serif; +} + +h1, h2, h3, h4, h5 { + font-family: Georgia, serif; + color: #0B2340; +} + +.navbar-brand { + font-family: Georgia, serif; + font-weight: bold; +} + +.quiz-card { + background-color: #FFFFFF; + border: 1px solid #dee2e6; + border-radius: 0.5rem; + box-shadow: 0 4px 12px rgba(0,0,0,0.05); +} + +.progress-bar { + background-color: #0B2340; +} + +.btn-answer { + background-color: #FFFFFF; + border: 2px solid #D9C9B6; + color: #0B2340; + border-radius: 0.5rem; + transition: all 0.2s ease-in-out; + width: 100%; + text-align: left; + padding: 1rem; +} + +.btn-answer:hover, .btn-answer:focus { + background-color: #D9C9B6; + color: #0B2340; + border-color: #0B2340; +} + +.btn-answer.correct { + background-color: #d4edda; + border-color: #28a745; + color: #155724; +} + +.btn-answer.incorrect { + background-color: #f8d7da; + border-color: #dc3545; + color: #721c24; +} + +.btn-primary { + background-color: #0B2340; + border-color: #0B2340; + border-radius: 0.5rem; +} + +.btn-primary:hover { + background-color: #1c3a5e; + border-color: #1c3a5e; +} + +.toast-container { + position: fixed; + top: 1rem; + right: 1rem; + z-index: 1055; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..7e5e91a --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,45 @@ + +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 = ` + + `; + toastContainer.innerHTML = toastHTML; + const toastEl = toastContainer.querySelector('.toast'); + const toast = new bootstrap.Toast(toastEl, { delay: 3000 }); + toast.show(); + } +}); diff --git a/index.php b/index.php index 7205f3d..2eec19b 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,85 @@ - - - + + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + BreakTaboo - Quiz sur la Santé Sexuelle + + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + +
+
+
+ +
+ +
+

Progression : Niveau 1

+
+
+
+
+ + +
+

Question 1/10

+

Quelle est la méthode de contraception la plus efficace pour se protéger à la fois d'une grossesse non désirée et des infections sexuellement transmissibles (IST) ?

+
+ + +
+ + + + +
+ + +
+ +
+
+ +
+
+
+ + +
+ + + + + + - + \ No newline at end of file