\u26a1 Pok\u00e9mon Quiz – Test Your Knowledge<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background-color: #fff3cd;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffd700' fill-opacity='0.1' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n }\n .title-font {\n font-family: 'Bangers', cursive;\n }\n .quiz-container {\n max-width: 100%;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n }\n @media (min-width: 640px) {\n .quiz-container {\n max-width: 600px;\n }\n }\n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n min-height: 60px;\n display: flex;\n align-items: center;\n }\n .option:hover {\n transform: translateY(-2px);\n border: 2px solid #3b82f6;\n }\n .correct {\n background-color: #d1fae5;\n border: 2px solid #10b981;\n }\n .incorrect {\n background-color: #fee2e2;\n border: 2px solid #ef4444;\n }\n .disabled {\n pointer-events: none;\n }\n .easy {\n color: #10b981;\n }\n .medium {\n color: #f59e0b;\n }\n .hard {\n color: #ef4444;\n }\n .pokeball {\n width: 35px;\n height: 35px;\n background: linear-gradient(to bottom, #ef4444 0%, #ef4444 45%, #1f2937 45%, #1f2937 55%, #f8fafc 55%, #f8fafc 100%);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n border: 3px solid #1f2937;\n }\n .pokeball::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n background: #f8fafc;\n border-radius: 50%;\n border: 2px solid #1f2937;\n }\n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\n 100% { transform: translateY(0px); }\n }\n .floating {\n animation: float 3s ease-in-out infinite;\n }\n .progress-bar {\n transition: width 0.5s ease;\n }\n .feedback {\n max-height: 100px;\n overflow-y: auto;\n font-size: 0.9rem;\n line-height: 1.4;\n }\n @media (max-width: 640px) {\n .quiz-container {\n margin: 0;\n border-radius: 0;\n }\n .p-8 {\n padding: 1rem;\n }\n .text-5xl {\n font-size: 2.5rem;\n }\n .text-2xl {\n font-size: 1.5rem;\n }\n .option {\n min-height: 50px;\n font-size: 0.9rem;\n }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white overflow-hidden min-h-screen\">\n \n <div id=\"start-screen\" class=\"p-8 text-center min-h-screen flex flex-col justify-center\">\n <div class=\"flex justify-center items-center mb-6\">\n <div class=\"pokeball floating mr-4\"><\/div>\n <h1 class=\"title-font text-4xl sm:text-5xl text-yellow-500 mb-0\">\u26a1 Pok\u00e9mon Quiz<\/h1>\n <div class=\"pokeball floating ml-4\"><\/div>\n <\/div>\n <p class=\"text-lg sm:text-xl mb-8 text-gray-700 px-2\">Test your knowledge about Pok\u00e9mon with these 10 questions!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 sm:px-8 rounded-full text-lg sm:text-xl transition-colors duration-300\">\n Start Quiz \u26a1\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"hidden min-h-screen\">\n <div class=\"bg-blue-500 h-2 progress-bar\" id=\"progress-bar\"><\/div>\n \n <div class=\"p-4 sm:p-8 min-h-screen flex flex-col\">\n <div class=\"flex justify-between items-center mb-4\">\n <p class=\"text-sm sm:text-lg font-semibold\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"text-sm sm:text-lg font-semibold\">Score: <span id=\"score\">0<\/span><\/p>\n <\/div>\n \n <div id=\"difficulty-indicator\" class=\"mb-4 text-right font-bold text-sm\"><\/div>\n \n <h2 id=\"question-text\" class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6 flex-shrink-0\"><\/h2>\n \n <div id=\"options-container\" class=\"grid grid-cols-1 gap-3 flex-grow\">\n \n <\/div>\n \n <div id=\"feedback\" class=\"mt-4 p-3 rounded-lg text-center hidden feedback\"><\/div>\n \n <div class=\"mt-6 text-center flex-shrink-0\">\n <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 sm:px-6 rounded-full hidden\">\n Next Question <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 sm:px-6 rounded-full hidden\">\n Finish Quiz <i class=\"fas fa-check ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"results-screen\" class=\"p-4 sm:p-8 text-center hidden min-h-screen flex flex-col justify-center\">\n <h1 class=\"title-font text-3xl sm:text-4xl text-blue-600 mb-4\">Quiz Results<\/h1>\n <div class=\"mb-6\">\n <p class=\"text-xl sm:text-2xl mb-2\">Your Score: <span id=\"final-score\" class=\"font-bold\">0<\/span> out of 100<\/p>\n <div class=\"h-4 relative max-w-md mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full bg-blue-500 transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"result-message\" class=\"mb-8 text-lg sm:text-xl px-4\"><\/div>\n \n <div class=\"mb-6\">\n <h2 class=\"text-xl sm:text-2xl mb-4 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n <div class=\"bg-green-100 p-4 rounded-lg\">\n <p class=\"text-sm sm:text-lg\"><i class=\"fas fa-check-circle text-green-500 mr-2\"><\/i> <span id=\"correct-count\">0<\/span> Correct<\/p>\n <\/div>\n <div class=\"bg-red-100 p-4 rounded-lg\">\n <p class=\"text-sm sm:text-lg\"><i class=\"fas fa-times-circle text-red-500 mr-2\"><\/i> <span id=\"incorrect-count\">0<\/span> Incorrect<\/p>\n <\/div>\n <div class=\"bg-blue-100 p-4 rounded-lg\">\n <p class=\"text-sm sm:text-lg\"><i class=\"fas fa-percentage text-blue-500 mr-2\"><\/i> <span id=\"percentage\">0<\/span>% Accuracy<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <button id=\"restart-btn\" class=\"bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 sm:px-8 rounded-full text-lg sm:text-xl transition-colors duration-300\">\n Try Again <i class=\"fas fa-redo ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n <script>\n const quizData = [\n {\n question: \"What is the first Pok\u00e9mon in the National Pok\u00e9dex?\",\n options: [\"Pikachu\", \"Bulbasaur\", \"Charmander\", \"Squirtle\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Bulbasaur is #001 in the National Pok\u00e9dex. While Pikachu is the franchise mascot, Bulbasaur was designated as the first Pok\u00e9mon in the official numbering system.\"\n },\n {\n question: \"Which type is super effective against Water-type Pok\u00e9mon?\",\n options: [\"Fire\", \"Ground\", \"Electric\", \"Ice\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Electric-type moves deal double damage to Water-type Pok\u00e9mon. This is one of the most well-known type matchups in the series.\"\n },\n {\n question: \"What is the name of Ash's hometown?\",\n options: [\"Pewter City\", \"Cerulean City\", \"Pallet Town\", \"Viridian City\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Pallet Town is where Ash Ketchum begins his journey. It's also where Professor Oak's laboratory is located, and it's known for being a peaceful town with fresh air.\"\n },\n {\n question: \"Which Pok\u00e9mon evolves into Gyarados?\",\n options: [\"Goldeen\", \"Magikarp\", \"Psyduck\", \"Tentacool\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Magikarp evolves into Gyarados at level 20. This transformation is one of the most dramatic in the series, going from a weak fish to a powerful dragon-like Pok\u00e9mon.\"\n },\n {\n question: \"What is the signature move of Pikachu?\",\n options: [\"Thunder\", \"Thunderbolt\", \"Thunder Shock\", \"Volt Tackle\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"While Pikachu can learn many Electric-type moves, Thunderbolt is considered its signature move and is the one most associated with the character in the anime and games.\"\n },\n {\n question: \"Which region is featured in Pok\u00e9mon Ruby and Sapphire?\",\n options: [\"Kanto\", \"Johto\", \"Hoenn\", \"Sinnoh\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"The Hoenn region is the setting for Generation III games (Ruby, Sapphire, and Emerald). It's known for its tropical climate and many water routes.\"\n },\n {\n question: \"What item is needed to evolve most Pok\u00e9mon that require a stone?\",\n options: [\"Moon Stone\", \"Fire Stone\", \"Evolution Stone\", \"It depends on the Pok\u00e9mon\"],\n correct: 3,\n difficulty: \"Hard\",\n explanation: \"Different Pok\u00e9mon require different evolutionary stones. For example, Eevee can evolve into Flareon with a Fire Stone, Jolteon with a Thunder Stone, or Vaporeon with a Water Stone.\"\n },\n {\n question: \"Which Pok\u00e9mon is known as the 'Genetic Pok\u00e9mon'?\",\n options: [\"Mew\", \"Mewtwo\", \"Ditto\", \"Alakazam\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"Mewtwo is classified as the Genetic Pok\u00e9mon because it was created through genetic manipulation of Mew's DNA. It's one of the most powerful Psychic-type Pok\u00e9mon.\"\n },\n {\n question: \"What type combination does Charizard have?\",\n options: [\"Fire\/Dragon\", \"Fire\/Flying\", \"Fire\/Ground\", \"Fire only\"],\n correct: 1,\n difficulty: \"Hard\",\n explanation: \"Despite its dragon-like appearance, Charizard is actually Fire\/Flying type. This makes it vulnerable to Rock-type moves, which deal 4x damage due to the type combination.\"\n },\n {\n question: \"Which Pok\u00e9mon is known for being able to transform into any other Pok\u00e9mon?\",\n options: [\"Mew\", \"Zoroark\", \"Ditto\", \"Arceus\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Ditto's signature ability 'Transform' allows it to copy the appearance, type, and moves of any Pok\u00e9mon it faces. This makes it unique among all Pok\u00e9mon species.\"\n }\n ];\n\n let currentQuestion = 0;\n let score = 0;\n let answered = false;\n let correctAnswers = 0;\n let incorrectAnswers = 0;\n\n \/\/ DOM Elements\n const startScreen = document.getElementById('start-screen');\n const quizScreen = document.getElementById('quiz-screen');\n const resultsScreen = document.getElementById('results-screen');\n const startBtn = document.getElementById('start-btn');\n const questionNumber = document.getElementById('current-question');\n const questionText = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const difficultyIndicator = document.getElementById('difficulty-indicator');\n const scoreElement = document.getElementById('score');\n const feedback = document.getElementById('feedback');\n const nextBtn = document.getElementById('next-btn');\n const finishBtn = document.getElementById('finish-btn');\n const finalScore = document.getElementById('final-score');\n const restartBtn = document.getElementById('restart-btn');\n const resultsBar = document.getElementById('results-bar');\n const correctCount = document.getElementById('correct-count');\n const incorrectCount = document.getElementById('incorrect-count');\n const percentageElement = document.getElementById('percentage');\n const resultMessage = document.getElementById('result-message');\n const progressBar = document.getElementById('progress-bar');\n\n \/\/ Event Listeners\n startBtn.addEventListener('click', startQuiz);\n nextBtn.addEventListener('click', nextQuestion);\n finishBtn.addEventListener('click', showResults);\n restartBtn.addEventListener('click', restartQuiz);\n\n \/\/ Functions\n function startQuiz() {\n startScreen.classList.add('hidden');\n quizScreen.classList.remove('hidden');\n loadQuestion();\n updateProgressBar();\n }\n\n function loadQuestion() {\n const question = quizData[currentQuestion];\n \n \/\/ Reset state\n answered = false;\n questionNumber.textContent = currentQuestion + 1;\n questionText.textContent = question.question;\n feedback.classList.add('hidden');\n nextBtn.classList.add('hidden');\n finishBtn.classList.add('hidden');\n \n \/\/ Set difficulty indicator\n difficultyIndicator.textContent = `Difficulty: `;\n let difficultySpan = document.createElement('span');\n difficultySpan.textContent = question.difficulty;\n \n if (question.difficulty.includes('Easy')) {\n difficultySpan.classList.add('easy');\n } else if (question.difficulty.includes('Medium')) {\n difficultySpan.classList.add('medium');\n } else {\n difficultySpan.classList.add('hard');\n }\n \n difficultyIndicator.appendChild(difficultySpan);\n \n \/\/ Clear previous options\n optionsContainer.innerHTML = '';\n \n \/\/ Add new options\n question.options.forEach((option, index) => {\n const optionDiv = document.createElement('div');\n optionDiv.classList.add('option', 'p-3', 'sm:p-4', 'rounded-lg', 'bg-gray-100', 'hover:bg-gray-200', 'cursor-pointer', 'transition-all');\n optionDiv.innerHTML = `\n <div class=\"flex items-center\">\n <span class=\"text-sm sm:text-lg font-bold mr-2 flex-shrink-0\">${String.fromCharCode(65 + index)}.<\/span>\n <span class=\"text-sm sm:text-base\">${option}<\/span>\n <\/div>\n `;\n optionDiv.addEventListener('click', () => selectOption(index));\n optionsContainer.appendChild(optionDiv);\n });\n }\n\n function selectOption(optionIndex) {\n if (answered) return;\n \n answered = true;\n const question = quizData[currentQuestion];\n const correct = question.correct;\n const options = optionsContainer.childNodes;\n \n \/\/ Disable all options\n options.forEach(option => option.classList.add('disabled'));\n \n \/\/ Mark selected option\n if (optionIndex === correct) {\n options[optionIndex].classList.add('correct');\n score += 10;\n scoreElement.textContent = score;\n feedback.innerHTML = `<div class=\"text-green-800\"><strong>Correct! \u26a1<\/strong><\/div><div class=\"text-sm mt-2\">${question.explanation}<\/div>`;\n feedback.classList.remove('hidden', 'bg-red-100', 'text-red-800');\n feedback.classList.add('bg-green-100', 'text-green-800');\n correctAnswers++;\n } else {\n options[optionIndex].classList.add('incorrect');\n options[correct].classList.add('correct');\n feedback.innerHTML = `<div class=\"text-red-800\"><strong>Wrong! The correct answer is ${String.fromCharCode(65 + correct)}.<\/strong><\/div><div class=\"text-sm mt-2\">${question.explanation}<\/div>`;\n feedback.classList.remove('hidden', 'bg-green-100', 'text-green-800');\n feedback.classList.add('bg-red-100', 'text-red-800');\n incorrectAnswers++;\n }\n \n feedback.classList.remove('hidden');\n \n \/\/ Show next button or finish button\n if (currentQuestion < quizData.length - 1) {\n nextBtn.classList.remove('hidden');\n } else {\n finishBtn.classList.remove('hidden');\n }\n }\n\n function nextQuestion() {\n currentQuestion++;\n loadQuestion();\n updateProgressBar();\n }\n\n function updateProgressBar() {\n const progress = ((currentQuestion + 1) \/ quizData.length) * 100;\n progressBar.style.width = `${progress}%`;\n }\n\n function showResults() {\n quizScreen.classList.add('hidden');\n resultsScreen.classList.remove('hidden');\n \n finalScore.textContent = score;\n resultsBar.style.width = `${score}%`;\n correctCount.textContent = correctAnswers;\n incorrectCount.textContent = incorrectAnswers;\n \n const percentage = Math.round((correctAnswers \/ quizData.length) * 100);\n percentageElement.textContent = percentage;\n \n \/\/ Set result message based on score\n if (score >= 90) {\n resultMessage.innerHTML = `<p class=\"font-bold text-green-600\">Amazing! You're a Pok\u00e9mon Master! \ud83c\udfc6<\/p>\n <p>Your knowledge of Pok\u00e9mon is truly impressive. Even Professor Oak would be proud!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Elite Trainer Level! \u26a1<\/p>\n <p>You have excellent knowledge of Pok\u00e9mon. Just a bit more training and you'll reach mastery!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Trainer in Training! \ud83c\udfaf<\/p>\n <p>You know the basics about Pok\u00e9mon. Keep exploring and learning!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Keep Training! Rookie Level! \ud83d\udcda<\/p>\n <p>Every Pok\u00e9mon trainer starts somewhere! Study more and try again!<\/p>`;\n }\n }\n\n function restartQuiz() {\n currentQuestion = 0;\n score = 0;\n correctAnswers = 0;\n incorrectAnswers = 0;\n \n scoreElement.textContent = score;\n \n resultsScreen.classList.add('hidden');\n startScreen.classList.remove('hidden');\n }\n \n function showConfetti() {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 }\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Poppins', 'Noto Sans JP', sans-serif;\n background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n background-size: 400% 400%;\n animation: gradientShift 15s ease infinite;\n overflow-x: hidden;\n }\n\n @keyframes gradientShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n .floating-button {\n position: absolute;\n padding: 15px 25px;\n border-radius: 25px;\n text-decoration: none;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.3s ease;\n box-shadow: 0 8px 25px rgba(0,0,0,0.3);\n backdrop-filter: blur(10px);\n border: 2px solid rgba(255,255,255,0.2);\n cursor: pointer;\n z-index: 10;\n animation: float 6s ease-in-out infinite;\n }\n\n .floating-button:hover {\n transform: scale(1.2) rotate(5deg);\n box-shadow: 0 15px 40px rgba(0,0,0,0.4);\n filter: brightness(1.2);\n }\n\n .floating-button:active {\n transform: scale(0.95);\n transition: all 0.1s;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 25% { transform: translateY(-20px) rotate(2deg); }\n 50% { transform: translateY(-10px) rotate(-2deg); }\n 75% { transform: translateY(-30px) rotate(1deg); }\n }\n\n .dragonball {\n background: linear-gradient(135deg, #ff6b35, #f7931e);\n color: white;\n animation: dragonball-move 20s linear infinite, pulse 2s ease-in-out infinite alternate;\n }\n\n .demon-slayer {\n background: linear-gradient(135deg, #8B0000, #FF1493);\n color: white;\n animation: demon-move 18s linear infinite, glow 3s ease-in-out infinite alternate;\n }\n\n .naruto {\n background: linear-gradient(135deg, #ff7f00, #ffb347);\n color: white;\n animation: naruto-move 22s linear infinite, bounce 1.5s ease-in-out infinite;\n }\n\n .jujutsu {\n background: linear-gradient(135deg, #4B0082, #8A2BE2);\n color: white;\n animation: jujutsu-move 19s linear infinite, shadow-dance 4s ease-in-out infinite;\n }\n\n .titan {\n background: linear-gradient(135deg, #2F4F4F, #708090);\n color: white;\n animation: titan-move 25s linear infinite, titan-shake 0.5s ease-in-out infinite;\n }\n\n .bluelock {\n background: linear-gradient(135deg, #1E90FF, #00BFFF);\n color: white;\n animation: bluelock-move 17s linear infinite, spin 8s linear infinite;\n }\n\n .pokemon {\n background: linear-gradient(135deg, #FFD700, #FFA500);\n color: white;\n animation: pokemon-move 16s linear infinite, pokeball-spin 3s linear infinite;\n }\n\n .urusei {\n background: linear-gradient(135deg, #FF69B4, #FF1493);\n color: white;\n animation: urusei-move 21s linear infinite, heart-beat 2s ease-in-out infinite;\n }\n\n .ghibli {\n background: linear-gradient(135deg, #32CD32, #98FB98);\n color: white;\n animation: ghibli-move 23s linear infinite, nature-sway 4s ease-in-out infinite;\n }\n\n .japanese {\n background: linear-gradient(135deg, #DC143C, #FF69B4);\n color: white;\n animation: japanese-move 20s linear infinite, sakura-fall 5s ease-in-out infinite;\n }\n\n .arabic {\n background: linear-gradient(135deg, #800080, #4B0082);\n color: white;\n animation: arabic-move 24s linear infinite, mystical-glow 3s ease-in-out infinite alternate;\n }\n\n @keyframes dragonball-move {\n 0% { left: -100px; top: 20%; }\n 25% { left: 30%; top: 10%; }\n 50% { left: 70%; top: 60%; }\n 75% { left: 90%; top: 30%; }\n 100% { left: calc(100% + 100px); top: 20%; }\n }\n\n @keyframes demon-move {\n 0% { left: calc(100% + 100px); top: 15%; }\n 25% { left: 70%; top: 45%; }\n 50% { left: 20%; top: 70%; }\n 75% { left: 10%; top: 25%; }\n 100% { left: -100px; top: 15%; }\n }\n\n @keyframes naruto-move {\n 0% { left: 20%; top: calc(100% + 50px); }\n 25% { left: 80%; top: 80%; }\n 50% { left: 60%; top: 10%; }\n 75% { left: 10%; top: 50%; }\n 100% { left: 20%; top: -50px; }\n }\n\n @keyframes jujutsu-move {\n 0% { left: 10%; top: -50px; }\n 25% { left: 40%; top: 40%; }\n 50% { left: 80%; top: 20%; }\n 75% { left: 50%; top: 80%; }\n 100% { left: 10%; top: calc(100% + 50px); }\n }\n\n @keyframes titan-move {\n 0% { left: calc(100% + 100px); top: 40%; }\n 20% { left: 80%; top: 20%; }\n 40% { left: 60%; top: 70%; }\n 60% { left: 30%; top: 30%; }\n 80% { left: 15%; top: 60%; }\n 100% { left: -100px; top: 40%; }\n }\n\n @keyframes bluelock-move {\n 0% { left: 50%; top: -50px; }\n 33% { left: 90%; top: 40%; }\n 66% { left: 10%; top: 70%; }\n 100% { left: 50%; top: calc(100% + 50px); }\n }\n\n @keyframes pokemon-move {\n 0% { left: -100px; top: 60%; }\n 30% { left: 25%; top: 20%; }\n 60% { left: 75%; top: 80%; }\n 100% { left: calc(100% + 100px); top: 40%; }\n }\n\n @keyframes urusei-move {\n 0% { left: 80%; top: calc(100% + 50px); }\n 25% { left: 20%; top: 70%; }\n 50% { left: 70%; top: 15%; }\n 75% { left: 40%; top: 50%; }\n 100% { left: 80%; top: -50px; }\n }\n\n @keyframes ghibli-move {\n 0% { left: 30%; top: -50px; }\n 20% { left: 60%; top: 30%; }\n 40% { left: 90%; top: 60%; }\n 60% { left: 70%; top: 90%; }\n 80% { left: 20%; top: 80%; }\n 100% { left: 30%; top: calc(100% + 50px); }\n }\n\n @keyframes japanese-move {\n 0% { left: -100px; top: 35%; }\n 25% { left: 35%; top: 65%; }\n 50% { left: 65%; top: 25%; }\n 75% { left: 85%; top: 75%; }\n 100% { left: calc(100% + 100px); top: 35%; }\n }\n\n @keyframes arabic-move {\n 0% { left: calc(100% + 100px); top: 25%; }\n 20% { left: 75%; top: 55%; }\n 40% { left: 45%; top: 15%; }\n 60% { left: 25%; top: 75%; }\n 80% { left: 55%; top: 45%; }\n 100% { left: -100px; top: 25%; }\n }\n\n @keyframes pulse {\n 0% { box-shadow: 0 8px 25px rgba(255,107,53,0.3); }\n 100% { box-shadow: 0 8px 40px rgba(255,107,53,0.8); }\n }\n\n @keyframes glow {\n 0% { box-shadow: 0 8px 25px rgba(255,20,147,0.3); }\n 100% { box-shadow: 0 0 30px rgba(255,20,147,0.8); }\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n @keyframes shadow-dance {\n 0%, 100% { box-shadow: 0 8px 25px rgba(75,0,130,0.3); }\n 50% { box-shadow: 0 15px 40px rgba(138,43,226,0.6); }\n }\n\n @keyframes titan-shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-2px); }\n 75% { transform: translateX(2px); }\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @keyframes pokeball-spin {\n 0%, 100% { transform: rotateY(0deg); }\n 50% { transform: rotateY(180deg); }\n }\n\n @keyframes heart-beat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n @keyframes nature-sway {\n 0%, 100% { transform: rotate(-2deg); }\n 50% { transform: rotate(2deg); }\n }\n\n @keyframes sakura-fall {\n 0% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-5px) rotate(90deg); }\n 50% { transform: translateY(0) rotate(180deg); }\n 75% { transform: translateY(-3px) rotate(270deg); }\n 100% { transform: translateY(0) rotate(360deg); }\n }\n\n @keyframes mystical-glow {\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n }\n\n .particles {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n }\n\n .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(255,255,255,0.6);\n border-radius: 50%;\n animation: particle-float 10s linear infinite;\n }\n\n @keyframes particle-float {\n 0% {\n transform: translateY(100vh) rotate(0deg);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-100px) rotate(360deg);\n opacity: 0;\n }\n }\n\n .title {\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n background: rgba(255,255,255,0.1);\n backdrop-filter: blur(20px);\n padding: 10px 30px;\n border-radius: 25px;\n border: 2px solid rgba(255,255,255,0.2);\n color: white;\n font-weight: 700;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n }\n\n @media (max-width: 768px) {\n .floating-button {\n padding: 12px 20px;\n font-size: 14px;\n }\n .title {\n font-size: 18px;\n padding: 8px 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <a href=\"https:\/\/amzn.to\/3IAcyx3\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button demon-slayer\">\n <i class=\"fas fa-sword\"><\/i> Demon Slayer\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4kR99HH\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button naruto\">\n <i class=\"fas fa-leaf\"><\/i> Naruto\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/3IwSf3L\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button jujutsu\">\n <i class=\"fas fa-magic\"><\/i> Jujutsu Kaisen\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/3IArMC7\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button titan\">\n <i class=\"fas fa-shield-alt\"><\/i> Attack on Titan\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/413owWa\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button bluelock\">\n <i class=\"fas fa-football-ball\"><\/i> Blue Lock\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/3IUL6tV\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button pokemon\">\n <i class=\"fas fa-paw\"><\/i> Pok\u00e9mon\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4lFPiwl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button urusei\">\n <i class=\"fas fa-heart\"><\/i> Urusei Yatsura\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4nZ12vn\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button ghibli\">\n <i class=\"fas fa-tree\"><\/i> Studio Ghibli\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4lGhajZ\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button japanese\">\n <i class=\"fas fa-torii-gate\"><\/i> \u65e5\u672c\u30a2\u30cb\u30e1\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4f3zmS2\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button arabic\">\n <i class=\"fas fa-moon\"><\/i> \u0627\u0644\u0623\u0646\u0645\u064a \u0627\u0644\u064a\u0627\u0628\u0627\u0646\u064a\n <\/a>\n\n <script>\n \/\/ \u30d1\u30fc\u30c6\u30a3\u30af\u30eb\u52b9\u679c\u3092\u751f\u6210\n function createParticles() {\n const particlesContainer = document.getElementById('particles');\n \n for (let i = 0; i < 50; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 10 + 's';\n particle.style.animationDuration = (Math.random() * 10 + 10) + 's';\n particlesContainer.appendChild(particle);\n }\n }\n\n \/\/ \u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u52b9\u679c\n document.querySelectorAll('.floating-button').forEach(button => {\n button.addEventListener('click', function(e) {\n \/\/ \u30af\u30ea\u30c3\u30af\u6642\u306e\u6ce2\u7d0b\u52b9\u679c\n const ripple = document.createElement('div');\n ripple.style.position = 'absolute';\n ripple.style.width = '20px';\n ripple.style.height = '20px';\n ripple.style.background = 'rgba(255,255,255,0.6)';\n ripple.style.borderRadius = '50%';\n ripple.style.pointerEvents = 'none';\n ripple.style.transform = 'scale(0)';\n ripple.style.animation = 'ripple 0.6s linear';\n \n const rect = this.getBoundingClientRect();\n ripple.style.left = (e.clientX - rect.left - 10) + 'px';\n ripple.style.top = (e.clientY - rect.top - 10) + 'px';\n \n this.style.position = 'relative';\n this.appendChild(ripple);\n \n setTimeout(() => {\n ripple.remove();\n }, 600);\n });\n\n \/\/ \u30db\u30d0\u30fc\u6642\u306e\u97f3\u697d\u30ce\u30fc\u30c8\u52b9\u679c\n button.addEventListener('mouseenter', function() {\n if (Math.random() > 0.7) {\n const note = document.createElement('div');\n note.innerHTML = '\u266a';\n note.style.position = 'absolute';\n note.style.color = 'rgba(255,255,255,0.8)';\n note.style.fontSize = '20px';\n note.style.pointerEvents = 'none';\n note.style.animation = 'note-float 2s ease-out forwards';\n note.style.left = '50%';\n note.style.top = '-30px';\n note.style.transform = 'translateX(-50%)';\n \n this.style.position = 'relative';\n this.appendChild(note);\n \n setTimeout(() => {\n note.remove();\n }, 2000);\n }\n });\n });\n\n \/\/ CSS for ripple and note effects\n const style = document.createElement('style');\n style.textContent = `\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n \n @keyframes note-float {\n 0% {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50%) translateY(-50px);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n\n\n\n\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u26a1 Pok\u00e9mon Quiz – Test Your Knowledge \u26a1 Pok\u00e9mon Quiz Test your knowledge about Pok\u00e9mon with these 10 questions! Start Quiz \u26a1 1 of 10 Score: 0 Next Question Finish Quiz Quiz Results Your Score: 0 out of 100 Your Performance 0 Correct 0 Incorrect 0% Accuracy Try Again Demon Slayer Naruto Jujutsu Kaisen Attack […]<\/p>\n","protected":false},"author":1,"featured_media":119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,11],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-pokemon"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/07\/Lets-Try-Anime-Quiz-1-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=76"}],"version-history":[{"count":15,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/119"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":76,"date":"2025-07-11T03:55:07","date_gmt":"2025-07-11T10:55:07","guid":{"rendered":"https:\/\/www.newwealth.shop\/a\/?p=76"},"modified":"2025-07-25T04:36:50","modified_gmt":"2025-07-25T11:36:50","slug":"76","status":"publish","type":"post","link":"https:\/\/www.newwealth.shop\/a\/?p=76","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n \u26a1 Pok\u00e9mon Quiz – Test Your Knowledge<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background-color: #fff3cd;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffd700' fill-opacity='0.1' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n }\n .title-font {\n font-family: 'Bangers', cursive;\n }\n .quiz-container {\n max-width: 100%;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n }\n @media (min-width: 640px) {\n .quiz-container {\n max-width: 600px;\n }\n }\n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n min-height: 60px;\n display: flex;\n align-items: center;\n }\n .option:hover {\n transform: translateY(-2px);\n border: 2px solid #3b82f6;\n }\n .correct {\n background-color: #d1fae5;\n border: 2px solid #10b981;\n }\n .incorrect {\n background-color: #fee2e2;\n border: 2px solid #ef4444;\n }\n .disabled {\n pointer-events: none;\n }\n .easy {\n color: #10b981;\n }\n .medium {\n color: #f59e0b;\n }\n .hard {\n color: #ef4444;\n }\n .pokeball {\n width: 35px;\n height: 35px;\n background: linear-gradient(to bottom, #ef4444 0%, #ef4444 45%, #1f2937 45%, #1f2937 55%, #f8fafc 55%, #f8fafc 100%);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n border: 3px solid #1f2937;\n }\n .pokeball::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 12px;\n height: 12px;\n background: #f8fafc;\n border-radius: 50%;\n border: 2px solid #1f2937;\n }\n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\n 100% { transform: translateY(0px); }\n }\n .floating {\n animation: float 3s ease-in-out infinite;\n }\n .progress-bar {\n transition: width 0.5s ease;\n }\n .feedback {\n max-height: 100px;\n overflow-y: auto;\n font-size: 0.9rem;\n line-height: 1.4;\n }\n @media (max-width: 640px) {\n .quiz-container {\n margin: 0;\n border-radius: 0;\n }\n .p-8 {\n padding: 1rem;\n }\n .text-5xl {\n font-size: 2.5rem;\n }\n .text-2xl {\n font-size: 1.5rem;\n }\n .option {\n min-height: 50px;\n font-size: 0.9rem;\n }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white overflow-hidden min-h-screen\">\n \n <div id=\"start-screen\" class=\"p-8 text-center min-h-screen flex flex-col justify-center\">\n <div class=\"flex justify-center items-center mb-6\">\n <div class=\"pokeball floating mr-4\"><\/div>\n <h1 class=\"title-font text-4xl sm:text-5xl text-yellow-500 mb-0\">\u26a1 Pok\u00e9mon Quiz<\/h1>\n <div class=\"pokeball floating ml-4\"><\/div>\n <\/div>\n <p class=\"text-lg sm:text-xl mb-8 text-gray-700 px-2\">Test your knowledge about Pok\u00e9mon with these 10 questions!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 sm:px-8 rounded-full text-lg sm:text-xl transition-colors duration-300\">\n Start Quiz \u26a1\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"hidden min-h-screen\">\n <div class=\"bg-blue-500 h-2 progress-bar\" id=\"progress-bar\"><\/div>\n \n <div class=\"p-4 sm:p-8 min-h-screen flex flex-col\">\n <div class=\"flex justify-between items-center mb-4\">\n <p class=\"text-sm sm:text-lg font-semibold\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"text-sm sm:text-lg font-semibold\">Score: <span id=\"score\">0<\/span><\/p>\n <\/div>\n \n <div id=\"difficulty-indicator\" class=\"mb-4 text-right font-bold text-sm\"><\/div>\n \n <h2 id=\"question-text\" class=\"text-lg sm:text-2xl font-bold mb-4 sm:mb-6 flex-shrink-0\"><\/h2>\n \n <div id=\"options-container\" class=\"grid grid-cols-1 gap-3 flex-grow\">\n \n <\/div>\n \n <div id=\"feedback\" class=\"mt-4 p-3 rounded-lg text-center hidden feedback\"><\/div>\n \n <div class=\"mt-6 text-center flex-shrink-0\">\n <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 sm:px-6 rounded-full hidden\">\n Next Question <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 sm:px-6 rounded-full hidden\">\n Finish Quiz <i class=\"fas fa-check ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"results-screen\" class=\"p-4 sm:p-8 text-center hidden min-h-screen flex flex-col justify-center\">\n <h1 class=\"title-font text-3xl sm:text-4xl text-blue-600 mb-4\">Quiz Results<\/h1>\n <div class=\"mb-6\">\n <p class=\"text-xl sm:text-2xl mb-2\">Your Score: <span id=\"final-score\" class=\"font-bold\">0<\/span> out of 100<\/p>\n <div class=\"h-4 relative max-w-md mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full bg-blue-500 transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"result-message\" class=\"mb-8 text-lg sm:text-xl px-4\"><\/div>\n \n <div class=\"mb-6\">\n <h2 class=\"text-xl sm:text-2xl mb-4 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\n <div class=\"bg-green-100 p-4 rounded-lg\">\n <p class=\"text-sm sm:text-lg\"><i class=\"fas fa-check-circle text-green-500 mr-2\"><\/i> <span id=\"correct-count\">0<\/span> Correct<\/p>\n <\/div>\n <div class=\"bg-red-100 p-4 rounded-lg\">\n <p class=\"text-sm sm:text-lg\"><i class=\"fas fa-times-circle text-red-500 mr-2\"><\/i> <span id=\"incorrect-count\">0<\/span> Incorrect<\/p>\n <\/div>\n <div class=\"bg-blue-100 p-4 rounded-lg\">\n <p class=\"text-sm sm:text-lg\"><i class=\"fas fa-percentage text-blue-500 mr-2\"><\/i> <span id=\"percentage\">0<\/span>% Accuracy<\/p>\n <\/div>\n <\/div>\n <\/div>\n \n <button id=\"restart-btn\" class=\"bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 sm:px-8 rounded-full text-lg sm:text-xl transition-colors duration-300\">\n Try Again <i class=\"fas fa-redo ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n <script>\n const quizData = [\n {\n question: \"What is the first Pok\u00e9mon in the National Pok\u00e9dex?\",\n options: [\"Pikachu\", \"Bulbasaur\", \"Charmander\", \"Squirtle\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Bulbasaur is #001 in the National Pok\u00e9dex. While Pikachu is the franchise mascot, Bulbasaur was designated as the first Pok\u00e9mon in the official numbering system.\"\n },\n {\n question: \"Which type is super effective against Water-type Pok\u00e9mon?\",\n options: [\"Fire\", \"Ground\", \"Electric\", \"Ice\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Electric-type moves deal double damage to Water-type Pok\u00e9mon. This is one of the most well-known type matchups in the series.\"\n },\n {\n question: \"What is the name of Ash's hometown?\",\n options: [\"Pewter City\", \"Cerulean City\", \"Pallet Town\", \"Viridian City\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Pallet Town is where Ash Ketchum begins his journey. It's also where Professor Oak's laboratory is located, and it's known for being a peaceful town with fresh air.\"\n },\n {\n question: \"Which Pok\u00e9mon evolves into Gyarados?\",\n options: [\"Goldeen\", \"Magikarp\", \"Psyduck\", \"Tentacool\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Magikarp evolves into Gyarados at level 20. This transformation is one of the most dramatic in the series, going from a weak fish to a powerful dragon-like Pok\u00e9mon.\"\n },\n {\n question: \"What is the signature move of Pikachu?\",\n options: [\"Thunder\", \"Thunderbolt\", \"Thunder Shock\", \"Volt Tackle\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"While Pikachu can learn many Electric-type moves, Thunderbolt is considered its signature move and is the one most associated with the character in the anime and games.\"\n },\n {\n question: \"Which region is featured in Pok\u00e9mon Ruby and Sapphire?\",\n options: [\"Kanto\", \"Johto\", \"Hoenn\", \"Sinnoh\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"The Hoenn region is the setting for Generation III games (Ruby, Sapphire, and Emerald). It's known for its tropical climate and many water routes.\"\n },\n {\n question: \"What item is needed to evolve most Pok\u00e9mon that require a stone?\",\n options: [\"Moon Stone\", \"Fire Stone\", \"Evolution Stone\", \"It depends on the Pok\u00e9mon\"],\n correct: 3,\n difficulty: \"Hard\",\n explanation: \"Different Pok\u00e9mon require different evolutionary stones. For example, Eevee can evolve into Flareon with a Fire Stone, Jolteon with a Thunder Stone, or Vaporeon with a Water Stone.\"\n },\n {\n question: \"Which Pok\u00e9mon is known as the 'Genetic Pok\u00e9mon'?\",\n options: [\"Mew\", \"Mewtwo\", \"Ditto\", \"Alakazam\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"Mewtwo is classified as the Genetic Pok\u00e9mon because it was created through genetic manipulation of Mew's DNA. It's one of the most powerful Psychic-type Pok\u00e9mon.\"\n },\n {\n question: \"What type combination does Charizard have?\",\n options: [\"Fire\/Dragon\", \"Fire\/Flying\", \"Fire\/Ground\", \"Fire only\"],\n correct: 1,\n difficulty: \"Hard\",\n explanation: \"Despite its dragon-like appearance, Charizard is actually Fire\/Flying type. This makes it vulnerable to Rock-type moves, which deal 4x damage due to the type combination.\"\n },\n {\n question: \"Which Pok\u00e9mon is known for being able to transform into any other Pok\u00e9mon?\",\n options: [\"Mew\", \"Zoroark\", \"Ditto\", \"Arceus\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Ditto's signature ability 'Transform' allows it to copy the appearance, type, and moves of any Pok\u00e9mon it faces. This makes it unique among all Pok\u00e9mon species.\"\n }\n ];\n\n let currentQuestion = 0;\n let score = 0;\n let answered = false;\n let correctAnswers = 0;\n let incorrectAnswers = 0;\n\n \/\/ DOM Elements\n const startScreen = document.getElementById('start-screen');\n const quizScreen = document.getElementById('quiz-screen');\n const resultsScreen = document.getElementById('results-screen');\n const startBtn = document.getElementById('start-btn');\n const questionNumber = document.getElementById('current-question');\n const questionText = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const difficultyIndicator = document.getElementById('difficulty-indicator');\n const scoreElement = document.getElementById('score');\n const feedback = document.getElementById('feedback');\n const nextBtn = document.getElementById('next-btn');\n const finishBtn = document.getElementById('finish-btn');\n const finalScore = document.getElementById('final-score');\n const restartBtn = document.getElementById('restart-btn');\n const resultsBar = document.getElementById('results-bar');\n const correctCount = document.getElementById('correct-count');\n const incorrectCount = document.getElementById('incorrect-count');\n const percentageElement = document.getElementById('percentage');\n const resultMessage = document.getElementById('result-message');\n const progressBar = document.getElementById('progress-bar');\n\n \/\/ Event Listeners\n startBtn.addEventListener('click', startQuiz);\n nextBtn.addEventListener('click', nextQuestion);\n finishBtn.addEventListener('click', showResults);\n restartBtn.addEventListener('click', restartQuiz);\n\n \/\/ Functions\n function startQuiz() {\n startScreen.classList.add('hidden');\n quizScreen.classList.remove('hidden');\n loadQuestion();\n updateProgressBar();\n }\n\n function loadQuestion() {\n const question = quizData[currentQuestion];\n \n \/\/ Reset state\n answered = false;\n questionNumber.textContent = currentQuestion + 1;\n questionText.textContent = question.question;\n feedback.classList.add('hidden');\n nextBtn.classList.add('hidden');\n finishBtn.classList.add('hidden');\n \n \/\/ Set difficulty indicator\n difficultyIndicator.textContent = `Difficulty: `;\n let difficultySpan = document.createElement('span');\n difficultySpan.textContent = question.difficulty;\n \n if (question.difficulty.includes('Easy')) {\n difficultySpan.classList.add('easy');\n } else if (question.difficulty.includes('Medium')) {\n difficultySpan.classList.add('medium');\n } else {\n difficultySpan.classList.add('hard');\n }\n \n difficultyIndicator.appendChild(difficultySpan);\n \n \/\/ Clear previous options\n optionsContainer.innerHTML = '';\n \n \/\/ Add new options\n question.options.forEach((option, index) => {\n const optionDiv = document.createElement('div');\n optionDiv.classList.add('option', 'p-3', 'sm:p-4', 'rounded-lg', 'bg-gray-100', 'hover:bg-gray-200', 'cursor-pointer', 'transition-all');\n optionDiv.innerHTML = `\n <div class=\"flex items-center\">\n <span class=\"text-sm sm:text-lg font-bold mr-2 flex-shrink-0\">${String.fromCharCode(65 + index)}.<\/span>\n <span class=\"text-sm sm:text-base\">${option}<\/span>\n <\/div>\n `;\n optionDiv.addEventListener('click', () => selectOption(index));\n optionsContainer.appendChild(optionDiv);\n });\n }\n\n function selectOption(optionIndex) {\n if (answered) return;\n \n answered = true;\n const question = quizData[currentQuestion];\n const correct = question.correct;\n const options = optionsContainer.childNodes;\n \n \/\/ Disable all options\n options.forEach(option => option.classList.add('disabled'));\n \n \/\/ Mark selected option\n if (optionIndex === correct) {\n options[optionIndex].classList.add('correct');\n score += 10;\n scoreElement.textContent = score;\n feedback.innerHTML = `<div class=\"text-green-800\"><strong>Correct! \u26a1<\/strong><\/div><div class=\"text-sm mt-2\">${question.explanation}<\/div>`;\n feedback.classList.remove('hidden', 'bg-red-100', 'text-red-800');\n feedback.classList.add('bg-green-100', 'text-green-800');\n correctAnswers++;\n } else {\n options[optionIndex].classList.add('incorrect');\n options[correct].classList.add('correct');\n feedback.innerHTML = `<div class=\"text-red-800\"><strong>Wrong! The correct answer is ${String.fromCharCode(65 + correct)}.<\/strong><\/div><div class=\"text-sm mt-2\">${question.explanation}<\/div>`;\n feedback.classList.remove('hidden', 'bg-green-100', 'text-green-800');\n feedback.classList.add('bg-red-100', 'text-red-800');\n incorrectAnswers++;\n }\n \n feedback.classList.remove('hidden');\n \n \/\/ Show next button or finish button\n if (currentQuestion < quizData.length - 1) {\n nextBtn.classList.remove('hidden');\n } else {\n finishBtn.classList.remove('hidden');\n }\n }\n\n function nextQuestion() {\n currentQuestion++;\n loadQuestion();\n updateProgressBar();\n }\n\n function updateProgressBar() {\n const progress = ((currentQuestion + 1) \/ quizData.length) * 100;\n progressBar.style.width = `${progress}%`;\n }\n\n function showResults() {\n quizScreen.classList.add('hidden');\n resultsScreen.classList.remove('hidden');\n \n finalScore.textContent = score;\n resultsBar.style.width = `${score}%`;\n correctCount.textContent = correctAnswers;\n incorrectCount.textContent = incorrectAnswers;\n \n const percentage = Math.round((correctAnswers \/ quizData.length) * 100);\n percentageElement.textContent = percentage;\n \n \/\/ Set result message based on score\n if (score >= 90) {\n resultMessage.innerHTML = `<p class=\"font-bold text-green-600\">Amazing! You're a Pok\u00e9mon Master! \ud83c\udfc6<\/p>\n <p>Your knowledge of Pok\u00e9mon is truly impressive. Even Professor Oak would be proud!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Elite Trainer Level! \u26a1<\/p>\n <p>You have excellent knowledge of Pok\u00e9mon. Just a bit more training and you'll reach mastery!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Trainer in Training! \ud83c\udfaf<\/p>\n <p>You know the basics about Pok\u00e9mon. Keep exploring and learning!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Keep Training! Rookie Level! \ud83d\udcda<\/p>\n <p>Every Pok\u00e9mon trainer starts somewhere! Study more and try again!<\/p>`;\n }\n }\n\n function restartQuiz() {\n currentQuestion = 0;\n score = 0;\n correctAnswers = 0;\n incorrectAnswers = 0;\n \n scoreElement.textContent = score;\n \n resultsScreen.classList.add('hidden');\n startScreen.classList.remove('hidden');\n }\n \n function showConfetti() {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 }\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Poppins', 'Noto Sans JP', sans-serif;\n background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);\n background-size: 400% 400%;\n animation: gradientShift 15s ease infinite;\n overflow-x: hidden;\n }\n\n @keyframes gradientShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n }\n\n .floating-button {\n position: absolute;\n padding: 15px 25px;\n border-radius: 25px;\n text-decoration: none;\n font-weight: 600;\n font-size: 16px;\n transition: all 0.3s ease;\n box-shadow: 0 8px 25px rgba(0,0,0,0.3);\n backdrop-filter: blur(10px);\n border: 2px solid rgba(255,255,255,0.2);\n cursor: pointer;\n z-index: 10;\n animation: float 6s ease-in-out infinite;\n }\n\n .floating-button:hover {\n transform: scale(1.2) rotate(5deg);\n box-shadow: 0 15px 40px rgba(0,0,0,0.4);\n filter: brightness(1.2);\n }\n\n .floating-button:active {\n transform: scale(0.95);\n transition: all 0.1s;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0px) rotate(0deg); }\n 25% { transform: translateY(-20px) rotate(2deg); }\n 50% { transform: translateY(-10px) rotate(-2deg); }\n 75% { transform: translateY(-30px) rotate(1deg); }\n }\n\n .dragonball {\n background: linear-gradient(135deg, #ff6b35, #f7931e);\n color: white;\n animation: dragonball-move 20s linear infinite, pulse 2s ease-in-out infinite alternate;\n }\n\n .demon-slayer {\n background: linear-gradient(135deg, #8B0000, #FF1493);\n color: white;\n animation: demon-move 18s linear infinite, glow 3s ease-in-out infinite alternate;\n }\n\n .naruto {\n background: linear-gradient(135deg, #ff7f00, #ffb347);\n color: white;\n animation: naruto-move 22s linear infinite, bounce 1.5s ease-in-out infinite;\n }\n\n .jujutsu {\n background: linear-gradient(135deg, #4B0082, #8A2BE2);\n color: white;\n animation: jujutsu-move 19s linear infinite, shadow-dance 4s ease-in-out infinite;\n }\n\n .titan {\n background: linear-gradient(135deg, #2F4F4F, #708090);\n color: white;\n animation: titan-move 25s linear infinite, titan-shake 0.5s ease-in-out infinite;\n }\n\n .bluelock {\n background: linear-gradient(135deg, #1E90FF, #00BFFF);\n color: white;\n animation: bluelock-move 17s linear infinite, spin 8s linear infinite;\n }\n\n .pokemon {\n background: linear-gradient(135deg, #FFD700, #FFA500);\n color: white;\n animation: pokemon-move 16s linear infinite, pokeball-spin 3s linear infinite;\n }\n\n .urusei {\n background: linear-gradient(135deg, #FF69B4, #FF1493);\n color: white;\n animation: urusei-move 21s linear infinite, heart-beat 2s ease-in-out infinite;\n }\n\n .ghibli {\n background: linear-gradient(135deg, #32CD32, #98FB98);\n color: white;\n animation: ghibli-move 23s linear infinite, nature-sway 4s ease-in-out infinite;\n }\n\n .japanese {\n background: linear-gradient(135deg, #DC143C, #FF69B4);\n color: white;\n animation: japanese-move 20s linear infinite, sakura-fall 5s ease-in-out infinite;\n }\n\n .arabic {\n background: linear-gradient(135deg, #800080, #4B0082);\n color: white;\n animation: arabic-move 24s linear infinite, mystical-glow 3s ease-in-out infinite alternate;\n }\n\n @keyframes dragonball-move {\n 0% { left: -100px; top: 20%; }\n 25% { left: 30%; top: 10%; }\n 50% { left: 70%; top: 60%; }\n 75% { left: 90%; top: 30%; }\n 100% { left: calc(100% + 100px); top: 20%; }\n }\n\n @keyframes demon-move {\n 0% { left: calc(100% + 100px); top: 15%; }\n 25% { left: 70%; top: 45%; }\n 50% { left: 20%; top: 70%; }\n 75% { left: 10%; top: 25%; }\n 100% { left: -100px; top: 15%; }\n }\n\n @keyframes naruto-move {\n 0% { left: 20%; top: calc(100% + 50px); }\n 25% { left: 80%; top: 80%; }\n 50% { left: 60%; top: 10%; }\n 75% { left: 10%; top: 50%; }\n 100% { left: 20%; top: -50px; }\n }\n\n @keyframes jujutsu-move {\n 0% { left: 10%; top: -50px; }\n 25% { left: 40%; top: 40%; }\n 50% { left: 80%; top: 20%; }\n 75% { left: 50%; top: 80%; }\n 100% { left: 10%; top: calc(100% + 50px); }\n }\n\n @keyframes titan-move {\n 0% { left: calc(100% + 100px); top: 40%; }\n 20% { left: 80%; top: 20%; }\n 40% { left: 60%; top: 70%; }\n 60% { left: 30%; top: 30%; }\n 80% { left: 15%; top: 60%; }\n 100% { left: -100px; top: 40%; }\n }\n\n @keyframes bluelock-move {\n 0% { left: 50%; top: -50px; }\n 33% { left: 90%; top: 40%; }\n 66% { left: 10%; top: 70%; }\n 100% { left: 50%; top: calc(100% + 50px); }\n }\n\n @keyframes pokemon-move {\n 0% { left: -100px; top: 60%; }\n 30% { left: 25%; top: 20%; }\n 60% { left: 75%; top: 80%; }\n 100% { left: calc(100% + 100px); top: 40%; }\n }\n\n @keyframes urusei-move {\n 0% { left: 80%; top: calc(100% + 50px); }\n 25% { left: 20%; top: 70%; }\n 50% { left: 70%; top: 15%; }\n 75% { left: 40%; top: 50%; }\n 100% { left: 80%; top: -50px; }\n }\n\n @keyframes ghibli-move {\n 0% { left: 30%; top: -50px; }\n 20% { left: 60%; top: 30%; }\n 40% { left: 90%; top: 60%; }\n 60% { left: 70%; top: 90%; }\n 80% { left: 20%; top: 80%; }\n 100% { left: 30%; top: calc(100% + 50px); }\n }\n\n @keyframes japanese-move {\n 0% { left: -100px; top: 35%; }\n 25% { left: 35%; top: 65%; }\n 50% { left: 65%; top: 25%; }\n 75% { left: 85%; top: 75%; }\n 100% { left: calc(100% + 100px); top: 35%; }\n }\n\n @keyframes arabic-move {\n 0% { left: calc(100% + 100px); top: 25%; }\n 20% { left: 75%; top: 55%; }\n 40% { left: 45%; top: 15%; }\n 60% { left: 25%; top: 75%; }\n 80% { left: 55%; top: 45%; }\n 100% { left: -100px; top: 25%; }\n }\n\n @keyframes pulse {\n 0% { box-shadow: 0 8px 25px rgba(255,107,53,0.3); }\n 100% { box-shadow: 0 8px 40px rgba(255,107,53,0.8); }\n }\n\n @keyframes glow {\n 0% { box-shadow: 0 8px 25px rgba(255,20,147,0.3); }\n 100% { box-shadow: 0 0 30px rgba(255,20,147,0.8); }\n }\n\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n @keyframes shadow-dance {\n 0%, 100% { box-shadow: 0 8px 25px rgba(75,0,130,0.3); }\n 50% { box-shadow: 0 15px 40px rgba(138,43,226,0.6); }\n }\n\n @keyframes titan-shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-2px); }\n 75% { transform: translateX(2px); }\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n @keyframes pokeball-spin {\n 0%, 100% { transform: rotateY(0deg); }\n 50% { transform: rotateY(180deg); }\n }\n\n @keyframes heart-beat {\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n }\n\n @keyframes nature-sway {\n 0%, 100% { transform: rotate(-2deg); }\n 50% { transform: rotate(2deg); }\n }\n\n @keyframes sakura-fall {\n 0% { transform: translateY(0) rotate(0deg); }\n 25% { transform: translateY(-5px) rotate(90deg); }\n 50% { transform: translateY(0) rotate(180deg); }\n 75% { transform: translateY(-3px) rotate(270deg); }\n 100% { transform: translateY(0) rotate(360deg); }\n }\n\n @keyframes mystical-glow {\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n }\n\n .particles {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 1;\n }\n\n .particle {\n position: absolute;\n width: 4px;\n height: 4px;\n background: rgba(255,255,255,0.6);\n border-radius: 50%;\n animation: particle-float 10s linear infinite;\n }\n\n @keyframes particle-float {\n 0% {\n transform: translateY(100vh) rotate(0deg);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 90% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-100px) rotate(360deg);\n opacity: 0;\n }\n }\n\n .title {\n position: fixed;\n top: 20px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 100;\n background: rgba(255,255,255,0.1);\n backdrop-filter: blur(20px);\n padding: 10px 30px;\n border-radius: 25px;\n border: 2px solid rgba(255,255,255,0.2);\n color: white;\n font-weight: 700;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.5);\n }\n\n @media (max-width: 768px) {\n .floating-button {\n padding: 12px 20px;\n font-size: 14px;\n }\n .title {\n font-size: 18px;\n padding: 8px 20px;\n }\n }\n <\/style>\n<\/head>\n<body>\n \n <a href=\"https:\/\/amzn.to\/3IAcyx3\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button demon-slayer\">\n <i class=\"fas fa-sword\"><\/i> Demon Slayer\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4kR99HH\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button naruto\">\n <i class=\"fas fa-leaf\"><\/i> Naruto\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/3IwSf3L\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button jujutsu\">\n <i class=\"fas fa-magic\"><\/i> Jujutsu Kaisen\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/3IArMC7\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button titan\">\n <i class=\"fas fa-shield-alt\"><\/i> Attack on Titan\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/413owWa\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button bluelock\">\n <i class=\"fas fa-football-ball\"><\/i> Blue Lock\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/3IUL6tV\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button pokemon\">\n <i class=\"fas fa-paw\"><\/i> Pok\u00e9mon\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4lFPiwl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button urusei\">\n <i class=\"fas fa-heart\"><\/i> Urusei Yatsura\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4nZ12vn\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button ghibli\">\n <i class=\"fas fa-tree\"><\/i> Studio Ghibli\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4lGhajZ\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button japanese\">\n <i class=\"fas fa-torii-gate\"><\/i> \u65e5\u672c\u30a2\u30cb\u30e1\n <\/a>\n\n <a href=\"https:\/\/amzn.to\/4f3zmS2\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"floating-button arabic\">\n <i class=\"fas fa-moon\"><\/i> \u0627\u0644\u0623\u0646\u0645\u064a \u0627\u0644\u064a\u0627\u0628\u0627\u0646\u064a\n <\/a>\n\n <script>\n \/\/ \u30d1\u30fc\u30c6\u30a3\u30af\u30eb\u52b9\u679c\u3092\u751f\u6210\n function createParticles() {\n const particlesContainer = document.getElementById('particles');\n \n for (let i = 0; i < 50; i++) {\n const particle = document.createElement('div');\n particle.className = 'particle';\n particle.style.left = Math.random() * 100 + '%';\n particle.style.animationDelay = Math.random() * 10 + 's';\n particle.style.animationDuration = (Math.random() * 10 + 10) + 's';\n particlesContainer.appendChild(particle);\n }\n }\n\n \/\/ \u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u52b9\u679c\n document.querySelectorAll('.floating-button').forEach(button => {\n button.addEventListener('click', function(e) {\n \/\/ \u30af\u30ea\u30c3\u30af\u6642\u306e\u6ce2\u7d0b\u52b9\u679c\n const ripple = document.createElement('div');\n ripple.style.position = 'absolute';\n ripple.style.width = '20px';\n ripple.style.height = '20px';\n ripple.style.background = 'rgba(255,255,255,0.6)';\n ripple.style.borderRadius = '50%';\n ripple.style.pointerEvents = 'none';\n ripple.style.transform = 'scale(0)';\n ripple.style.animation = 'ripple 0.6s linear';\n \n const rect = this.getBoundingClientRect();\n ripple.style.left = (e.clientX - rect.left - 10) + 'px';\n ripple.style.top = (e.clientY - rect.top - 10) + 'px';\n \n this.style.position = 'relative';\n this.appendChild(ripple);\n \n setTimeout(() => {\n ripple.remove();\n }, 600);\n });\n\n \/\/ \u30db\u30d0\u30fc\u6642\u306e\u97f3\u697d\u30ce\u30fc\u30c8\u52b9\u679c\n button.addEventListener('mouseenter', function() {\n if (Math.random() > 0.7) {\n const note = document.createElement('div');\n note.innerHTML = '\u266a';\n note.style.position = 'absolute';\n note.style.color = 'rgba(255,255,255,0.8)';\n note.style.fontSize = '20px';\n note.style.pointerEvents = 'none';\n note.style.animation = 'note-float 2s ease-out forwards';\n note.style.left = '50%';\n note.style.top = '-30px';\n note.style.transform = 'translateX(-50%)';\n \n this.style.position = 'relative';\n this.appendChild(note);\n \n setTimeout(() => {\n note.remove();\n }, 2000);\n }\n });\n });\n\n \/\/ CSS for ripple and note effects\n const style = document.createElement('style');\n style.textContent = `\n @keyframes ripple {\n to {\n transform: scale(4);\n opacity: 0;\n }\n }\n \n @keyframes note-float {\n 0% {\n transform: translateX(-50%) translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateX(-50%) translateY(-50px);\n opacity: 0;\n }\n }\n `;\n document.head.appendChild(style);\n\n\n\n\n \n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u26a1 Pok\u00e9mon Quiz – Test Your Knowledge \u26a1 Pok\u00e9mon Quiz Test your knowledge about Pok\u00e9mon with these 10 questions! Start Quiz \u26a1 1 of 10 Score: 0 Next Question Finish Quiz Quiz Results Your Score: 0 out of 100 Your Performance 0 Correct 0 Incorrect 0% Accuracy Try Again Demon Slayer Naruto Jujutsu Kaisen Attack […]<\/p>\n","protected":false},"author":1,"featured_media":119,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5,11],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-pokemon"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/07\/Lets-Try-Anime-Quiz-1-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=76"}],"version-history":[{"count":15,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":114,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/76\/revisions\/114"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/119"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}