\ud83c\udf43 Naruto Quiz – Mobile Optimized<\/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: linear-gradient(135deg, #ff6b35, #f7931e, #4a90e2);\n background-size: 400% 400%;\n animation: gradientShift 15s ease infinite;\n min-height: 100vh;\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 .title-font {\n font-family: 'Bangers', cursive;\n }\n \n .quiz-container {\n max-width: 95vw;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n overflow: hidden;\n }\n \n @media (min-width: 768px) {\n .quiz-container {\n max-width: 600px;\n }\n }\n \n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n font-size: 14px;\n padding: 12px;\n margin: 8px 0;\n }\n \n .option:hover {\n transform: translateY(-2px);\n border: 2px solid #4a90e2;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n \n .correct {\n background-color: #c6f6d5;\n border: 2px solid #48bb78;\n }\n \n .incorrect {\n background-color: #fed7d7;\n border: 2px solid #f56565;\n }\n \n .disabled {\n pointer-events: none;\n }\n \n .easy { color: #48bb78; }\n .medium { color: #ecc94b; }\n .hard { color: #f56565; }\n \n .ninja-symbol {\n width: 35px;\n height: 35px;\n background: linear-gradient(45deg, #ff6b35, #f7931e);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n margin: 0 8px;\n }\n \n .ninja-symbol::before {\n content: \"\ud83c\udf43\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 16px;\n }\n \n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\n 100% { transform: translateY(0px); }\n }\n \n .floating {\n animation: float 3s ease-in-out infinite;\n }\n \n .progress-bar {\n transition: width 0.5s ease;\n background: linear-gradient(90deg, #ff6b35, #4a90e2);\n }\n \n .btn-primary {\n background: linear-gradient(45deg, #ff6b35, #f7931e);\n transition: all 0.3s ease;\n }\n \n .btn-primary:hover {\n background: linear-gradient(45deg, #f7931e, #ff6b35);\n transform: translateY(-2px);\n }\n \n .mobile-optimized {\n padding: 16px;\n font-size: 16px;\n }\n \n @media (max-width: 640px) {\n .mobile-optimized {\n padding: 12px;\n font-size: 14px;\n }\n \n .title-font {\n font-size: 2.5rem !important;\n }\n \n .option {\n padding: 10px;\n font-size: 13px;\n }\n \n .quiz-container {\n margin: 10px;\n max-width: calc(100vw - 20px);\n }\n }\n \n .ninja-background {\n background-image: \n radial-gradient(circle at 20% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, rgba(247, 147, 30, 0.05) 0%, transparent 50%);\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen py-4\">\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white ninja-background\">\n \n <div id=\"start-screen\" class=\"mobile-optimized text-center\">\n <div class=\"flex justify-center items-center mb-4\">\n <div class=\"ninja-symbol floating\"><\/div>\n <h1 class=\"title-font text-4xl text-orange-600 mx-2\">\ud83c\udf43 Naruto Quiz<\/h1>\n <div class=\"ninja-symbol floating\"><\/div>\n <\/div>\n <p class=\"text-lg mb-6 text-gray-700\">Test your ninja knowledge with these 10 questions!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"btn-primary text-white font-bold py-3 px-6 rounded-full text-lg transition-all duration-300\">\n Start Quiz <i class=\"fas fa-leaf ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"quiz-screen\" class=\"hidden\">\n <div class=\"progress-bar h-3\" id=\"progress-bar\"><\/div>\n <div class=\"mobile-optimized\">\n <div class=\"flex justify-between items-center mb-4\">\n <p class=\"text-sm font-semibold\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"text-sm font-semibold\">Score: <span id=\"score\">0<\/span><\/p>\n <\/div>\n \n <div id=\"difficulty-indicator\" class=\"mb-3 text-right font-bold text-sm\"><\/div>\n <h2 id=\"question-text\" class=\"text-lg font-bold mb-4 text-gray-800\"><\/h2>\n \n <div id=\"options-container\" class=\"space-y-2\">\n \n <\/div>\n \n <div id=\"feedback\" class=\"mt-4 p-3 rounded-lg text-center hidden text-sm\"><\/div>\n \n <div class=\"mt-6 text-center\">\n <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden transition-all\">\n Next <i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden transition-all\">\n Finish <i class=\"fas fa-check ml-1\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"results-screen\" class=\"mobile-optimized text-center hidden\">\n <h1 class=\"title-font text-3xl text-orange-600 mb-4\">\ud83c\udf43 Quiz Results<\/h1>\n \n <div class=\"mb-6\">\n <p class=\"text-xl mb-2\">Your Score: <span id=\"final-score\" class=\"font-bold\">0<\/span> out of 100<\/p>\n <div class=\"h-3 relative max-w-sm mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full progress-bar transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"result-message\" class=\"mb-6 text-lg\"><\/div>\n \n <div class=\"mb-6\">\n <h2 class=\"text-xl mb-3 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 gap-3\">\n <div class=\"bg-green-100 p-3 rounded-lg\">\n <p class=\"text-sm\"><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-3 rounded-lg\">\n <p class=\"text-sm\"><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-3 rounded-lg\">\n <p class=\"text-sm\"><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=\"btn-primary text-white font-bold py-3 px-6 rounded-full text-lg transition-all 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 name of Naruto's signature jutsu?\",\n options: [\"Chidori\", \"Rasengan\", \"Shadow Clone Jutsu\", \"Fire Style: Fireball Jutsu\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"The Rasengan is Naruto's signature technique, which he learned from Jiraiya. It's a spinning ball of chakra that doesn't require hand seals and was originally created by the Fourth Hokage, Minato Namikaze (Naruto's father).\"\n },\n {\n question: \"Who was Naruto's first sensei after graduating from the Ninja Academy?\",\n options: [\"Jiraiya\", \"Iruka Umino\", \"Kakashi Hatake\", \"Yamato\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Kakashi Hatake became the leader of Team 7, which included Naruto, Sasuke, and Sakura. While Iruka was his teacher at the Academy, Kakashi was his first official sensei as a genin.\"\n },\n {\n question: \"What is the name of the Nine-Tailed Fox sealed inside Naruto?\",\n options: [\"Shukaku\", \"Kurama\", \"Matatabi\", \"Gyuki\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"Kurama is the Nine-Tailed Fox (Kyuubi) that was sealed inside Naruto when he was a baby. Initially hostile, Kurama eventually becomes Naruto's partner and friend throughout the series.\"\n },\n {\n question: \"Which village is Naruto from?\",\n options: [\"Village Hidden in the Sand\", \"Village Hidden in the Mist\", \"Village Hidden in the Leaves\", \"Village Hidden in the Clouds\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Naruto is from Konohagakure, also known as the Village Hidden in the Leaves. It's located in the Land of Fire and is one of the five great shinobi villages.\"\n },\n {\n question: \"What is the name of Sasuke's older brother?\",\n options: [\"Neji Hyuga\", \"Gaara\", \"Itachi Uchiha\", \"Shisui Uchiha\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Itachi Uchiha is Sasuke's older brother who massacred the Uchiha clan, leaving only Sasuke alive. This event becomes a major driving force in Sasuke's character development and his quest for revenge.\"\n },\n {\n question: \"Which jutsu allows the user to create multiple copies of themselves?\",\n options: [\"Substitution Jutsu\", \"Transformation Jutsu\", \"Shadow Clone Jutsu\", \"Body Flicker Technique\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"The Shadow Clone Jutsu (Kage Bunshin no Jutsu) creates physical copies of the user that can act independently. Naruto masters this technique early on and it becomes one of his most frequently used abilities.\"\n },\n {\n question: \"Who is the Fifth Hokage of the Hidden Leaf Village?\",\n options: [\"Hiruzen Sarutobi\", \"Minato Namikaze\", \"Tsunade\", \"Kakashi Hatake\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Tsunade becomes the Fifth Hokage after being convinced by Naruto and Jiraiya to return to the village. She's one of the legendary Sannin and is known for her incredible strength and medical ninjutsu skills.\"\n },\n {\n question: \"What is the name of Naruto's team?\",\n options: [\"Team 7\", \"Team 8\", \"Team 10\", \"Team Guy\"],\n correct: 0,\n difficulty: \"Easy\",\n explanation: \"Team 7 consists of Naruto Uzumaki, Sasuke Uchiha, and Sakura Haruno, led by Kakashi Hatake. This team formation is central to the early part of the series.\"\n },\n {\n question: \"Which organization does Itachi Uchiha belong to?\",\n options: [\"Root\", \"Akatsuki\", \"Sound Four\", \"Seven Ninja Swordsmen\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"Itachi is a member of the Akatsuki, a criminal organization composed of rogue ninja who seek to collect all the tailed beasts. He's partnered with Kisame Hoshigaki within the organization.\"\n },\n {\n question: \"What is the name of the technique that allows Sharingan users to cast powerful illusions?\",\n options: [\"Amaterasu\", \"Susanoo\", \"Tsukuyomi\", \"Kamui\"],\n correct: 2,\n difficulty: \"Hard\",\n explanation: \"Tsukuyomi is a powerful genjutsu (illusion technique) that can only be used by those who have awakened the Mangekyo Sharingan. Itachi Uchiha is particularly famous for using this technique, which traps the victim in an illusory world where time moves differently.\"\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 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', 'rounded-lg', 'bg-gray-100', 'hover:bg-gray-200', 'cursor-pointer', 'transition-all');\n optionDiv.innerHTML = `\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">${String.fromCharCode(65 + index)}.<\/span>\n <span>${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 correct = quizData[currentQuestion].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 = `<strong>Correct! \ud83c\udf89<\/strong><br><small>${quizData[currentQuestion].explanation}<\/small>`;\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 = `<strong>Wrong! The correct answer is ${String.fromCharCode(65 + correct)}.<\/strong><br><small>${quizData[currentQuestion].explanation}<\/small>`;\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 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 true Hokage! \ud83c\udf43\ud83c\udfc6<\/p>\n <p>Your ninja knowledge is legendary. Even the Third Hokage would be impressed!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Jonin Level! \ud83e\udd77\ud83d\udcaa<\/p>\n <p>You have excellent knowledge of the ninja world. Keep training to reach Hokage level!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Chunin Level! \ud83d\uddfe\ud83d\udc4d<\/p>\n <p>You know the basics of being a ninja. More training at the Academy will help!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Needs Training! Genin Level! \ud83d\udcda\ud83d\udd04<\/p>\n <p>Even Naruto started as a dead-last student! Keep studying and try again!<\/p>`;\n }\n }\n\n function restartQuiz() {\n currentQuestion = 0;\n score = 0;\n correctAnswers = 0;\n incorrectAnswers = 0;\n scoreElement.textContent = score;\n resultsScreen.classList.add('hidden');\n startScreen.classList.remove('hidden');\n }\n\n function showConfetti() {\n if (typeof confetti !== 'undefined') {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 },\n colors: ['#ff6b35', '#f7931e', '#4a90e2']\n });\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf43 Naruto Quiz – Mobile Optimized \ud83c\udf43 Naruto Quiz Test your ninja knowledge with these 10 questions! Start Quiz 1 of 10 Score: 0 Next Finish \ud83c\udf43 Quiz Results Your Score: 0 out of 100 Your Performance 0 Correct 0 Incorrect 0% Accuracy Try Again<\/p>\n","protected":false},"author":1,"featured_media":70,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-naruto"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/06\/Lets-Try-Anime-Quiz.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/69","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=69"}],"version-history":[{"count":5,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/69\/revisions\/104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/70"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":69,"date":"2025-06-20T23:00:49","date_gmt":"2025-06-20T14:00:49","guid":{"rendered":"https:\/\/www.newwealth.shop\/a\/?p=69"},"modified":"2025-07-20T04:58:19","modified_gmt":"2025-07-20T11:58:19","slug":"naruto-quiz","status":"publish","type":"post","link":"https:\/\/www.newwealth.shop\/a\/?p=69","title":{"rendered":"Naruto Quiz"},"content":{"rendered":"\n\n\n\n \n \n \ud83c\udf43 Naruto Quiz – Mobile Optimized<\/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: linear-gradient(135deg, #ff6b35, #f7931e, #4a90e2);\n background-size: 400% 400%;\n animation: gradientShift 15s ease infinite;\n min-height: 100vh;\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 .title-font {\n font-family: 'Bangers', cursive;\n }\n \n .quiz-container {\n max-width: 95vw;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n border-radius: 15px;\n overflow: hidden;\n }\n \n @media (min-width: 768px) {\n .quiz-container {\n max-width: 600px;\n }\n }\n \n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n font-size: 14px;\n padding: 12px;\n margin: 8px 0;\n }\n \n .option:hover {\n transform: translateY(-2px);\n border: 2px solid #4a90e2;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n }\n \n .correct {\n background-color: #c6f6d5;\n border: 2px solid #48bb78;\n }\n \n .incorrect {\n background-color: #fed7d7;\n border: 2px solid #f56565;\n }\n \n .disabled {\n pointer-events: none;\n }\n \n .easy { color: #48bb78; }\n .medium { color: #ecc94b; }\n .hard { color: #f56565; }\n \n .ninja-symbol {\n width: 35px;\n height: 35px;\n background: linear-gradient(45deg, #ff6b35, #f7931e);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n margin: 0 8px;\n }\n \n .ninja-symbol::before {\n content: \"\ud83c\udf43\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 16px;\n }\n \n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\n 100% { transform: translateY(0px); }\n }\n \n .floating {\n animation: float 3s ease-in-out infinite;\n }\n \n .progress-bar {\n transition: width 0.5s ease;\n background: linear-gradient(90deg, #ff6b35, #4a90e2);\n }\n \n .btn-primary {\n background: linear-gradient(45deg, #ff6b35, #f7931e);\n transition: all 0.3s ease;\n }\n \n .btn-primary:hover {\n background: linear-gradient(45deg, #f7931e, #ff6b35);\n transform: translateY(-2px);\n }\n \n .mobile-optimized {\n padding: 16px;\n font-size: 16px;\n }\n \n @media (max-width: 640px) {\n .mobile-optimized {\n padding: 12px;\n font-size: 14px;\n }\n \n .title-font {\n font-size: 2.5rem !important;\n }\n \n .option {\n padding: 10px;\n font-size: 13px;\n }\n \n .quiz-container {\n margin: 10px;\n max-width: calc(100vw - 20px);\n }\n }\n \n .ninja-background {\n background-image: \n radial-gradient(circle at 20% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 80% 80%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),\n radial-gradient(circle at 50% 50%, rgba(247, 147, 30, 0.05) 0%, transparent 50%);\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen py-4\">\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white ninja-background\">\n \n <div id=\"start-screen\" class=\"mobile-optimized text-center\">\n <div class=\"flex justify-center items-center mb-4\">\n <div class=\"ninja-symbol floating\"><\/div>\n <h1 class=\"title-font text-4xl text-orange-600 mx-2\">\ud83c\udf43 Naruto Quiz<\/h1>\n <div class=\"ninja-symbol floating\"><\/div>\n <\/div>\n <p class=\"text-lg mb-6 text-gray-700\">Test your ninja knowledge with these 10 questions!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"btn-primary text-white font-bold py-3 px-6 rounded-full text-lg transition-all duration-300\">\n Start Quiz <i class=\"fas fa-leaf ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n \n \n <div id=\"quiz-screen\" class=\"hidden\">\n <div class=\"progress-bar h-3\" id=\"progress-bar\"><\/div>\n <div class=\"mobile-optimized\">\n <div class=\"flex justify-between items-center mb-4\">\n <p class=\"text-sm font-semibold\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"text-sm font-semibold\">Score: <span id=\"score\">0<\/span><\/p>\n <\/div>\n \n <div id=\"difficulty-indicator\" class=\"mb-3 text-right font-bold text-sm\"><\/div>\n <h2 id=\"question-text\" class=\"text-lg font-bold mb-4 text-gray-800\"><\/h2>\n \n <div id=\"options-container\" class=\"space-y-2\">\n \n <\/div>\n \n <div id=\"feedback\" class=\"mt-4 p-3 rounded-lg text-center hidden text-sm\"><\/div>\n \n <div class=\"mt-6 text-center\">\n <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden transition-all\">\n Next <i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden transition-all\">\n Finish <i class=\"fas fa-check ml-1\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div id=\"results-screen\" class=\"mobile-optimized text-center hidden\">\n <h1 class=\"title-font text-3xl text-orange-600 mb-4\">\ud83c\udf43 Quiz Results<\/h1>\n \n <div class=\"mb-6\">\n <p class=\"text-xl mb-2\">Your Score: <span id=\"final-score\" class=\"font-bold\">0<\/span> out of 100<\/p>\n <div class=\"h-3 relative max-w-sm mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full progress-bar transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"result-message\" class=\"mb-6 text-lg\"><\/div>\n \n <div class=\"mb-6\">\n <h2 class=\"text-xl mb-3 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 gap-3\">\n <div class=\"bg-green-100 p-3 rounded-lg\">\n <p class=\"text-sm\"><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-3 rounded-lg\">\n <p class=\"text-sm\"><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-3 rounded-lg\">\n <p class=\"text-sm\"><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=\"btn-primary text-white font-bold py-3 px-6 rounded-full text-lg transition-all 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 name of Naruto's signature jutsu?\",\n options: [\"Chidori\", \"Rasengan\", \"Shadow Clone Jutsu\", \"Fire Style: Fireball Jutsu\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"The Rasengan is Naruto's signature technique, which he learned from Jiraiya. It's a spinning ball of chakra that doesn't require hand seals and was originally created by the Fourth Hokage, Minato Namikaze (Naruto's father).\"\n },\n {\n question: \"Who was Naruto's first sensei after graduating from the Ninja Academy?\",\n options: [\"Jiraiya\", \"Iruka Umino\", \"Kakashi Hatake\", \"Yamato\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Kakashi Hatake became the leader of Team 7, which included Naruto, Sasuke, and Sakura. While Iruka was his teacher at the Academy, Kakashi was his first official sensei as a genin.\"\n },\n {\n question: \"What is the name of the Nine-Tailed Fox sealed inside Naruto?\",\n options: [\"Shukaku\", \"Kurama\", \"Matatabi\", \"Gyuki\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"Kurama is the Nine-Tailed Fox (Kyuubi) that was sealed inside Naruto when he was a baby. Initially hostile, Kurama eventually becomes Naruto's partner and friend throughout the series.\"\n },\n {\n question: \"Which village is Naruto from?\",\n options: [\"Village Hidden in the Sand\", \"Village Hidden in the Mist\", \"Village Hidden in the Leaves\", \"Village Hidden in the Clouds\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Naruto is from Konohagakure, also known as the Village Hidden in the Leaves. It's located in the Land of Fire and is one of the five great shinobi villages.\"\n },\n {\n question: \"What is the name of Sasuke's older brother?\",\n options: [\"Neji Hyuga\", \"Gaara\", \"Itachi Uchiha\", \"Shisui Uchiha\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"Itachi Uchiha is Sasuke's older brother who massacred the Uchiha clan, leaving only Sasuke alive. This event becomes a major driving force in Sasuke's character development and his quest for revenge.\"\n },\n {\n question: \"Which jutsu allows the user to create multiple copies of themselves?\",\n options: [\"Substitution Jutsu\", \"Transformation Jutsu\", \"Shadow Clone Jutsu\", \"Body Flicker Technique\"],\n correct: 2,\n difficulty: \"Easy\",\n explanation: \"The Shadow Clone Jutsu (Kage Bunshin no Jutsu) creates physical copies of the user that can act independently. Naruto masters this technique early on and it becomes one of his most frequently used abilities.\"\n },\n {\n question: \"Who is the Fifth Hokage of the Hidden Leaf Village?\",\n options: [\"Hiruzen Sarutobi\", \"Minato Namikaze\", \"Tsunade\", \"Kakashi Hatake\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Tsunade becomes the Fifth Hokage after being convinced by Naruto and Jiraiya to return to the village. She's one of the legendary Sannin and is known for her incredible strength and medical ninjutsu skills.\"\n },\n {\n question: \"What is the name of Naruto's team?\",\n options: [\"Team 7\", \"Team 8\", \"Team 10\", \"Team Guy\"],\n correct: 0,\n difficulty: \"Easy\",\n explanation: \"Team 7 consists of Naruto Uzumaki, Sasuke Uchiha, and Sakura Haruno, led by Kakashi Hatake. This team formation is central to the early part of the series.\"\n },\n {\n question: \"Which organization does Itachi Uchiha belong to?\",\n options: [\"Root\", \"Akatsuki\", \"Sound Four\", \"Seven Ninja Swordsmen\"],\n correct: 1,\n difficulty: \"Medium\",\n explanation: \"Itachi is a member of the Akatsuki, a criminal organization composed of rogue ninja who seek to collect all the tailed beasts. He's partnered with Kisame Hoshigaki within the organization.\"\n },\n {\n question: \"What is the name of the technique that allows Sharingan users to cast powerful illusions?\",\n options: [\"Amaterasu\", \"Susanoo\", \"Tsukuyomi\", \"Kamui\"],\n correct: 2,\n difficulty: \"Hard\",\n explanation: \"Tsukuyomi is a powerful genjutsu (illusion technique) that can only be used by those who have awakened the Mangekyo Sharingan. Itachi Uchiha is particularly famous for using this technique, which traps the victim in an illusory world where time moves differently.\"\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 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', 'rounded-lg', 'bg-gray-100', 'hover:bg-gray-200', 'cursor-pointer', 'transition-all');\n optionDiv.innerHTML = `\n <div class=\"flex items-start\">\n <span class=\"font-bold mr-2\">${String.fromCharCode(65 + index)}.<\/span>\n <span>${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 correct = quizData[currentQuestion].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 = `<strong>Correct! \ud83c\udf89<\/strong><br><small>${quizData[currentQuestion].explanation}<\/small>`;\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 = `<strong>Wrong! The correct answer is ${String.fromCharCode(65 + correct)}.<\/strong><br><small>${quizData[currentQuestion].explanation}<\/small>`;\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 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 true Hokage! \ud83c\udf43\ud83c\udfc6<\/p>\n <p>Your ninja knowledge is legendary. Even the Third Hokage would be impressed!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Jonin Level! \ud83e\udd77\ud83d\udcaa<\/p>\n <p>You have excellent knowledge of the ninja world. Keep training to reach Hokage level!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Chunin Level! \ud83d\uddfe\ud83d\udc4d<\/p>\n <p>You know the basics of being a ninja. More training at the Academy will help!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Needs Training! Genin Level! \ud83d\udcda\ud83d\udd04<\/p>\n <p>Even Naruto started as a dead-last student! Keep studying and try again!<\/p>`;\n }\n }\n\n function restartQuiz() {\n currentQuestion = 0;\n score = 0;\n correctAnswers = 0;\n incorrectAnswers = 0;\n scoreElement.textContent = score;\n resultsScreen.classList.add('hidden');\n startScreen.classList.remove('hidden');\n }\n\n function showConfetti() {\n if (typeof confetti !== 'undefined') {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 },\n colors: ['#ff6b35', '#f7931e', '#4a90e2']\n });\n }\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf43 Naruto Quiz – Mobile Optimized \ud83c\udf43 Naruto Quiz Test your ninja knowledge with these 10 questions! Start Quiz 1 of 10 Score: 0 Next Finish \ud83c\udf43 Quiz Results Your Score: 0 out of 100 Your Performance 0 Correct 0 Incorrect 0% Accuracy Try Again<\/p>\n","protected":false},"author":1,"featured_media":70,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-69","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-naruto"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/06\/Lets-Try-Anime-Quiz.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/69","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=69"}],"version-history":[{"count":5,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":104,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/69\/revisions\/104"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/70"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}