Attaque2

Running

App Files Files Community

Docfile commited on Apr 7

Commit

50d5060

verified ·

1 Parent(s): 1dfef26

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +223 -159

templates/index.html CHANGED Viewed

@@ -3,256 +3,320 @@
 <head>
     <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 */
-        .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');
             quizContainer.classList.add('hidden');
-            // Envoi de la requête
             fetch('/generate', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
                 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');
                 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})`);
-                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}`);
-            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>
-            `;
-            quizQuestions.forEach((question, qIndex) => {
-                const questionElement = document.createElement('div');
-                questionElement.className = 'bg-white rounded-lg shadow p-5 mb-5';
-                let optionsHtml = '';
-                const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '&quot;');
-                question.options.forEach((option, oIndex) => {
-                    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;
-            const questionOptions = quizContainer.querySelectorAll(`#q${questionIndex}-o0`)[0].parentElement.querySelectorAll('.option');
-            const explanationElement = document.getElementById(`explanation-${questionIndex}`);
-            // Vérifier si la question a déjà été répondue
-            let alreadyAnswered = false;
-            questionOptions.forEach(opt => {
-                if (opt.classList.contains('bg-green-100') || opt.classList.contains('bg-red-100')) {
-                    alreadyAnswered = true;
-                }
-            });
-            if (alreadyAnswered) return;
-            // 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');
-                option.classList.add('hover:bg-gray-100');
-            });
-            // Marquer l'option cliquée
-            element.classList.add('bg-indigo-100', 'border-indigo-300');
-            element.classList.remove('hover:bg-gray-100');
-            const selectedText = element.textContent.trim();
-            if (selectedText === correctAnswer) {
-                element.classList.remove('bg-indigo-100', 'border-indigo-300');
-                element.classList.add('bg-green-100', 'border-green-300', 'text-green-800');
             } else {
-                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
-                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 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
-            explanationElement.classList.remove('hidden');
         }
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flashcards et Quiz</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        body {
+            background: linear-gradient(135deg, #1e3a8a, #6b7280);
+            min-height: 100vh;
         }
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            border-radius: 15px;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+            padding: 2rem;
+        }
+        .progress-bar {
+            height: 10px;
+            background: #e5e7eb;
+            border-radius: 5px;
+            overflow: hidden;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(to right, #10b981, #3b82f6);
+            transition: width 0.5s ease-in-out;
+        }
+        .question-card {
+            transform: scale(0.9);
+            opacity: 0;
+            animation: slideIn 0.5s forwards;
+        }
+        @keyframes slideIn {
+            to { transform: scale(1); opacity: 1; }
+        }
+        .correct-answer {
+            animation: correctFlash 0.8s;
+        }
+        .wrong-answer {
+            animation: wrongShake 0.5s;
+        }
+        @keyframes correctFlash {
+            0% { background-color: #10b981; transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { background-color: #d1fae5; transform: scale(1); }
+        }
+        @keyframes wrongShake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+        .explanation-container {
+            display: none;
+            margin-top: 1rem;
+            padding: 1rem;
+            background: #f8fafc;
+            border-left: 4px solid #ef4444;
+            border-radius: 5px;
+            animation: slideFromRight 0.5s ease-in-out;
+        }
+        @keyframes slideFromRight {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        .character {
+            width: 100px;
+            height: 100px;
+            background: url('chemin/vers/professeur.png') center/contain no-repeat;
+            margin-right: 1rem;
+        }
+        .popup {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0);
+            background: linear-gradient(135deg, #ffd700, #ff6347);
+            padding: 2rem;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+            z-index: 1000;
+            animation: popupIn 0.5s forwards;
+            border: 4px solid #ffd700;
+            color: #fff;
+        }
+        @keyframes popupIn {
+            to { transform: translate(-50%, -50%) scale(1); }
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 999;
+        }
+        .popup h2 {
+            font-size: 2.5rem;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+        }
+        .popup p {
+            font-size: 1.2rem;
+            margin-top: 1rem;
+        }
+        .popup button {
+            background: #ff4500;
+            border: none;
+            padding: 0.75rem 1.5rem;
+            font-size: 1.1rem;
+            font-weight: bold;
+            border-radius: 10px;
+            transition: transform 0.2s;
+        }
+        .popup button:hover {
+            transform: scale(1.05);
         }
     </style>
 </head>
+<body class="font-sans">
     <div class="container mx-auto mt-8 px-4">
+        <h1 class="text-4xl font-bold text-center text-gray-800 mb-6">Révisons un peu</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 p-2" id="topic" placeholder="Balance ton sujet...">
                 </div>
                 <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-700 mb-2">Type</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">
+                            <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">
+                            <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">
+                    GO !
                 </button>
             </div>
         </div>
         <!-- Indicateur de chargement -->
+        <div id="loading" class="hidden text-center my-10">
+            <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">Ça charge, attends deux secs...</p>
         </div>
+        <!-- Conteneur Quiz -->
+        <div id="quizContainer" class="mt-6 max-w-3xl mx-auto hidden">
+            <div class="progress-bar mb-6">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div id="currentQuestion"></div>
         </div>
     </div>
     <script>
         const generateBtn = document.getElementById('generateBtn');
         const loadingIndicator = document.getElementById('loading');
         const quizContainer = document.getElementById('quizContainer');
         const topicInput = document.getElementById('topic');
+        let quizQuestions = [];
+        let currentQuestionIndex = 0;
+        let score = 0;
         generateBtn.addEventListener('click', function() {
             const topic = topicInput.value.trim();
             if (!topic) {
+                alert('Rentre un sujet, bordel !');
                 return;
             }
             const contentType = document.querySelector('input[name="contentType"]:checked').value;
             loadingIndicator.classList.remove('hidden');
             quizContainer.innerHTML = '';
             quizContainer.classList.add('hidden');
             fetch('/generate', {
                 method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ topic, type: contentType }),
             })
             .then(response => {
+                if (!response.ok) throw new Error(`HTTP ${response.status}`);
                 return response.json();
             })
             .then(data => {
                 loadingIndicator.classList.add('hidden');
                 if (data.error) {
                     alert('Erreur: ' + data.error);
                     return;
                 }
+                if (contentType === 'quiz' && data.quiz) {
+                    quizQuestions = data.quiz;
+                    currentQuestionIndex = 0;
+                    score = 0;
                     quizContainer.classList.remove('hidden');
+                    displayCurrentQuestion();
                 }
             })
             .catch(error => {
                 loadingIndicator.classList.add('hidden');
+                alert('Ça a merdé: ' + error.message);
             });
         });
+        function displayCurrentQuestion() {
+            if (currentQuestionIndex >= quizQuestions.length) {
+                showResults();
+                return;
+            }
+            const question = quizQuestions[currentQuestionIndex];
+            const progress = (currentQuestionIndex / 10) * 100;
+            quizContainer.innerHTML = `
+                <div class="progress-bar mb-6">
+                    <div class="progress-fill" id="progressFill" style="width: ${progress}%"></div>
                 </div>
+                <div class="question-card bg-white rounded-lg shadow-lg p-6">
+                    <h5 class="font-semibold text-xl mb-4 text-gray-800">${currentQuestionIndex + 1}. ${question.question}</h5>
+                    <div class="options mt-3"></div>
+                    <div class="explanation-container" id="explanation-${currentQuestionIndex}"></div>
                 </div>
             `;
+            const optionsContainer = quizContainer.querySelector('.options');
+            question.options.forEach((option, oIndex) => {
+                const optionElement = document.createElement('div');
+                optionElement.className = 'option block p-3 my-2 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-100 text-gray-800';
+                optionElement.textContent = option;
+                optionElement.onclick = () => selectOption(option, question.correctAnswer, oIndex);
+                optionsContainer.appendChild(optionElement);
             });
         }
+        function selectOption(selectedOption, correctAnswer, optionIndex) {
+            const options = quizContainer.querySelectorAll('.option');
+            options.forEach(option => {
+                option.onclick = null;
+                option.classList.remove('cursor-pointer', 'hover:bg-gray-100');
+            });
+            const selectedElement = options[optionIndex];
+            const question = quizQuestions[currentQuestionIndex];
+            const explanationContainer = document.getElementById(`explanation-${currentQuestionIndex}`);
+            if (selectedOption === correctAnswer) {
+                selectedElement.classList.add('correct-answer', 'text-white', 'border-green-500');
+                score++;
+                setTimeout(() => {
+                    currentQuestionIndex++;
+                    displayCurrentQuestion();
+                }, 1000);
+            } else {
+                selectedElement.classList.add('wrong-answer', 'text-white', 'border-red-500');
+                options.forEach(opt => {
+                    if (opt.textContent === correctAnswer) {
+                        opt.classList.add('correct-answer', 'text-white', 'border-green-500');
+                    }
                 });
+                explanationContainer.innerHTML = `
+                    <div class="flex items-center">
+                        <div class="character"></div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-2">Explication</h3>
+                            <p class="text-sm text-gray-700">${question.explanation}</p>
+                        </div>
                     </div>
                 `;
+                explanationContainer.style.display = 'block';
+                document.body.addEventListener('click', proceedToNextQuestion);
+            }
         }
+        function proceedToNextQuestion() {
+            document.body.removeEventListener('click', proceedToNextQuestion);
+            currentQuestionIndex++;
+            displayCurrentQuestion();
+        }
+        function showResults() {
+            const overlay = document.createElement('div');
+            overlay.className = 'overlay';
+            document.body.appendChild(overlay);
+            const popup = document.createElement('div');
+            popup.className = 'popup';
+            const percentage = (score / 10) * 100;
+            let suggestion = '';
+            if (percentage < 50) {
+                suggestion = 'Allez du nerf, c’est pas bon.';
+            } else if (percentage < 80) {
+                suggestion = 'Pas mal, mais t’as encore du taf pour tout déchirer.';
             } else {
+                suggestion = 'WOW ! Tu gères grave, tu veux essayer un autre sujet ?';
             }
+            popup.innerHTML = `
+                <h2>Résultats</h2>
+                <p>Score: ${score}/10 (${percentage}%)</p>
+                <p class="mt-2">Détails: ${score} bonnes réponses, ${10 - score} ratées.</p>
+                <p class="mt-4 font-semibold">${suggestion}</p>
+                <button onclick="location.reload()">Rejouer</button>
+            `;
+            document.body.appendChild(popup);
         }
     </script>
 </body>
+</html>