Spaces:

MORYDIABAGATE
/

diabagate

Running

App Files Files Community

MORYDIABAGATE commited on Jun 5, 2025

Commit

06116a9

verified ·

1 Parent(s): e60aa80

undefined - Initial Deployment

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +588 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Diabagate
-emoji: 💻
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: diabagate
+emoji: 🐳
+colorFrom: gray
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,588 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MathAventure - Apprends les maths en t'amusant!</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .math-bg {
+            background: linear-gradient(135deg, #6b73ff 0%, #000dff 100%);
+        }
+        .progress-bar {
+            height: 10px;
+            transition: width 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .confetti {
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background-color: #f00;
+            opacity: 0;
+        }
+    </style>
+</head>
+<body class="math-bg min-h-screen font-sans text-gray-800">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row items-center justify-between mb-8">
+            <div class="flex items-center mb-4 md:mb-0">
+                <i class="fas fa-square-root-alt text-4xl text-yellow-300 mr-3"></i>
+                <h1 class="text-3xl font-bold text-white">Math<span class="text-yellow-300">Aventure</span></h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <div class="flex items-center">
+                    <span class="text-white mr-2">Niveau:</span>
+                    <span id="level" class="bg-yellow-400 text-gray-800 font-bold px-3 py-1 rounded-full">1</span>
+                </div>
+                <div class="flex items-center">
+                    <span class="text-white mr-2">Points:</span>
+                    <span id="points" class="bg-green-500 text-white font-bold px-3 py-1 rounded-full">0</span>
+                </div>
+                <div class="flex items-center">
+                    <i class="fas fa-heart text-red-500 mr-1"></i>
+                    <span id="lives" class="text-white">3</span>
+                </div>
+            </div>
+        </header>
+        <!-- Progress Bar -->
+        <div class="bg-white bg-opacity-30 rounded-full mb-8 overflow-hidden">
+            <div id="progress" class="progress-bar bg-green-400" style="width: 0%"></div>
+        </div>
+        <!-- Main Content -->
+        <main class="bg-white rounded-2xl shadow-xl overflow-hidden">
+            <!-- Dashboard View -->
+            <div id="dashboard-view" class="p-6">
+                <div class="text-center mb-10">
+                    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4">Bienvenue DIABAGATE sionga Kenza dans ton aventure mathématique!</h2>
+                    <p class="text-gray-600 max-w-2xl mx-auto">Choisis un thème pour commencer à apprendre et à relever des défis.</p>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="bg-blue-50 rounded-xl p-6 text-center cursor-pointer transition-all duration-300 card-hover challenge-card" data-topic="algebra">
+                        <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-xmark text-blue-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Algèbre</h3>
+                        <p class="text-sm text-gray-600 mb-3">Équations, expressions et plus encore</p>
+                        <span class="text-xs bg-blue-200 text-blue-800 px-2 py-1 rounded-full">12 défis</span>
+                    </div>
+                    <div class="bg-green-50 rounded-xl p-6 text-center cursor-pointer transition-all duration-300 card-hover challenge-card" data-topic="geometry">
+                        <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-shapes text-green-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Géométrie</h3>
+                        <p class="text-sm text-gray-600 mb-3">Formes, angles et calculs</p>
+                        <span class="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">8 défis</span>
+                    </div>
+                    <div class="bg-yellow-50 rounded-xl p-6 text-center cursor-pointer transition-all duration-300 card-hover challenge-card" data-topic="arithmetic">
+                        <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-calculator text-yellow-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Arithmétique</h3>
+                        <p class="text-sm text-gray-600 mb-3">Nombres, fractions et pourcentages</p>
+                        <span class="text-xs bg-yellow-200 text-yellow-800 px-2 py-1 rounded-full">15 défis</span>
+                    </div>
+                    <div class="bg-purple-50 rounded-xl p-6 text-center cursor-pointer transition-all duration-300 card-hover challenge-card" data-topic="probability">
+                        <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fas fa-dice text-purple-600 text-2xl"></i>
+                        </div>
+                        <h3 class="font-bold text-lg mb-2">Probabilités</h3>
+                        <p class="text-sm text-gray-600 mb-3">Chances, statistiques et analyse</p>
+                        <span class="text-xs bg-purple-200 text-purple-800 px-2 py-1 rounded-full">6 défis</span>
+                    </div>
+                </div>
+                <div class="mt-10 text-center">
+                    <button id="daily-challenge" class="bg-gradient-to-r from-pink-500 to-orange-500 text-white px-6 py-3 rounded-full font-bold hover:shadow-lg transition-all duration-300 floating">
+                        <i class="fas fa-bolt mr-2"></i>Défi du jour
+                    </button>
+                </div>
+            </div>
+            <!-- Quiz View -->
+            <div id="quiz-view" class="hidden p-6">
+                <div class="flex justify-between items-center mb-6">
+                    <button id="back-to-dashboard" class="text-gray-600 hover:text-gray-800">
+                        <i class="fas fa-arrow-left mr-1"></i> Retour
+                    </button>
+                    <span id="current-topic" class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-medium"></span>
+                </div>
+                <div class="max-w-2xl mx-auto">
+                    <div class="mb-8 text-center">
+                        <h2 id="question" class="text-2xl font-bold mb-4"></h2>
+                        <div id="question-image" class="hidden mx-auto mb-6 max-w-xs">
+                            <!-- Image will be inserted here if available -->
+                        </div>
+                    </div>
+                    <div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                        <!-- Options will be inserted here -->
+                    </div>
+                    <div id="answer-feedback" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6">
+                        <p id="feedback-text"></p>
+                    </div>
+                    <div class="text-center">
+                        <button id="submit-answer" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold transition-all">
+                            Valider
+                        </button>
+                        <button id="next-question" class="hidden bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-bold transition-all">
+                            <i class="fas fa-forward mr-1"></i>Question suivante
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Results View -->
+            <div id="results-view" class="hidden p-6">
+                <div class="max-w-md mx-auto text-center py-10">
+                    <div id="success-icon" class="hidden">
+                        <div class="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                            <i class="fas fa-trophy text-5xl text-yellow-500"></i>
+                        </div>
+                    </div>
+                    <div id="failure-icon" class="hidden">
+                        <div class="w-24 h-24 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                            <i class="fas fa-heart-broken text-5xl text-red-500"></i>
+                        </div>
+                    </div>
+                    <h2 id="result-title" class="text-3xl font-bold mb-4"></h2>
+                    <p id="result-message" class="text-gray-600 mb-6"></p>
+                    <div class="bg-gray-100 rounded-lg p-4 mb-6">
+                        <div class="flex justify-between items-center mb-2">
+                            <span>Questions répondues:</span>
+                            <span id="questions-answered"></span>
+                        </div>
+                        <div class="flex justify-between items-center mb-2">
+                            <span>Bonnes réponses:</span>
+                            <span id="correct-answers"></span>
+                        </div>
+                        <div class="flex justify-between items-center font-bold">
+                            <span>Points gagnés:</span>
+                            <span id="points-earned" class="text-green-600"></span>
+                        </div>
+                    </div>
+                    <button id="return-to-dashboard" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-bold transition-all">
+                        <i class="fas fa-home mr-2"></i>Retour à l'accueil
+                    </button>
+                </div>
+            </div>
+        </main>
+        <!-- Badges Section -->
+        <div id="badges-section" class="hidden mt-8 bg-white rounded-2xl shadow-xl p-6">
+            <h2 class="text-2xl font-bold mb-6 text-center">Tes badges</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
+                        <i class="fas fa-lock text-gray-500"></i>
+                    </div>
+                    <span class="text-sm">Algèbre</span>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
+                        <i class="fas fa-lock text-gray-500"></i>
+                    </div>
+                    <span class="text-sm">Géométrie</span>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-2">
+                        <i class="fas fa-star text-yellow-500"></i>
+                    </div>
+                    <span class="text-sm">Starter</span>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
+                        <i class="fas fa-lock text-gray-500"></i>
+                    </div>
+                    <span class="text-sm">50 points</span>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
+                        <i class="fas fa-lock text-gray-500"></i>
+                    </div>
+                    <span class="text-sm">Arithmétique</span>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center mx-auto mb-2">
+                        <i class="fas fa-lock text-gray-500"></i>
+                    </div>
+                    <span class="text-sm">Étoile montante</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game Data
+        const gameData = {
+            level: 1,
+            points: 0,
+            lives: 3,
+            progress: 0,
+            currentTopic: null,
+            currentQuestion: 0,
+            correctAnswers: 0,
+            totalQuestions: 0,
+            topics: {
+                algebra: {
+                    name: "Algèbre",
+                    questions: [
+                        {
+                            question: "Résous l'équation: 3x + 5 = 20",
+                            options: ["x = 5", "x = 6", "x = 4", "x = 5.5"],
+                            correct: 0,
+                            explanation: "Soustrais 5 des deux côtés: 3x = 15, puis divise par 3: x = 5"
+                        },
+                        {
+                            question: "Simplifie l'expression: 2(3x + 4) - 5",
+                            options: ["6x + 3", "6x - 3", "6x + 8", "6x - 1"],
+                            correct: 0,
+                            explanation: "D'abord distribuer: 6x + 8 - 5, puis simplifier: 6x + 3"
+                        },
+                        {
+                            question: "Quelle est la solution de l'équation x² = 16?",
+                            options: ["4", "8", "4 et -4", "2"],
+                            correct: 2,
+                            explanation: "Une équation du second degré peut avoir deux solutions: 4 et -4"
+                        }
+                    ]
+                },
+                geometry: {
+                    name: "Géométrie",
+                    questions: [
+                        {
+                            question: "Quelle est l'aire d'un rectangle de largeur 5 cm et longueur 8 cm?",
+                            options: ["13 cm²", "40 cm²", "20 cm²", "26 cm²"],
+                            correct: 1,
+                            explanation: "L'aire d'un rectangle = longueur × largeur = 8 × 5 = 40 cm²"
+                        },
+                        {
+                            question: "Quelle est la formule pour le périmètre d'un cercle?",
+                            options: ["πr²", "2πr", "4πr", "πd²"],
+                            correct: 1,
+                            explanation: "Le périmètre (circonférence) d'un cercle est donné par la formule 2πr"
+                        }
+                    ]
+                },
+                arithmetic: {
+                    name: "Arithmétique",
+                    questions: [
+                        {
+                            question: "Quel est le résultat de 7 + 3 × 2?",
+                            options: ["20", "13", "17", "16"],
+                            correct: 1,
+                            explanation: "Selon les règles d'ordre des opérations, on fait d'abord la multiplication: 3 × 2 = 6, puis 7 + 6 = 13"
+                        },
+                        {
+                            question: "Convertis 3/5 en pourcentage",
+                            options: ["30%", "60%", "35%", "50%"],
+                            correct: 1,
+                            explanation: "3/5 = 0.6 = 60%"
+                        },
+                        {
+                            question: "Quel est le PGCD de 12 et 18?",
+                            options: ["3", "6", "2", "9"],
+                            correct: 1,
+                            explanation: "Les diviseurs de 12 sont 1, 2, 3, 4, 6, 12 et ceux de 18 sont 1, 2, 3, 6, 9, 18. Le plus grand commun est 6"
+                        }
+                    ]
+                },
+                probability: {
+                    name: "Probabilités",
+                    questions: [
+                        {
+                            question: "Quelle est la probabilité d'obtenir un 6 en lançant un dé standard?",
+                            options: ["1/6", "1/2", "1/3", "1"],
+                            correct: 0,
+                            explanation: "Un dé a 6 faces équiprobables, donc P(6) = 1/6"
+                        },
+                        {
+                            question: "Si P(A) = 0.3 et P(B) = 0.4, et que les événements sont indépendants, quelle est P(A et B)?",
+                            options: ["0.7", "0.12", "0.1", "0.5"],
+                            correct: 1,
+                            explanation: "Pour des événements indépendants, P(A et B) = P(A) × P(B) = 0.3 × 0.4 = 0.12"
+                        }
+                    ]
+                }
+            },
+            // Update the UI elements with current game state
+            updateUI: function() {
+                document.getElementById('level').textContent = this.level;
+                document.getElementById('points').textContent = this.points;
+                document.getElementById('lives').textContent = this.lives;
+                document.getElementById('progress').style.width = this.progress + '%';
+                // Show badges if at least 10 points
+                if (this.points >= 10) {
+                    document.getElementById('badges-section').classList.remove('hidden');
+                }
+            },
+            // Start a new quiz on a given topic
+            startQuiz: function(topic) {
+                this.currentTopic = topic;
+                this.currentQuestion = 0;
+                this.correctAnswers = 0;
+                this.totalQuestions = this.topics[topic].questions.length;
+                // Update UI
+                document.getElementById('current-topic').textContent = this.topics[topic].name;
+                document.getElementById('dashboard-view').classList.add('hidden');
+                document.getElementById('quiz-view').classList.remove('hidden');
+                document.getElementById('results-view').classList.add('hidden');
+                // Show first question
+                this.showQuestion();
+            },
+            // Display the current question
+            showQuestion: function() {
+                const questionData = this.topics[this.currentTopic].questions[this.currentQuestion];
+                document.getElementById('question').textContent = `Question ${this.currentQuestion + 1}/${this.totalQuestions}: ${questionData.question}`;
+                // Clear any previous feedback
+                document.getElementById('answer-feedback').classList.add('hidden');
+                // Clear question image if exists
+                const questionImageDiv = document.getElementById('question-image');
+                questionImageDiv.innerHTML = '';
+                questionImageDiv.classList.add('hidden');
+                // Create options buttons
+                const optionsContainer = document.getElementById('options-container');
+                optionsContainer.innerHTML = '';
+                questionData.options.forEach((option, index) => {
+                    const optionButton = document.createElement('button');
+                    optionButton.className = 'bg-gray-100 hover:bg-gray-200 p-4 rounded-lg text-left transition-all option-btn';
+                    optionButton.textContent = option;
+                    optionButton.dataset.index = index;
+                    optionsContainer.appendChild(optionButton);
+                });
+                // Reset buttons
+                document.getElementById('submit-answer').classList.remove('hidden');
+                document.getElementById('next-question').classList.add('hidden');
+                // Reset selected option
+                document.querySelectorAll('.option-btn').forEach(btn => {
+                    btn.classList.remove('bg-blue-200', 'border-2', 'border-blue-500');
+                });
+            },
+            // Check the selected answer
+            checkAnswer: function(selectedIndex) {
+                const questionData = this.topics[this.currentTopic].questions[this.currentQuestion];
+                const feedbackDiv = document.getElementById('answer-feedback');
+                if (selectedIndex == questionData.correct) {
+                    // Correct answer
+                    this.correctAnswers++;
+                    this.points += 5;
+                    this.progress += Math.floor(100 / this.totalQuestions);
+                    feedbackDiv.className = 'bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6';
+                    document.getElementById('feedback-text').textContent = 'Correct! ' + questionData.explanation;
+                    // Create confetti effect
+                    this.createConfetti(20);
+                } else {
+                    // Wrong answer
+                    this.lives--;
+                    feedbackDiv.className = 'bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6';
+                    document.getElementById('feedback-text').textContent = `Incorrect. La bonne réponse était: ${questionData.options[questionData.correct]}. ${questionData.explanation}`;
+                    if (this.lives <= 0) {
+                        this.endQuiz(false);
+                        return;
+                    }
+                }
+                feedbackDiv.classList.remove('hidden');
+                document.getElementById('submit-answer').classList.add('hidden');
+                document.getElementById('next-question').classList.remove('hidden');
+                this.updateUI();
+            },
+            // Move to next question or end quiz
+            nextQuestion: function() {
+                this.currentQuestion++;
+                if (this.currentQuestion < this.totalQuestions) {
+                    this.showQuestion();
+                } else {
+                    this.endQuiz(true);
+                }
+            },
+            // End the quiz and show results
+            endQuiz: function(completed) {
+                document.getElementById('quiz-view').classList.add('hidden');
+                document.getElementById('results-view').classList.remove('hidden');
+                const resultTitle = document.getElementById('result-title');
+                const resultMessage = document.getElementById('result-message');
+                const successIcon = document.getElementById('success-icon');
+                const failureIcon = document.getElementById('failure-icon');
+                if (completed) {
+                    successIcon.classList.remove('hidden');
+                    failureIcon.classList.add('hidden');
+                    resultTitle.textContent = 'Quiz complété!';
+                    const percentage = Math.floor((this.correctAnswers / this.totalQuestions) * 100);
+                    if (percentage >= 80) {
+                        resultMessage.textContent = `Excellent travail! Tu as maîtrisé ${this.topics[this.currentTopic].name} avec ${percentage}% de bonnes réponses.`;
+                        this.points += 20; // Bonus for high score
+                    } else if (percentage >= 50) {
+                        resultMessage.textContent = `Bon effort! Tu as obtenu ${percentage}% de bonnes réponses. Continue comme ça!`;
+                        this.points += 10;
+                    } else {
+                        resultMessage.textContent = `Tu as obtenu ${percentage}% de bonnes réponses. Continue à pratiquer pour t'améliorer!`;
+                    }
+                    // Check for level up
+                    if (this.points >= this.level * 50) {
+                        this.level++;
+                        resultMessage.textContent += ` Félicitations! Tu passes au niveau ${this.level}!`;
+                    }
+                } else {
+                    successIcon.classList.add('hidden');
+                    failureIcon.classList.remove('hidden');
+                    resultTitle.textContent = 'Plus de vies!';
+                    resultMessage.textContent = `Tu as épuisé toutes tes vies. Ne t'inquiète pas, tu peux réessayer!`;
+                }
+                // Update stats
+                document.getElementById('questions-answered').textContent = `${this.totalQuestions} / ${this.totalQuestions}`;
+                document.getElementById('correct-answers').textContent = `${this.correctAnswers} (${Math.floor((this.correctAnswers / this.totalQuestions) * 100)}%)`;
+                document.getElementById('points-earned').textContent = completed ? '+20 points bonus' : '0 (quiz incomplet)';
+                this.updateUI();
+            },
+            // Create confetti effect
+            createConfetti: function(count) {
+                const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
+                for (let i = 0; i < count; i++) {
+                    const confetti = document.createElement('div');
+                    confetti.className = 'confetti';
+                    confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+                    confetti.style.left = Math.random() * 100 + 'vw';
+                    confetti.style.top = -10 + 'px';
+                    confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
+                    document.body.appendChild(confetti);
+                    setTimeout(() => {
+                        confetti.style.transition = 'top 2s ease-out, opacity 2s';
+                        confetti.style.top = Math.random() * 100 + 'vh';
+                        confetti.style.opacity = '0';
+                        setTimeout(() => {
+                            confetti.remove();
+                        }, 2000);
+                    }, 10);
+                }
+            }
+        };
+        // Event Listeners
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize UI
+            gameData.updateUI();
+            // Topic selection
+            document.querySelectorAll('.challenge-card').forEach(card => {
+                card.addEventListener('click', function() {
+                    gameData.startQuiz(this.dataset.topic);
+                });
+            });
+            // Daily challenge
+            document.getElementById('daily-challenge').addEventListener('click', function() {
+                // Pick a random topic for daily challenge
+                const topics = Object.keys(gameData.topics);
+                const randomTopic = topics[Math.floor(Math.random() * topics.length)];
+                gameData.startQuiz(randomTopic);
+            });
+            // Option selection
+            document.getElementById('options-container').addEventListener('click', function(e) {
+                if (e.target.classList.contains('option-btn')) {
+                    // Remove selection from all buttons
+                    document.querySelectorAll('.option-btn').forEach(btn => {
+                        btn.classList.remove('bg-blue-200', 'border-2', 'border-blue-500');
+                    });
+                    // Add selection to clicked button
+                    e.target.classList.add('bg-blue-200', 'border-2', 'border-blue-500');
+                }
+            });
+            // Submit answer
+            document.getElementById('submit-answer').addEventListener('click', function() {
+                const selectedBtn = document.querySelector('.option-btn.bg-blue-200');
+                if (selectedBtn) {
+                    gameData.checkAnswer(parseInt(selectedBtn.dataset.index));
+                } else {
+                    document.getElementById('answer-feedback').className = 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6';
+                    document.getElementById('feedback-text').textContent = 'Veuillez sélectionner une réponse avant de valider';
+                    document.getElementById('answer-feedback').classList.remove('hidden');
+                }
+            });
+            // Next question
+            document.getElementById('next-question').addEventListener('click', function() {
+                gameData.nextQuestion();
+            });
+            // Back to dashboard
+            document.getElementById('back-to-dashboard').addEventListener('click', function() {
+                if (confirm('Veux-tu vraiment quitter? Ta progression actuelle sera perdue.')) {
+                    document.getElementById('quiz-view').classList.add('hidden');
+                    document.getElementById('dashboard-view').classList.remove('hidden');
+                    document.getElementById('results-view').classList.add('hidden');
+                }
+            });
+            // Return to dashboard from results
+            document.getElementById('return-to-dashboard').addEventListener('click', function() {
+                document.getElementById('quiz-view').classList.add('hidden');
+                document.getElementById('dashboard-view').classList.remove('hidden');
+                document.getElementById('results-view').classList.add('hidden');
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MORYDIABAGATE/diabagate" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes