Attaque2

Running

App Files Files Community

Docfile commited on Apr 6

Commit

cca0295

verified ·

1 Parent(s): 9deb2fa

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +181 -169

templates/index.html CHANGED Viewed

@@ -4,126 +4,96 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Générateur de Flashcards et Quiz</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        .flashcard {
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            margin-bottom: 15px;
-            padding: 15px;
-            cursor: pointer;
-            background-color: #f8f9fa;
-            transition: transform 0.3s;
         }
-        .flashcard:hover {
             transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-        }
-        .answer {
-            display: none;
-            margin-top: 10px;
-            padding-top: 10px;
-            border-top: 1px dashed #ccc;
-        }
-        .quiz-question {
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            margin-bottom: 20px;
-            padding: 15px;
-            background-color: #f8f9fa;
-        }
-        .option {
-            padding: 8px 15px;
-            margin: 5px 0;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        .option:hover {
-            background-color: #e9ecef;
-        }
-        .selected {
-            background-color: #d1e7dd;
-        }
-        .correct {
-            background-color: #d4edda;
-            border-color: #c3e6cb;
-        }
-        .incorrect {
-            background-color: #f8d7da;
-            border-color: #f5c6cb;
-        }
-        .explanation {
-            display: none;
-            margin-top: 15px;
-            padding: 10px;
-            border-radius: 4px;
-            background-color: #e2f3fc;
-        }
-        #loading {
-            display: none;
         }
     </style>
 </head>
-<body>
-    <div class="container mt-5">
-        <h1 class="text-center mb-4">Générateur de Flashcards et Quiz</h1>
-        <div class="row mb-4">
-            <div class="col-md-8 offset-md-2">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="mb-3">
-                            <label for="topic" class="form-label">Sujet</label>
-                            <input type="text" class="form-control" id="topic" placeholder="Entrez un sujet...">
                         </div>
-                        <div class="mb-3">
-                            <label class="form-label">Type de contenu</label>
-                            <div class="form-check">
-                                <input class="form-check-input" type="radio" name="contentType" id="typeFlashcards" value="flashcards" checked>
-                                <label class="form-check-label" for="typeFlashcards">
-                                    Flashcards
-                                </label>
-                            </div>
-                            <div class="form-check">
-                                <input class="form-check-input" type="radio" name="contentType" id="typeQuiz" value="quiz">
-                                <label class="form-check-label" for="typeQuiz">
-                                    Quiz
-                                </label>
-                            </div>
                         </div>
-                        <button id="generateBtn" class="btn btn-primary w-100">Générer</button>
                     </div>
                 </div>
             </div>
         </div>
-        <div id="loading" class="text-center my-5">
-            <div class="spinner-border text-primary" role="status">
-                <span class="visually-hidden">Chargement...</span>
-            </div>
-            <p class="mt-2">Génération en cours... Cela peut prendre plusieurs minutes.</p>
         </div>
-        <div id="flashcardsContainer" class="row mt-4"></div>
-        <div id="quizContainer" class="row mt-4"></div>
     </div>
     <script>
-        document.getElementById('generateBtn').addEventListener('click', function() {
-            const topic = document.getElementById('topic').value;
             if (!topic) {
                 alert('Veuillez entrer un sujet.');
                 return;
             }
             const contentType = document.querySelector('input[name="contentType"]:checked').value;
-            // Afficher le chargement
-            document.getElementById('loading').style.display = 'block';
-            document.getElementById('flashcardsContainer').innerHTML = '';
-            document.getElementById('quizContainer').innerHTML = '';
             // Envoi de la requête
             fetch('/generate', {
                 method: 'POST',
@@ -132,129 +102,171 @@
                 },
                 body: JSON.stringify({ topic, type: contentType }),
             })
-            .then(response => response.json())
             .then(data => {
-                // Masquer le chargement
-                document.getElementById('loading').style.display = 'none';
                 if (data.error) {
                     alert('Erreur: ' + data.error);
                     return;
                 }
                 if (contentType === 'flashcards' && data.flashcards) {
                     displayFlashcards(data.flashcards);
                 } else if (contentType === 'quiz' && data.quiz) {
                     displayQuiz(data.quiz);
                 }
             })
             .catch(error => {
-                document.getElementById('loading').style.display = 'none';
-                alert('Erreur lors de la génération: ' + error);
             });
         });
         function displayFlashcards(flashcards) {
-            const container = document.getElementById('flashcardsContainer');
-            container.innerHTML = `
-                <div class="col-12 mb-4">
-                    <h2 class="text-center">Flashcards générées (${flashcards.length})</h2>
-                    <p class="text-center text-muted">Cliquez sur une carte pour voir la réponse</p>
                 </div>
             `;
             flashcards.forEach((card, index) => {
                 const cardElement = document.createElement('div');
-                cardElement.className = 'col-md-6 col-lg-4';
                 cardElement.innerHTML = `
-                    <div class="flashcard" onclick="toggleAnswer(${index})">
-                        <h5 class="card-title">${card.question}</h5>
-                        <div id="answer-${index}" class="answer">
-                            <strong>Réponse:</strong> ${card.answer}
-                        </div>
                     </div>
                 `;
-                container.appendChild(cardElement);
             });
         }
         function toggleAnswer(index) {
             const answerElement = document.getElementById(`answer-${index}`);
-            if (answerElement.style.display === 'block') {
-                answerElement.style.display = 'none';
-            } else {
-                answerElement.style.display = 'block';
-            }
         }
         function displayQuiz(quizQuestions) {
-            const container = document.getElementById('quizContainer');
-            container.innerHTML = `
-                <div class="col-12 mb-4">
-                    <h2 class="text-center">Quiz généré (${quizQuestions.length} questions)</h2>
-                    <p class="text-center text-muted">Sélectionnez une réponse pour chaque question</p>
                 </div>
-            `;
             quizQuestions.forEach((question, qIndex) => {
                 const questionElement = document.createElement('div');
-                questionElement.className = 'col-12 mb-4';
                 let optionsHtml = '';
                 question.options.forEach((option, oIndex) => {
                     optionsHtml += `
-                        <div class="option" id="q${qIndex}-o${oIndex}"
-                             onclick="selectOption(${qIndex}, ${oIndex}, '${question.correctAnswer}')">
                             ${option}
                         </div>
                     `;
                 });
                 questionElement.innerHTML = `
-                    <div class="quiz-question">
-                        <h5>${qIndex + 1}. ${question.question}</h5>
-                        <div class="options mt-3">
-                            ${optionsHtml}
-                        </div>
-                        <div class="explanation" id="explanation-${qIndex}">
-                            <strong>Explication:</strong> ${question.explanation}
-                        </div>
                     </div>
                 `;
-                container.appendChild(questionElement);
             });
         }
