\u26bd Blue Lock – Bachira 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;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background: linear-gradient(135deg, #0f172a 0%, #1e40af 50%, #166534 100%);\n min-height: 100vh;\n margin: 0;\n padding: 0;\n }\n \n .title-font {\n font-family: 'Bangers', cursive;\n }\n \n .quiz-container {\n max-width: 400px;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n \n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n font-size: 14px;\n padding: 12px;\n }\n \n .option:hover {\n transform: translateY(-2px);\n border: 2px solid #3b82f6;\n background-color: #dbeafe;\n }\n \n .correct {\n background-color: #dcfce7;\n border: 2px solid #16a34a;\n }\n \n .incorrect {\n background-color: #fecaca;\n border: 2px solid #dc2626;\n }\n \n .disabled {\n pointer-events: none;\n }\n \n .easy { color: #16a34a; }\n .medium { color: #eab308; }\n .hard { color: #dc2626; }\n \n .soccer-ball {\n width: 30px;\n height: 30px;\n background: radial-gradient(circle at 50% 50%, #ffffff, #000000);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n border: 3px solid #000;\n }\n \n .soccer-ball::before {\n content: \"\u26bd\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 20px;\n }\n \n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-10px); }\n 60% { transform: translateY(-5px); }\n }\n \n .bouncing {\n animation: bounce 2s infinite;\n }\n \n .progress-bar {\n transition: width 0.5s ease;\n }\n \n .compact-text {\n font-size: 16px;\n line-height: 1.4;\n }\n \n .mobile-title {\n font-size: 2.5rem;\n }\n \n .mobile-question {\n font-size: 1.2rem;\n line-height: 1.3;\n }\n \n @media (max-width: 480px) {\n .mobile-title { font-size: 2rem; }\n .mobile-question { font-size: 1.1rem; }\n .option { font-size: 13px; padding: 10px; }\n .quiz-container { max-width: 100%; }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white overflow-hidden\">\n \n <div id=\"start-screen\" class=\"p-6 text-center flex-1 flex flex-col justify-center\">\n <div class=\"flex justify-center items-center mb-4\">\n <div class=\"soccer-ball bouncing mr-3\"><\/div>\n <h1 class=\"title-font mobile-title text-blue-800 mb-0\">Blue Lock<\/h1>\n <div class=\"soccer-ball bouncing ml-3\"><\/div>\n <\/div>\n <h2 class=\"text-xl font-bold text-blue-600 mb-4\">Bachira Meguru Quiz<\/h2>\n <p class=\"compact-text mb-6 text-gray-700\">Test your knowledge about the monster player!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-full compact-text transition-colors duration-300\">\n Start Quiz <i class=\"fas fa-futbol ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"hidden flex-1 flex flex-col\">\n <div class=\"bg-blue-600 h-2 progress-bar\" id=\"progress-bar\"><\/div>\n <div class=\"p-4 flex-1 flex flex-col\">\n <div class=\"flex justify-between items-center mb-4\">\n <p class=\"compact-text\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"compact-text\">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=\"mobile-question font-bold mb-4 flex-shrink-0\"><\/h2>\n \n <div id=\"options-container\" class=\"grid grid-cols-1 gap-2 flex-1\">\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-4 text-center\">\n <button id=\"next-btn\" class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden\">\n Next <i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden\">\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=\"p-6 text-center hidden flex-1 flex flex-col justify-center\">\n <h1 class=\"title-font text-2xl text-blue-600 mb-4\">Quiz Results<\/h1>\n \n <div class=\"mb-6\">\n <p class=\"text-lg 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-xs mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full bg-blue-600 transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"result-message\" class=\"mb-6 text-sm\"><\/div>\n \n <div class=\"mb-6\">\n <h2 class=\"text-lg mb-3 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 gap-2\">\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=\"bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-full compact-text 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 Bachira's primary playing style known as?\",\n options: [\"Predator Eye\", \"Monster\", \"Flow State\", \"Weapon\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Bachira refers to his inner drive and instinct as his 'monster' - a metaphorical entity that guides his unpredictable and creative playing style.\"\n },\n {\n question: \"What position does Bachira primarily play?\",\n options: [\"Striker\", \"Midfielder\", \"Defender\", \"Goalkeeper\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"While Bachira has striker qualities, he primarily functions as an attacking midfielder who creates opportunities for others.\"\n },\n {\n question: \"What is Bachira's jersey number in Blue Lock?\",\n options: [\"8\", \"10\", \"7\", \"11\"],\n correct: 0,\n difficulty: \"Medium\",\n explanation: \"Bachira wears jersey number 8 during his time in the Blue Lock facility, which fits his role as a creative midfielder.\"\n },\n {\n question: \"Which team was Bachira originally placed in during the first selection?\",\n options: [\"Team X\", \"Team Y\", \"Team Z\", \"Team W\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Bachira was initially placed in Team Z along with Isagi, Kunigami, and other players during the Blue Lock first selection phase.\"\n },\n {\n question: \"What does Bachira often say his 'monster' tells him to do?\",\n options: [\"Score more goals\", \"Pass to teammates\", \"Devour opponents\", \"Play defensively\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Bachira's 'monster' drives him to 'devour' opponents through his unpredictable dribbling and creative plays.\"\n },\n {\n question: \"What is Bachira's most distinctive physical feature?\",\n options: [\"Spiky black hair\", \"Golden\/yellow eyes\", \"Tall stature\", \"Muscular build\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Bachira is known for his distinctive golden\/amber colored eyes, which often reflect his intense and wild nature during matches.\"\n },\n {\n question: \"Which famous footballer does Bachira's playing style most resemble?\",\n options: [\"Cristiano Ronaldo\", \"Lionel Messi\", \"Neymar Jr.\", \"Ronaldinho\"],\n correct: 3,\n difficulty: \"Hard\",\n explanation: \"Bachira's unpredictable, creative, and joyful playing style is most reminiscent of Brazilian legend Ronaldinho.\"\n },\n {\n question: \"What happens to Bachira's 'monster' during the U-20 match?\",\n options: [\"It becomes stronger\", \"It disappears\/goes quiet\", \"It changes color\", \"It splits into two\"],\n correct: 1,\n difficulty: \"Hard\",\n explanation: \"During the U-20 Japan match, Bachira experiences a crisis where his 'monster' becomes quiet, leading to self-doubt.\"\n },\n {\n question: \"What is Bachira's main weakness that gets exposed during Blue Lock?\",\n options: [\"Poor shooting accuracy\", \"Lack of physical strength\", \"Over-reliance on individual play\", \"Slow running speed\"],\n correct: 2,\n difficulty: \"Hard\",\n explanation: \"Bachira's tendency to rely too heavily on his individual skills sometimes prevents him from making optimal team plays.\"\n },\n {\n question: \"What does Bachira need to develop to evolve as a player?\",\n options: [\"Better defensive skills\", \"His own independent ego\/identity\", \"Stronger physical conditioning\", \"Leadership qualities\"],\n correct: 1,\n difficulty: \"Hard\",\n explanation: \"Bachira's character arc involves developing his own strong ego and identity as a player, rather than being dependent on others.\"\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 = \"Correct! \u26bd<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 = \"Wrong! The correct answer is \" + String.fromCharCode(65 + correct) + \".<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 Blue Lock Master! \u26bd<\/p>\n <p class=\"text-sm\">Your knowledge of Bachira is incredible. You understand the monster within!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Blue Lock Elite! \ud83d\udc99<\/p>\n <p class=\"text-sm\">You have excellent knowledge of Bachira. Keep training to reach the top!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Rising Player! \u26a1<\/p>\n <p class=\"text-sm\">You know the basics about Bachira. Watch more Blue Lock to improve!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Needs Improvement! Keep Training! \ud83d\udd04<\/p>\n <p class=\"text-sm\">Study Bachira's monster more carefully. Every striker starts somewhere!<\/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 confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 }\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u26bd Blue Lock – Bachira Quiz Blue Lock Bachira Meguru Quiz Test your knowledge about the monster player! Start Quiz 1 of 10 Score: 0 Next Finish 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":128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blue-lock"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/06\/Lets-Try-Anime-Quiz-3.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/65","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=65"}],"version-history":[{"count":3,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions\/103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/128"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":65,"date":"2025-06-19T20:17:59","date_gmt":"2025-06-19T11:17:59","guid":{"rendered":"https:\/\/www.newwealth.shop\/a\/?p=65"},"modified":"2025-08-12T20:31:41","modified_gmt":"2025-08-13T03:31:41","slug":"blue-lock-bachira-meguru-quiz","status":"publish","type":"post","link":"https:\/\/www.newwealth.shop\/a\/?p=65","title":{"rendered":"Blue Lock – Bachira Meguru Quiz"},"content":{"rendered":"\n\n\n\n \n \n \u26bd Blue Lock – Bachira 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;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background: linear-gradient(135deg, #0f172a 0%, #1e40af 50%, #166534 100%);\n min-height: 100vh;\n margin: 0;\n padding: 0;\n }\n \n .title-font {\n font-family: 'Bangers', cursive;\n }\n \n .quiz-container {\n max-width: 400px;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n }\n \n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n font-size: 14px;\n padding: 12px;\n }\n \n .option:hover {\n transform: translateY(-2px);\n border: 2px solid #3b82f6;\n background-color: #dbeafe;\n }\n \n .correct {\n background-color: #dcfce7;\n border: 2px solid #16a34a;\n }\n \n .incorrect {\n background-color: #fecaca;\n border: 2px solid #dc2626;\n }\n \n .disabled {\n pointer-events: none;\n }\n \n .easy { color: #16a34a; }\n .medium { color: #eab308; }\n .hard { color: #dc2626; }\n \n .soccer-ball {\n width: 30px;\n height: 30px;\n background: radial-gradient(circle at 50% 50%, #ffffff, #000000);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n border: 3px solid #000;\n }\n \n .soccer-ball::before {\n content: \"\u26bd\";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 20px;\n }\n \n @keyframes bounce {\n 0%, 20%, 50%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-10px); }\n 60% { transform: translateY(-5px); }\n }\n \n .bouncing {\n animation: bounce 2s infinite;\n }\n \n .progress-bar {\n transition: width 0.5s ease;\n }\n \n .compact-text {\n font-size: 16px;\n line-height: 1.4;\n }\n \n .mobile-title {\n font-size: 2.5rem;\n }\n \n .mobile-question {\n font-size: 1.2rem;\n line-height: 1.3;\n }\n \n @media (max-width: 480px) {\n .mobile-title { font-size: 2rem; }\n .mobile-question { font-size: 1.1rem; }\n .option { font-size: 13px; padding: 10px; }\n .quiz-container { max-width: 100%; }\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white overflow-hidden\">\n \n <div id=\"start-screen\" class=\"p-6 text-center flex-1 flex flex-col justify-center\">\n <div class=\"flex justify-center items-center mb-4\">\n <div class=\"soccer-ball bouncing mr-3\"><\/div>\n <h1 class=\"title-font mobile-title text-blue-800 mb-0\">Blue Lock<\/h1>\n <div class=\"soccer-ball bouncing ml-3\"><\/div>\n <\/div>\n <h2 class=\"text-xl font-bold text-blue-600 mb-4\">Bachira Meguru Quiz<\/h2>\n <p class=\"compact-text mb-6 text-gray-700\">Test your knowledge about the monster player!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-full compact-text transition-colors duration-300\">\n Start Quiz <i class=\"fas fa-futbol ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"hidden flex-1 flex flex-col\">\n <div class=\"bg-blue-600 h-2 progress-bar\" id=\"progress-bar\"><\/div>\n <div class=\"p-4 flex-1 flex flex-col\">\n <div class=\"flex justify-between items-center mb-4\">\n <p class=\"compact-text\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"compact-text\">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=\"mobile-question font-bold mb-4 flex-shrink-0\"><\/h2>\n \n <div id=\"options-container\" class=\"grid grid-cols-1 gap-2 flex-1\">\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-4 text-center\">\n <button id=\"next-btn\" class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden\">\n Next <i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full text-sm hidden\">\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=\"p-6 text-center hidden flex-1 flex flex-col justify-center\">\n <h1 class=\"title-font text-2xl text-blue-600 mb-4\">Quiz Results<\/h1>\n \n <div class=\"mb-6\">\n <p class=\"text-lg 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-xs mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full bg-blue-600 transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n \n <div id=\"result-message\" class=\"mb-6 text-sm\"><\/div>\n \n <div class=\"mb-6\">\n <h2 class=\"text-lg mb-3 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 gap-2\">\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=\"bg-blue-600 hover:bg-blue-800 text-white font-bold py-3 px-6 rounded-full compact-text 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 Bachira's primary playing style known as?\",\n options: [\"Predator Eye\", \"Monster\", \"Flow State\", \"Weapon\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Bachira refers to his inner drive and instinct as his 'monster' - a metaphorical entity that guides his unpredictable and creative playing style.\"\n },\n {\n question: \"What position does Bachira primarily play?\",\n options: [\"Striker\", \"Midfielder\", \"Defender\", \"Goalkeeper\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"While Bachira has striker qualities, he primarily functions as an attacking midfielder who creates opportunities for others.\"\n },\n {\n question: \"What is Bachira's jersey number in Blue Lock?\",\n options: [\"8\", \"10\", \"7\", \"11\"],\n correct: 0,\n difficulty: \"Medium\",\n explanation: \"Bachira wears jersey number 8 during his time in the Blue Lock facility, which fits his role as a creative midfielder.\"\n },\n {\n question: \"Which team was Bachira originally placed in during the first selection?\",\n options: [\"Team X\", \"Team Y\", \"Team Z\", \"Team W\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Bachira was initially placed in Team Z along with Isagi, Kunigami, and other players during the Blue Lock first selection phase.\"\n },\n {\n question: \"What does Bachira often say his 'monster' tells him to do?\",\n options: [\"Score more goals\", \"Pass to teammates\", \"Devour opponents\", \"Play defensively\"],\n correct: 2,\n difficulty: \"Medium\",\n explanation: \"Bachira's 'monster' drives him to 'devour' opponents through his unpredictable dribbling and creative plays.\"\n },\n {\n question: \"What is Bachira's most distinctive physical feature?\",\n options: [\"Spiky black hair\", \"Golden\/yellow eyes\", \"Tall stature\", \"Muscular build\"],\n correct: 1,\n difficulty: \"Easy\",\n explanation: \"Bachira is known for his distinctive golden\/amber colored eyes, which often reflect his intense and wild nature during matches.\"\n },\n {\n question: \"Which famous footballer does Bachira's playing style most resemble?\",\n options: [\"Cristiano Ronaldo\", \"Lionel Messi\", \"Neymar Jr.\", \"Ronaldinho\"],\n correct: 3,\n difficulty: \"Hard\",\n explanation: \"Bachira's unpredictable, creative, and joyful playing style is most reminiscent of Brazilian legend Ronaldinho.\"\n },\n {\n question: \"What happens to Bachira's 'monster' during the U-20 match?\",\n options: [\"It becomes stronger\", \"It disappears\/goes quiet\", \"It changes color\", \"It splits into two\"],\n correct: 1,\n difficulty: \"Hard\",\n explanation: \"During the U-20 Japan match, Bachira experiences a crisis where his 'monster' becomes quiet, leading to self-doubt.\"\n },\n {\n question: \"What is Bachira's main weakness that gets exposed during Blue Lock?\",\n options: [\"Poor shooting accuracy\", \"Lack of physical strength\", \"Over-reliance on individual play\", \"Slow running speed\"],\n correct: 2,\n difficulty: \"Hard\",\n explanation: \"Bachira's tendency to rely too heavily on his individual skills sometimes prevents him from making optimal team plays.\"\n },\n {\n question: \"What does Bachira need to develop to evolve as a player?\",\n options: [\"Better defensive skills\", \"His own independent ego\/identity\", \"Stronger physical conditioning\", \"Leadership qualities\"],\n correct: 1,\n difficulty: \"Hard\",\n explanation: \"Bachira's character arc involves developing his own strong ego and identity as a player, rather than being dependent on others.\"\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 = \"Correct! \u26bd<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 = \"Wrong! The correct answer is \" + String.fromCharCode(65 + correct) + \".<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 Blue Lock Master! \u26bd<\/p>\n <p class=\"text-sm\">Your knowledge of Bachira is incredible. You understand the monster within!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Blue Lock Elite! \ud83d\udc99<\/p>\n <p class=\"text-sm\">You have excellent knowledge of Bachira. Keep training to reach the top!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Rising Player! \u26a1<\/p>\n <p class=\"text-sm\">You know the basics about Bachira. Watch more Blue Lock to improve!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Needs Improvement! Keep Training! \ud83d\udd04<\/p>\n <p class=\"text-sm\">Study Bachira's monster more carefully. Every striker starts somewhere!<\/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 confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 }\n });\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u26bd Blue Lock – Bachira Quiz Blue Lock Bachira Meguru Quiz Test your knowledge about the monster player! Start Quiz 1 of 10 Score: 0 Next Finish 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":128,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-65","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blue-lock"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/06\/Lets-Try-Anime-Quiz-3.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/65","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=65"}],"version-history":[{"count":3,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/65\/revisions\/103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/128"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=65"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=65"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=65"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}