My Hero Academia – Izuku Midoriya (Deku) Quiz<\/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;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background: linear-gradient(135deg, #2E8B57 0%, #90EE90 100%);\n min-height: 100vh;\n overflow: hidden;\n }\n .hero-font {\n font-family: 'Bangers', cursive;\n }\n .quiz-container {\n height: 100vh;\n display: flex;\n flex-direction: column;\n max-width: 1000px;\n margin: 0 auto;\n }\n .content-area {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 1rem;\n }\n .option {\n transition: all 0.3s ease;\n border: 3px solid transparent;\n cursor: pointer;\n }\n .option:hover {\n transform: translateY(-2px);\n border-color: #22C55E;\n box-shadow: 0 8px 16px rgba(34, 197, 94, 0.3);\n }\n .correct {\n background: linear-gradient(135deg, #22C55E, #16A34A);\n color: white;\n border-color: #15803D;\n animation: correctPulse 0.6s ease-out;\n }\n .incorrect {\n background: linear-gradient(135deg, #EF4444, #DC2626);\n color: white;\n border-color: #B91C1C;\n animation: incorrectShake 0.6s ease-out;\n }\n .disabled {\n pointer-events: none;\n opacity: 0.7;\n }\n @keyframes correctPulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n @keyframes incorrectShake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px); }\n 75% { transform: translateX(5px); }\n }\n @keyframes slideIn {\n from { opacity: 0; transform: translateX(50px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes slideOut {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(-50px); }\n }\n .slide-in {\n animation: slideIn 0.5s ease-out;\n }\n .slide-out {\n animation: slideOut 0.5s ease-out;\n }\n .hero-icon {\n background: linear-gradient(135deg, #22C55E, #15803D);\n border-radius: 50%;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 24px;\n margin: 0 auto 1rem;\n box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);\n }\n .progress-bar {\n transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n background: linear-gradient(90deg, #22C55E, #16A34A);\n }\n .card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n }\n .explanation-box {\n background: linear-gradient(135deg, #F0FDF4, #DCFCE7);\n border: 2px solid #22C55E;\n border-radius: 12px;\n padding: 1rem;\n margin-top: 1rem;\n animation: slideIn 0.5s ease-out;\n }\n .score-circle {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n font-size: 2rem;\n font-weight: bold;\n color: white;\n }\n .excellent { background: linear-gradient(135deg, #22C55E, #16A34A); }\n .good { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }\n .fair { background: linear-gradient(135deg, #F59E0B, #D97706); }\n .poor { background: linear-gradient(135deg, #EF4444, #DC2626); }\n <\/style>\n<\/head>\n<body>\n <div class=\"quiz-container\">\n \n <div class=\"bg-white bg-opacity-20 h-2\">\n <div id=\"progress-bar\" class=\"progress-bar h-full\" style=\"width: 0%\"><\/div>\n <\/div>\n\n \n <div id=\"start-screen\" class=\"content-area\">\n <div class=\"card p-8 text-center\">\n <div class=\"hero-icon\">\n <i class=\"fas fa-mask\"><\/i>\n <\/div>\n <h1 class=\"hero-font text-5xl text-green-600 mb-4\">My Hero Academia<\/h1>\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Izuku Midoriya Quiz<\/h2>\n <p class=\"text-xl text-gray-600 mb-8\">Test your knowledge about Deku, the ninth holder of One For All!<\/p>\n <button id=\"start-btn\" class=\"bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-4 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105\">\n Start Quiz <i class=\"fas fa-play ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"content-area hidden\">\n <div class=\"card p-6\">\n \n <div class=\"flex justify-between items-center mb-6\">\n <div class=\"flex items-center\">\n <div class=\"hero-icon mr-4\" style=\"width: 40px; height: 40px; font-size: 16px;\">\n <i class=\"fas fa-fist-raised\"><\/i>\n <\/div>\n <span class=\"text-lg font-semibold\">Question <span id=\"current-question\">1<\/span> of 10<\/span>\n <\/div>\n <div class=\"text-lg font-semibold\">\n Score: <span id=\"score\" class=\"text-green-600\">0<\/span>\/100\n <\/div>\n <\/div>\n\n \n <div class=\"mb-6\">\n <h2 id=\"question-text\" class=\"text-2xl font-bold text-gray-800 mb-4\"><\/h2>\n <\/div>\n\n \n <div id=\"options-container\" class=\"grid grid-cols-1 gap-3 mb-6\">\n \n <\/div>\n\n \n <div id=\"explanation\" class=\"hidden\">\n <div class=\"explanation-box\">\n <h3 class=\"font-bold text-green-800 mb-2\">\n <i class=\"fas fa-lightbulb mr-2\"><\/i>Explanation:\n <\/h3>\n <p id=\"explanation-text\" class=\"text-gray-700\"><\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"text-center mt-6\">\n <button id=\"next-btn\" class=\"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 hidden\">\n Next Question <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 hidden\">\n View Results <i class=\"fas fa-trophy ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"results-screen\" class=\"content-area hidden\">\n <div class=\"card p-8 text-center\">\n <h1 class=\"hero-font text-4xl text-green-600 mb-6\">Quiz Complete!<\/h1>\n \n \n <div id=\"score-circle\" class=\"score-circle mb-6\">\n <span id=\"final-score\">0%<\/span>\n <\/div>\n\n \n <div id=\"performance-message\" class=\"mb-6\">\n \n <\/div>\n\n \n <div class=\"grid grid-cols-3 gap-4 mb-8\">\n <div class=\"bg-green-100 p-4 rounded-lg\">\n <div class=\"text-2xl font-bold text-green-600\" id=\"correct-count\">0<\/div>\n <div class=\"text-sm text-gray-600\">Correct<\/div>\n <\/div>\n <div class=\"bg-red-100 p-4 rounded-lg\">\n <div class=\"text-2xl font-bold text-red-600\" id=\"incorrect-count\">0<\/div>\n <div class=\"text-sm text-gray-600\">Incorrect<\/div>\n <\/div>\n <div class=\"bg-blue-100 p-4 rounded-lg\">\n <div class=\"text-2xl font-bold text-blue-600\" id=\"percentage\">0%<\/div>\n <div class=\"text-sm text-gray-600\">Accuracy<\/div>\n <\/div>\n <\/div>\n\n <button id=\"restart-btn\" class=\"bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-4 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105\">\n Try Again <i class=\"fas fa-redo ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const quizData = [\n {\n question: \"What was Izuku Midoriya originally born as?\",\n options: [\"Born with a weak Quirk\", \"Born Quirkless\", \"Born with multiple Quirks\", \"Born with a stolen Quirk\"],\n correct: 1,\n explanation: \"Izuku was born without a Quirk in a world where 80% of people have superpowers. This made him an outcast and seemed to crush his dream of becoming a hero, until he met All Might who saw his heroic spirit and chose him as the next successor of One For All.\"\n },\n {\n question: \"What is the full name of Izuku's Quirk?\",\n options: [\"All For One\", \"One For All\", \"Full Power\", \"Super Strength\"],\n correct: 1,\n explanation: \"One For All is a unique Quirk that can be transferred from person to person. It accumulates power through generations, making each successor stronger than the last. Izuku is the ninth holder of this legendary power, inherited from his mentor All Might.\"\n },\n {\n question: 'What does \"Deku\" originally mean, and who gave him this nickname?',\n options: ['\"Hero\" given by All Might', '\"Useless\" given by Katsuki Bakugo', '\"Green\" given by his classmates', '\"Strong\" given by his mother'],\n correct: 1,\n explanation: '\"Deku\" comes from \"Dekunobou,\" meaning \"wooden doll\" or \"useless person.\" Bakugo used it as a cruel nickname throughout their childhood. However, Izuku later reclaimed it as his hero name after Ochaco Uraraka pointed out it could also mean \"you can do it!\"'\n },\n {\n question: \"Which U.A. High School class is Izuku in?\",\n options: [\"Class 1-A\", \"Class 1-B\", \"Class 2-A\", \"Class 3-A\"],\n correct: 0,\n explanation: \"Izuku is a student in Class 1-A of U.A. High School's Hero Course. This class is known for producing some of the most promising future heroes and has faced numerous villain attacks due to their exceptional potential.\"\n },\n {\n question: \"What major limitation did Izuku face when first using One For All?\",\n options: [\"He couldn't control the direction\", \"It only worked at night\", \"His body couldn't handle the power, causing severe injuries\", \"He could only use it once per day\"],\n correct: 2,\n explanation: \"Initially, using One For All would break Izuku's bones and cause severe injuries because his body wasn't conditioned for such immense power. He had to learn to control smaller percentages of the power and gradually build up his physical strength to handle higher outputs safely.\"\n },\n {\n question: \"Who is Izuku's homeroom teacher at U.A.?\",\n options: [\"Present Mic\", \"Midnight\", \"Shota Aizawa (Eraserhead)\", \"Cementoss\"],\n correct: 2,\n explanation: \"Shota Aizawa, also known as the hero Eraserhead, is the homeroom teacher of Class 1-A. Despite his seemingly harsh and lazy demeanor, he deeply cares for his students and has played a crucial role in Izuku's development as both a student and hero.\"\n },\n {\n question: \"What innovative technique did Izuku develop to better use One For All throughout his body?\",\n options: [\"Maximum Power\", \"Full Cowling\", \"Total Control\", \"Perfect Form\"],\n correct: 1,\n explanation: \"Full Cowling allows Izuku to spread One For All's power evenly throughout his entire body at a lower percentage, rather than concentrating it in one area at full power. This technique enables him to enhance his overall physical abilities while minimizing injury risk.\"\n },\n {\n question: \"What is the name of Izuku's mother?\",\n options: [\"Inko Midoriya\", \"Rei Midoriya\", \"Mitsuki Midoriya\", \"Nemuri Midoriya\"],\n correct: 0,\n explanation: \"Inko Midoriya is Izuku's loving and supportive mother. She has a small telekinetic Quirk that allows her to attract small objects to herself. She worries constantly about Izuku's safety but ultimately supports his dream of becoming a hero.\"\n },\n {\n question: \"Which additional Quirks from previous One For All users can Izuku access?\",\n options: [\"Only his own strength enhancement\", \"Blackwhip, Float, and Danger Sense (among others)\", \"Fire and ice powers\", \"Explosion and teleportation\"],\n correct: 1,\n explanation: \"As Izuku grows stronger, he gains access to the Quirks of previous One For All holders. These include Blackwhip (dark energy tendrils), Float (levitation), Danger Sense (threat detection), Smokescreen, and Fa Jin (kinetic energy storage), making him incredibly versatile.\"\n },\n {\n question: \"What is Izuku's ultimate goal as a hero?\",\n options: [\"To become the strongest hero\", \"To become the greatest hero who saves everyone\", \"To defeat All For One\", \"To surpass All Might in popularity\"],\n correct: 1,\n explanation: \"Izuku's dream isn't just about strength or fame\u2014he wants to become a hero who can save everyone with a smile, just like his idol All Might. His core motivation is his desire to help people and protect those who cannot protect themselves, embodying the true spirit of heroism.\"\n }\n ];\n\n let currentQuestion = 0;\n let score = 0;\n let correctAnswers = 0;\n let incorrectAnswers = 0;\n let answered = false;\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 currentQuestionEl = document.getElementById('current-question');\n const questionText = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const scoreEl = document.getElementById('score');\n const explanationEl = document.getElementById('explanation');\n const explanationText = document.getElementById('explanation-text');\n const nextBtn = document.getElementById('next-btn');\n const finishBtn = document.getElementById('finish-btn');\n const progressBar = document.getElementById('progress-bar');\n const finalScore = document.getElementById('final-score');\n const scoreCircle = document.getElementById('score-circle');\n const performanceMessage = document.getElementById('performance-message');\n const correctCount = document.getElementById('correct-count');\n const incorrectCount = document.getElementById('incorrect-count');\n const percentage = document.getElementById('percentage');\n const restartBtn = document.getElementById('restart-btn');\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 answered = false;\n const question = quizData[currentQuestion];\n \n currentQuestionEl.textContent = currentQuestion + 1;\n questionText.textContent = question.question;\n explanationEl.classList.add('hidden');\n nextBtn.classList.add('hidden');\n finishBtn.classList.add('hidden');\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-4', 'rounded-lg', 'bg-white', 'hover:bg-gray-50', 'border-2');\n optionDiv.innerHTML = `\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center font-bold mr-4\">\n ${String.fromCharCode(65 + index)}\n <\/span>\n <span class=\"text-lg\">${option}<\/span>\n <\/div>\n `;\n optionDiv.addEventListener('click', () => selectOption(index));\n optionsContainer.appendChild(optionDiv);\n });\n \n optionsContainer.classList.add('slide-in');\n }\n\n function selectOption(selectedIndex) {\n if (answered) return;\n \n answered = true;\n const question = quizData[currentQuestion];\n const options = optionsContainer.children;\n \n \/\/ Disable all options\n Array.from(options).forEach(option => {\n option.classList.add('disabled');\n });\n \n \/\/ Mark correct and selected options\n if (selectedIndex === question.correct) {\n options[selectedIndex].classList.add('correct');\n score += 10;\n correctAnswers++;\n } else {\n options[selectedIndex].classList.add('incorrect');\n options[question.correct].classList.add('correct');\n incorrectAnswers++;\n }\n \n scoreEl.textContent = score;\n \n \/\/ Show explanation\n explanationText.textContent = question.explanation;\n explanationEl.classList.remove('hidden');\n \n \/\/ Show next\/finish button\n setTimeout(() => {\n if (currentQuestion < quizData.length - 1) {\n nextBtn.classList.remove('hidden');\n } else {\n finishBtn.classList.remove('hidden');\n }\n }, 1000);\n }\n\n function nextQuestion() {\n currentQuestion++;\n optionsContainer.classList.add('slide-out');\n \n setTimeout(() => {\n loadQuestion();\n updateProgressBar();\n optionsContainer.classList.remove('slide-out');\n }, 300);\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 const scorePercentage = Math.round((correctAnswers \/ quizData.length) * 100);\n \n finalScore.textContent = `${scorePercentage}%`;\n correctCount.textContent = correctAnswers;\n incorrectCount.textContent = incorrectAnswers;\n percentage.textContent = `${scorePercentage}%`;\n \n \/\/ Set score circle class and message\n let messageHTML = '';\n if (scorePercentage >= 90) {\n scoreCircle.classList.add('excellent');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-green-600 mb-2\">Plus Ultra!<\/h2>\n <p class=\"text-lg text-gray-700\">You're a true My Hero Academia expert! Your knowledge of Deku is outstanding!<\/p>\n `;\n } else if (scorePercentage >= 70) {\n scoreCircle.classList.add('good');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-blue-600 mb-2\">Hero Material!<\/h2>\n <p class=\"text-lg text-gray-700\">Great job! You have solid knowledge about Izuku Midoriya!<\/p>\n `;\n } else if (scorePercentage >= 50) {\n scoreCircle.classList.add('fair');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-yellow-600 mb-2\">Hero in Training!<\/h2>\n <p class=\"text-lg text-gray-700\">Not bad! Keep watching and you'll become a true fan!<\/p>\n `;\n } else {\n scoreCircle.classList.add('poor');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-red-600 mb-2\">Time to Study!<\/h2>\n <p class=\"text-lg text-gray-700\">You might want to rewatch My Hero Academia to learn more about Deku!<\/p>\n `;\n }\n \n performanceMessage.innerHTML = messageHTML;\n }\n\n function restartQuiz() {\n currentQuestion = 0;\n score = 0;\n correctAnswers = 0;\n incorrectAnswers = 0;\n answered = false;\n \n scoreEl.textContent = score;\n progressBar.style.width = '0%';\n scoreCircle.className = 'score-circle';\n \n resultsScreen.classList.add('hidden');\n startScreen.classList.remove('hidden');\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>My Hero Academia – Izuku Midoriya (Deku) Quiz My Hero Academia Izuku Midoriya Quiz Test your knowledge about Deku, the ninth holder of One For All! Start Quiz Question 1 of 10 Score: 0\/100 Explanation: Next Question View Results Quiz Complete! 0% 0 Correct 0 Incorrect 0% Accuracy Try Again<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-133","post","type-post","status-publish","format-standard","hentry","category-useful-information"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/133","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=133"}],"version-history":[{"count":3,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/133\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":133,"date":"2025-08-22T05:20:27","date_gmt":"2025-08-22T12:20:27","guid":{"rendered":"https:\/\/www.newwealth.shop\/a\/?p=133"},"modified":"2025-08-22T05:23:25","modified_gmt":"2025-08-22T12:23:25","slug":"my-hero-academia","status":"publish","type":"post","link":"https:\/\/www.newwealth.shop\/a\/?p=133","title":{"rendered":"My Hero Academia – Izuku Midoriya Quiz"},"content":{"rendered":"\n\n\n\n \n \n My Hero Academia – Izuku Midoriya (Deku) Quiz<\/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;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background: linear-gradient(135deg, #2E8B57 0%, #90EE90 100%);\n min-height: 100vh;\n overflow: hidden;\n }\n .hero-font {\n font-family: 'Bangers', cursive;\n }\n .quiz-container {\n height: 100vh;\n display: flex;\n flex-direction: column;\n max-width: 1000px;\n margin: 0 auto;\n }\n .content-area {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 1rem;\n }\n .option {\n transition: all 0.3s ease;\n border: 3px solid transparent;\n cursor: pointer;\n }\n .option:hover {\n transform: translateY(-2px);\n border-color: #22C55E;\n box-shadow: 0 8px 16px rgba(34, 197, 94, 0.3);\n }\n .correct {\n background: linear-gradient(135deg, #22C55E, #16A34A);\n color: white;\n border-color: #15803D;\n animation: correctPulse 0.6s ease-out;\n }\n .incorrect {\n background: linear-gradient(135deg, #EF4444, #DC2626);\n color: white;\n border-color: #B91C1C;\n animation: incorrectShake 0.6s ease-out;\n }\n .disabled {\n pointer-events: none;\n opacity: 0.7;\n }\n @keyframes correctPulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n @keyframes incorrectShake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px); }\n 75% { transform: translateX(5px); }\n }\n @keyframes slideIn {\n from { opacity: 0; transform: translateX(50px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes slideOut {\n from { opacity: 1; transform: translateX(0); }\n to { opacity: 0; transform: translateX(-50px); }\n }\n .slide-in {\n animation: slideIn 0.5s ease-out;\n }\n .slide-out {\n animation: slideOut 0.5s ease-out;\n }\n .hero-icon {\n background: linear-gradient(135deg, #22C55E, #15803D);\n border-radius: 50%;\n width: 60px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-size: 24px;\n margin: 0 auto 1rem;\n box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);\n }\n .progress-bar {\n transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n background: linear-gradient(90deg, #22C55E, #16A34A);\n }\n .card {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border-radius: 20px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n }\n .explanation-box {\n background: linear-gradient(135deg, #F0FDF4, #DCFCE7);\n border: 2px solid #22C55E;\n border-radius: 12px;\n padding: 1rem;\n margin-top: 1rem;\n animation: slideIn 0.5s ease-out;\n }\n .score-circle {\n width: 120px;\n height: 120px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n font-size: 2rem;\n font-weight: bold;\n color: white;\n }\n .excellent { background: linear-gradient(135deg, #22C55E, #16A34A); }\n .good { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }\n .fair { background: linear-gradient(135deg, #F59E0B, #D97706); }\n .poor { background: linear-gradient(135deg, #EF4444, #DC2626); }\n <\/style>\n<\/head>\n<body>\n <div class=\"quiz-container\">\n \n <div class=\"bg-white bg-opacity-20 h-2\">\n <div id=\"progress-bar\" class=\"progress-bar h-full\" style=\"width: 0%\"><\/div>\n <\/div>\n\n \n <div id=\"start-screen\" class=\"content-area\">\n <div class=\"card p-8 text-center\">\n <div class=\"hero-icon\">\n <i class=\"fas fa-mask\"><\/i>\n <\/div>\n <h1 class=\"hero-font text-5xl text-green-600 mb-4\">My Hero Academia<\/h1>\n <h2 class=\"text-3xl font-bold text-gray-800 mb-6\">Izuku Midoriya Quiz<\/h2>\n <p class=\"text-xl text-gray-600 mb-8\">Test your knowledge about Deku, the ninth holder of One For All!<\/p>\n <button id=\"start-btn\" class=\"bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-4 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105\">\n Start Quiz <i class=\"fas fa-play ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"content-area hidden\">\n <div class=\"card p-6\">\n \n <div class=\"flex justify-between items-center mb-6\">\n <div class=\"flex items-center\">\n <div class=\"hero-icon mr-4\" style=\"width: 40px; height: 40px; font-size: 16px;\">\n <i class=\"fas fa-fist-raised\"><\/i>\n <\/div>\n <span class=\"text-lg font-semibold\">Question <span id=\"current-question\">1<\/span> of 10<\/span>\n <\/div>\n <div class=\"text-lg font-semibold\">\n Score: <span id=\"score\" class=\"text-green-600\">0<\/span>\/100\n <\/div>\n <\/div>\n\n \n <div class=\"mb-6\">\n <h2 id=\"question-text\" class=\"text-2xl font-bold text-gray-800 mb-4\"><\/h2>\n <\/div>\n\n \n <div id=\"options-container\" class=\"grid grid-cols-1 gap-3 mb-6\">\n \n <\/div>\n\n \n <div id=\"explanation\" class=\"hidden\">\n <div class=\"explanation-box\">\n <h3 class=\"font-bold text-green-800 mb-2\">\n <i class=\"fas fa-lightbulb mr-2\"><\/i>Explanation:\n <\/h3>\n <p id=\"explanation-text\" class=\"text-gray-700\"><\/p>\n <\/div>\n <\/div>\n\n \n <div class=\"text-center mt-6\">\n <button id=\"next-btn\" class=\"bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 hidden\">\n Next Question <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 hidden\">\n View Results <i class=\"fas fa-trophy ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"results-screen\" class=\"content-area hidden\">\n <div class=\"card p-8 text-center\">\n <h1 class=\"hero-font text-4xl text-green-600 mb-6\">Quiz Complete!<\/h1>\n \n \n <div id=\"score-circle\" class=\"score-circle mb-6\">\n <span id=\"final-score\">0%<\/span>\n <\/div>\n\n \n <div id=\"performance-message\" class=\"mb-6\">\n \n <\/div>\n\n \n <div class=\"grid grid-cols-3 gap-4 mb-8\">\n <div class=\"bg-green-100 p-4 rounded-lg\">\n <div class=\"text-2xl font-bold text-green-600\" id=\"correct-count\">0<\/div>\n <div class=\"text-sm text-gray-600\">Correct<\/div>\n <\/div>\n <div class=\"bg-red-100 p-4 rounded-lg\">\n <div class=\"text-2xl font-bold text-red-600\" id=\"incorrect-count\">0<\/div>\n <div class=\"text-sm text-gray-600\">Incorrect<\/div>\n <\/div>\n <div class=\"bg-blue-100 p-4 rounded-lg\">\n <div class=\"text-2xl font-bold text-blue-600\" id=\"percentage\">0%<\/div>\n <div class=\"text-sm text-gray-600\">Accuracy<\/div>\n <\/div>\n <\/div>\n\n <button id=\"restart-btn\" class=\"bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-bold py-4 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105\">\n Try Again <i class=\"fas fa-redo ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const quizData = [\n {\n question: \"What was Izuku Midoriya originally born as?\",\n options: [\"Born with a weak Quirk\", \"Born Quirkless\", \"Born with multiple Quirks\", \"Born with a stolen Quirk\"],\n correct: 1,\n explanation: \"Izuku was born without a Quirk in a world where 80% of people have superpowers. This made him an outcast and seemed to crush his dream of becoming a hero, until he met All Might who saw his heroic spirit and chose him as the next successor of One For All.\"\n },\n {\n question: \"What is the full name of Izuku's Quirk?\",\n options: [\"All For One\", \"One For All\", \"Full Power\", \"Super Strength\"],\n correct: 1,\n explanation: \"One For All is a unique Quirk that can be transferred from person to person. It accumulates power through generations, making each successor stronger than the last. Izuku is the ninth holder of this legendary power, inherited from his mentor All Might.\"\n },\n {\n question: 'What does \"Deku\" originally mean, and who gave him this nickname?',\n options: ['\"Hero\" given by All Might', '\"Useless\" given by Katsuki Bakugo', '\"Green\" given by his classmates', '\"Strong\" given by his mother'],\n correct: 1,\n explanation: '\"Deku\" comes from \"Dekunobou,\" meaning \"wooden doll\" or \"useless person.\" Bakugo used it as a cruel nickname throughout their childhood. However, Izuku later reclaimed it as his hero name after Ochaco Uraraka pointed out it could also mean \"you can do it!\"'\n },\n {\n question: \"Which U.A. High School class is Izuku in?\",\n options: [\"Class 1-A\", \"Class 1-B\", \"Class 2-A\", \"Class 3-A\"],\n correct: 0,\n explanation: \"Izuku is a student in Class 1-A of U.A. High School's Hero Course. This class is known for producing some of the most promising future heroes and has faced numerous villain attacks due to their exceptional potential.\"\n },\n {\n question: \"What major limitation did Izuku face when first using One For All?\",\n options: [\"He couldn't control the direction\", \"It only worked at night\", \"His body couldn't handle the power, causing severe injuries\", \"He could only use it once per day\"],\n correct: 2,\n explanation: \"Initially, using One For All would break Izuku's bones and cause severe injuries because his body wasn't conditioned for such immense power. He had to learn to control smaller percentages of the power and gradually build up his physical strength to handle higher outputs safely.\"\n },\n {\n question: \"Who is Izuku's homeroom teacher at U.A.?\",\n options: [\"Present Mic\", \"Midnight\", \"Shota Aizawa (Eraserhead)\", \"Cementoss\"],\n correct: 2,\n explanation: \"Shota Aizawa, also known as the hero Eraserhead, is the homeroom teacher of Class 1-A. Despite his seemingly harsh and lazy demeanor, he deeply cares for his students and has played a crucial role in Izuku's development as both a student and hero.\"\n },\n {\n question: \"What innovative technique did Izuku develop to better use One For All throughout his body?\",\n options: [\"Maximum Power\", \"Full Cowling\", \"Total Control\", \"Perfect Form\"],\n correct: 1,\n explanation: \"Full Cowling allows Izuku to spread One For All's power evenly throughout his entire body at a lower percentage, rather than concentrating it in one area at full power. This technique enables him to enhance his overall physical abilities while minimizing injury risk.\"\n },\n {\n question: \"What is the name of Izuku's mother?\",\n options: [\"Inko Midoriya\", \"Rei Midoriya\", \"Mitsuki Midoriya\", \"Nemuri Midoriya\"],\n correct: 0,\n explanation: \"Inko Midoriya is Izuku's loving and supportive mother. She has a small telekinetic Quirk that allows her to attract small objects to herself. She worries constantly about Izuku's safety but ultimately supports his dream of becoming a hero.\"\n },\n {\n question: \"Which additional Quirks from previous One For All users can Izuku access?\",\n options: [\"Only his own strength enhancement\", \"Blackwhip, Float, and Danger Sense (among others)\", \"Fire and ice powers\", \"Explosion and teleportation\"],\n correct: 1,\n explanation: \"As Izuku grows stronger, he gains access to the Quirks of previous One For All holders. These include Blackwhip (dark energy tendrils), Float (levitation), Danger Sense (threat detection), Smokescreen, and Fa Jin (kinetic energy storage), making him incredibly versatile.\"\n },\n {\n question: \"What is Izuku's ultimate goal as a hero?\",\n options: [\"To become the strongest hero\", \"To become the greatest hero who saves everyone\", \"To defeat All For One\", \"To surpass All Might in popularity\"],\n correct: 1,\n explanation: \"Izuku's dream isn't just about strength or fame\u2014he wants to become a hero who can save everyone with a smile, just like his idol All Might. His core motivation is his desire to help people and protect those who cannot protect themselves, embodying the true spirit of heroism.\"\n }\n ];\n\n let currentQuestion = 0;\n let score = 0;\n let correctAnswers = 0;\n let incorrectAnswers = 0;\n let answered = false;\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 currentQuestionEl = document.getElementById('current-question');\n const questionText = document.getElementById('question-text');\n const optionsContainer = document.getElementById('options-container');\n const scoreEl = document.getElementById('score');\n const explanationEl = document.getElementById('explanation');\n const explanationText = document.getElementById('explanation-text');\n const nextBtn = document.getElementById('next-btn');\n const finishBtn = document.getElementById('finish-btn');\n const progressBar = document.getElementById('progress-bar');\n const finalScore = document.getElementById('final-score');\n const scoreCircle = document.getElementById('score-circle');\n const performanceMessage = document.getElementById('performance-message');\n const correctCount = document.getElementById('correct-count');\n const incorrectCount = document.getElementById('incorrect-count');\n const percentage = document.getElementById('percentage');\n const restartBtn = document.getElementById('restart-btn');\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 answered = false;\n const question = quizData[currentQuestion];\n \n currentQuestionEl.textContent = currentQuestion + 1;\n questionText.textContent = question.question;\n explanationEl.classList.add('hidden');\n nextBtn.classList.add('hidden');\n finishBtn.classList.add('hidden');\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-4', 'rounded-lg', 'bg-white', 'hover:bg-gray-50', 'border-2');\n optionDiv.innerHTML = `\n <div class=\"flex items-center\">\n <span class=\"w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center font-bold mr-4\">\n ${String.fromCharCode(65 + index)}\n <\/span>\n <span class=\"text-lg\">${option}<\/span>\n <\/div>\n `;\n optionDiv.addEventListener('click', () => selectOption(index));\n optionsContainer.appendChild(optionDiv);\n });\n \n optionsContainer.classList.add('slide-in');\n }\n\n function selectOption(selectedIndex) {\n if (answered) return;\n \n answered = true;\n const question = quizData[currentQuestion];\n const options = optionsContainer.children;\n \n \/\/ Disable all options\n Array.from(options).forEach(option => {\n option.classList.add('disabled');\n });\n \n \/\/ Mark correct and selected options\n if (selectedIndex === question.correct) {\n options[selectedIndex].classList.add('correct');\n score += 10;\n correctAnswers++;\n } else {\n options[selectedIndex].classList.add('incorrect');\n options[question.correct].classList.add('correct');\n incorrectAnswers++;\n }\n \n scoreEl.textContent = score;\n \n \/\/ Show explanation\n explanationText.textContent = question.explanation;\n explanationEl.classList.remove('hidden');\n \n \/\/ Show next\/finish button\n setTimeout(() => {\n if (currentQuestion < quizData.length - 1) {\n nextBtn.classList.remove('hidden');\n } else {\n finishBtn.classList.remove('hidden');\n }\n }, 1000);\n }\n\n function nextQuestion() {\n currentQuestion++;\n optionsContainer.classList.add('slide-out');\n \n setTimeout(() => {\n loadQuestion();\n updateProgressBar();\n optionsContainer.classList.remove('slide-out');\n }, 300);\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 const scorePercentage = Math.round((correctAnswers \/ quizData.length) * 100);\n \n finalScore.textContent = `${scorePercentage}%`;\n correctCount.textContent = correctAnswers;\n incorrectCount.textContent = incorrectAnswers;\n percentage.textContent = `${scorePercentage}%`;\n \n \/\/ Set score circle class and message\n let messageHTML = '';\n if (scorePercentage >= 90) {\n scoreCircle.classList.add('excellent');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-green-600 mb-2\">Plus Ultra!<\/h2>\n <p class=\"text-lg text-gray-700\">You're a true My Hero Academia expert! Your knowledge of Deku is outstanding!<\/p>\n `;\n } else if (scorePercentage >= 70) {\n scoreCircle.classList.add('good');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-blue-600 mb-2\">Hero Material!<\/h2>\n <p class=\"text-lg text-gray-700\">Great job! You have solid knowledge about Izuku Midoriya!<\/p>\n `;\n } else if (scorePercentage >= 50) {\n scoreCircle.classList.add('fair');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-yellow-600 mb-2\">Hero in Training!<\/h2>\n <p class=\"text-lg text-gray-700\">Not bad! Keep watching and you'll become a true fan!<\/p>\n `;\n } else {\n scoreCircle.classList.add('poor');\n messageHTML = `\n <h2 class=\"text-3xl font-bold text-red-600 mb-2\">Time to Study!<\/h2>\n <p class=\"text-lg text-gray-700\">You might want to rewatch My Hero Academia to learn more about Deku!<\/p>\n `;\n }\n \n performanceMessage.innerHTML = messageHTML;\n }\n\n function restartQuiz() {\n currentQuestion = 0;\n score = 0;\n correctAnswers = 0;\n incorrectAnswers = 0;\n answered = false;\n \n scoreEl.textContent = score;\n progressBar.style.width = '0%';\n scoreCircle.className = 'score-circle';\n \n resultsScreen.classList.add('hidden');\n startScreen.classList.remove('hidden');\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>My Hero Academia – Izuku Midoriya (Deku) Quiz My Hero Academia Izuku Midoriya Quiz Test your knowledge about Deku, the ninth holder of One For All! Start Quiz Question 1 of 10 Score: 0\/100 Explanation: Next Question View Results Quiz Complete! 0% 0 Correct 0 Incorrect 0% Accuracy Try Again<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-133","post","type-post","status-publish","format-standard","hentry","category-useful-information"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/133","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=133"}],"version-history":[{"count":3,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/133\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/133\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=133"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=133"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=133"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}