Ultimate Crayon Shin-chan Quiz – Test Your Knowledge About Shinnosuke<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background-color: #fff5f5;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FFB6C1' fill-opacity='0.15' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n }\n \n .title-font {\n font-family: 'Bangers', cursive;\n }\n \n .quiz-container {\n max-width: 800px;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n }\n \n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .option:hover {\n transform: translateY(-3px);\n border: 2px solid #f56565;\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 {\n color: #48bb78;\n }\n \n .medium {\n color: #ecc94b;\n }\n \n .hard {\n color: #f56565;\n }\n \n .shin-chan-icon {\n width: 40px;\n height: 40px;\n background: radial-gradient(circle at 50% 50%, #ff6b6b, #ff5722);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n }\n \n .shin-chan-icon::before {\n content: \"\ud83c\udfad\";\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n }\n \n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\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 }\n <\/style>\n<\/head>\n<body class=\"min-h-screen py-8\">\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white rounded-lg overflow-hidden\">\n \n <div id=\"start-screen\" class=\"p-8 text-center\">\n <div class=\"flex justify-center items-center\">\n <div class=\"shin-chan-icon floating mb-4 mr-4\"><\/div>\n <h1 class=\"title-font text-5xl text-red-600 mb-4\">Crayon Shin-chan Quiz<\/h1>\n <div class=\"shin-chan-icon floating mb-4 ml-4\"><\/div>\n <\/div>\n <p class=\"text-xl mb-6\">Test your knowledge about Shinnosuke Nohara with these 10 questions!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-colors duration-300\">\n Start Quiz <i class=\"fas fa-child ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"hidden\">\n <div class=\"bg-red-500 h-2 progress-bar\" id=\"progress-bar\"><\/div>\n <div class=\"p-8\">\n <div class=\"flex justify-between items-center mb-6\">\n <p class=\"text-lg\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"text-lg\">Score: <span id=\"score\">0<\/span><\/p>\n <\/div>\n <div id=\"difficulty-indicator\" class=\"mb-4 text-right font-bold\"><\/div>\n <h2 id=\"question-text\" class=\"text-2xl font-bold mb-6\"><\/h2>\n <div id=\"options-container\" class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n \n <\/div>\n <div id=\"feedback\" class=\"mt-6 p-4 rounded-lg text-center hidden\"><\/div>\n <div class=\"mt-8 text-center\">\n <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full hidden\">\n Next Question <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full hidden\">\n Finish Quiz <i class=\"fas fa-check ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"results-screen\" class=\"p-8 text-center hidden\">\n <h1 class=\"title-font text-4xl text-red-600 mb-4\">Quiz Results<\/h1>\n <div class=\"mb-6\">\n <p class=\"text-2xl mb-2\">Your Score: <span id=\"final-score\" class=\"font-bold\">0<\/span> out of 100<\/p>\n <div class=\"h-4 relative max-w-md mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full bg-red-500 transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n <div id=\"result-message\" class=\"mb-8 text-xl\"><\/div>\n <div class=\"mb-6\">\n <h2 class=\"text-2xl mb-4 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div class=\"bg-green-100 p-4 rounded-lg\">\n <p class=\"text-lg\"><i class=\"fas fa-check-circle text-green-500 mr-2\"><\/i> <span id=\"correct-count\">0<\/span> Correct<\/p>\n <\/div>\n <div class=\"bg-red-100 p-4 rounded-lg\">\n <p class=\"text-lg\"><i class=\"fas fa-times-circle text-red-500 mr-2\"><\/i> <span id=\"incorrect-count\">0<\/span> Incorrect<\/p>\n <\/div>\n <div class=\"bg-blue-100 p-4 rounded-lg\">\n <p class=\"text-lg\"><i class=\"fas fa-percentage text-blue-500 mr-2\"><\/i> <span id=\"percentage\">0<\/span>% Accuracy<\/p>\n <\/div>\n <\/div>\n <\/div>\n <button id=\"restart-btn\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-colors duration-300\">\n Try Again <i class=\"fas fa-redo ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n <script>\n const quizData = [\n {\n question: \"What is Shinnosuke's age in the series?\",\n options: [\"4 years old\", \"5 years old\", \"6 years old\", \"7 years old\"],\n correct: 1,\n difficulty: \"Easy\"\n },\n {\n question: \"What is the name of Shinnosuke's family dog?\",\n options: [\"Shiro\", \"Kuro\", \"Pochi\", \"Hana\"],\n correct: 0,\n difficulty: \"Easy\"\n },\n {\n question: \"What is Shinnosuke's favorite TV show?\",\n options: [\"Kamen Rider\", \"Action Mask\", \"Ultra Seven\", \"Dragon Ball\"],\n correct: 1,\n difficulty: \"Easy\"\n },\n {\n question: \"What is the name of Shinnosuke's kindergarten?\",\n options: [\"Sakura Kindergarten\", \"Futaba Kindergarten\", \"Himawari Kindergarten\", \"Kasukabe Kindergarten\"],\n correct: 1,\n difficulty: \"Easy\"\n },\n {\n question: \"What city does the Nohara family live in?\",\n options: [\"Tokyo\", \"Osaka\", \"Kasukabe\", \"Yokohama\"],\n correct: 2,\n difficulty: \"Medium\"\n },\n {\n question: \"What is Shinnosuke's signature dance called?\",\n options: [\"Hip Shake Dance\", \"Ass Dance\", \"Butt Wiggle\", \"Bottom Dance\"],\n correct: 1,\n difficulty: \"Medium\"\n },\n {\n question: \"What does Shinnosuke call beautiful women?\",\n options: [\"Pretty Ladies\", \"Beautiful Sisters\", \"Lovely Women\", \"Nice Bodies\"],\n correct: 3,\n difficulty: \"Medium\"\n },\n {\n question: \"What is Shinnosuke's mother's name?\",\n options: [\"Misae\", \"Nanako\", \"Yoshinaga\", \"Midori\"],\n correct: 0,\n difficulty: \"Medium\"\n },\n {\n question: \"Which of these is NOT one of Shinnosuke's kindergarten friends?\",\n options: [\"Kazama\", \"Nene\", \"Masao\", \"Kenji\"],\n correct: 3,\n difficulty: \"Hard\"\n },\n {\n question: \"What is Shinnosuke's father's job?\",\n options: [\"Teacher\", \"Salaryman (Office worker)\", \"Police officer\", \"Store manager\"],\n correct: 1,\n difficulty: \"Hard\"\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 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', 'p-4', '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=\"text-lg 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.textContent = \"Correct! \ud83c\udf89\";\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.textContent = \"Wrong! The correct answer is \" + String.fromCharCode(65 + correct) + \".\";\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 Shin-chan Expert! \ud83c\udfc6<\/p>\n <p>Your knowledge of Shinnosuke is incredible. Even the Kasukabe Defense Group would be impressed!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Futaba Kindergarten Honor Student! \ud83c\udf92<\/p>\n <p>You have excellent knowledge of Crayon Shin-chan. Keep it up and you'll be an expert soon!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Kasukabe Defense Group Member! \ud83e\udd4b<\/p>\n <p>You know the basics about Shin-chan. Watch more episodes to improve your knowledge!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Needs Improvement! Time for More Episodes! \ud83d\udcfa<\/p>\n <p>Even Bo-chan started somewhere! Rewatch the series and try the quiz 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 confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 }\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Ultimate Crayon Shin-chan Quiz – Test Your Knowledge About Shinnosuke Crayon Shin-chan Quiz Test your knowledge about Shinnosuke Nohara with these 10 questions! Start Quiz 1 of 10 Score: 0 Next Question Finish Quiz Quiz Results Your Score: 0 out of 100 Your Performance 0 Correct 0 Incorrect 0% Accuracy Try Again<\/p>\n","protected":false},"author":1,"featured_media":141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[13],"class_list":["post-137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crayon-shin-chan","tag-shin-chan-crayon-anime-catoon-japan"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/08\/Lets-Try-Anime-Quiz-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/137","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=137"}],"version-history":[{"count":1,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/137\/revisions\/138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/141"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":137,"date":"2025-08-26T04:21:12","date_gmt":"2025-08-26T11:21:12","guid":{"rendered":"https:\/\/www.newwealth.shop\/a\/?p=137"},"modified":"2025-08-26T04:26:43","modified_gmt":"2025-08-26T11:26:43","slug":"crayon-shin-chan-quiz","status":"publish","type":"post","link":"https:\/\/www.newwealth.shop\/a\/?p=137","title":{"rendered":"Crayon Shin-chan Quiz"},"content":{"rendered":"\n\n\n\n \n \n Ultimate Crayon Shin-chan Quiz – Test Your Knowledge About Shinnosuke<\/title>\n <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Roboto', sans-serif;\n background-color: #fff5f5;\n background-image: url(\"data:image\/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FFB6C1' fill-opacity='0.15' fill-rule='evenodd'\/%3E%3C\/svg%3E\");\n }\n \n .title-font {\n font-family: 'Bangers', cursive;\n }\n \n .quiz-container {\n max-width: 800px;\n margin: 0 auto;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n }\n \n .option {\n transition: all 0.3s ease;\n border: 2px solid transparent;\n }\n \n .option:hover {\n transform: translateY(-3px);\n border: 2px solid #f56565;\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 {\n color: #48bb78;\n }\n \n .medium {\n color: #ecc94b;\n }\n \n .hard {\n color: #f56565;\n }\n \n .shin-chan-icon {\n width: 40px;\n height: 40px;\n background: radial-gradient(circle at 50% 50%, #ff6b6b, #ff5722);\n border-radius: 50%;\n position: relative;\n display: inline-block;\n }\n \n .shin-chan-icon::before {\n content: \"\ud83c\udfad\";\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n }\n \n @keyframes float {\n 0% { transform: translateY(0px); }\n 50% { transform: translateY(-20px); }\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 }\n <\/style>\n<\/head>\n<body class=\"min-h-screen py-8\">\n <div id=\"confetti\" class=\"fixed inset-0 pointer-events-none z-50\"><\/div>\n \n <div class=\"quiz-container bg-white rounded-lg overflow-hidden\">\n \n <div id=\"start-screen\" class=\"p-8 text-center\">\n <div class=\"flex justify-center items-center\">\n <div class=\"shin-chan-icon floating mb-4 mr-4\"><\/div>\n <h1 class=\"title-font text-5xl text-red-600 mb-4\">Crayon Shin-chan Quiz<\/h1>\n <div class=\"shin-chan-icon floating mb-4 ml-4\"><\/div>\n <\/div>\n <p class=\"text-xl mb-6\">Test your knowledge about Shinnosuke Nohara with these 10 questions!<\/p>\n <div class=\"flex justify-center\">\n <button id=\"start-btn\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-colors duration-300\">\n Start Quiz <i class=\"fas fa-child ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"quiz-screen\" class=\"hidden\">\n <div class=\"bg-red-500 h-2 progress-bar\" id=\"progress-bar\"><\/div>\n <div class=\"p-8\">\n <div class=\"flex justify-between items-center mb-6\">\n <p class=\"text-lg\"><span id=\"current-question\">1<\/span> of 10<\/p>\n <p class=\"text-lg\">Score: <span id=\"score\">0<\/span><\/p>\n <\/div>\n <div id=\"difficulty-indicator\" class=\"mb-4 text-right font-bold\"><\/div>\n <h2 id=\"question-text\" class=\"text-2xl font-bold mb-6\"><\/h2>\n <div id=\"options-container\" class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n \n <\/div>\n <div id=\"feedback\" class=\"mt-6 p-4 rounded-lg text-center hidden\"><\/div>\n <div class=\"mt-8 text-center\">\n <button id=\"next-btn\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full hidden\">\n Next Question <i class=\"fas fa-arrow-right ml-2\"><\/i>\n <\/button>\n <button id=\"finish-btn\" class=\"bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-6 rounded-full hidden\">\n Finish Quiz <i class=\"fas fa-check ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"results-screen\" class=\"p-8 text-center hidden\">\n <h1 class=\"title-font text-4xl text-red-600 mb-4\">Quiz Results<\/h1>\n <div class=\"mb-6\">\n <p class=\"text-2xl mb-2\">Your Score: <span id=\"final-score\" class=\"font-bold\">0<\/span> out of 100<\/p>\n <div class=\"h-4 relative max-w-md mx-auto rounded-full overflow-hidden bg-gray-200\">\n <div id=\"results-bar\" class=\"h-full bg-red-500 transition-all duration-1000\"><\/div>\n <\/div>\n <\/div>\n <div id=\"result-message\" class=\"mb-8 text-xl\"><\/div>\n <div class=\"mb-6\">\n <h2 class=\"text-2xl mb-4 font-bold\">Your Performance<\/h2>\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n <div class=\"bg-green-100 p-4 rounded-lg\">\n <p class=\"text-lg\"><i class=\"fas fa-check-circle text-green-500 mr-2\"><\/i> <span id=\"correct-count\">0<\/span> Correct<\/p>\n <\/div>\n <div class=\"bg-red-100 p-4 rounded-lg\">\n <p class=\"text-lg\"><i class=\"fas fa-times-circle text-red-500 mr-2\"><\/i> <span id=\"incorrect-count\">0<\/span> Incorrect<\/p>\n <\/div>\n <div class=\"bg-blue-100 p-4 rounded-lg\">\n <p class=\"text-lg\"><i class=\"fas fa-percentage text-blue-500 mr-2\"><\/i> <span id=\"percentage\">0<\/span>% Accuracy<\/p>\n <\/div>\n <\/div>\n <\/div>\n <button id=\"restart-btn\" class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-full text-xl transition-colors duration-300\">\n Try Again <i class=\"fas fa-redo ml-2\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.5.1\/dist\/confetti.browser.min.js\"><\/script>\n <script>\n const quizData = [\n {\n question: \"What is Shinnosuke's age in the series?\",\n options: [\"4 years old\", \"5 years old\", \"6 years old\", \"7 years old\"],\n correct: 1,\n difficulty: \"Easy\"\n },\n {\n question: \"What is the name of Shinnosuke's family dog?\",\n options: [\"Shiro\", \"Kuro\", \"Pochi\", \"Hana\"],\n correct: 0,\n difficulty: \"Easy\"\n },\n {\n question: \"What is Shinnosuke's favorite TV show?\",\n options: [\"Kamen Rider\", \"Action Mask\", \"Ultra Seven\", \"Dragon Ball\"],\n correct: 1,\n difficulty: \"Easy\"\n },\n {\n question: \"What is the name of Shinnosuke's kindergarten?\",\n options: [\"Sakura Kindergarten\", \"Futaba Kindergarten\", \"Himawari Kindergarten\", \"Kasukabe Kindergarten\"],\n correct: 1,\n difficulty: \"Easy\"\n },\n {\n question: \"What city does the Nohara family live in?\",\n options: [\"Tokyo\", \"Osaka\", \"Kasukabe\", \"Yokohama\"],\n correct: 2,\n difficulty: \"Medium\"\n },\n {\n question: \"What is Shinnosuke's signature dance called?\",\n options: [\"Hip Shake Dance\", \"Ass Dance\", \"Butt Wiggle\", \"Bottom Dance\"],\n correct: 1,\n difficulty: \"Medium\"\n },\n {\n question: \"What does Shinnosuke call beautiful women?\",\n options: [\"Pretty Ladies\", \"Beautiful Sisters\", \"Lovely Women\", \"Nice Bodies\"],\n correct: 3,\n difficulty: \"Medium\"\n },\n {\n question: \"What is Shinnosuke's mother's name?\",\n options: [\"Misae\", \"Nanako\", \"Yoshinaga\", \"Midori\"],\n correct: 0,\n difficulty: \"Medium\"\n },\n {\n question: \"Which of these is NOT one of Shinnosuke's kindergarten friends?\",\n options: [\"Kazama\", \"Nene\", \"Masao\", \"Kenji\"],\n correct: 3,\n difficulty: \"Hard\"\n },\n {\n question: \"What is Shinnosuke's father's job?\",\n options: [\"Teacher\", \"Salaryman (Office worker)\", \"Police officer\", \"Store manager\"],\n correct: 1,\n difficulty: \"Hard\"\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 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', 'p-4', '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=\"text-lg 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.textContent = \"Correct! \ud83c\udf89\";\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.textContent = \"Wrong! The correct answer is \" + String.fromCharCode(65 + correct) + \".\";\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 Shin-chan Expert! \ud83c\udfc6<\/p>\n <p>Your knowledge of Shinnosuke is incredible. Even the Kasukabe Defense Group would be impressed!<\/p>`;\n showConfetti();\n } else if (score >= 70) {\n resultMessage.innerHTML = `<p class=\"font-bold text-blue-600\">Great Job! Futaba Kindergarten Honor Student! \ud83c\udf92<\/p>\n <p>You have excellent knowledge of Crayon Shin-chan. Keep it up and you'll be an expert soon!<\/p>`;\n } else if (score >= 50) {\n resultMessage.innerHTML = `<p class=\"font-bold text-yellow-600\">Good Effort! Kasukabe Defense Group Member! \ud83e\udd4b<\/p>\n <p>You know the basics about Shin-chan. Watch more episodes to improve your knowledge!<\/p>`;\n } else {\n resultMessage.innerHTML = `<p class=\"font-bold text-red-600\">Needs Improvement! Time for More Episodes! \ud83d\udcfa<\/p>\n <p>Even Bo-chan started somewhere! Rewatch the series and try the quiz 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 confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 }\n });\n }\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Ultimate Crayon Shin-chan Quiz – Test Your Knowledge About Shinnosuke Crayon Shin-chan Quiz Test your knowledge about Shinnosuke Nohara with these 10 questions! Start Quiz 1 of 10 Score: 0 Next Question Finish Quiz Quiz Results Your Score: 0 out of 100 Your Performance 0 Correct 0 Incorrect 0% Accuracy Try Again<\/p>\n","protected":false},"author":1,"featured_media":141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[14],"tags":[13],"class_list":["post-137","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crayon-shin-chan","tag-shin-chan-crayon-anime-catoon-japan"],"jetpack_featured_media_url":"https:\/\/www.newwealth.shop\/a\/wp-content\/uploads\/2025\/08\/Lets-Try-Anime-Quiz-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/137","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=137"}],"version-history":[{"count":1,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/posts\/137\/revisions\/138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=\/wp\/v2\/media\/141"}],"wp:attachment":[{"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.newwealth.shop\/a\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}