-        function selectOption(questionIndex, optionIndex, correctAnswer) {
-            const questionOptions = document.querySelectorAll(`[id^="q${questionIndex}-o"]`);
-            const selectedOption = document.getElementById(`q${questionIndex}-o${optionIndex}`);
-            const explanationElement = document.getElementById(`explanation-${questionIndex}`);
-            // Retirer les classes des autres options
             questionOptions.forEach(option => {
-                option.classList.remove('selected', 'correct', 'incorrect');
             });
-            // Sélectionner l'option
-            selectedOption.classList.add('selected');
-            // Vérifier si c'est la bonne réponse
-            const selectedText = selectedOption.textContent.trim();
             if (selectedText === correctAnswer) {
-                selectedOption.classList.add('correct');
             } else {
-                selectedOption.classList.add('incorrect');
-                // Mettre en évidence la bonne réponse
                 questionOptions.forEach(option => {
                     if (option.textContent.trim() === correctAnswer) {
-                        option.classList.add('correct');
                     }
                 });
             }
-            // Afficher l'explication
-            explanationElement.style.display = 'block';
         }
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Générateur de Flashcards et Quiz</title>
+    <!-- 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 */
+        .flashcard-transform {
+            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
         }
+        .flashcard-transform:hover {
             transform: translateY(-5px);
         }
     </style>
 </head>
+<body class="bg-gray-100 font-sans">
+    <div class="container mx-auto mt-8 px-4">
+        <h1 class="text-3xl font-bold text-center text-gray-800 mb-6">Générateur de Flashcards et Quiz</h1>
+        <!-- Section de configuration -->
+        <div class="max-w-2xl mx-auto mb-8">
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <div class="mb-4">
+                    <label for="topic" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label>
+                    <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" id="topic" placeholder="Entrez un sujet...">
+                </div>
+                <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Type de contenu</label>
+                    <div class="flex items-center space-x-4">
+                        <div class="flex items-center">
+                            <input id="typeFlashcards" name="contentType" type="radio" value="flashcards" checked class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                            <label for="typeFlashcards" class="ml-2 block text-sm text-gray-900">
+                                Flashcards
+                            </label>
                         </div>
+                        <div class="flex items-center">
+                            <input id="typeQuiz" name="contentType" type="radio" value="quiz" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500">
+                            <label for="typeQuiz" class="ml-2 block text-sm text-gray-900">
+                                Quiz
+                            </label>
                         </div>
                     </div>
                 </div>
+                <button id="generateBtn" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out">
+                    Générer
+                </button>
             </div>
         </div>
+        <!-- Indicateur de chargement -->
+        <div id="loading" class="hidden text-center my-10 flex flex-col items-center justify-center">
+             <svg class="animate-spin h-8 w-8 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            <p class="mt-2 text-gray-600">Génération en cours... Cela peut prendre plusieurs minutes.</p>
+        </div>
+        <!-- Conteneur pour les Flashcards -->
+        <div id="flashcardsContainer" class="mt-6">
+            <!-- Les flashcards seront injectées ici -->
+        </div>
+        <!-- Conteneur pour le Quiz -->
+        <div id="quizContainer" class="mt-6 max-w-3xl mx-auto">
+             <!-- Les questions du quiz seront injectées ici -->
         </div>
     </div>
     <script>
