Update templates/index.html

templates/index.html

@@ -24,6 +24,7 @@
             --gray-800: #1f2937;
             --success: #10b981;
             --error: #ef4444;
+            --warning: #f59e0b;
             --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
             --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
         }
@@ -237,7 +238,8 @@
             margin-top: 24px;
         }
 
-        .flashcard, .quiz-question {
+        /* Flashcards */
+        .flashcard {
             background: var(--white);
             border-radius: 20px;
             padding: 24px;
@@ -245,26 +247,83 @@
             box-shadow: var(--shadow);
             border-left: 4px solid var(--primary-blue);
             transition: transform 0.3s ease;
+            cursor: pointer;
+            position: relative;
+            min-height: 120px;
         }
 
-        .flashcard:hover, .quiz-question:hover {
+        .flashcard:hover {
             transform: translateX(4px);
         }
 
+        .flashcard.flipped .card-front {
+            opacity: 0;
+            transform: rotateY(90deg);
+        }
+
+        .flashcard.flipped .card-back {
+            opacity: 1;
+            transform: rotateY(0deg);
+        }
+
+        .card-front, .card-back {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            padding: 24px;
+            transition: all 0.6s ease;
+            backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+
+        .card-back {
+            opacity: 0;
+            transform: rotateY(-90deg);
+            background: var(--gray-50);
+            border-radius: 20px;
+            color: var(--gray-600);
+        }
+
         .flashcard h3 {
             color: var(--primary-blue);
-            margin-bottom: 12px;
             font-size: 1.1rem;
             font-weight: 600;
+            margin: 0;
         }
 
-        .flashcard .answer {
-            color: var(--gray-600);
-            padding: 16px;
-            background: var(--gray-50);
-            border-radius: 12px;
-            margin-top: 12px;
-            border: 1px solid var(--gray-100);
+        .flip-indicator {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            color: var(--gray-400);
+            font-size: 0.8rem;
+        }
+
+        /* Quiz Questions */
+        .quiz-question {
+            background: var(--white);
+            border-radius: 20px;
+            padding: 24px;
+            margin-bottom: 16px;
+            box-shadow: var(--shadow);
+            border-left: 4px solid var(--primary-blue);
+            transition: transform 0.3s ease;
+        }
+
+        .quiz-question:hover {
+            transform: translateX(4px);
+        }
+
+        .quiz-question h3 {
+            color: var(--primary-blue);
+            margin-bottom: 16px;
+            font-size: 1.1rem;
+            font-weight: 600;
         }
 
         .quiz-options {
@@ -279,6 +338,7 @@
             cursor: pointer;
             transition: all 0.3s ease;
             background: var(--white);
+            position: relative;
         }
 
         .quiz-option:hover {
@@ -286,44 +346,88 @@
             background: var(--extra-light-blue);
         }
 
-        .quiz-option.correct {
+        .quiz-option.selected {
+            border-color: var(--primary-blue);
+            background: var(--extra-light-blue);
+        }
+
+        .quiz-option.correct-answer {
             border-color: var(--success);
             background: #f0fdf4;
         }
 
-        .quiz-option.incorrect {
+        .quiz-option.incorrect-answer {
             border-color: var(--error);
             background: #fef2f2;
         }
 
+        .quiz-option .option-icon {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .quiz-option.correct-answer .option-icon,
+        .quiz-option.incorrect-answer .option-icon {
+            opacity: 1;
+        }
+
         .quiz-explanation {
             margin-top: 16px;
             padding: 16px;
             background: var(--extra-light-blue);
             border-radius: 12px;
             border-left: 4px solid var(--primary-blue);
+            display: none;
         }
 
-        .error-message {
-            background: #fef2f2;
-            color: var(--error);
+        .quiz-explanation.show {
+            display: block;
+            animation: slideDown 0.3s ease;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .quiz-score {
+            background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));
+            color: var(--white);
             padding: 16px 20px;
             border-radius: 12px;
-            border: 1px solid #fecaca;
-            margin-top: 16px;
+            text-align: center;
+            font-weight: 600;
+            margin-bottom: 16px;
+        }
+
+        .message {
+            padding: 16px 20px;
+            border-radius: 12px;
+            margin-bottom: 16px;
             text-align: center;
             font-weight: 500;
         }
 
+        .error-message {
+            background: #fef2f2;
+            color: var(--error);
+            border: 1px solid #fecaca;
+        }
+
         .success-message {
             background: #f0fdf4;
             color: var(--success);
-            padding: 16px 20px;
-            border-radius: 12px;
             border: 1px solid #bbf7d0;
-            margin-top: 16px;
-            text-align: center;
-            font-weight: 500;
         }
 
         .floating-elements {
@@ -372,7 +476,6 @@
             50% { transform: translateY(-20px) rotate(180deg); }
         }
 
-        /* Animations d'entrée */
         .fade-in {
             animation: fadeIn 0.5s ease-out;
         }
@@ -388,7 +491,6 @@
             }
         }
 
-        /* Responsive optimizations */
         @media (min-width: 640px) {
             .container {
                 max-width: 640px;
@@ -405,7 +507,6 @@
             }
         }
 
-        /* Accessibilité et focus states améliorés */
         @media (prefers-reduced-motion: reduce) {
             *, *::before, *::after {
                 animation-duration: 0.01ms !important;
@@ -416,7 +517,6 @@
     </style>
 </head>
 <body>
-    <!-- Éléments flottants décoratifs -->
     <div class="floating-elements">
         <div class="floating-circle"></div>
         <div class="floating-circle"></div>
@@ -479,15 +579,79 @@
     </div>
 
     <script>
+        // Données de démonstration
+        const DEMO_DATA = {
+            flashcards: {
+                "histoire": [
+                    { question: "Quand a eu lieu la Révolution française ?", answer: "La Révolution française a eu lieu de 1789 à 1799." },
+                    { question: "Qui était le roi de France au début de la Révolution ?", answer: "Louis XVI était le roi de France au début de la Révolution française." },
+                    { question: "Qu'est-ce que la Déclaration des droits de l'homme et du citoyen ?", answer: "Document fondamental adopté en 1789, proclamant les droits naturels et inaliénables de l'homme." },
+                    { question: "Que s'est-il passé le 14 juillet 1789 ?", answer: "Prise de la Bastille par le peuple parisien, symbole du début de la Révolution." },
+                    { question: "Qu'est-ce que la Terreur ?", answer: "Période de la Révolution française (1793-1794) marquée par la répression violente des opposants." }
+                ],
+                "python": [
+                    { question: "Comment déclarer une liste en Python ?", answer: "ma_liste = [] ou ma_liste = [1, 2, 3]" },
+                    { question: "Quelle est la différence entre une liste et un tuple ?", answer: "Les listes sont mutables (modifiables) alors que les tuples sont immutables." },
+                    { question: "Comment créer une fonction en Python ?", answer: "def ma_fonction(): suivi du code indenté" },
+                    { question: "Qu'est-ce qu'une boucle for ?", answer: "Structure qui permet de répéter des instructions pour chaque élément d'une séquence." },
+                    { question: "Comment gérer les exceptions ?", answer: "Avec try/except : try: code_risque except Exception: gestion_erreur" }
+                ]
+            },
+            quiz: {
+                "histoire": [
+                    {
+                        question: "En quelle année a commencé la Révolution française ?",
+                        options: ["1789", "1799", "1792", "1794"],
+                        correctAnswer: "1789",
+                        explanation: "La Révolution française a commencé en 1789 avec la convocation des États généraux et la prise de la Bastille."
+                    },
+                    {
+                        question: "Qui était surnommé 'l'Incorruptible' ?",
+                        options: ["Danton", "Robespierre", "Marat", "Saint-Just"],
+                        correctAnswer: "Robespierre",
+                        explanation: "Maximilien de Robespierre était surnommé 'l'Incorruptible' pour son intégrité morale supposée."
+                    },
+                    {
+                        question: "Quel événement marque la fin de la Révolution française ?",
+                        options: ["Coup d'État du 18 Brumaire", "Mort de Robespierre", "Concordat", "Bataille de Waterloo"],
+                        correctAnswer: "Coup d'État du 18 Brumaire",
+                        explanation: "Le coup d'État du 18 Brumaire (1799) par Napoléon Bonaparte marque traditionnellement la fin de la Révolution française."
+                    }
+                ],
+                "python": [
+                    {
+                        question: "Quel est le type de données de '123' en Python ?",
+                        options: ["int", "float", "str", "bool"],
+                        correctAnswer: "str",
+                        explanation: "Les guillemets indiquent que '123' est une chaîne de caractères (string), pas un nombre."
+                    },
+                    {
+                        question: "Comment obtenir la longueur d'une liste ?",
+                        options: ["list.length()", "len(list)", "size(list)", "length(list)"],
+                        correctAnswer: "len(list)",
+                        explanation: "La fonction len() retourne le nombre d'éléments dans une séquence."
+                    },
+                    {
+                        question: "Que fait l'opérateur % en Python ?",
+                        options: ["Division", "Modulo", "Pourcentage", "Multiplication"],
+                        correctAnswer: "Modulo",
+                        explanation: "L'opérateur % retourne le reste de la division euclidienne."
+                    }
+                ]
+            }
+        };
+
+        let currentQuizAnswers = {};
+
         document.addEventListener('DOMContentLoaded', function() {
             const form = document.getElementById('generateForm');
             const generateBtn = document.getElementById('generateBtn');
             const resultsContainer = document.getElementById('results');
 
-            form.addEventListener('submit', async function(e) {
+            form.addEventListener('submit', function(e) {
                 e.preventDefault();
                 
-                const topic = document.getElementById('topic').value.trim();
+                const topic = document.getElementById('topic').value.trim().toLowerCase();
                 const type = document.querySelector('input[name="type"]:checked').value;
                 
                 if (!topic) {
@@ -495,89 +659,199 @@
                     return;
                 }
 
-                // Animation du bouton
                 generateBtn.classList.add('loading');
                 generateBtn.disabled = true;
                 resultsContainer.innerHTML = '';
 
-                try {
-                    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);
+                // Simulation d'un délai de génération
+                setTimeout(() => {
+                    const data = window.generateContent(topic, type);
+                    if (data) {
+                        displayResults(data, type, topic);
                         showMessage(`${type === 'flashcards' ? 'Flashcards' : 'Quiz'} généré avec succès !`, 'success');
                     } else {
-                        showMessage(data.error || 'Une erreur est survenue lors de la génération.', 'error');
+                        showMessage('Sujet non reconnu. Essayez "histoire", "python", "mathématiques" ou "sciences" pour une démonstration.', 'error');
                     }
-                } catch (error) {
-                    console.error('Erreur:', error);
-                    showMessage('Erreur de connexion. Veuillez réessayer.', 'error');
-                } finally {
-                    // Restaurer le bouton
+                    
                     generateBtn.classList.remove('loading');
                     generateBtn.disabled = false;
-                }
+                }, 1500);
             });
 
-            function displayResults(data, type) {
+            function generateContent(topic, type) {
+                // Recherche par mots-clés
+                const keywords = {
+                    'histoire': ['histoire', 'révolution', 'française', 'france', 'roi', 'louis'],
+                    'python': ['python', 'programmation', 'code', 'langage', 'développement']
+                };
+
+                for (const [key, words] of Object.entries(keywords)) {
+                    if (words.some(word => topic.includes(word))) {
+                        return DEMO_DATA[type][key];
+                    }
+                }
+                
+                return null;
+            }
+
+            function displayResults(data, type, topic) {
                 resultsContainer.innerHTML = '';
+                currentQuizAnswers = {};
                 
                 if (type === 'flashcards') {
-                    data.forEach((item, index) => {
-                        const flashcardEl = document.createElement('div');
-                        flashcardEl.className = 'flashcard fade-in';
-                        flashcardEl.style.animationDelay = `${index * 0.1}s`;
-                        flashcardEl.innerHTML = `
+                    displayFlashcards(data);
+                } else {
+                    displayQuiz(data);
+                }
+            }
+
+            function displayFlashcards(flashcards) {
+                flashcards.forEach((item, index) => {
+                    const flashcardEl = document.createElement('div');
+                    flashcardEl.className = 'flashcard fade-in';
+                    flashcardEl.style.animationDelay = `${index * 0.1}s`;
+                    flashcardEl.innerHTML = `
+                        <div class="flip-indicator">
+                            <i class="fas fa-redo"></i> Cliquez pour retourner
+                        </div>
+                        <div class="card-front">
                             <h3><i class="fas fa-question"></i> ${item.question}</h3>
-                            <div class="answer">
-                                <i class="fas fa-lightbulb"></i> ${item.answer}
+                        </div>
+                        <div class="card-back">
+                            <div>
+                                <i class="fas fa-lightbulb"></i>
+                                <p style="margin-top: 10px;">${item.answer}</p>
                             </div>
-                        `;
-                        resultsContainer.appendChild(flashcardEl);
+                        </div>
+                    `;
+                    
+                    flashcardEl.addEventListener('click', function() {
+                        this.classList.toggle('flipped');
                     });
-                } else {
-                    data.forEach((item, index) => {
-                        const quizEl = document.createElement('div');
-                        quizEl.className = 'quiz-question fade-in';
-                        quizEl.style.animationDelay = `${index * 0.1}s`;
-                        
-                        const optionsHtml = item.options.map(option => `
-                            <div class="quiz-option ${option === item.correctAnswer ? 'correct' : ''}" 
-                                 onclick="toggleExplanation(this)">
-                                <i class="fas ${option === item.correctAnswer ? 'fa-check' : 'fa-times'}"></i> ${option}
-                            </div>
-                        `).join('');
-                        
-                        quizEl.innerHTML = `
-                            <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
-                            <div class="quiz-options">${optionsHtml}</div>
-                            <div class="quiz-explanation" style="display: none;">
-                                <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
-                            </div>
-                        `;
-                        resultsContainer.appendChild(quizEl);
+                    
+                    resultsContainer.appendChild(flashcardEl);
+                });
+            }
+
+            function displayQuiz(questions) {
+                questions.forEach((item, questionIndex) => {
+                    const quizEl = document.createElement('div');
+                    quizEl.className = 'quiz-question fade-in';
+                    quizEl.style.animationDelay = `${questionIndex * 0.1}s`;
+                    
+                    const optionsHtml = item.options.map((option, optionIndex) => `
+                        <div class="quiz-option" data-question="${questionIndex}" data-option="${option}">
+                            ${option}
+                            <i class="fas fa-check option-icon" style="color: var(--success);"></i>
+                            <i class="fas fa-times option-icon" style="color: var(--error);"></i>
+                        </div>
+                    `).join('');
+                    
+                    quizEl.innerHTML = `
+                        <h3><i class="fas fa-question-circle"></i> ${item.question}</h3>
+                        <div class="quiz-options">${optionsHtml}</div>
+                        <div class="quiz-explanation">
+                            <i class="fas fa-info-circle"></i> <strong>Explication :</strong> ${item.explanation}
+                        </div>
+                    `;
+                    
+                    // Ajouter les événements aux options
+                    const options = quizEl.querySelectorAll('.quiz-option');
+                    options.forEach(option => {
+                        option.addEventListener('click', function() {
+                            handleQuizAnswer(this, item, questionIndex);
+                        });
                     });
+                    
+                    resultsContainer.appendChild(quizEl);
+                });
+
+                // Ajouter le score à la fin
+                setTimeout(() => {
+                    addQuizScore(questions.length);
+                }, questions.length * 100 + 500);
+            }
+
+            function handleQuizAnswer(selectedOption, question, questionIndex) {
+                const allOptions = selectedOption.parentNode.querySelectorAll('.quiz-option');
+                const explanation = selectedOption.closest('.quiz-question').querySelector('.quiz-explanation');
+                
+                // Empêcher de répondre plusieurs fois à la même question
+                if (currentQuizAnswers[questionIndex]) {
+                    return;
+                }
+
+                currentQuizAnswers[questionIndex] = {
+                    selected: selectedOption.dataset.option,
+                    correct: question.correctAnswer,
+                    isCorrect: selectedOption.dataset.option === question.correctAnswer
+                };
+
+                // Marquer la réponse sélectionnée
+                selectedOption.classList.add('selected');
+
+                // Révéler les bonnes et mauvaises réponses
+                allOptions.forEach(option => {
+                    const isCorrect = option.dataset.option === question.correctAnswer;
+                    const isSelected = option === selectedOption;
+                    
+                    if (isCorrect) {
+                        option.classList.add('correct-answer');
+                    } else if (isSelected) {
+                        option.classList.add('incorrect-answer');
+                    }
+                    
+                    // Désactiver toutes les options
+                    option.style.pointerEvents = 'none';
+                });
+
+                // Afficher l'explication
+                explanation.classList.add('show');
+
+                updateQuizScore();
+            }
+
+            function addQuizScore(totalQuestions) {
+                const scoreEl = document.createElement('div');
+                scoreEl.className = 'quiz-score fade-in';
+                scoreEl.innerHTML = `
+                    <h3><i class="fas fa-chart-bar"></i> Score Final</h3>
+                    <div id="score-display">Répondez aux questions pour voir votre score</div>
+                `;
+                resultsContainer.insertBefore(scoreEl, resultsContainer.firstChild);
+                updateQuizScore();
+            }
+
+            function updateQuizScore() {
+                const scoreDisplay = document.getElementById('score-display');
+                if (!scoreDisplay) return;
+
+                const totalAnswered = Object.keys(currentQuizAnswers).length;
+                const correctAnswers = Object.values(currentQuizAnswers).filter(answer => answer.isCorrect).length;
+                const totalQuestions = Object.keys(currentQuizAnswers).length > 0 ? 
+                    Math.max(...Object.keys(currentQuizAnswers).map(Number)) + 1 : 0;
+
+                if (totalAnswered === 0) {
+                    scoreDisplay.innerHTML = 'Répondez aux questions pour voir votre score';
+                } else {
+                    const percentage = Math.round((correctAnswers / totalAnswered) * 100);
+                    scoreDisplay.innerHTML = `
+                        ${correctAnswers}/${totalAnswered} bonnes réponses (${percentage}%)
+                        ${totalAnswered < totalQuestions ? '<br><small>Continuez à répondre...</small>' : ''}
+                    `;
                 }
             }
 
             function showMessage(message, type) {
                 const messageEl = document.createElement('div');
-                messageEl.className = `${type}-message fade-in`;
+                messageEl.className = `message ${type}-message fade-in`;
                 messageEl.innerHTML = `
                     <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
                     ${message}
                 `;
                 
                 // Supprimer les anciens messages
-                const oldMessages = document.querySelectorAll('.error-message, .success-message');
+                const oldMessages = document.querySelectorAll('.message');
                 oldMessages.forEach(msg => msg.remove());
                 
                 resultsContainer.insertBefore(messageEl, resultsContainer.firstChild);
@@ -588,24 +862,6 @@
                 }, 5000);
             }
 
-            // Fonction globale pour l'interaction avec les quiz
-            window.toggleExplanation = function(optionEl) {
-                const quizQuestion = optionEl.closest('.quiz-question');
-                const explanation = quizQuestion.querySelector('.quiz-explanation');
-                
-                // Marquer toutes les options comme incorrectes visuellement
-                const options = quizQuestion.querySelectorAll('.quiz-option');
-                options.forEach(opt => {
-                    if (!opt.classList.contains('correct')) {
-                        opt.classList.add('incorrect');
-                    }
-                });
-                
-                // Afficher l'explication
-                explanation.style.display = 'block';
-                explanation.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            };
-
             // Animation au focus des inputs
             const inputs = document.querySelectorAll('input[type="text"]');
             inputs.forEach(input => {
@@ -618,7 +874,7 @@
                 });
             });
 
-            // Animation des cartes au scroll (pour les écrans plus grands)
+            // Animation des cartes au scroll
             const observerOptions = {
                 threshold: 0.1,
                 rootMargin: '0px 0px -50px 0px'
@@ -631,7 +887,94 @@
                     }
                 });
             }, observerOptions);
-        });
-    </script>
-</body>
-</html>
+
+            // Ajouter des sujets supplémentaires pour la démonstration
+            const additionalTopics = {
+                flashcards: {
+                    "mathématiques": [
+                        { question: "Qu'est-ce qu'une fonction linéaire ?", answer: "Une fonction de la forme f(x) = ax + b où a et b sont des constantes." },
+                        { question: "Comment calcule-t-on l'aire d'un cercle ?", answer: "Aire = π × r² où r est le rayon du cercle." },
+                        { question: "Qu'est-ce que le théorème de Pythagore ?", answer: "Dans un triangle rectangle : a² + b² = c² où c est l'hypoténuse." },
+                        { question: "Combien vaut π (pi) approximativement ?", answer: "π ≈ 3,14159..." },
+                        { question: "Qu'est-ce qu'un nombre premier ?", answer: "Un nombre entier supérieur à 1 qui n'a que deux diviseurs : 1 et lui-même." }
+                    ],
+                    "sciences": [
+                        { question: "Quelle est la vitesse de la lumière ?", answer: "La vitesse de la lumière est d'environ 300 000 km/s dans le vide." },
+                        { question: "Qu'est-ce que la photosynthèse ?", answer: "Processus par lequel les plantes convertissent la lumière solaire en énergie chimique." },
+                        { question: "Combien y a-t-il d'éléments dans le tableau périodique ?", answer: "Il y a 118 éléments chimiques connus dans le tableau périodique." },
+                        { question: "Qu'est-ce que l'ADN ?", answer: "L'acide désoxyribonucléique, molécule qui contient l'information génétique." },
+                        { question: "Quelle est la température d'ébullition de l'eau ?", answer: "L'eau bout à 100°C (373 K) sous pression atmosphérique normale." }
+                    ]
+                },
+                quiz: {
+                    "mathématiques": [
+                        {
+                            question: "Combien font 2³ (2 puissance 3) ?",
+                            options: ["6", "8", "9", "12"],
+                            correctAnswer: "8",
+                            explanation: "2³ = 2 × 2 × 2 = 8"
+                        },
+                        {
+                            question: "Dans un triangle, la somme des angles fait :",
+                            options: ["90°", "180°", "270°", "360°"],
+                            correctAnswer: "180°",
+                            explanation: "La somme des angles intérieurs d'un triangle fait toujours 180°."
+                        },
+                        {
+                            question: "Qu'est-ce que √16 ?",
+                            options: ["2", "4", "6", "8"],
+                            correctAnswer: "4",
+                            explanation: "√16 = 4 car 4 × 4 = 16"
+                        }
+                    ],
+                    "sciences": [
+                        {
+                            question: "Quel gaz représente environ 78% de l'atmosphère terrestre ?",
+                            options: ["Oxygène", "Azote", "Argon", "Dioxyde de carbone"],
+                            correctAnswer: "Azote",
+                            explanation: "L'azote (N₂) compose environ 78% de l'atmosphère terrestre."
+                        },
+                        {
+                            question: "Combien de chromosomes possède l'être humain ?",
+                            options: ["44", "46", "48", "50"],
+                            correctAnswer: "46",
+                            explanation: "L'être humain possède 46 chromosomes (23 paires)."
+                        },
+                        {
+                            question: "Quelle planète est la plus proche du Soleil ?",
+                            options: ["Vénus", "Terre", "Mercure", "Mars"],
+                            correctAnswer: "Mercure",
+                            explanation: "Mercure est la planète la plus proche du Soleil dans notre système solaire."
+                        }
+                    ]
+                }
+            };
+
+            // Fusionner avec les données existantes
+            Object.keys(additionalTopics.flashcards).forEach(topic => {
+                DEMO_DATA.flashcards[topic] = additionalTopics.flashcards[topic];
+            });
+            Object.keys(additionalTopics.quiz).forEach(topic => {
+                DEMO_DATA.quiz[topic] = additionalTopics.quiz[topic];
+            });
+
+            // Mise à jour de la fonction generateContent pour inclure plus de sujets
+            function generateContentUpdated(topic, type) {
+                const keywords = {
+                    'histoire': ['histoire', 'révolution', 'française', 'france', 'roi', 'louis', 'historique'],
+                    'python': ['python', 'programmation', 'code', 'langage', 'développement', 'informatique'],
+                    'mathématiques': ['math', 'mathématiques', 'calcul', 'géométrie', 'algèbre', 'nombre'],
+                    'sciences': ['science', 'physique', 'chimie', 'biologie', 'nature', 'expérience']
+                };
+
+                for (const [key, words] of Object.entries(keywords)) {
+                    if (words.some(word => topic.includes(word))) {
+                        return DEMO_DATA[type][key];
+                    }
+                }
+                
+                return null;
+            }
+
+            // Remplacer la fonction generateContent originale
+            window.generateContent = generateContentUpdated;