{"id":548,"date":"2025-04-21T18:18:43","date_gmt":"2025-04-21T18:18:43","guid":{"rendered":"https:\/\/doonkidz.com\/?p=548"},"modified":"2025-04-25T16:11:50","modified_gmt":"2025-04-25T16:11:50","slug":"548","status":"publish","type":"post","link":"https:\/\/doonkidz.com\/?p=548","title":{"rendered":""},"content":{"rendered":"<!-- Paste this entire block into a Custom HTML block in your WordPress post -->\r\n<style>\r\n  \/* Planet Sequence Game Styles *\/\r\n  .planet-game { font-family: sans-serif; background: #000814; color: #fff; padding: 20px; text-align: center; }\r\n  .planet-game h2 { color: #ffd60a; margin-bottom: 5px; }\r\n  .planet-game p { color: #ccc; margin-top: 0; }\r\n  .planet-game .slots,\r\n  .planet-game .planets { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }\r\n \u00a0.planet-game .slot,\u00af\r\n \u00a0.planet-game .planet { width: 80px; height: 80px; border: 2px dashed #fff; border-radius: 8px;\r\n    display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); box-sizing: border-box; }\r\n  .planet-game .planet { cursor: grab; }\r\n  .planet-game .planet:active { cursor: grabbing; }\r\n  .planet-game img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }\r\n  .planet-game .slot.filled { border-style: solid; background: rgba(0,128,0,0.2); }\r\n  .planet-game .message { color: #7fff00; font-size: 1.2em; margin-top: 20px; }\r\n<\/style>\r\n\r\n<div class=\"planet-game\">\r\n  <h2>Arrange the Planets<\/h2>\r\n  <p>Drag each planet into the correct order from the Sun.<\/p>\r\n  <div class=\"slots\"><\/div>\r\n  <div class=\"planets\"><\/div>\r\n  <div class=\"message\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const planets = [\r\n      { name: 'Mercury', img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/4a\/Mercury_in_true_color.jpg' },\r\n      { name: 'Venus',   img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/e5\/Venus-real_color.jpg' },\r\n      { name: 'Earth',   img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/97\/The_Earth_seen_from_Apollo_17.jpg' },\r\n      { name: 'Mars',    img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/02\/OSIRIS_Mars_true_color.jpg' },\r\n      { name: 'Jupiter', img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/e\/e2\/Jupiter.jpg' },\r\n      { name: 'Saturn',  img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/c\/c7\/Saturn_during_Equinox.jpg' },\r\n      { name: 'Uranus',  img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/3\/3d\/Uranus2.jpg' },\r\n      { name: 'Neptune', img: 'https:\/\/upload.wikimedia.org\/wikipedia\/commons\/5\/56\/Neptune_Full.jpg' }\r\n    ];\r\n\r\n    const container = document.querySelector('.planet-game');\r\n    const slotsContainer = container.querySelector('.slots');\r\n    const planetsContainer = container.querySelector('.planets');\r\n    const message = container.querySelector('.message');\r\n\r\n    \/\/ Create slots\r\n    planets.forEach((_, i) => {\r\n      const slot = document.createElement('div');\r\n      slot.className = 'slot';\r\n      slot.dataset.index = i;\r\n      slot.addEventListener('dragover', e => e.preventDefault());\r\n      slot.addEventListener('drop', onDrop);\r\n      slotsContainer.appendChild(slot);\r\n    });\r\n\r\n    \/\/ Shuffle planets\r\n    const shuffled = planets.slice().sort(() => Math.random() - 0.5);\r\n    shuffled.forEach(p => {\r\n      const el = document.createElement('div');\r\n      el.className = 'planet'; el.draggable = true; el.dataset.name = p.name;\r\n      el.addEventListener('dragstart', e => e.dataTransfer.setData('text\/plain', p.name));\r\n      const img = document.createElement('img'); img.src = p.img; img.alt = p.name;\r\n      el.appendChild(img);\r\n      planetsContainer.appendChild(el);\r\n    });\r\n\r\n    function onDrop(e) {\r\n      e.preventDefault();\r\n      const slot = e.currentTarget;\r\n      const idx = slot.dataset.index;\r\n      const name = e.dataTransfer.getData('text\/plain');\r\n      const correct = planets.findIndex(p => p.name === name);\r\n      if (correct.toString() === idx) {\r\n        slot.innerHTML = `<img decoding=\"async\" src=\"${planets[correct].img}\" alt=\"${name}\">`;\r\n        slot.classList.add('filled');\r\n        container.querySelector(`.planet[data-name='${name}']`).remove();\r\n        if (!planetsContainer.children.length) {\r\n          message.textContent = ' All done!';\r\n        }\r\n      } else alert('Try again!');\r\n    }\r\n  });\r\n<\/script>\r\n\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-548","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/doonkidz.com\/index.php?rest_route=\/wp\/v2\/posts\/548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doonkidz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/doonkidz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/doonkidz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doonkidz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=548"}],"version-history":[{"count":14,"href":"https:\/\/doonkidz.com\/index.php?rest_route=\/wp\/v2\/posts\/548\/revisions"}],"predecessor-version":[{"id":573,"href":"https:\/\/doonkidz.com\/index.php?rest_route=\/wp\/v2\/posts\/548\/revisions\/573"}],"wp:attachment":[{"href":"https:\/\/doonkidz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/doonkidz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/doonkidz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}