+        const generateBtn = document.getElementById('generateBtn');
+        const loadingIndicator = document.getElementById('loading');
+        const flashcardsContainer = document.getElementById('flashcardsContainer');
+        const quizContainer = document.getElementById('quizContainer');
+        const topicInput = document.getElementById('topic');
+        generateBtn.addEventListener('click', function() {
+            const topic = topicInput.value.trim();
             if (!topic) {
                 alert('Veuillez entrer un sujet.');
                 return;
             }
             const contentType = document.querySelector('input[name="contentType"]:checked').value;
+            // Afficher le chargement et cacher les anciens résultats
+            loadingIndicator.classList.remove('hidden');
+            flashcardsContainer.innerHTML = '';
+            quizContainer.innerHTML = '';
+            flashcardsContainer.classList.add('hidden'); // Cacher explicitement les conteneurs
+            quizContainer.classList.add('hidden');
             // Envoi de la requête
             fetch('/generate', {
                 method: 'POST',
                 },
                 body: JSON.stringify({ topic, type: contentType }),
             })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                return response.json();
+            })
             .then(data => {
+                loadingIndicator.classList.add('hidden'); // Masquer le chargement
                 if (data.error) {
                     alert('Erreur: ' + data.error);
                     return;
                 }
                 if (contentType === 'flashcards' && data.flashcards) {
+                    flashcardsContainer.classList.remove('hidden');
                     displayFlashcards(data.flashcards);
                 } else if (contentType === 'quiz' && data.quiz) {
+                    quizContainer.classList.remove('hidden');
                     displayQuiz(data.quiz);
+                } else {
+                     alert('Aucune donnée reçue ou format incorrect.');
                 }
             })
             .catch(error => {
+                loadingIndicator.classList.add('hidden');
+                console.error('Erreur lors de la génération:', error);
+                alert('Erreur lors de la génération: ' + error.message + '. Vérifiez la console pour plus de détails.');
             });
         });
         function displayFlashcards(flashcards) {
+            flashcardsContainer.innerHTML = `
+                <div class="mb-4">
+                    <h2 class="text-2xl font-semibold text-center text-gray-700 mb-1">Flashcards générées (${flashcards.length})</h2>
+                    <p class="text-center text-gray-500 text-sm">Cliquez sur une carte pour voir la réponse</p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    <!-- Flashcards ici -->
                 </div>
             `;
+            const gridContainer = flashcardsContainer.querySelector('.grid');
             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.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">
+                        <strong class="font-bold text-gray-900">Réponse:</strong> ${card.answer}
                     </div>
                 `;
+                gridContainer.appendChild(cardElement);
             });
         }
         function toggleAnswer(index) {
             const answerElement = document.getElementById(`answer-${index}`);
+            // Utilisation de classList.toggle pour gérer l'affichage avec Tailwind
+            answerElement.classList.toggle('hidden');
         }
         function displayQuiz(quizQuestions) {
+            quizContainer.innerHTML = `
+                <div class="mb-4">
+                    <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, '"');
                 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}"
+                             data-correct="${safeCorrectAnswer}"
+                             onclick="selectOption(this, ${qIndex}, ${oIndex})">
                             ${option}
                         </div>
                     `;
                 });
                 questionElement.innerHTML = `
+                    <h5 class="font-semibold text-lg mb-3 text-gray-800">${qIndex + 1}. ${question.question}</h5>
+                    <div class="options mt-3">
+                        ${optionsHtml}
+                    </div>
+                    <div class="explanation hidden mt-4 p-3 rounded-md bg-blue-50 border border-blue-200 text-sm text-blue-700" id="explanation-${qIndex}">
+                        <strong class="font-bold">Explication:</strong> ${question.explanation}
                     </div>
                 `;
+                quizContainer.appendChild(questionElement);
             });
         }
+        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}`);
+            // Indicateur si la question a déjà été répondue (pour éviter les re-clics)
+            let alreadyAnswered = false;
+            questionOptions.forEach(opt => {
+                if (opt.classList.contains('correct') || opt.classList.contains('incorrect')) {
+                    alreadyAnswered = true;
+                }
+            });
+            if (alreadyAnswered) {
+                return; // Ne rien faire si déjà répondu
+            }
+            // Retirer les classes de sélection/hover précédentes (au cas où)
             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)
+            element.classList.add('bg-indigo-100', 'border-indigo-300');
+            element.classList.remove('hover:bg-gray-100'); // Retirer hover sur l'élément sélectionné
+            // 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.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
                 questionOptions.forEach(option => {
                     if (option.textContent.trim() === correctAnswer) {
+                        option.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
+                        option.classList.remove('hover:bg-gray-100');
                     }
                 });
             }
+             // 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
+                option.style.cursor = 'default';
+            });
+            // Afficher l'explication (retirer 'hidden')
+            explanationElement.classList.remove('hidden');
         }
     </script>
 </body>
 </html>