Vector Graphics VS Bitmap<\/title><\/p>\n<style>\n* {\n box-sizing: border-box;\n}<\/p>\nbody {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n background: linear-gradient(135deg, #667eea, #764ba2);\n min-height: 100vh;\n color: #222;\n}<\/p>\n.container {\n width: 100%;\n max-width: 1250px;\n margin: auto;\n padding: 12px 18px;\n}<\/p>\n\/* =========================\n HEADER\n========================= *\/<\/p>\nheader {\n background: white;\n border-radius: 14px;\n padding: 12px 20px;\n text-align: center;\n margin-bottom: 10px;\n box-shadow: 0 6px 15px rgba(0,0,0,0.15);\n}<\/p>\nh1 {\n margin: 0 0 4px;\n color: #4b3ca7;\n font-size: 30px;\n}<\/p>\n.subtitle {\n font-size: 15px;\n color: #555;\n}<\/p>\n\/* =========================\n GAME INFORMATION\n========================= *\/<\/p>\n.game-info {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin-bottom: 10px;\n}<\/p>\n.info-box {\n background: white;\n border-radius: 12px;\n padding: 8px;\n text-align: center;\n box-shadow: 0 4px 10px rgba(0,0,0,0.12);\n}<\/p>\n.info-title {\n font-size: 11px;\n color: #777;\n text-transform: uppercase;\n}<\/p>\n.info-value {\n font-size: 22px;\n font-weight: bold;\n color: #4b3ca7;\n}<\/p>\n\/* =========================\n PROGRESS\n========================= *\/<\/p>\n.progress-container {\n background: white;\n padding: 8px;\n border-radius: 12px;\n margin-bottom: 10px;\n}<\/p>\n.progress-bar {\n height: 12px;\n background: #ddd;\n border-radius: 20px;\n overflow: hidden;\n}<\/p>\n.progress-fill {\n height: 100%;\n width: 0%;\n background: #4b3ca7;\n transition: width 0.4s ease;\n}<\/p>\n\/* =========================\n FACTS\n========================= *\/<\/p>\n.facts-container {\n background: white;\n border-radius: 14px;\n padding: 10px 15px;\n margin-bottom: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.12);\n}<\/p>\n.facts-container h2 {\n text-align: center;\n color: #444;\n font-size: 18px;\n margin: 3px 0 8px;\n}<\/p>\n#facts {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 7px;\n}<\/p>\n\/* =========================\n DRAGGABLE FACTS\n========================= *\/<\/p>\n.fact {\n background: #f7f7ff;\n border: 2px solid #b8b4e8;\n border-radius: 9px;\n padding: 8px 9px;\n cursor: grab;\n font-size: 13px;\n font-weight: 500;\n line-height: 1.25;\n min-height: 55px;\n display: flex;\n align-items: center;\n transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;\n animation: appear 0.3s ease;\n}<\/p>\n.fact:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 10px rgba(0,0,0,0.12);\n border-color: #4b3ca7;\n}<\/p>\n.fact:active {\n cursor: grabbing;\n}<\/p>\n@keyframes appear {<\/p>\n from {\n opacity: 0;\n transform: scale(0.9);\n }<\/p>\n to {\n opacity: 1;\n transform: scale(1);\n }<\/p>\n}<\/p>\n\/* =========================\n DROP BOXES\n========================= *\/<\/p>\n.boxes {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n}<\/p>\n.drop-zone {\n min-height: 180px;\n background: rgba(255,255,255,0.97);\n border-radius: 14px;\n padding: 10px;\n border: 3px dashed #777;\n transition: 0.25s;\n}<\/p>\n.drop-zone h2 {\n text-align: center;\n margin: 0 0 3px;\n font-size: 19px;\n}<\/p>\n.drop-zone p {\n text-align: center;\n margin: 0 0 7px;\n font-size: 12px;\n color: #777;\n}<\/p>\n.vector {\n border-color: #2979ff;\n}<\/p>\n.vector h2 {\n color: #2979ff;\n}<\/p>\n.bitmap {\n border-color: #e53935;\n}<\/p>\n.bitmap h2 {\n color: #e53935;\n}<\/p>\n.drop-zone.drag-over {\n transform: scale(1.01);\n background: #f5f7ff;\n box-shadow: 0 8px 20px rgba(0,0,0,0.12);\n}<\/p>\n.drop-zone .fact {\n min-height: auto;\n margin-bottom: 5px;\n padding: 6px 8px;\n font-size: 12px;\n}<\/p>\n\/* =========================\n BUTTONS\n========================= *\/<\/p>\n.controls {\n text-align: center;\n margin: 10px 0 5px;\n}<\/p>\nbutton {\n border: none;\n border-radius: 9px;\n padding: 9px 20px;\n font-size: 15px;\n font-weight: bold;\n cursor: pointer;\n margin: 3px;\n transition: 0.2s;\n}<\/p>\n#checkBtn {\n background: #4b3ca7;\n color: white;\n}<\/p>\n#checkBtn:hover {\n background: #392c87;\n transform: scale(1.04);\n}<\/p>\n#resetBtn {\n background: #333;\n color: white;\n}<\/p>\n#resetBtn:hover {\n background: #111;\n transform: scale(1.04);\n}<\/p>\n\/* =========================\n MESSAGE\n========================= *\/<\/p>\n#message {\n text-align: center;\n color: white;\n font-size: 15px;\n font-weight: bold;\n min-height: 20px;\n}<\/p>\n\/* =========================\n FINAL SCREEN\n========================= *\/<\/p>\n#finalScreen {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(35, 25, 75, 0.95);\n z-index: 1000;\n align-items: center;\n justify-content: center;\n padding: 20px;\n overflow-y: auto;\n}<\/p>\n.final-card {\n background: white;\n border-radius: 20px;\n padding: 35px;\n text-align: center;\n max-width: 850px;\n width: 100%;\n max-height: 95vh;\n overflow-y: auto;\n box-shadow: 0 20px 50px rgba(0,0,0,0.4);\n animation: finalAppear 0.5s ease;\n}<\/p>\n@keyframes finalAppear {<\/p>\n from {\n transform: scale(0.5);\n opacity: 0;\n }<\/p>\n to {\n transform: scale(1);\n opacity: 1;\n }<\/p>\n}<\/p>\n.final-card h2 {\n font-size: 32px;\n color: #4b3ca7;\n margin-top: 0;\n}<\/p>\n.final-score {\n font-size: 50px;\n font-weight: bold;\n color: #4b3ca7;\n margin: 15px;\n}<\/p>\n.final-message {\n font-size: 19px;\n margin-bottom: 20px;\n}<\/p>\n\/* =========================\n COMPLETED ANSWER TABLE\n========================= *\/<\/p>\n#answerTableContainer {\n display: none;\n margin: 20px 0;\n text-align: left;\n}<\/p>\n#answerTableContainer h3 {\n text-align: center;\n color: #4b3ca7;\n font-size: 22px;\n margin-bottom: 12px;\n}<\/p>\n.answer-table {\n width: 100%;\n border-collapse: collapse;\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n}<\/p>\n.answer-table th {\n padding: 12px;\n color: white;\n font-size: 15px;\n}<\/p>\n.answer-table th:first-child {\n background: #4b3ca7;\n}<\/p>\n.answer-table th:nth-child(2) {\n background: #2979ff;\n}<\/p>\n.answer-table td {\n padding: 10px 12px;\n border-bottom: 1px solid #ddd;\n font-size: 13px;\n line-height: 1.4;\n}<\/p>\n.answer-table tr:last-child td {\n border-bottom: none;\n}<\/p>\n.answer-table td:first-child {\n font-weight: bold;\n color: #444;\n}<\/p>\n.vector-answer {\n color: #2979ff;\n font-weight: bold;\n}<\/p>\n.bitmap-answer {\n color: #e53935;\n font-weight: bold;\n}<\/p>\n.answer-table tr:nth-child(even) {\n background: #f7f7ff;\n}<\/p>\n#playAgain {\n background: #4b3ca7;\n color: white;\n}<\/p>\n\/* =========================\n CONFETTI\n========================= *\/<\/p>\n.confetti {\n position: fixed;\n width: 10px;\n height: 10px;\n top: -10px;\n z-index: 2000;\n animation: fall 3s linear forwards;\n}<\/p>\n@keyframes fall {<\/p>\n to {\n transform: translateY(110vh) rotate(720deg);\n }<\/p>\n}<\/p>\n\/* =========================\n TABLET\n========================= *\/<\/p>\n@media (max-width: 950px) {<\/p>\n #facts {\n grid-template-columns: repeat(3, 1fr);\n }<\/p>\n}<\/p>\n\/* =========================\n MOBILE\n========================= *\/<\/p>\n@media (max-width: 700px) {<\/p>\n .container {\n padding: 10px;\n }<\/p>\n h1 {\n font-size: 24px;\n }<\/p>\n .subtitle {\n font-size: 13px;\n }<\/p>\n .game-info {\n grid-template-columns: repeat(3, 1fr);\n }<\/p>\n .info-value {\n font-size: 19px;\n }<\/p>\n #facts {\n grid-template-columns: repeat(2, 1fr);\n }<\/p>\n .boxes {\n grid-template-columns: 1fr;\n }<\/p>\n .drop-zone {\n min-height: 180px;\n }<\/p>\n .final-card {\n padding: 20px;\n }<\/p>\n .final-card h2 {\n font-size: 27px;\n }<\/p>\n .final-score {\n font-size: 40px;\n }<\/p>\n .answer-table th,\n .answer-table td {\n padding: 8px;\n font-size: 12px;\n }<\/p>\n}<\/p>\n@media (max-width: 450px) {<\/p>\n #facts {\n grid-template-columns: 1fr;\n }<\/p>\n .game-info {\n grid-template-columns: 1fr;\n }<\/p>\n .answer-table th,\n .answer-table td {\n font-size: 11px;\n padding: 7px;\n }<\/p>\n}<\/p>\n<\/style>\n<\/head><\/p>\n<body><\/p>\n<div class=\"container\">\n <\/p>\n<header>\n<h1>Vector Graphics VS Bitmap Graphics<\/h1>\n<div class=\"subtitle\">\n Instructions: Drag each fact into the correct box! Once you have them all correct, take a screen shot and put this into your portfolio.\n <\/div>\n<\/header>\n <\/p>\n<div class=\"game-info\">\n<div class=\"info-box\">\n<div class=\"info-title\">\n \u23f1 Time\n <\/div>\n<div class=\"info-value\" id=\"timer\">\n 60\n <\/div>\n<\/p><\/div>\n<div class=\"info-box\">\n<div class=\"info-title\">\n Score\n <\/div>\n<div class=\"info-value\" id=\"score\">\n 0\n <\/div>\n<\/p><\/div>\n<div class=\"info-box\">\n<div class=\"info-title\">\n Facts Sorted\n <\/div>\n<div class=\"info-value\">\n 0<\/span> \/ 12<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"progress-container\">\n<div class=\"progress-bar\">\n<div\n class=\"progress-fill\"\n id=\"progress\">\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"facts-container\">\n<h2>\n Drag the facts into the correct box \n <\/h2>\n<div id=\"facts\">\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n Made up of pixels.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"vector\"><\/p>\n Made up of paths, lines and mathematical shapes.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n Can become pixelated when enlarged.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"vector\"><\/p>\n Can be resized without losing image quality.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n Often used for photographs.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"vector\"><\/p>\n Often used for logos and icons.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n Each pixel stores colour information.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n File size can depend on the image resolution and colour depth.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"vector\"><\/p>\n Common file format: SVG.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n Common file formats include JPEG and PNG.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"vector\"><\/p>\n Editing can involve changing shapes, lines and curves.<\/p><\/div>\n<div\n class=\"fact\"\n draggable=\"true\"\n data-answer=\"bitmap\"><\/p>\n Editing can involve changing individual pixels.<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"boxes\">\n<div\n class=\"drop-zone vector\"\n data-zone=\"vector\"><\/p>\n<h2>\n Vector Graphics \n <\/h2>\n\n Drop Vector facts here\n <\/p>\n<\/p><\/div>\n<div\n class=\"drop-zone bitmap\"\n data-zone=\"bitmap\"><\/p>\n<h2>\n Bitmap Graphics \n <\/h2>\n\n Drop Bitmap facts here\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"controls\">\n <button id=\"checkBtn\"> \n Check My Answers \n <\/button><\/p>\n <button id=\"resetBtn\"> \n Start Again \n <\/button><\/p><\/div>\n<div id=\"message\"><\/div>\n<\/div>\n<\/p>\n<div id=\"finalScreen\">\n<div class=\"final-card\">\n<h2 id=\"finalTitle\">\n Well Done! \n <\/h2>\n<div class=\"final-score\">\n \n 0 \n <\/span><\/p>\n \/ 12<\/p><\/div>\n<div\n class=\"final-message\"\n id=\"finalMessage\"><\/p>\n Great work!<\/p><\/div>\n <\/p>\n<div id=\"answerTableContainer\">\n<h3>\n Completed Answer Table \n <\/h3>\n<table class=\"answer-table\">\n<thead>\n<tr>\n<th>Fact<\/th>\n<th>Correct Answer<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Made up of pixels.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<tr>\n<td>Made up of paths, lines and mathematical shapes.<\/td>\n<td class=\"vector-answer\">\ud83d\udd35 Vector Graphics<\/td>\n<\/tr>\n<tr>\n<td>Can become pixelated when enlarged.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<tr>\n<td>Can be resized without losing image quality.<\/td>\n<td class=\"vector-answer\">\ud83d\udd35 Vector Graphics<\/td>\n<\/tr>\n<tr>\n<td>Often used for photographs.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<tr>\n<td>Often used for logos and icons.<\/td>\n<td class=\"vector-answer\">\ud83d\udd35 Vector Graphics<\/td>\n<\/tr>\n<tr>\n<td>Each pixel stores colour information.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<tr>\n<td>File size can depend on the image resolution and colour depth.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<tr>\n<td>Common file format: SVG.<\/td>\n<td class=\"vector-answer\">\ud83d\udd35 Vector Graphics<\/td>\n<\/tr>\n<tr>\n<td>Common file formats include JPEG and PNG.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<tr>\n<td>Editing can involve changing shapes, lines and curves.<\/td>\n<td class=\"vector-answer\">\ud83d\udd35 Vector Graphics<\/td>\n<\/tr>\n<tr>\n<td>Editing can involve changing individual pixels.<\/td>\n<td class=\"bitmap-answer\">\ud83d\udd34 Bitmap Graphics<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n <button id=\"playAgain\"> \n Play Again \n <\/button><\/p><\/div>\n<\/div>\n<script><\/p>\n\/* =========================\n GAME VARIABLES\n========================= *\/<\/p>\nconst facts = document.querySelectorAll(\".fact\");\nconst dropZones = document.querySelectorAll(\".drop-zone\");<\/p>\nlet draggedFact = null;\nlet timeLeft = 60;\nlet timerInterval;\nlet gameStarted = false;\nlet gameFinished = false;<\/p>\n\/* =========================\n DRAG AND DROP\n========================= *\/<\/p>\nfacts.forEach(fact => {<\/p>\n fact.addEventListener(\"dragstart\", function() {<\/p>\n if (gameFinished) return;<\/p>\n draggedFact = this;<\/p>\n this.style.opacity = \"0.5\";<\/p>\n startGame();<\/p>\n });<\/p>\n fact.addEventListener(\"dragend\", function() {<\/p>\n this.style.opacity = \"1\";<\/p>\n draggedFact = null;<\/p>\n });<\/p>\n});<\/p>\ndropZones.forEach(zone => {<\/p>\n zone.addEventListener(\"dragover\", function(e) {<\/p>\n e.preventDefault();<\/p>\n if (!gameFinished) {<\/p>\n this.classList.add(\"drag-over\");<\/p>\n }<\/p>\n });<\/p>\n zone.addEventListener(\"dragleave\", function() {<\/p>\n this.classList.remove(\"drag-over\");<\/p>\n });<\/p>\n zone.addEventListener(\"drop\", function(e) {<\/p>\n e.preventDefault();<\/p>\n this.classList.remove(\"drag-over\");<\/p>\n if (draggedFact && !gameFinished) {<\/p>\n this.appendChild(draggedFact);<\/p>\n updateProgress();<\/p>\n }<\/p>\n });<\/p>\n});<\/p>\n\/* =========================\n START TIMER\n========================= *\/<\/p>\nfunction startGame() {<\/p>\n if (gameStarted) return;<\/p>\n gameStarted = true;<\/p>\n timerInterval = setInterval(function() {<\/p>\n timeLeft--;<\/p>\n document.getElementById(\"timer\").textContent =\n timeLeft;<\/p>\n if (timeLeft <= 0) {\n\n clearInterval(timerInterval);\n\n finishGame();\n\n }\n\n }, 1000);\n\n}\n\n\n\/* =========================\n UPDATE PROGRESS\n========================= *\/\n\nfunction updateProgress() {\n\n let sorted = 0;\n\n\n facts.forEach(fact => {<\/p>\n if (fact.closest(\".drop-zone\")) {<\/p>\n sorted++;<\/p>\n }<\/p>\n });<\/p>\n document.getElementById(\"sorted\").textContent =\n sorted;<\/p>\n const percentage =\n (sorted \/ facts.length) * 100;<\/p>\n document.getElementById(\"progress\").style.width =\n percentage + \"%\";<\/p>\n}<\/p>\n\/* =========================\n CHECK ANSWERS\n========================= *\/<\/p>\ndocument\n .getElementById(\"checkBtn\")\n .addEventListener(\"click\", checkAnswers);<\/p>\nfunction checkAnswers() {<\/p>\n if (gameFinished) return;<\/p>\n let score = 0;<\/p>\n let answered = 0;<\/p>\n facts.forEach(fact => {<\/p>\n const correctAnswer =\n fact.dataset.answer;<\/p>\n const zone =\n fact.closest(\".drop-zone\");<\/p>\n if (zone) {<\/p>\n answered++;<\/p>\n if (\n zone.dataset.zone ===\n correctAnswer\n ) {<\/p>\n score++;<\/p>\n }<\/p>\n }<\/p>\n });<\/p>\n document.getElementById(\"score\").textContent =\n score;<\/p>\n if (answered < facts.length) {\n\n document.getElementById(\"message\").textContent =\n \"Please place all 12 facts before checking.\";\n\n return;\n\n }\n\n\n if (score === facts.length) {\n\n finishGame();\n\n } else {\n\n document.getElementById(\"message\").textContent =\n \"Some answers are incorrect. Have another look and try again.\";\n\n }\n\n}\n\n\n\/* =========================\n FINISH GAME\n========================= *\/\n\nfunction finishGame() {\n\n if (gameFinished) return;\n\n\n gameFinished = true;\n\n clearInterval(timerInterval);\n\n\n let score = 0;\n\n\n facts.forEach(fact => {<\/p>\n const zone =\n fact.closest(\".drop-zone\");<\/p>\n if (\n zone &&\n zone.dataset.zone ===\n fact.dataset.answer\n ) {<\/p>\n score++;<\/p>\n }<\/p>\n });<\/p>\n document.getElementById(\"score\").textContent =\n score;<\/p>\n document.getElementById(\"finalScore\").textContent =\n score;<\/p>\n let title;<\/p>\n let message;<\/p>\n if (score === 12) {<\/p>\n title = \"Perfect Score!\";<\/p>\n message =\n \"Fantastic! You correctly sorted all 12 facts!\";<\/p>\n \/* SHOW COMPLETED TABLE *\/<\/p>\n document.getElementById(\"answerTableContainer\").style.display =\n \"block\";<\/p>\n createConfetti();<\/p>\n }<\/p>\n else if (score >= 9) {<\/p>\n title = \"Great Work!\";<\/p>\n message =\n \"You have a strong understanding of Vector and Bitmap graphics.\";<\/p>\n \/* Hide table unless perfect *\/<\/p>\n document.getElementById(\"answerTableContainer\").style.display =\n \"none\";<\/p>\n }<\/p>\n else if (score >= 6) {<\/p>\n title = \"Good Effort!\";<\/p>\n message =\n \"You're getting there. Have another go to improve your score.\";<\/p>\n \/* Hide table unless perfect *\/<\/p>\n document.getElementById(\"answerTableContainer\").style.display =\n \"none\";<\/p>\n }<\/p>\n else {<\/p>\n title = \"Keep Practising!\";<\/p>\n message =\n \"Have another go and see if you can improve your score.\";<\/p>\n \/* Hide table unless perfect *\/<\/p>\n document.getElementById(\"answerTableContainer\").style.display =\n \"none\";<\/p>\n }<\/p>\n document.getElementById(\"finalTitle\").textContent =\n title;<\/p>\n document.getElementById(\"finalMessage\").textContent =\n message;<\/p>\n document.getElementById(\"finalScreen\").style.display =\n \"flex\";<\/p>\n}<\/p>\n\/* =========================\n RESET GAME\n========================= *\/<\/p>\ndocument\n .getElementById(\"resetBtn\")\n .addEventListener(\"click\", resetGame);<\/p>\ndocument\n .getElementById(\"playAgain\")\n .addEventListener(\"click\", function() {<\/p>\n document.getElementById(\"finalScreen\").style.display =\n \"none\";<\/p>\n resetGame();<\/p>\n });<\/p>\nfunction resetGame() {<\/p>\n clearInterval(timerInterval);<\/p>\n timeLeft = 60;<\/p>\n gameStarted = false;<\/p>\n gameFinished = false;<\/p>\n document.getElementById(\"timer\").textContent =\n \"60\";<\/p>\n document.getElementById(\"score\").textContent =\n \"0\";<\/p>\n document.getElementById(\"sorted\").textContent =\n \"0\";<\/p>\n document.getElementById(\"progress\").style.width =\n \"0%\";<\/p>\n document.getElementById(\"message\").textContent =\n \"\";<\/p>\n \/* Hide completed table *\/<\/p>\n document.getElementById(\"answerTableContainer\").style.display =\n \"none\";<\/p>\n const factsContainer =\n document.getElementById(\"facts\");<\/p>\n facts.forEach(fact => {<\/p>\n factsContainer.appendChild(fact);<\/p>\n });<\/p>\n}<\/p>\n\/* =========================\n CONFETTI\n========================= *\/<\/p>\nfunction createConfetti() {<\/p>\n const colours = [<\/p>\n \"#ff1744\",\n \"#ff9100\",\n \"#ffea00\",\n \"#00e676\",\n \"#00b0ff\",\n \"#d500f9\"<\/p>\n ];<\/p>\n for (let i = 0; i < 100; i++) {\n\n const confetti =\n document.createElement(\"div\");\n\n\n confetti.classList.add(\"confetti\");\n\n\n confetti.style.left =\n Math.random() * 100 + \"vw\";\n\n\n confetti.style.background =\n colours[\n Math.floor(\n Math.random() *\n colours.length\n )\n ];\n\n\n confetti.style.animationDelay =\n Math.random() * 2 + \"s\";\n\n\n document.body.appendChild(confetti);\n\n\n setTimeout(() => {<\/p>\n confetti.remove();<\/p>\n }, 5000);<\/p>\n }<\/p>\n}<\/p>\n<\/script><\/p>\n<\/body> \n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vector Graphics VS Bitmap Vector Graphics VS Bitmap Graphics Instructions: Drag each fact into the correct box! Once you have them all correct, take a screen shot and put this into your portfolio. \u23f1 Time 60 Score 0 Facts Sorted 0 \/ 12 Drag the facts into the correct box Made up of pixels. Made […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-621","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/621","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/comments?post=621"}],"version-history":[{"count":6,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/621\/revisions"}],"predecessor-version":[{"id":628,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/621\/revisions\/628"}],"wp:attachment":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/media?parent=621"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":621,"date":"2026-10-02T07:43:58","date_gmt":"2026-10-02T07:43:58","guid":{"rendered":"https:\/\/mrcottle.co.uk\/WP\/?page_id=621"},"modified":"2026-10-02T08:42:52","modified_gmt":"2026-10-02T08:42:52","slug":"vectorvsbitmap","status":"publish","type":"page","link":"https:\/\/mrcottle.co.uk\/WP\/vectorvsbitmap\/","title":{"rendered":"VectorVSBitmap"},"content":{"rendered":"

\n
\n
\n
\n<\/p>\n