{"id":18293,"date":"2026-10-22T19:53:39","date_gmt":"2026-10-22T14:23:39","guid":{"rendered":"https:\/\/johnsonfrancis.org\/techworld\/?p=18293"},"modified":"2026-10-22T19:53:41","modified_gmt":"2026-10-22T14:23:41","slug":"junior-science-quiz-solar-system","status":"publish","type":"post","link":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/","title":{"rendered":"Junior Science Quiz &#8211; Solar System"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Junior Space Quiz: Planets &#038; Solar System<\/title>\n    <!-- Tailwind CSS CDN -->\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <!-- FontAwesome Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <!-- Google Fonts -->\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;600;700&#038;family=Nunito:wght@400;700;800&#038;display=swap\" rel=\"stylesheet\">\n    <script>\n        tailwind.config = {\n            theme: {\n                extend: {\n                    fontFamily: {\n                        heading: ['Fredoka', 'sans-serif'],\n                        body: ['Nunito', 'sans-serif'],\n                    },\n                    colors: {\n                        space: {\n                            dark: '#0B0D1B',\n                            card: '#161936',\n                            accent: '#6C5CE7',\n                            neon: '#00FFC8',\n                            pink: '#FF7675',\n                            yellow: '#FFEAA7'\n                        }\n                    }\n                }\n            }\n        }\n    <\/script>\n    <style>\n        body {\n            font-family: 'Nunito', sans-serif;\n            background: linear-gradient(135deg, #090A0F 0%, #17192A 50%, #0C1027 100%);\n            min-height: 100vh;\n        }\n        \n        \/* Twinkling star animation in background *\/\n        .stars-bg {\n            background-image: \n                radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),\n                radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),\n                radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),\n                radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));\n            background-repeat: repeat;\n            background-size: 200px 200px;\n        }\n\n        .bounce-gentle {\n            animation: bounce 2s infinite;\n        }\n        @keyframes bounce {\n            0%, 100% { transform: translateY(-3%); }\n            50% { transform: translateY(3%); }\n        }\n\n        .glow-effect {\n            box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);\n        }\n\n        \/* Custom scrollbar *\/\n        ::-webkit-scrollbar {\n            width: 8px;\n        }\n        ::-webkit-scrollbar-track {\n            background: #161936;\n        }\n        ::-webkit-scrollbar-thumb {\n            background: #6C5CE7;\n            border-radius: 4px;\n        }\n    <\/style>\n<\/head>\n<body class=\"stars-bg text-white flex items-center justify-center p-2 sm:p-4 md:p-6\">\n\n    <!-- Main Outer Container -->\n    <div class=\"w-full max-w-3xl bg-space-card\/90 backdrop-blur-md rounded-3xl border border-indigo-500\/30 p-4 sm:p-6 md:p-8 shadow-2xl relative overflow-hidden my-auto\">\n        \n        <!-- Header Banner -->\n        <header class=\"text-center mb-6 relative z-10\">\n            <div class=\"inline-flex items-center gap-2 bg-indigo-900\/60 border border-indigo-400\/40 rounded-full px-4 py-1.5 text-space-neon text-xs sm:text-sm font-semibold mb-2\">\n                <i class=\"fa-solid fa-rocket animate-pulse\"><\/i> Junior Science Explorer\n            <\/div>\n            <h1 class=\"font-heading text-2xl sm:text-4xl font-bold tracking-wide text-transparent bg-clip-text bg-gradient-to-r from-space-neon via-purple-300 to-space-pink\">\n                Planet &#038; Space Quiz \ud83d\ude80\n            <\/h1>\n        <\/header>\n\n        <!-- START SCREEN -->\n        <div id=\"start-screen\" class=\"text-center py-6 space-y-6\">\n            <div class=\"text-6xl sm:text-8xl bounce-gentle my-4\">\ud83e\ude90<\/div>\n            <p class=\"text-gray-300 text-base sm:text-lg max-w-lg mx-auto\">\n                Test your space knowledge across <strong>25 exciting questions<\/strong>! Learn cool facts about planets, moons, the sun, and distant space.\n            <\/p>\n            \n            <div class=\"bg-indigo-950\/50 p-4 rounded-2xl border border-indigo-800\/50 max-w-md mx-auto text-left text-sm text-indigo-200 space-y-2\">\n                <div class=\"flex items-center gap-2\">\n                    <i class=\"fa-solid fa-star text-space-yellow\"><\/i> 25 Questions with instant explanations\n                <\/div>\n                <div class=\"flex items-center gap-2\">\n                    <i class=\"fa-solid fa-trophy text-space-yellow\"><\/i> Earn rank badges (Space Cadet to Galactic Commander)\n                <\/div>\n                <div class=\"flex items-center gap-2\">\n                    <i class=\"fa-solid fa-stopwatch text-space-yellow\"><\/i> Track your time &#038; accuracy score\n                <\/div>\n            <\/div>\n\n            <!-- Start Button -->\n            <div class=\"max-w-xs mx-auto pt-2\">\n                <button id=\"start-btn\" onclick=\"startQuiz()\" class=\"w-full py-4 bg-gradient-to-r from-space-accent to-purple-600 hover:from-purple-600 hover:to-space-accent text-white font-heading font-bold text-xl rounded-xl shadow-lg transition transform active:scale-95 flex items-center justify-center gap-2 border border-indigo-400\/30\">\n                    <i class=\"fa-solid fa-rocket animate-bounce\"><\/i> Launch Mission!\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <!-- QUIZ INTERFACE SCREEN -->\n        <div id=\"quiz-screen\" class=\"hidden space-y-5\">\n            \n            <!-- Progress Bar & Score Bar -->\n            <div class=\"bg-space-dark\/80 rounded-2xl p-3 border border-indigo-900 flex flex-col gap-2\">\n                <div class=\"flex justify-between items-center text-xs sm:text-sm font-semibold\">\n                    <span id=\"question-count-text\" class=\"text-indigo-300\">Question 1 of 25<\/span>\n                    <div class=\"flex items-center gap-3\">\n                        <span id=\"live-timer\" class=\"text-space-yellow\"><i class=\"fa-regular fa-clock mr-1\"><\/i>00:00<\/span>\n                        <span id=\"live-score\" class=\"text-space-neon\">Score: 0 | Accuracy: 100%<\/span>\n                    <\/div>\n                <\/div>\n                <!-- Progress Bar -->\n                <div class=\"w-full bg-gray-800 rounded-full h-3 overflow-hidden p-0.5 border border-indigo-900\/50\">\n                    <div id=\"progress-bar\" class=\"bg-gradient-to-r from-space-accent via-space-neon to-green-400 h-full rounded-full transition-all duration-300 w-0\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Question Card -->\n            <div class=\"bg-indigo-950\/40 rounded-2xl p-4 sm:p-6 border border-indigo-800\/40 shadow-inner\">\n                <div class=\"flex items-center gap-2 mb-2\">\n                    <span id=\"category-tag\" class=\"text-xs font-bold uppercase tracking-wider px-2.5 py-1 rounded-md bg-indigo-900\/80 text-space-yellow\">\n                        Solar System\n                    <\/span>\n                <\/div>\n                <h2 id=\"question-text\" class=\"font-heading text-lg sm:text-xl font-bold text-white mb-4 leading-relaxed\">\n                    Loading question&#8230;\n                <\/h2>\n\n                <!-- Options Grid -->\n                <div id=\"options-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n                    <!-- Dynamic option buttons go here -->\n                <\/div>\n            <\/div>\n\n            <!-- Instant Feedback Card -->\n            <div id=\"feedback-card\" class=\"hidden p-4 rounded-2xl border transition-all duration-300\">\n                <div class=\"flex items-start gap-3\">\n                    <div id=\"feedback-icon\" class=\"text-2xl mt-0.5\"><\/div>\n                    <div class=\"space-y-1\">\n                        <h4 id=\"feedback-title\" class=\"font-heading font-bold text-base sm:text-lg\"><\/h4>\n                        <p id=\"explanation-text\" class=\"text-xs sm:text-sm text-gray-200 leading-relaxed\"><\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"mt-3 text-right\">\n                    <button id=\"next-btn\" onclick=\"nextQuestion()\" class=\"px-5 py-2 bg-space-neon text-space-dark hover:bg-white font-heading font-bold rounded-xl text-sm transition transform active:scale-95 shadow-md\">\n                        Next Question <i class=\"fa-solid fa-arrow-right ml-1\"><\/i>\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- RESULTS SCREEN -->\n        <div id=\"result-screen\" class=\"hidden space-y-6 text-center py-4\">\n            <div class=\"space-y-2\">\n                <div id=\"badge-icon\" class=\"text-6xl sm:text-7xl\">\ud83c\udfc6<\/div>\n                <h2 id=\"result-title\" class=\"font-heading text-2xl sm:text-3xl font-bold text-space-neon\">Mission Completed!<\/h2>\n                <p id=\"badge-name\" class=\"text-lg font-bold text-space-yellow\">Space Rank: Space Cadet<\/p>\n                <p id=\"badge-desc\" class=\"text-xs sm:text-sm text-gray-300 max-w-md mx-auto\"><\/p>\n            <\/div>\n\n            <!-- Stats Summary Grid -->\n            <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-3 max-w-lg mx-auto\">\n                <div class=\"bg-space-dark\/80 p-3 rounded-2xl border border-indigo-900\">\n                    <span class=\"block text-xs text-gray-400\">Total Score<\/span>\n                    <span id=\"final-score\" class=\"font-heading text-xl sm:text-2xl text-space-neon font-bold\">0<\/span>\n                <\/div>\n                <div class=\"bg-space-dark\/80 p-3 rounded-2xl border border-indigo-900\">\n                    <span class=\"block text-xs text-gray-400\">Correct<\/span>\n                    <span id=\"final-correct\" class=\"font-heading text-xl sm:text-2xl text-green-400 font-bold\">0\/25<\/span>\n                <\/div>\n                <div class=\"bg-space-dark\/80 p-3 rounded-2xl border border-indigo-900\">\n                    <span class=\"block text-xs text-gray-400\">Accuracy<\/span>\n                    <span id=\"final-accuracy\" class=\"font-heading text-xl sm:text-2xl text-space-yellow font-bold\">0%<\/span>\n                <\/div>\n                <div class=\"bg-space-dark\/80 p-3 rounded-2xl border border-indigo-900\">\n                    <span class=\"block text-xs text-gray-400\">Time Taken<\/span>\n                    <span id=\"final-time\" class=\"font-heading text-xl sm:text-2xl text-indigo-300 font-bold\">00:00<\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Detailed Answer Review -->\n            <div class=\"text-left space-y-3 max-w-2xl mx-auto\">\n                <h3 class=\"font-heading text-lg font-bold text-white flex items-center gap-2 border-b border-indigo-800\/60 pb-2\">\n                    <i class=\"fa-solid fa-list-check text-space-neon\"><\/i> Question &#038; Answer Review\n                <\/h3>\n                <div id=\"review-list\" class=\"max-h-64 overflow-y-auto space-y-2 pr-1\">\n                    <!-- Generated dynamically -->\n                <\/div>\n            <\/div>\n\n            <!-- Buttons -->\n            <div class=\"flex justify-center pt-2\">\n                <button onclick=\"restartQuiz()\" class=\"px-8 py-3 bg-gradient-to-r from-space-accent to-purple-600 hover:from-purple-600 hover:to-space-accent text-white font-heading font-bold rounded-xl text-base transition transform active:scale-95 shadow-md flex items-center gap-2 border border-indigo-400\/30\">\n                    <i class=\"fa-solid fa-rotate-right\"><\/i> Play Again\n                <\/button>\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <!-- QUIZ JAVASCRIPT LOGIC -->\n    <script>\n        \/\/ 25 Junior Science Planet & Space Questions\n        const questionsData = [\n            {\n                category: \"Solar System\",\n                question: \"Which planet is known as the 'Red Planet'?\",\n                options: [\"Venus\", \"Mars\", \"Jupiter\", \"Mercury\"],\n                answer: 1,\n                explanation: \"Mars is called the Red Planet because its soil is full of iron oxide (rust), which gives it a reddish color!\"\n            },\n            {\n                category: \"Gas Giants\",\n                question: \"What is the largest planet in our solar system?\",\n                options: [\"Saturn\", \"Neptune\", \"Jupiter\", \"Uranus\"],\n                answer: 2,\n                explanation: \"Jupiter is so huge that more than 1,300 Earths could fit inside it!\"\n            },\n            {\n                category: \"Earth & Moon\",\n                question: \"How long does it take for Earth to complete one orbit around the Sun?\",\n                options: [\"24 hours\", \"30 days\", \"365 days (1 year)\", \"100 days\"],\n                answer: 2,\n                explanation: \"Earth takes about 365.25 days to complete one full revolution around the Sun, which makes up one year.\"\n            },\n            {\n                category: \"The Sun\",\n                question: \"The Sun is actually a huge sphere of glowing gas. What type of space object is it?\",\n                options: [\"A Planet\", \"A Moon\", \"A Star\", \"An Asteroid\"],\n                answer: 2,\n                explanation: \"The Sun is an average-sized star at the center of our solar system that provides light and warmth to Earth.\"\n            },\n            {\n                category: \"Rings & Ice Giants\",\n                question: \"Which planet is famous for having magnificent, bright rings made of ice and rock?\",\n                options: [\"Saturn\", \"Mars\", \"Mercury\", \"Pluto\"],\n                answer: 0,\n                explanation: \"Saturn has the most spectacular ring system in the solar system, made of billions of pieces of ice, rock, and dust.\"\n            },\n            {\n                category: \"Inner Planets\",\n                question: \"Which planet is closest to the Sun?\",\n                options: [\"Venus\", \"Mercury\", \"Earth\", \"Mars\"],\n                answer: 1,\n                explanation: \"Mercury is the closest planet to the Sun. It is also the smallest planet in our solar system!\"\n            },\n            {\n                category: \"Planetary Temperatures\",\n                question: \"Even though Mercury is closest to the Sun, which planet is actually the hottest in our solar system?\",\n                options: [\"Mars\", \"Jupiter\", \"Venus\", \"Saturn\"],\n                answer: 2,\n                explanation: \"Venus is the hottest planet because its thick blanket of clouds traps heat like a giant greenhouse (reaching over 860\u00b0F \/ 460\u00b0C)!\"\n            },\n            {\n                category: \"Dwarf Planets\",\n                question: \"Pluto was reclassified in 2006. What kind of space body is Pluto now officially called?\",\n                options: [\"Comet\", \"Dwarf Planet\", \"Gas Giant\", \"Moon\"],\n                answer: 1,\n                explanation: \"Scientists classified Pluto as a 'dwarf planet' because it is much smaller than the 8 main planets and shares its orbital path with other objects.\"\n            },\n            {\n                category: \"Earth & Moon\",\n                question: \"How long does it take for the Moon to orbit once around Earth?\",\n                options: [\"1 day\", \"About 27 to 29 days\", \"1 year\", \"12 hours\"],\n                answer: 1,\n                explanation: \"The Moon takes about 27.3 days to orbit Earth, which is roughly one month!\"\n            },\n            {\n                category: \"Ice Giants\",\n                question: \"Which giant blue planet rotates on its side, almost like a rolling bowling ball?\",\n                options: [\"Neptune\", \"Uranus\", \"Jupiter\", \"Mars\"],\n                answer: 1,\n                explanation: \"Uranus has an extreme tilt, causing it to spin on its side as it orbits the Sun!\"\n            },\n            {\n                category: \"Outer Planets\",\n                question: \"Which blue planet is the farthest known planet from the Sun in our solar system?\",\n                options: [\"Neptune\", \"Uranus\", \"Saturn\", \"Mercury\"],\n                answer: 0,\n                explanation: \"Neptune is the 8th and farthest planet from the Sun, known for its deep blue color and super-fast winds!\"\n            },\n            {\n                category: \"Solar System\",\n                question: \"What separates the rocky inner planets (Mercury, Venus, Earth, Mars) from the gas giants?\",\n                options: [\"The Oort Cloud\", \"The Asteroid Belt\", \"A Ring of Ice\", \"The Sun\"],\n                answer: 1,\n                explanation: \"The Asteroid Belt is a giant ring of rocky space debris located between Mars and Jupiter.\"\n            },\n            {\n                category: \"Gas Giants\",\n                question: \"Jupiter has a famous giant storm that has been spinning for centuries. What is it called?\",\n                options: [\"The Great Red Spot\", \"The Blue Eye\", \"The Solar Storm\", \"The Big Whirlpool\"],\n                answer: 0,\n                explanation: \"The Great Red Spot is a colossal storm on Jupiter that is wider than the planet Earth!\"\n            },\n            {\n                category: \"Earth Science\",\n                question: \"Why is Earth called the 'Goldilocks Planet'?\",\n                options: [\"It is made of gold\", \"It is neither too hot nor too cold for life\", \"It has 3 moons\", \"It is yellow\"],\n                answer: 1,\n                explanation: \"Earth is in the habitable zone\u2014just the right distance from the Sun where liquid water can exist and life can thrive!\"\n            },\n            {\n                category: \"Space Exploration\",\n                question: \"What force keeps the planets in orbit around the Sun instead of floating away?\",\n                options: [\"Magnetism\", \"Gravity\", \"Solar Winds\", \"Electricity\"],\n                answer: 1,\n                explanation: \"The Sun's powerful gravity pulls on the planets, keeping them safely in predictable orbits around it.\"\n            },\n            {\n                category: \"Moons\",\n                question: \"Which solar system planet has the largest number of confirmed moons (over 100!)?\",\n                options: [\"Earth\", \"Mercury\", \"Saturn\", \"Venus\"],\n                answer: 2,\n                explanation: \"Saturn leads the planetary moon count with over 140 known moons, including giant Titan!\"\n            },\n            {\n                category: \"Small Bodies\",\n                question: \"What do we call a streak of light in the night sky caused by a small space rock burning up in Earth's atmosphere?\",\n                options: [\"Shooting star (Meteor)\", \"Black hole\", \"Galaxy\", \"Nebula\"],\n                answer: 0,\n                explanation: \"A meteor (often called a shooting star) is a piece of space dust or rock that glows brightly as it burns up in Earth's air.\"\n            },\n            {\n                category: \"Inner Planets\",\n                question: \"Which two planets in our solar system have NO moons at all?\",\n                options: [\"Earth & Mars\", \"Mercury & Venus\", \"Jupiter & Saturn\", \"Uranus & Neptune\"],\n                answer: 1,\n                explanation: \"Mercury and Venus are the only two planets in our solar system without any natural moons!\"\n            },\n            {\n                category: \"Moons\",\n                question: \"Ganymede is the largest moon in the solar system (even bigger than Mercury!). Which planet does it orbit?\",\n                options: [\"Saturn\", \"Jupiter\", \"Neptune\", \"Mars\"],\n                answer: 1,\n                explanation: \"Ganymede is Jupiter's largest moon and has its own magnetic field!\"\n            },\n            {\n                category: \"Small Bodies\",\n                question: \"What are comets mostly made of?\",\n                options: [\"Pure metal\", \"Ice, dust, and rocky material\", \"Liquid hot magma\", \"Gas only\"],\n                answer: 1,\n                explanation: \"Comets are often described as 'dirty snowballs' because they are made of frozen ice, gases, and dust.\"\n            },\n            {\n                category: \"Planetary Motion\",\n                question: \"What causes Day and Night on Earth?\",\n                options: [\"Earth orbiting the Sun\", \"The Sun turning off at night\", \"Earth rotating on its axis once every 24 hours\", \"The Moon blocking the light\"],\n                answer: 2,\n                explanation: \"As Earth spins (rotates) on its invisible axis every 24 hours, the side facing the Sun gets day, while the side facing away gets night.\"\n            },\n            {\n                category: \"Red Planet\",\n                question: \"How many moons does Mars have?\",\n                options: [\"0\", \"1\", \"2 (Phobos and Deimos)\", \"50\"],\n                answer: 2,\n                explanation: \"Mars has 2 small, potato-shaped moons named Phobos and Deimos.\"\n            },\n            {\n                category: \"Space Trivia\",\n                question: \"What is the name of the brightest planet visible in Earth's night sky (often called the 'Morning Star')?\",\n                options: [\"Venus\", \"Mars\", \"Jupiter\", \"Saturn\"],\n                answer: 0,\n                explanation: \"Venus reflects lots of sunlight from its thick clouds, making it the brightest planet in Earth's sky.\"\n            },\n            {\n                category: \"Space Exploration\",\n                question: \"What robot vehicles have scientists sent to explore the surface of Mars?\",\n                options: [\"Submarines\", \"Space Rovers\", \"Hot air balloons\", \"Trains\"],\n                answer: 1,\n                explanation: \"Rovers like Curiosity and Perseverance are wheel-based robotic scientists exploring the dusty Martian surface!\"\n            },\n            {\n                category: \"Galactic Neighbors\",\n                question: \"Our solar system (Sun and 8 planets) is part of which huge galaxy?\",\n                options: [\"Andromeda Galaxy\", \"Whirlpool Galaxy\", \"Milky Way Galaxy\", \"Sombrero Galaxy\"],\n                answer: 2,\n                explanation: \"We live in the Milky Way Galaxy, a massive spiraling collection of billions of stars and planet systems!\"\n            }\n        ];\n\n        \/\/ Quiz State Variables\n        let currentQuestionIndex = 0;\n        let score = 0;\n        let userAnswers = [];\n        let timerInterval = null;\n        let secondsElapsed = 0;\n\n        \/\/ DOM Element References\n        const startScreen = document.getElementById('start-screen');\n        const quizScreen = document.getElementById('quiz-screen');\n        const resultScreen = document.getElementById('result-screen');\n\n        const questionCountText = document.getElementById('question-count-text');\n        const liveScoreText = document.getElementById('live-score');\n        const liveTimerText = document.getElementById('live-timer');\n        const progressBar = document.getElementById('progress-bar');\n        const categoryTag = document.getElementById('category-tag');\n        const questionText = document.getElementById('question-text');\n        const optionsContainer = document.getElementById('options-container');\n\n        const feedbackCard = document.getElementById('feedback-card');\n        const feedbackIcon = document.getElementById('feedback-icon');\n        const feedbackTitle = document.getElementById('feedback-title');\n        const explanationText = document.getElementById('explanation-text');\n\n        \/\/ Start Quiz Function\n        function startQuiz() {\n            currentQuestionIndex = 0;\n            score = 0;\n            userAnswers = [];\n            secondsElapsed = 0;\n\n            startScreen.classList.add('hidden');\n            resultScreen.classList.add('hidden');\n            quizScreen.classList.remove('hidden');\n\n            startTimer();\n            loadQuestion();\n        }\n\n        \/\/ Timer Logic\n        function startTimer() {\n            clearInterval(timerInterval);\n            liveTimerText.innerHTML = `<i class=\"fa-regular fa-clock mr-1\"><\/i>00:00`;\n            timerInterval = setInterval(() => {\n                secondsElapsed++;\n                liveTimerText.innerHTML = `<i class=\"fa-regular fa-clock mr-1\"><\/i>${formatTime(secondsElapsed)}`;\n            }, 1000);\n        }\n\n        function stopTimer() {\n            clearInterval(timerInterval);\n        }\n\n        function formatTime(totalSeconds) {\n            const mins = Math.floor(totalSeconds \/ 60);\n            const secs = totalSeconds % 60;\n            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n        }\n\n        \/\/ Load Question details\n        function loadQuestion() {\n            const currentQ = questionsData[currentQuestionIndex];\n\n            feedbackCard.classList.add('hidden');\n            feedbackCard.className = \"hidden p-4 rounded-2xl border transition-all duration-300\";\n\n            questionCountText.innerText = `Question ${currentQuestionIndex + 1} of ${questionsData.length}`;\n            categoryTag.innerText = currentQ.category;\n            questionText.innerText = currentQ.question;\n\n            const progressPercent = ((currentQuestionIndex) \/ questionsData.length) * 100;\n            progressBar.style.width = `${progressPercent}%`;\n\n            updateLiveScore();\n\n            optionsContainer.innerHTML = '';\n            currentQ.options.forEach((optionText, idx) => {\n                const btn = document.createElement('button');\n                btn.className = \"w-full p-3.5 bg-space-dark\/90 hover:bg-indigo-900\/80 border-2 border-indigo-700\/50 hover:border-space-neon rounded-xl text-left text-sm sm:text-base font-semibold transition flex items-center justify-between text-white active:scale-98 shadow-sm\";\n                btn.innerHTML = `\n                    <span>${optionText}<\/span>\n                    <span class=\"w-6 h-6 rounded-full bg-indigo-900\/80 border border-indigo-500\/50 flex items-center justify-center text-xs text-indigo-300 font-bold\">${String.fromCharCode(65 + idx)}<\/span>\n                `;\n                btn.onclick = () => selectOption(idx);\n                optionsContainer.appendChild(btn);\n            });\n        }\n\n        \/\/ Update Live Score UI\n        function updateLiveScore() {\n            const accuracy = currentQuestionIndex === 0 ? 100 : Math.round((score \/ (currentQuestionIndex)) * 100);\n            liveScoreText.innerText = `Score: ${score * 10} | Accuracy: ${accuracy}%`;\n        }\n\n        \/\/ Option Selection Handler\n        function selectOption(selectedIndex) {\n            const currentQ = questionsData[currentQuestionIndex];\n            const isCorrect = selectedIndex === currentQ.answer;\n\n            const buttons = optionsContainer.querySelectorAll('button');\n            buttons.forEach((btn, idx) => {\n                btn.disabled = true;\n                btn.classList.remove('hover:border-space-neon', 'hover:bg-indigo-900\/80');\n\n                if (idx === currentQ.answer) {\n                    btn.classList.add('bg-green-950\/80', 'border-green-400', 'text-green-200');\n                    btn.innerHTML += `<i class=\"fa-solid fa-circle-check text-green-400 text-lg\"><\/i>`;\n                } else if (idx === selectedIndex && !isCorrect) {\n                    btn.classList.add('bg-red-950\/80', 'border-red-500', 'text-red-200');\n                    btn.innerHTML += `<i class=\"fa-solid fa-circle-xmark text-red-400 text-lg\"><\/i>`;\n                } else {\n                    btn.classList.add('opacity-50');\n                }\n            });\n\n            if (isCorrect) {\n                score++;\n            }\n\n            userAnswers.push({\n                question: currentQ.question,\n                selected: currentQ.options[selectedIndex],\n                correct: currentQ.options[currentQ.answer],\n                isCorrect: isCorrect,\n                explanation: currentQ.explanation\n            });\n\n            feedbackCard.classList.remove('hidden');\n            if (isCorrect) {\n                feedbackCard.classList.add('bg-green-950\/70', 'border-green-500\/50', 'text-green-100');\n                feedbackIcon.innerHTML = `<i class=\"fa-solid fa-circle-check text-green-400\"><\/i>`;\n                feedbackTitle.innerText = \"Correct Explorer!\";\n                feedbackTitle.className = \"font-heading font-bold text-base sm:text-lg text-green-400\";\n            } else {\n                feedbackCard.classList.add('bg-red-950\/70', 'border-red-500\/50', 'text-red-100');\n                feedbackIcon.innerHTML = `<i class=\"fa-solid fa-triangle-exclamation text-space-pink\"><\/i>`;\n                feedbackTitle.innerText = \"Nice try!\";\n                feedbackTitle.className = \"font-heading font-bold text-base sm:text-lg text-space-pink\";\n            }\n\n            explanationText.innerText = currentQ.explanation;\n\n            const accuracy = Math.round((score \/ (currentQuestionIndex + 1)) * 100);\n            liveScoreText.innerText = `Score: ${score * 10} | Accuracy: ${accuracy}%`;\n        }\n\n        \/\/ Next Question\n        function nextQuestion() {\n            currentQuestionIndex++;\n            if (currentQuestionIndex < questionsData.length) {\n                loadQuestion();\n            } else {\n                finishQuiz();\n            }\n        }\n\n        \/\/ Finish Quiz &#038; Show Results\n        function finishQuiz() {\n            stopTimer();\n            quizScreen.classList.add('hidden');\n            resultScreen.classList.remove('hidden');\n\n            const totalQ = questionsData.length;\n            const accuracy = Math.round((score \/ totalQ) * 100);\n            const finalPoints = score * 10;\n\n            document.getElementById('final-score').innerText = finalPoints;\n            document.getElementById('final-correct').innerText = `${score}\/${totalQ}`;\n            document.getElementById('final-accuracy').innerText = `${accuracy}%`;\n            document.getElementById('final-time').innerText = formatTime(secondsElapsed);\n\n            \/\/ Assign Badge\/Rank\n            let badgeIcon = \"\ud83d\ude80\";\n            let rankName = \"Space Cadet\";\n            let rankDesc = \"Great job! You've started your astronomical journey. Keep looking up at the stars!\";\n\n            if (accuracy >= 90) {\n                badgeIcon = \"\ud83d\udef8\";\n                rankName = \"Galactic Commander\";\n                rankDesc = \"Outstanding! You are a master of planets and space science! NASA might call you soon!\";\n            } else if (accuracy >= 75) {\n                badgeIcon = \"\ud83d\udc68\u200d\ud83d\ude80\";\n                rankName = \"Expert Astronaut\";\n                rankDesc = \"Fantastic work! You know your way around the solar system really well!\";\n            } else if (accuracy >= 50) {\n                badgeIcon = \"\ud83d\udd2d\";\n                rankName = \"Stargazer\";\n                rankDesc = \"Good effort! You know a lot about planets, but there's more space to explore!\";\n            }\n\n            document.getElementById('badge-icon').innerText = badgeIcon;\n            document.getElementById('badge-name').innerText = `Rank: ${rankName}`;\n            document.getElementById('badge-desc').innerText = rankDesc;\n\n            renderReviewList();\n        }\n\n        \/\/ Render Answer Review List\n        function renderReviewList() {\n            const reviewList = document.getElementById('review-list');\n            reviewList.innerHTML = '';\n\n            userAnswers.forEach((item, idx) => {\n                const div = document.createElement('div');\n                div.className = `p-3 rounded-xl border ${item.isCorrect ? 'bg-green-950\/30 border-green-800\/40' : 'bg-red-950\/30 border-red-800\/40'}`;\n                \n                div.innerHTML = `\n                    <div class=\"flex items-start justify-between gap-2\">\n                        <span class=\"font-bold text-white text-xs sm:text-sm\">Q${idx + 1}: ${item.question}<\/span>\n                        <span class=\"${item.isCorrect ? 'text-green-400' : 'text-red-400'} font-bold text-xs sm:text-sm\">\n                            ${item.isCorrect ? '<i class=\"fa-solid fa-check\"><\/i> Correct' : '<i class=\"fa-solid fa-xmark\"><\/i> Incorrect'}\n                        <\/span>\n                    <\/div>\n                    <p class=\"text-xs text-gray-300 mt-1\">Your answer: <span class=\"${item.isCorrect ? 'text-green-300' : 'text-red-300'} font-semibold\">${item.selected}<\/span><\/p>\n                    ${!item.isCorrect ? `<p class=\"text-xs text-green-400\">Correct answer: <span class=\"font-semibold\">${item.correct}<\/span><\/p>` : ''}\n                    <p class=\"text-xs text-indigo-200\/80 italic mt-1\">${item.explanation}<\/p>\n                `;\n                reviewList.appendChild(div);\n            });\n        }\n\n        \/\/ Restart Quiz\n        function restartQuiz() {\n            resultScreen.classList.add('hidden');\n            startScreen.classList.remove('hidden');\n        }\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Junior Space Quiz: Planets &#038; Solar System Junior Science Explorer Planet &#038; Space Quiz \ud83d\ude80 \ud83e\ude90 Test your space knowledge across 25 exciting questions! Learn cool facts about planets, moons, the sun, and distant space. 25 Questions with instant explanations Earn rank badges (Space Cadet to Galactic Commander) Track your time &#038; accuracy score Launch [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-18293","post","type-post","status-publish","format-standard","hentry","category-amateur-radio-ham-radio"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Junior Science Quiz - Solar System - Johnson&#039;s Techworld<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Junior Science Quiz - Solar System - Johnson&#039;s Techworld\" \/>\n<meta property=\"og:description\" content=\"Junior Space Quiz: Planets &#038; Solar System Junior Science Explorer Planet &#038; Space Quiz \ud83d\ude80 \ud83e\ude90 Test your space knowledge across 25 exciting questions! Learn cool facts about planets, moons, the sun, and distant space. 25 Questions with instant explanations Earn rank badges (Space Cadet to Galactic Commander) Track your time &#038; accuracy score Launch [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Johnson&#039;s Techworld\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-22T14:23:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-22T14:23:41+00:00\" \/>\n<meta name=\"author\" content=\"Johnson Francis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Johnson Francis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/\"},\"author\":{\"name\":\"Johnson Francis\",\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/#\\\/schema\\\/person\\\/6201c843e80ccd3578e6196b1d007027\"},\"headline\":\"Junior Science Quiz &#8211; Solar System\",\"datePublished\":\"2026-10-22T14:23:39+00:00\",\"dateModified\":\"2026-10-22T14:23:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/\"},\"wordCount\":82,\"publisher\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/#\\\/schema\\\/person\\\/6201c843e80ccd3578e6196b1d007027\"},\"articleSection\":[\"Amateur Radio (Ham Radio)\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/\",\"url\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/\",\"name\":\"Junior Science Quiz - Solar System - Johnson&#039;s Techworld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/#website\"},\"datePublished\":\"2026-10-22T14:23:39+00:00\",\"dateModified\":\"2026-10-22T14:23:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/junior-science-quiz-solar-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Junior Science Quiz &#8211; Solar System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/#website\",\"url\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/\",\"name\":\"Johnson's Techworld\",\"description\":\"Johnson&#039;s Techworld\",\"publisher\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/#\\\/schema\\\/person\\\/6201c843e80ccd3578e6196b1d007027\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/#\\\/schema\\\/person\\\/6201c843e80ccd3578e6196b1d007027\",\"name\":\"Johnson Francis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/channels4_profile.jpg\",\"url\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/channels4_profile.jpg\",\"contentUrl\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/channels4_profile.jpg\",\"width\":600,\"height\":600,\"caption\":\"Johnson Francis\"},\"logo\":{\"@id\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/wp-content\\\/uploads\\\/2025\\\/01\\\/channels4_profile.jpg\"},\"description\":\"Amateur Radio Operator VU2JO. Originally licensed as VU2JFP with Grade 1 license in 1985. Upgraded to Advanced Grade in 1988 and was allotted new callsign to VU2JO\",\"sameAs\":[\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\",\"https:\\\/\\\/www.youtube.com\\\/@johnsonstechworld\\\/\"],\"url\":\"https:\\\/\\\/johnsonfrancis.org\\\/techworld\\\/author\\\/jf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Junior Science Quiz - Solar System - Johnson&#039;s Techworld","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/","og_locale":"en_US","og_type":"article","og_title":"Junior Science Quiz - Solar System - Johnson&#039;s Techworld","og_description":"Junior Space Quiz: Planets &#038; Solar System Junior Science Explorer Planet &#038; Space Quiz \ud83d\ude80 \ud83e\ude90 Test your space knowledge across 25 exciting questions! Learn cool facts about planets, moons, the sun, and distant space. 25 Questions with instant explanations Earn rank badges (Space Cadet to Galactic Commander) Track your time &#038; accuracy score Launch [&hellip;]","og_url":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/","og_site_name":"Johnson&#039;s Techworld","article_published_time":"2026-10-22T14:23:39+00:00","article_modified_time":"2026-10-22T14:23:41+00:00","author":"Johnson Francis","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Johnson Francis","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/#article","isPartOf":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/"},"author":{"name":"Johnson Francis","@id":"https:\/\/johnsonfrancis.org\/techworld\/#\/schema\/person\/6201c843e80ccd3578e6196b1d007027"},"headline":"Junior Science Quiz &#8211; Solar System","datePublished":"2026-10-22T14:23:39+00:00","dateModified":"2026-10-22T14:23:41+00:00","mainEntityOfPage":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/"},"wordCount":82,"publisher":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/#\/schema\/person\/6201c843e80ccd3578e6196b1d007027"},"articleSection":["Amateur Radio (Ham Radio)"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/","url":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/","name":"Junior Science Quiz - Solar System - Johnson&#039;s Techworld","isPartOf":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/#website"},"datePublished":"2026-10-22T14:23:39+00:00","dateModified":"2026-10-22T14:23:41+00:00","breadcrumb":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/johnsonfrancis.org\/techworld\/junior-science-quiz-solar-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/johnsonfrancis.org\/techworld\/"},{"@type":"ListItem","position":2,"name":"Junior Science Quiz &#8211; Solar System"}]},{"@type":"WebSite","@id":"https:\/\/johnsonfrancis.org\/techworld\/#website","url":"https:\/\/johnsonfrancis.org\/techworld\/","name":"Johnson's Techworld","description":"Johnson&#039;s Techworld","publisher":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/#\/schema\/person\/6201c843e80ccd3578e6196b1d007027"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/johnsonfrancis.org\/techworld\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/johnsonfrancis.org\/techworld\/#\/schema\/person\/6201c843e80ccd3578e6196b1d007027","name":"Johnson Francis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/johnsonfrancis.org\/techworld\/wp-content\/uploads\/2025\/01\/channels4_profile.jpg","url":"https:\/\/johnsonfrancis.org\/techworld\/wp-content\/uploads\/2025\/01\/channels4_profile.jpg","contentUrl":"https:\/\/johnsonfrancis.org\/techworld\/wp-content\/uploads\/2025\/01\/channels4_profile.jpg","width":600,"height":600,"caption":"Johnson Francis"},"logo":{"@id":"https:\/\/johnsonfrancis.org\/techworld\/wp-content\/uploads\/2025\/01\/channels4_profile.jpg"},"description":"Amateur Radio Operator VU2JO. Originally licensed as VU2JFP with Grade 1 license in 1985. Upgraded to Advanced Grade in 1988 and was allotted new callsign to VU2JO","sameAs":["https:\/\/johnsonfrancis.org\/techworld","https:\/\/www.youtube.com\/@johnsonstechworld\/"],"url":"https:\/\/johnsonfrancis.org\/techworld\/author\/jf\/"}]}},"_links":{"self":[{"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/posts\/18293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/comments?post=18293"}],"version-history":[{"count":1,"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/posts\/18293\/revisions"}],"predecessor-version":[{"id":18295,"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/posts\/18293\/revisions\/18295"}],"wp:attachment":[{"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/media?parent=18293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/categories?post=18293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnsonfrancis.org\/techworld\/wp-json\/wp\/v2\/tags?post=18293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}