Update templates/index.html

templates/index.html

@@ -7,8 +7,7 @@
     <!-- Inclusion de Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Styles personnalisés additionnels si nécessaire (peuvent être évités avec Tailwind) */
-        /* Par exemple, pour la transition de la flashcard si non couverte par Tailwind */
+        /* Styles personnalisés additionnels si nécessaire */
         .flashcard-transform {
             transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
         }
@@ -91,7 +90,7 @@
             loadingIndicator.classList.remove('hidden');
             flashcardsContainer.innerHTML = '';
             quizContainer.innerHTML = '';
-            flashcardsContainer.classList.add('hidden'); // Cacher explicitement les conteneurs
+            flashcardsContainer.classList.add('hidden');
             quizContainer.classList.add('hidden');
 
             // Envoi de la requête
@@ -109,7 +108,7 @@
                 return response.json();
             })
             .then(data => {
-                loadingIndicator.classList.add('hidden'); // Masquer le chargement
+                loadingIndicator.classList.add('hidden');
 
                 if (data.error) {
                     alert('Erreur: ' + data.error);
@@ -148,7 +147,7 @@
             flashcards.forEach((card, index) => {
                 const cardElement = document.createElement('div');
                 cardElement.className = 'bg-white rounded-lg shadow p-4 cursor-pointer flashcard-transform hover:shadow-lg';
-                cardElement.setAttribute('onclick', `toggleAnswer(${index})`); // Utilisation directe d'onclick pour simplicité ici
+                cardElement.setAttribute('onclick', `toggleAnswer(${index})`);
                 cardElement.innerHTML = `
                     <div class="font-semibold text-gray-800">${card.question}</div>
                     <div id="answer-${index}" class="hidden mt-3 pt-3 border-t border-dashed border-gray-300 text-sm text-gray-700">
@@ -161,7 +160,6 @@
 
         function toggleAnswer(index) {
             const answerElement = document.getElementById(`answer-${index}`);
-            // Utilisation de classList.toggle pour gérer l'affichage avec Tailwind
             answerElement.classList.toggle('hidden');
         }
 
@@ -171,19 +169,16 @@
                     <h2 class="text-2xl font-semibold text-center text-gray-700 mb-1">Quiz généré (${quizQuestions.length} questions)</h2>
                     <p class="text-center text-gray-500 text-sm">Sélectionnez une réponse pour chaque question</p>
                 </div>
-            `; // Titre ajouté
+            `;
 
             quizQuestions.forEach((question, qIndex) => {
                 const questionElement = document.createElement('div');
-                // Ajout de classes Tailwind pour le conteneur de question
                 questionElement.className = 'bg-white rounded-lg shadow p-5 mb-5';
 
                 let optionsHtml = '';
-                 // Encoder la bonne réponse pour l'attribut data-correct (échapper les guillemets doubles)
-                const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '"');
+                const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '&quot;');
 
                 question.options.forEach((option, oIndex) => {
-                     // Utilisation des data attributes et passage de 'this'
                     optionsHtml += `
                         <div class="option block p-3 my-2 border border-gray-200 rounded-md cursor-pointer transition duration-150 ease-in-out hover:bg-gray-100 text-gray-800"
                              id="q${qIndex}-o${oIndex}"
@@ -208,45 +203,38 @@
         }
 
         function selectOption(element, questionIndex, optionIndex) {
-            const correctAnswer = element.dataset.correct; // Récupérer la réponse correcte
-            const questionOptions = quizContainer.querySelectorAll(`#q${qIndex}-o0`)[0].parentElement.querySelectorAll('.option'); // Sélectionne toutes les options de CETTE question
-            const explanationElement = document.getElementById(`explanation-${qIndex}`);
+            const correctAnswer = element.dataset.correct;
+            const questionOptions = quizContainer.querySelectorAll(`#q${questionIndex}-o0`)[0].parentElement.querySelectorAll('.option');
+            const explanationElement = document.getElementById(`explanation-${questionIndex}`);
 
-            // Indicateur si la question a déjà été répondue (pour éviter les re-clics)
+            // Vérifier si la question a déjà été répondue
             let alreadyAnswered = false;
             questionOptions.forEach(opt => {
-                if (opt.classList.contains('correct') || opt.classList.contains('incorrect')) {
+                if (opt.classList.contains('bg-green-100') || opt.classList.contains('bg-red-100')) {
                     alreadyAnswered = true;
                 }
             });
+            if (alreadyAnswered) return;
 
-            if (alreadyAnswered) {
-                return; // Ne rien faire si déjà répondu
-            }
-
-            // Retirer les classes de sélection/hover précédentes (au cas où)
+            // Réinitialiser les styles des options
             questionOptions.forEach(option => {
                 option.classList.remove('bg-indigo-100', 'border-indigo-300', 'bg-green-100', 'border-green-300', 'text-green-800', 'bg-red-100', 'border-red-300', 'text-red-800');
-                // Rétablir le style de survol standard
                 option.classList.add('hover:bg-gray-100');
             });
 
-            // Ajouter la classe 'sélectionnée' (style visuel temporaire ou permanent)
+            // Marquer l'option cliquée
             element.classList.add('bg-indigo-100', 'border-indigo-300');
-            element.classList.remove('hover:bg-gray-100'); // Retirer hover sur l'élément sélectionné
+            element.classList.remove('hover:bg-gray-100');
 
-            // Vérifier la réponse
             const selectedText = element.textContent.trim();
             if (selectedText === correctAnswer) {
-                 // Bonne réponse: vert
-                element.classList.remove('bg-indigo-100', 'border-indigo-300'); // Retirer le style sélectionné
+                element.classList.remove('bg-indigo-100', 'border-indigo-300');
                 element.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
             } else {
-                 // Mauvaise réponse: rouge
                 element.classList.remove('bg-indigo-100', 'border-indigo-300');
                 element.classList.add('bg-red-100', 'border-red-300', 'text-red-800');
 
-                // Mettre en évidence la bonne réponse en vert
+                // Mettre en évidence la bonne réponse
                 questionOptions.forEach(option => {
                     if (option.textContent.trim() === correctAnswer) {
                         option.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
@@ -255,18 +243,16 @@
                 });
             }
 
-             // Désactiver les clics pour cette question après la réponse
-             questionOptions.forEach(option => {
-                option.onclick = null; // Supprime l'attribut onclick
-                option.classList.remove('cursor-pointer', 'hover:bg-gray-100'); // Rend visuellement non cliquable
+            // Désactiver les clics pour toutes les options de cette question
+            questionOptions.forEach(option => {
+                option.onclick = null;
+                option.classList.remove('cursor-pointer', 'hover:bg-gray-100');
                 option.style.cursor = 'default';
             });
 
-
-            // Afficher l'explication (retirer 'hidden')
+            // Afficher l'explication
             explanationElement.classList.remove('hidden');
         }
-
     </script>
 </body>
-</html>
+</html>