Update templates/index.html

templates/index.html

@@ -236,70 +236,69 @@
         .results-container {
             margin-top: 24px;
         }
-
-        /* Styles pour les flashcards */
-        .flashcard {
-            background: var(--white);
-            border-radius: 20px;
-            padding: 24px;
-            margin-bottom: 16px;
-            box-shadow: var(--shadow);
-            border-left: 4px solid var(--primary-blue);
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            min-height: 120px;
+        
+        /* Styles pour le retournement des flashcards */
+        .flashcard-container {
             perspective: 1000px;
+            margin-bottom: 16px;
         }
 
-        .flashcard:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow-lg);
-        }
-
-        .flashcard-content {
+        .flashcard {
             position: relative;
-            width: 100%;
-            height: 100%;
-            transition: transform 0.6s;
+            min-height: 150px;
             transform-style: preserve-3d;
+            transition: transform 0.6s;
+            cursor: pointer;
         }
 
-        .flashcard.flipped .flashcard-content {
+        .flashcard.is-flipped {
             transform: rotateY(180deg);
         }
 
         .flashcard-front, .flashcard-back {
             position: absolute;
             width: 100%;
+            height: 100%;
+            -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 24px;
+            border-radius: 20px;
+            background: var(--white);
+            box-shadow: var(--shadow);
+            border-left: 4px solid var(--primary-blue);
         }
 
         .flashcard-back {
             transform: rotateY(180deg);
-            background: var(--gray-50);
-            border-radius: 12px;
-            padding: 16px;
-            border: 1px solid var(--gray-100);
+            border-left-color: var(--success);
         }
-
+        
         .flashcard h3 {
             color: var(--primary-blue);
             margin-bottom: 12px;
             font-size: 1.1rem;
             font-weight: 600;
+            text-align: center;
+        }
+
+        .flashcard .answer {
+            color: var(--gray-600);
+            text-align: center;
         }
 
-        .flip-hint {
+        .flashcard-front::after {
+            content: 'Cliquez pour révéler';
             position: absolute;
-            bottom: 8px;
-            right: 12px;
+            bottom: 15px;
             font-size: 0.8rem;
-            color: var(--gray-600);
-            opacity: 0.7;
+            color: var(--gray-300);
+            font-style: italic;
         }
 
-        /* Styles pour les quiz */
         .quiz-question {
             background: var(--white);
             border-radius: 20px;
@@ -313,12 +312,12 @@
         .quiz-question:hover {
             transform: translateX(4px);
         }
-
+        
         .quiz-question h3 {
-            color: var(--primary-blue);
-            margin-bottom: 16px;
-            font-size: 1.1rem;
-            font-weight: 600;
+             color: var(--primary-blue);
+             margin-bottom: 12px;
+             font-size: 1.1rem;
+             font-weight: 600;
         }
 
         .quiz-options {
@@ -333,43 +332,33 @@
             cursor: pointer;
             transition: all 0.3s ease;
             background: var(--white);
-            position: relative;
         }
-
-        .quiz-option:hover:not(.disabled) {
-            border-color: var(--light-blue);
-            background: var(--extra-light-blue);
-            transform: translateX(4px);
+        
+        /* Désactive le clic une fois la réponse donnée */
+        .quiz-question.answered .quiz-option {
+            pointer-events: none;
+            opacity: 0.8;
         }
 
-        .quiz-option.selected {
-            border-color: var(--primary-blue);
+        .quiz-option:hover {
+            border-color: var(--light-blue);
             background: var(--extra-light-blue);
         }
 
         .quiz-option.correct {
             border-color: var(--success);
             background: #f0fdf4;
+            color: #059669;
+            font-weight: bold;
         }
 
         .quiz-option.incorrect {
             border-color: var(--error);
             background: #fef2f2;
+            color: #dc2626;
         }
-
-        .quiz-option.disabled {
-            cursor: not-allowed;
-            opacity: 0.7;
-        }
-
-        .quiz-option i {
-            margin-right: 8px;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-
-        .quiz-option.correct i.fa-check,
-        .quiz-option.incorrect i.fa-times {
+        
+        .quiz-question.answered .quiz-option.correct {
             opacity: 1;
         }
 
@@ -379,23 +368,6 @@
             background: var(--extra-light-blue);
             border-radius: 12px;
             border-left: 4px solid var(--primary-blue);
-            display: none;
-        }
-
-        .quiz-explanation.show {
-            display: block;
-            animation: slideDown 0.3s ease-out;
-        }
-
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
         }
 
         .error-message {
@@ -468,7 +440,7 @@
 
         /* Animations d'entrée */
         .fade-in {
-            animation: fadeIn 0.5s ease-out;
+            animation: fadeIn 0.5s ease-out forwards;
         }
 
         @keyframes fadeIn {
@@ -578,44 +550,6 @@
             const generateBtn = document.getElementById('generateBtn');
             const resultsContainer = document.getElementById('results');
 
-            // Données d'exemple pour la démonstration
-            const sampleData = {
-                flashcards: [
-                    {
-                        question: "Qu'est-ce que la photosynthèse ?",
-                        answer: "La photosynthèse est le processus par lequel les plantes vertes utilisent la lumière du soleil pour convertir le dioxyde de carbone et l'eau en glucose et en oxygène."
-                    },
-                    {
-                        question: "Quelle est la formule chimique de l'eau ?",
-                        answer: "H2O - deux atomes d'hydrogène liés à un atome d'oxygène."
-                    },
-                    {
-                        question: "Qui a développé la théorie de la relativité ?",
-                        answer: "Albert Einstein a développé la théorie de la relativité restreinte (1905) et générale (1915)."
-                    }
-                ],
-                quiz: [
-                    {
-                        question: "Quelle est la capitale de la France ?",
-                        options: ["Lyon", "Paris", "Marseille", "Bordeaux"],
-                        correctAnswer: "Paris",
-                        explanation: "Paris est la capitale et la plus grande ville de France, située sur la Seine au cœur de la région Île-de-France."
-                    },
-                    {
-                        question: "Combien de chromosomes possède l'être humain ?",
-                        options: ["44", "46", "48", "50"],
-                        correctAnswer: "46",
-                        explanation: "L'être humain possède 46 chromosomes organisés en 23 paires dans chaque cellule somatique."
-                    },
-                    {
-                        question: "Quel est l'élément chimique le plus abondant dans l'univers ?",
-                        options: ["Oxygène", "Carbone", "Hydrogène", "Hélium"],
-                        correctAnswer: "Hydrogène",
-                        explanation: "L'hydrogène représente environ 75% de la masse normale de l'univers et constitue le carburant principal des étoiles."
-                    }
-                ]
-            };
-
             form.addEventListener('submit', async function(e) {
                 e.preventDefault();
                 
@@ -627,66 +561,73 @@
                     return;
                 }
 
-                // Animation du bouton
                 generateBtn.classList.add('loading');
                 generateBtn.disabled = true;
                 resultsContainer.innerHTML = '';
 
-                // Simulation d'une requête (remplacez par votre API)
-                setTimeout(() => {
-                    try {
-                        displayResults(sampleData[type], type);
+                try {
+                    // MODIFICATION : L'appel au backend a été restauré.
+                    // La fonction de simulation a été supprimée.
+                    const response = await fetch('/generate', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ topic, type })
+                    });
+
+                    const data = await response.json();
+
+                    if (data.success) {
+                        displayResults(data[type], type);
                         showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
-                    } catch (error) {
-                        console.error('Erreur:', error);
-                        showMessage('Une erreur est survenue lors de la génération.', 'error');
-                    } finally {
-                        // Restaurer le bouton
-                        generateBtn.classList.remove('loading');
-                        generateBtn.disabled = false;
+                    } else {
+                        showMessage(data.error || 'Une erreur est survenue lors de la génération.', 'error');
                     }
-                }, 1500);
+                } catch (error) {
+                    console.error('Erreur:', error);
+                    showMessage('Erreur de connexion. Veuillez réessayer.', 'error');
+                } finally {
+                    generateBtn.classList.remove('loading');
+                    generateBtn.disabled = false;
+                }
             });
 
             function displayResults(data, type) {
                 resultsContainer.innerHTML = '';
                 
                 if (type === 'flashcards') {
+                    // Logique d'affichage pour les flashcards retournables
                     data.forEach((item, index) => {
-                        const flashcardEl = document.createElement('div');
-                        flashcardEl.className = 'flashcard fade-in';
-                        flashcardEl.style.animationDelay = `${index * 0.1}s`;
-                        flashcardEl.innerHTML = `
-                            <div class="flashcard-content">
+                        const flashcardContainer = document.createElement('div');
+                        flashcardContainer.className = 'flashcard-container fade-in';
+                        flashcardContainer.style.animationDelay = `${index * 0.1}s`;
+                        
+                        flashcardContainer.innerHTML = `
+                            <div class="flashcard" onclick="this.classList.toggle('is-flipped')">
                                 <div class="flashcard-front">
                                     <h3><i class="fas fa-question"></i> ${item.question}</h3>
-                                    <div class="flip-hint">
-                                        <i class="fas fa-sync-alt"></i> Cliquez pour retourner
-                                    </div>
                                 </div>
                                 <div class="flashcard-back">
-                                    <i class="fas fa-lightbulb"></i> ${item.answer}
+                                    <div class="answer">
+                                        <i class="fas fa-lightbulb"></i> ${item.answer}
+                                    </div>
                                 </div>
                             </div>
                         `;
-                        
-                        // Ajouter l'événement de retournement
-                        flashcardEl.addEventListener('click', function() {
-                            this.classList.toggle('flipped');
-                        });
-                        
-                        resultsContainer.appendChild(flashcardEl);
+                        resultsContainer.appendChild(flashcardContainer);
                     });
-                } else {
+                } else { // Quiz
+                    // Logique d'affichage pour le quiz interactif
                     data.forEach((item, index) => {
                         const quizEl = document.createElement('div');
                         quizEl.className = 'quiz-question fade-in';
                         quizEl.style.animationDelay = `${index * 0.1}s`;
+                        // On stocke la bonne réponse dans un attribut data-*
+                        quizEl.dataset.correctAnswer = item.correctAnswer;
                         
                         const optionsHtml = item.options.map(option => `
-                            <div class="quiz-option" data-option="${option}">
-                                <i class="fas fa-check"></i>
-                                <i class="fas fa-times"></i>
+                            <div class="quiz-option" onclick="checkAnswer(this)">
                                 ${option}
                             </div>
                         `).join('');
@@ -694,42 +635,10 @@
                         quizEl.innerHTML = `
                             <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
                             <div class="quiz-options">${optionsHtml}</div>
-                            <div class="quiz-explanation">
+                            <div class="quiz-explanation" style="display: none;">
                                 <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
                             </div>
                         `;
-                        
-                        // Ajouter les événements de clic pour les options
-                        const options = quizEl.querySelectorAll('.quiz-option');
-                        const explanation = quizEl.querySelector('.quiz-explanation');
-                        
-                        options.forEach(option => {
-                            option.addEventListener('click', function() {
-                                if (this.classList.contains('disabled')) return;
-                                
-                                const selectedAnswer = this.dataset.option;
-                                
-                                // Désactiver toutes les options
-                                options.forEach(opt => opt.classList.add('disabled'));
-                                
-                                // Marquer la réponse sélectionnée
-                                this.classList.add('selected');
-                                
-                                // Révéler les bonnes et mauvaises réponses
-                                options.forEach(opt => {
-                                    if (opt.dataset.option === item.correctAnswer) {
-                                        opt.classList.add('correct');
-                                    } else {
-                                        opt.classList.add('incorrect');
-                                    }
-                                });
-                                
-                                // Afficher l'explication
-                                explanation.classList.add('show');
-                                explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                            });
-                        });
-                        
                         resultsContainer.appendChild(quizEl);
                     });
                 }
@@ -743,29 +652,46 @@
                     ${message}
                 `;
                 
-                // Supprimer les anciens messages
                 const oldMessages = document.querySelectorAll('.error-message, .success-message');
                 oldMessages.forEach(msg => msg.remove());
                 
                 resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
                 
-                // Supprimer le message après 5 secondes
                 setTimeout(() => {
                     messageEl.remove();
                 }, 5000);
             }
 
-            // Animation au focus des inputs
-            const inputs = document.querySelectorAll('input[type="text"]');
-            inputs.forEach(input => {
-                input.addEventListener('focus', function() {
-                    this.closest('.form-group').style.transform = 'scale(1.02)';
-                });
-                
-                input.addEventListener('blur', function() {
-                    this.closest('.form-group').style.transform = 'scale(1)';
+            // Nouvelle fonction pour vérifier la réponse du quiz
+            window.checkAnswer = function(optionEl) {
+                const quizQuestion = optionEl.closest('.quiz-question');
+                if (quizQuestion.classList.contains('answered')) return; // Empêche de répondre à nouveau
+
+                quizQuestion.classList.add('answered');
+                const correctAnswer = quizQuestion.dataset.correctAnswer;
+                const selectedAnswer = optionEl.textContent.trim();
+                const explanation = quizQuestion.querySelector('.quiz-explanation');
+                const allOptions = quizQuestion.querySelectorAll('.quiz-option');
+
+                if (selectedAnswer === correctAnswer) {
+                    optionEl.classList.add('correct');
+                } else {
+                    optionEl.classList.add('incorrect');
+                }
+
+                allOptions.forEach(opt => {
+                    const optText = opt.textContent.trim();
+                    if (optText === correctAnswer) {
+                        opt.classList.add('correct');
+                        opt.innerHTML = `<i class="fas fa-check"></i> ${optText}`;
+                    } else if (opt.classList.contains('incorrect')) {
+                        opt.innerHTML = `<i class="fas fa-times"></i> ${optText}`;
+                    }
                 });
-            });
+
+                explanation.style.display = 'block';
+                explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            };
         });
     </script>
 </body>