Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Princess Math Adventure</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| princessPink: '#FFB6C1', | |
| princessPurple: '#D8BFD8', | |
| princessGold: '#FFD700', | |
| princessBlue: '#ADD8E6', | |
| }, | |
| fontFamily: { | |
| princess: ['"Comic Sans MS"', 'cursive', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .princess-border { | |
| border: 3px solid #FFB6C1; | |
| border-radius: 20px; | |
| box-shadow: 0 4px 8px rgba(255, 182, 193, 0.3); | |
| } | |
| .crown-icon { | |
| color: #FFD700; | |
| text-shadow: 1px 1px 2px rgba(0,0,0,0.3); | |
| } | |
| .progress-track { | |
| background-image: linear-gradient(to right, #FFB6C1, #D8BFD8); | |
| height: 10px; | |
| border-radius: 5px; | |
| } | |
| .sparkle { | |
| position: absolute; | |
| width: 5px; | |
| height: 5px; | |
| background-color: #FFD700; | |
| border-radius: 50%; | |
| animation: sparkle 2s infinite; | |
| } | |
| @keyframes sparkle { | |
| 0% { opacity: 0; transform: scale(0.5); } | |
| 50% { opacity: 1; transform: scale(1); } | |
| 100% { opacity: 0; transform: scale(0.5); } | |
| } | |
| .castle-bg { | |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50 10 L60 20 L70 10 L80 20 L90 10 L100 30 L90 50 L80 40 L70 50 L60 40 L50 50 L40 40 L30 50 L20 40 L10 50 L0 30 L10 10 L20 20 L30 10 L40 20 Z" fill="%23FFB6C1" opacity="0.1"/></svg>'); | |
| background-size: 200px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-princessBlue font-princess min-h-screen castle-bg"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-8 relative"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-princessPink mb-2"> | |
| <i class="fas fa-crown crown-icon mr-2"></i> | |
| Princess Math Adventure | |
| <i class="fas fa-crown crown-icon ml-2"></i> | |
| </h1> | |
| <p class="text-xl text-princessPurple">Grade 5 Math Practice for Royal Minds</p> | |
| <!-- Sparkles --> | |
| <div class="sparkle" style="top: 10px; left: 20%; animation-delay: 0.2s;"></div> | |
| <div class="sparkle" style="top: 30px; right: 15%; animation-delay: 0.5s;"></div> | |
| <div class="sparkle" style="top: 5px; right: 25%; animation-delay: 0.8s;"></div> | |
| </header> | |
| <!-- Progress Section --> | |
| <section class="princess-border bg-white p-6 mb-8 relative overflow-hidden"> | |
| <div class="absolute top-0 left-0 w-full h-1 bg-princessPink"></div> | |
| <h2 class="text-2xl font-bold text-princessPink mb-4 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Your Royal Progress | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Progress Stats --> | |
| <div class="bg-princessPink bg-opacity-10 p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-princessPurple mb-2">Total Questions</h3> | |
| <div class="text-3xl font-bold text-princessPink" id="total-questions">0</div> | |
| </div> | |
| <div class="bg-princessPurple bg-opacity-10 p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-princessPurple mb-2">Correct Answers</h3> | |
| <div class="text-3xl font-bold text-princessPurple" id="correct-answers">0</div> | |
| </div> | |
| <div class="bg-princessGold bg-opacity-10 p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold text-princessPurple mb-2">Accuracy</h3> | |
| <div class="text-3xl font-bold text-princessGold" id="accuracy">0%</div> | |
| </div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mt-6"> | |
| <h4 class="text-princessPurple mb-2">Journey to the Math Castle</h4> | |
| <div class="progress-track w-full"> | |
| <div id="progress-bar" class="bg-princessGold h-full rounded-lg" style="width: 0%"></div> | |
| </div> | |
| <div class="text-right text-princessPink mt-1" id="progress-text">0% Complete</div> | |
| </div> | |
| </section> | |
| <!-- Math Practice Sections --> | |
| <section class="princess-border bg-white p-6 mb-8"> | |
| <h2 class="text-2xl font-bold text-princessPink mb-4 flex items-center"> | |
| <i class="fas fa-book-open mr-2"></i> Choose Your Royal Challenge | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Addition --> | |
| <div class="bg-princessPink bg-opacity-10 p-4 rounded-lg princess-border cursor-pointer hover:bg-princessPink hover:bg-opacity-20 transition duration-300" onclick="startPractice('addition')"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-semibold text-princessPurple">Addition</h3> | |
| <i class="fas fa-plus-circle text-2xl text-princessPink"></i> | |
| </div> | |
| <p class="text-gray-700">Practice adding numbers up to 1000</p> | |
| <div class="mt-2 text-sm text-princessPurple"> | |
| <i class="fas fa-star"></i> <span id="addition-score">0%</span> accuracy | |
| </div> | |
| </div> | |
| <!-- Subtraction --> | |
| <div class="bg-princessPurple bg-opacity-10 p-4 rounded-lg princess-border cursor-pointer hover:bg-princessPurple hover:bg-opacity-20 transition duration-300" onclick="startPractice('subtraction')"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-semibold text-princessPurple">Subtraction</h3> | |
| <i class="fas fa-minus-circle text-2xl text-princessPurple"></i> | |
| </div> | |
| <p class="text-gray-700">Practice subtracting numbers up to 1000</p> | |
| <div class="mt-2 text-sm text-princessPurple"> | |
| <i class="fas fa-star"></i> <span id="subtraction-score">0%</span> accuracy | |
| </div> | |
| </div> | |
| <!-- Multiplication --> | |
| <div class="bg-princessGold bg-opacity-10 p-4 rounded-lg princess-border cursor-pointer hover:bg-princessGold hover:bg-opacity-20 transition duration-300" onclick="startPractice('multiplication')"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-semibold text-princessPurple">Multiplication</h3> | |
| <i class="fas fa-times-circle text-2xl text-princessGold"></i> | |
| </div> | |
| <p class="text-gray-700">Practice multiplying numbers up to 12x12</p> | |
| <div class="mt-2 text-sm text-princessPurple"> | |
| <i class="fas fa-star"></i> <span id="multiplication-score">0%</span> accuracy | |
| </div> | |
| </div> | |
| <!-- Division --> | |
| <div class="bg-princessBlue bg-opacity-10 p-4 rounded-lg princess-border cursor-pointer hover:bg-princessBlue hover:bg-opacity-20 transition duration-300" onclick="startPractice('division')"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-semibold text-princessPurple">Division</h3> | |
| <i class="fas fa-divide text-2xl text-princessBlue"></i> | |
| </div> | |
| <p class="text-gray-700">Practice dividing numbers up to 144</p> | |
| <div class="mt-2 text-sm text-princessPurple"> | |
| <i class="fas fa-star"></i> <span id="division-score">0%</span> accuracy | |
| </div> | |
| </div> | |
| <!-- Fractions --> | |
| <div class="bg-princessPink bg-opacity-10 p-4 rounded-lg princess-border cursor-pointer hover:bg-princessPink hover:bg-opacity-20 transition duration-300" onclick="startPractice('fractions')"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-semibold text-princessPurple">Fractions</h3> | |
| <i class="fas fa-superscript text-2xl text-princessPink"></i> | |
| </div> | |
| <p class="text-gray-700">Practice adding and subtracting fractions</p> | |
| <div class="mt-2 text-sm text-princessPurple"> | |
| <i class="fas fa-star"></i> <span id="fractions-score">0%</span> accuracy | |
| </div> | |
| </div> | |
| <!-- Word Problems --> | |
| <div class="bg-princessPurple bg-opacity-10 p-4 rounded-lg princess-border cursor-pointer hover:bg-princessPurple hover:bg-opacity-20 transition duration-300" onclick="startPractice('wordProblems')"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-semibold text-princessPurple">Royal Word Problems</h3> | |
| <i class="fas fa-scroll text-2xl text-princessPurple"></i> | |
| </div> | |
| <p class="text-gray-700">Solve math problems with princess stories</p> | |
| <div class="mt-2 text-sm text-princessPurple"> | |
| <i class="fas fa-star"></i> <span id="wordProblems-score">0%</span> accuracy | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Practice Area (hidden initially) --> | |
| <section id="practice-section" class="princess-border bg-white p-6 mb-8 hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-bold text-princessPink" id="practice-title"> | |
| <i class="fas fa-pencil-alt mr-2"></i> Practice | |
| </h2> | |
| <button onclick="exitPractice()" class="bg-princessPink text-white px-4 py-2 rounded-lg hover:bg-princessPurple transition duration-300"> | |
| <i class="fas fa-times mr-1"></i> Exit | |
| </button> | |
| </div> | |
| <div class="bg-princessPink bg-opacity-10 p-6 rounded-lg mb-6"> | |
| <div class="text-center text-3xl font-bold mb-6" id="question">Question will appear here</div> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <input type="text" id="answer-input" class="col-span-2 p-3 border-2 border-princessPink rounded-lg focus:outline-none focus:ring-2 focus:ring-princessPink" placeholder="Your royal answer..."> | |
| </div> | |
| <div class="text-center"> | |
| <button onclick="checkAnswer()" class="bg-princessPurple text-white px-6 py-3 rounded-lg text-lg hover:bg-princessPink transition duration-300"> | |
| <i class="fas fa-check mr-2"></i> Check Answer | |
| </button> | |
| </div> | |
| </div> | |
| <div id="feedback" class="hidden"> | |
| <div id="correct-feedback" class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-4 hidden"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| <span class="font-bold">Royal Success!</span> Your answer is correct! | |
| </div> | |
| <div id="incorrect-feedback" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-4 hidden"> | |
| <i class="fas fa-times-circle mr-2"></i> | |
| <span class="font-bold">Royal Oops!</span> The correct answer is <span id="correct-answer"></span>. | |
| </div> | |
| <div class="text-center"> | |
| <button onclick="nextQuestion()" class="bg-princessGold text-white px-6 py-3 rounded-lg text-lg hover:bg-yellow-500 transition duration-300"> | |
| <i class="fas fa-arrow-right mr-2"></i> Next Question | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Achievements --> | |
| <section class="princess-border bg-white p-6"> | |
| <h2 class="text-2xl font-bold text-princessPink mb-4 flex items-center"> | |
| <i class="fas fa-trophy mr-2"></i> Royal Achievements | |
| </h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="achievement bg-gray-100 p-3 rounded-lg text-center" id="achievement-1"> | |
| <div class="text-3xl mb-2"><i class="fas fa-star text-gray-300"></i></div> | |
| <div class="text-sm">Complete 5 questions</div> | |
| </div> | |
| <div class="achievement bg-gray-100 p-3 rounded-lg text-center" id="achievement-2"> | |
| <div class="text-3xl mb-2"><i class="fas fa-crown text-gray-300"></i></div> | |
| <div class="text-sm">Score 80% accuracy</div> | |
| </div> | |
| <div class="achievement bg-gray-100 p-3 rounded-lg text-center" id="achievement-3"> | |
| <div class="text-3xl mb-2"><i class="fas fa-gem text-gray-300"></i></div> | |
| <div class="text-sm">Try all categories</div> | |
| </div> | |
| <div class="achievement bg-gray-100 p-3 rounded-lg text-center" id="achievement-4"> | |
| <div class="text-3xl mb-2"><i class="fas fa-medal text-gray-300"></i></div> | |
| <div class="text-sm">Complete 20 questions</div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-princessPink text-white text-center py-4 mt-8"> | |
| <p>© 2023 Princess Math Adventure - For Royal Grade 5 Students</p> | |
| </footer> | |
| <script> | |
| // Game state | |
| const gameState = { | |
| currentCategory: null, | |
| totalQuestions: 0, | |
| correctAnswers: 0, | |
| categoryScores: { | |
| addition: { correct: 0, total: 0 }, | |
| subtraction: { correct: 0, total: 0 }, | |
| multiplication: { correct: 0, total: 0 }, | |
| division: { correct: 0, total: 0 }, | |
| fractions: { correct: 0, total: 0 }, | |
| wordProblems: { correct: 0, total: 0 } | |
| }, | |
| currentQuestion: null, | |
| currentAnswer: null | |
| }; | |
| // Initialize the app | |
| function initApp() { | |
| updateProgress(); | |
| loadFromLocalStorage(); | |
| } | |
| // Load data from localStorage | |
| function loadFromLocalStorage() { | |
| const savedData = localStorage.getItem('princessMathData'); | |
| if (savedData) { | |
| const data = JSON.parse(savedData); | |
| gameState.totalQuestions = data.totalQuestions || 0; | |
| gameState.correctAnswers = data.correctAnswers || 0; | |
| gameState.categoryScores = data.categoryScores || gameState.categoryScores; | |
| updateProgress(); | |
| checkAchievements(); | |
| } | |
| } | |
| // Save data to localStorage | |
| function saveToLocalStorage() { | |
| localStorage.setItem('princessMathData', JSON.stringify({ | |
| totalQuestions: gameState.totalQuestions, | |
| correctAnswers: gameState.correctAnswers, | |
| categoryScores: gameState.categoryScores | |
| })); | |
| } | |
| // Start practice for a specific category | |
| function startPractice(category) { | |
| gameState.currentCategory = category; | |
| document.getElementById('practice-section').classList.remove('hidden'); | |
| document.getElementById('practice-title').innerHTML = `<i class="fas fa-pencil-alt mr-2"></i> ${getCategoryName(category)} Practice`; | |
| // Scroll to practice section | |
| document.getElementById('practice-section').scrollIntoView({ behavior: 'smooth' }); | |
| generateQuestion(); | |
| } | |
| // Exit practice | |
| function exitPractice() { | |
| document.getElementById('practice-section').classList.add('hidden'); | |
| document.getElementById('feedback').classList.add('hidden'); | |
| document.getElementById('answer-input').value = ''; | |
| } | |
| // Get category name | |
| function getCategoryName(category) { | |
| const names = { | |
| addition: 'Addition', | |
| subtraction: 'Subtraction', | |
| multiplication: 'Multiplication', | |
| division: 'Division', | |
| fractions: 'Fractions', | |
| wordProblems: 'Word Problems' | |
| }; | |
| return names[category] || category; | |
| } | |
| // Generate a new question | |
| function generateQuestion() { | |
| document.getElementById('feedback').classList.add('hidden'); | |
| document.getElementById('answer-input').value = ''; | |
| document.getElementById('answer-input').focus(); | |
| let question, answer; | |
| const category = gameState.currentCategory; | |
| switch (category) { | |
| case 'addition': | |
| const a = Math.floor(Math.random() * 500) + 100; | |
| const b = Math.floor(Math.random() * 500) + 100; | |
| question = `${a} + ${b} = ?`; | |
| answer = a + b; | |
| break; | |
| case 'subtraction': | |
| const c = Math.floor(Math.random() * 500) + 100; | |
| const d = Math.floor(Math.random() * c) + 50; | |
| question = `${c} - ${d} = ?`; | |
| answer = c - d; | |
| break; | |
| case 'multiplication': | |
| const e = Math.floor(Math.random() * 12) + 1; | |
| const f = Math.floor(Math.random() * 12) + 1; | |
| question = `${e} × ${f} = ?`; | |
| answer = e * f; | |
| break; | |
| case 'division': | |
| const g = Math.floor(Math.random() * 12) + 1; | |
| const h = Math.floor(Math.random() * 12) + 1; | |
| const product = g * h; | |
| question = `${product} ÷ ${g} = ?`; | |
| answer = h; | |
| break; | |
| case 'fractions': | |
| const denom = Math.floor(Math.random() * 8) + 2; | |
| const num1 = Math.floor(Math.random() * (denom - 1)) + 1; | |
| const num2 = Math.floor(Math.random() * (denom - 1)) + 1; | |
| if (Math.random() > 0.5) { | |
| question = `${num1}/${denom} + ${num2}/${denom} = ?`; | |
| answer = `${(num1 + num2)}/${denom}`; | |
| // Simplify if possible | |
| if ((num1 + num2) % 2 === 0 && denom % 2 === 0) { | |
| answer = `${(num1 + num2)/2}/${denom/2}`; | |
| } | |
| } else { | |
| question = `${num1}/${denom} - ${num2}/${denom} = ?`; | |
| answer = `${(num1 - num2)}/${denom}`; | |
| } | |
| break; | |
| case 'wordProblems': | |
| const wordProblemTypes = [ | |
| { | |
| question: "Princess Sophia has 24 jewels. She gives 8 jewels to her sister. How many jewels does she have left?", | |
| answer: 16 | |
| }, | |
| { | |
| question: "The royal garden has 15 rose bushes. Each bush has 7 roses. How many roses are there in total?", | |
| answer: 105 | |
| }, | |
| { | |
| question: "The castle kitchen baked 48 cupcakes for the royal party. If they arrange them on plates with 6 cupcakes each, how many plates will they need?", | |
| answer: 8 | |
| }, | |
| { | |
| question: "Princess Lily has 3/4 of a cake and Princess Rose has 1/4 of the same cake. How much cake do they have together?", | |
| answer: "1" | |
| } | |
| ]; | |
| const selected = wordProblemTypes[Math.floor(Math.random() * wordProblemTypes.length)]; | |
| question = selected.question; | |
| answer = selected.answer; | |
| break; | |
| } | |
| gameState.currentQuestion = question; | |
| gameState.currentAnswer = answer; | |
| document.getElementById('question').textContent = question; | |
| } | |
| // Check the user's answer | |
| function checkAnswer() { | |
| const userAnswer = document.getElementById('answer-input').value.trim(); | |
| const correctAnswer = gameState.currentAnswer.toString(); | |
| // Update game state | |
| gameState.totalQuestions++; | |
| gameState.categoryScores[gameState.currentCategory].total++; | |
| let isCorrect = false; | |
| // Check if answer is correct (allowing for different formats) | |
| if (userAnswer === correctAnswer) { | |
| isCorrect = true; | |
| } else { | |
| // Check if it's a fraction that could be simplified | |
| if (correctAnswer.includes('/')) { | |
| const parts = correctAnswer.split('/'); | |
| const simplified = `${parseInt(parts[0]) / parseInt(parts[1])}`; | |
| if (userAnswer === simplified) { | |
| isCorrect = true; | |
| } | |
| } | |
| // Check if it's a whole number equivalent to fraction | |
| if (correctAnswer.includes('/')) { | |
| const parts = correctAnswer.split('/'); | |
| if (parseInt(parts[0]) === parseInt(parts[1]) && userAnswer === "1") { | |
| isCorrect = true; | |
| } | |
| } | |
| } | |
| if (isCorrect) { | |
| gameState.correctAnswers++; | |
| gameState.categoryScores[gameState.currentCategory].correct++; | |
| document.getElementById('correct-feedback').classList.remove('hidden'); | |
| document.getElementById('incorrect-feedback').classList.add('hidden'); | |
| // Add sparkle effect | |
| for (let i = 0; i < 5; i++) { | |
| createSparkle(); | |
| } | |
| } else { | |
| document.getElementById('correct-feedback').classList.add('hidden'); | |
| document.getElementById('incorrect-feedback').classList.remove('hidden'); | |
| document.getElementById('correct-answer').textContent = correctAnswer; | |
| } | |
| document.getElementById('feedback').classList.remove('hidden'); | |
| updateProgress(); | |
| saveToLocalStorage(); | |
| checkAchievements(); | |
| } | |
| // Create sparkle effect | |
| function createSparkle() { | |
| const sparkle = document.createElement('div'); | |
| sparkle.className = 'sparkle'; | |
| sparkle.style.left = Math.random() * 100 + '%'; | |
| sparkle.style.top = Math.random() * 100 + '%'; | |
| sparkle.style.animationDelay = Math.random() * 2 + 's'; | |
| document.getElementById('practice-section').appendChild(sparkle); | |
| // Remove after animation | |
| setTimeout(() => { | |
| sparkle.remove(); | |
| }, 2000); | |
| } | |
| // Go to next question | |
| function nextQuestion() { | |
| generateQuestion(); | |
| } | |
| // Update progress display | |
| function updateProgress() { | |
| // Update main stats | |
| document.getElementById('total-questions').textContent = gameState.totalQuestions; | |
| document.getElementById('correct-answers').textContent = gameState.correctAnswers; | |
| const accuracy = gameState.totalQuestions > 0 | |
| ? Math.round((gameState.correctAnswers / gameState.totalQuestions) * 100) | |
| : 0; | |
| document.getElementById('accuracy').textContent = accuracy + '%'; | |
| // Update progress bar | |
| const progressPercent = Math.min(100, Math.floor(gameState.totalQuestions / 30 * 100)); | |
| document.getElementById('progress-bar').style.width = progressPercent + '%'; | |
| document.getElementById('progress-text').textContent = progressPercent + '% Complete'; | |
| // Update category scores | |
| for (const category in gameState.categoryScores) { | |
| const scoreElement = document.getElementById(`${category}-score`); | |
| if (scoreElement) { | |
| const cat = gameState.categoryScores[category]; | |
| const catAccuracy = cat.total > 0 ? Math.round((cat.correct / cat.total) * 100) : 0; | |
| scoreElement.textContent = catAccuracy + '%'; | |
| } | |
| } | |
| } | |
| // Check and unlock achievements | |
| function checkAchievements() { | |
| // Achievement 1: Complete 5 questions | |
| if (gameState.totalQuestions >= 5) { | |
| document.getElementById('achievement-1').classList.remove('bg-gray-100'); | |
| document.getElementById('achievement-1').classList.add('bg-princessPink', 'bg-opacity-20'); | |
| document.querySelector('#achievement-1 i').classList.remove('text-gray-300'); | |
| document.querySelector('#achievement-1 i').classList.add('text-princessGold'); | |
| } | |
| // Achievement 2: Score 80% accuracy | |
| const accuracy = gameState.totalQuestions > 0 | |
| ? (gameState.correctAnswers / gameState.totalQuestions) * 100 | |
| : 0; | |
| if (accuracy >= 80 && gameState.totalQuestions >= 5) { | |
| document.getElementById('achievement-2').classList.remove('bg-gray-100'); | |
| document.getElementById('achievement-2').classList.add('bg-princessPurple', 'bg-opacity-20'); | |
| document.querySelector('#achievement-2 i').classList.remove('text-gray-300'); | |
| document.querySelector('#achievement-2 i').classList.add('text-princessGold'); | |
| } | |
| // Achievement 3: Try all categories | |
| let triedAll = true; | |
| for (const category in gameState.categoryScores) { | |
| if (gameState.categoryScores[category].total === 0) { | |
| triedAll = false; | |
| break; | |
| } | |
| } | |
| if (triedAll) { | |
| document.getElementById('achievement-3').classList.remove('bg-gray-100'); | |
| document.getElementById('achievement-3').classList.add('bg-princessGold', 'bg-opacity-20'); | |
| document.querySelector('#achievement-3 i').classList.remove('text-gray-300'); | |
| document.querySelector('#achievement-3 i').classList.add('text-princessPink'); | |
| } | |
| // Achievement 4: Complete 20 questions | |
| if (gameState.totalQuestions >= 20) { | |
| document.getElementById('achievement-4').classList.remove('bg-gray-100'); | |
| document.getElementById('achievement-4').classList.add('bg-princessBlue', 'bg-opacity-20'); | |
| document.querySelector('#achievement-4 i').classList.remove('text-gray-300'); | |
| document.querySelector('#achievement-4 i').classList.add('text-princessGold'); | |
| } | |
| } | |
| // Initialize the app when the page loads | |
| window.onload = initApp; | |
| // Handle Enter key for answer submission | |
| document.getElementById('answer-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| checkAnswer(); | |
| } | |
| }); | |
| </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=FAROU71/princess-marymath" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |