Spaces:
Running
Running
| <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> |