At School - Drag to Basket Game<\/title>\r\n\r\n<style>\r\n:root{\r\n --yellow:#ffd84d;\r\n --blue:#43b9ff;\r\n --deep-blue:#2377ff;\r\n --red:#ff5b6e;\r\n --green:#62d982;\r\n --chalk:#174f55;\r\n --chalk-light:#247981;\r\n --cream:#fff8df;\r\n --ink:#12365a;\r\n --gold:#ffcf3f;\r\n}\r\n\r\n*{box-sizing:border-box}\r\n\r\nhtml,body{\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n font-family:Arial, sans-serif;\r\n background:#5bc8ff;\r\n}\r\n\r\n.game{\r\n width:100vw;\r\n height:100vh;\r\n overflow:hidden;\r\n padding:12px;\r\n display:grid;\r\n grid-template-rows:82px 1fr 175px;\r\n gap:10px;\r\n background:\r\n radial-gradient(circle at 10% 15%, rgba(255,255,255,.45) 0 6%, transparent 7%),\r\n radial-gradient(circle at 85% 18%, rgba(255,255,255,.4) 0 5%, transparent 6%),\r\n radial-gradient(circle at 25% 88%, rgba(255,255,255,.28) 0 7%, transparent 8%),\r\n linear-gradient(180deg,#7de0ff 0%,#43b9ff 55%,#33a8ff 100%);\r\n}\r\n\r\n.top{\r\n display:grid;\r\n grid-template-columns:1fr 1fr 1fr;\r\n gap:10px;\r\n}\r\n\r\n.box{\r\n background:rgba(255,255,255,.96);\r\n border:4px solid var(--yellow);\r\n border-radius:24px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-weight:900;\r\n font-size:clamp(18px,2vw,28px);\r\n color:var(--ink);\r\n box-shadow:0 8px 18px rgba(0,0,0,.16);\r\n text-align:center;\r\n padding:6px 12px;\r\n}\r\n\r\n.board{\r\n position:relative;\r\n overflow:hidden;\r\n border-radius:36px;\r\n border:7px solid var(--yellow);\r\n background:\r\n radial-gradient(circle at 15% 20%, rgba(255,216,77,.22), transparent 20%),\r\n radial-gradient(circle at 85% 25%, rgba(255,91,110,.18), transparent 22%),\r\n radial-gradient(circle at 75% 80%, rgba(98,217,130,.20), transparent 20%),\r\n linear-gradient(145deg,var(--chalk-light),var(--chalk));\r\n box-shadow:0 12px 30px rgba(0,0,0,.22);\r\n}\r\n\r\n.question{\r\n position:absolute;\r\n top:14px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:min(760px,90%);\r\n padding:12px 22px;\r\n border-radius:24px;\r\n background:rgba(255,255,255,.18);\r\n border:3px dashed rgba(255,255,255,.6);\r\n color:white;\r\n text-align:center;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(28px,3vw,44px);\r\n font-weight:900;\r\n text-shadow:0 3px 0 rgba(0,0,0,.18);\r\n z-index:3;\r\n}\r\n\r\n.cards{\r\n position:absolute;\r\n top:105px;\r\n left:24px;\r\n right:24px;\r\n bottom:115px;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:18px;\r\n z-index:4;\r\n}\r\n\r\n.card{\r\n position:relative;\r\n border:none;\r\n border-radius:26px;\r\n background:linear-gradient(#fffef6,#fff1bd);\r\n border:5px solid white;\r\n box-shadow:0 10px 0 rgba(0,0,0,.12),0 16px 24px rgba(0,0,0,.18);\r\n cursor:grab;\r\n user-select:none;\r\n touch-action:none;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n gap:8px;\r\n transition:transform .15s ease, background .2s ease;\r\n}\r\n\r\n.card:active{\r\n cursor:grabbing;\r\n transform:scale(.96);\r\n}\r\n\r\n.card:before{\r\n content:\"\";\r\n position:absolute;\r\n top:-15px;\r\n width:82px;\r\n height:28px;\r\n border-radius:8px;\r\n background:rgba(255,255,255,.68);\r\n border:2px solid rgba(255,255,255,.85);\r\n transform:rotate(-8deg);\r\n box-shadow:0 3px 8px rgba(0,0,0,.1);\r\n}\r\n\r\n.card:nth-child(2):before{transform:rotate(6deg)}\r\n.card:nth-child(3):before{transform:rotate(-4deg)}\r\n\r\n.card-img{\r\n width:min(120px,62%);\r\n height:min(95px,52%);\r\n object-fit:contain;\r\n border-radius:16px;\r\n filter:drop-shadow(0 4px 0 rgba(0,0,0,.08));\r\n}\r\n\r\n.card-word{\r\n display:none;\r\n}\r\n.basket-zone{\r\n position:absolute;\r\n left:50%;\r\n bottom:4px;\r\n transform:translateX(-50%);\r\n width:min(340px,42vw);\r\n height:105px;\r\n z-index:8;\r\n}\r\n\r\n.basket{\r\n width:100%;\r\n height:100%;\r\n border-radius:28px 28px 36px 36px;\r\n background:\r\n repeating-linear-gradient(45deg, #ff9b35 0 14px, #ee7b22 14px 28px);\r\n border:6px solid #9c4b17;\r\n box-shadow:0 10px 0 rgba(0,0,0,.14),0 16px 24px rgba(0,0,0,.18);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(22px,2vw,34px);\r\n font-weight:900;\r\n color:white;\r\n text-shadow:0 2px 0 rgba(0,0,0,.25);\r\n}\r\n\r\n.basket.over{\r\n outline:8px solid rgba(255,216,77,.65);\r\n transform:scale(1.04);\r\n}\r\n\r\n.buddy{\r\n position:absolute;\r\n right:28px;\r\n bottom:24px;\r\n width:125px;\r\n height:125px;\r\n border-radius:50%;\r\n background:linear-gradient(#ffe0b2,#ffbf78);\r\n border:7px solid white;\r\n box-shadow:0 10px 20px rgba(0,0,0,.22);\r\n z-index:4;\r\n}\r\n\r\n.buddy:before{\r\n content:\"\";\r\n position:absolute;\r\n left:18px;\r\n right:18px;\r\n top:-6px;\r\n height:42px;\r\n background:#6b3f20;\r\n border-radius:50% 50% 35% 35%;\r\n}\r\n\r\n.buddy-eye{\r\n position:absolute;\r\n top:52px;\r\n width:16px;\r\n height:16px;\r\n background:#14365a;\r\n border-radius:50%;\r\n}\r\n.buddy-eye.left{left:36px}\r\n.buddy-eye.right{right:36px}\r\n\r\n.buddy-mouth{\r\n position:absolute;\r\n left:50%;\r\n bottom:28px;\r\n transform:translateX(-50%);\r\n width:46px;\r\n height:22px;\r\n background:#14365a;\r\n border-radius:0 0 28px 28px;\r\n}\r\n\r\n.buddy.happy{animation:buddyDance .8s ease}\r\n.buddy.sad{animation:buddyOops .45s ease}\r\n\r\n@keyframes buddyDance{\r\n 0%{transform:translateY(0) rotate(0) scale(1)}\r\n 20%{transform:translateY(-12px) rotate(-10deg) scale(1.08)}\r\n 40%{transform:translateY(0) rotate(10deg)}\r\n 60%{transform:translateY(-10px) rotate(-8deg)}\r\n 80%{transform:translateY(0) rotate(8deg)}\r\n 100%{transform:translateY(0) rotate(0) scale(1)}\r\n}\r\n\r\n@keyframes buddyOops{\r\n 0%,100%{transform:translateX(0)}\r\n 25%{transform:translateX(-8px)}\r\n 50%{transform:translateX(8px)}\r\n 75%{transform:translateX(-5px)}\r\n}\r\n\r\n.bottom{\r\n display:grid;\r\n grid-template-columns:285px 1fr 120px;\r\n gap:10px;\r\n align-items:end;\r\n}\r\n\r\n.teacher-wrap{\r\n position:relative;\r\n height:175px;\r\n}\r\n\r\n.teacher{\r\n position:absolute;\r\n left:-14px;\r\n bottom:-8px;\r\n width:263px;\r\n max-height:190px;\r\n object-fit:contain;\r\n filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));\r\n transform-origin:center bottom;\r\n}\r\n\r\n.teacher.happy{animation:teacherHappy .75s ease}\r\n.teacher.sad{animation:teacherSad .55s ease}\r\n\r\n@keyframes teacherHappy{\r\n 0%{transform:scale(1) rotate(0)}\r\n 25%{transform:scale(1.12) rotate(-6deg)}\r\n 50%{transform:scale(1.08) rotate(6deg)}\r\n 75%{transform:scale(1.12) rotate(-4deg)}\r\n 100%{transform:scale(1) rotate(0)}\r\n}\r\n\r\n@keyframes teacherSad{\r\n 0%{transform:translateX(0)}\r\n 20%{transform:translateX(-8px) rotate(-3deg)}\r\n 40%{transform:translateX(8px) rotate(3deg)}\r\n 60%{transform:translateX(-5px) rotate(-2deg)}\r\n 80%{transform:translateX(5px) rotate(2deg)}\r\n 100%{transform:translateX(0)}\r\n}\r\n\r\n.speech{\r\n position:absolute;\r\n left:230px;\r\n bottom:45px;\r\n min-width:270px;\r\n max-width:58vw;\r\n background:white;\r\n border:4px solid var(--yellow);\r\n border-radius:28px;\r\n padding:14px 20px;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(22px,2vw,32px);\r\n font-weight:900;\r\n color:var(--ink);\r\n box-shadow:0 8px 20px rgba(0,0,0,.16);\r\n}\r\n\r\n.speech:after{\r\n content:\"\";\r\n position:absolute;\r\n left:-14px;\r\n bottom:24px;\r\n border-width:12px 14px 12px 0;\r\n border-style:solid;\r\n border-color:transparent white transparent transparent;\r\n}\r\n\r\n.star{\r\n position:fixed;\r\n z-index:100;\r\n pointer-events:none;\r\n font-size:30px;\r\n animation:starFly .9s ease forwards;\r\n}\r\n\r\n@keyframes starFly{\r\n 0%{opacity:0; transform:translateY(20px) scale(.4) rotate(0)}\r\n 20%{opacity:1}\r\n 100%{opacity:0; transform:translateY(-130px) scale(1.4) rotate(180deg)}\r\n}\r\n\r\n.flying-star{\r\n position:fixed;\r\n z-index:120;\r\n width:36px;\r\n height:36px;\r\n display:grid;\r\n place-items:center;\r\n pointer-events:none;\r\n font-size:30px;\r\n}\r\n\r\n.overlay{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(20,50,80,.35);\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:200;\r\n}\r\n\r\n.overlay.show{display:flex}\r\n\r\n.modal{\r\n width:min(760px,92vw);\r\n background:white;\r\n border:7px solid var(--yellow);\r\n border-radius:36px;\r\n padding:28px;\r\n text-align:center;\r\n box-shadow:0 22px 42px rgba(0,0,0,.25);\r\n}\r\n\r\n.modal h1{\r\n margin:0 0 10px;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(38px,5vw,64px);\r\n color:var(--ink);\r\n}\r\n\r\n.modal p{\r\n margin:8px 0 22px;\r\n font-size:clamp(22px,2.5vw,32px);\r\n font-weight:900;\r\n color:#33597b;\r\n}\r\n\r\n.btn{\r\n border:none;\r\n border-radius:999px;\r\n padding:16px 38px;\r\n background:linear-gradient(#4d8fff,#316fff);\r\n color:white;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(24px,2.6vw,34px);\r\n font-weight:900;\r\n cursor:pointer;\r\n box-shadow:0 8px 0 rgba(0,0,0,.14);\r\n}\r\n\r\n.btn:active{transform:translateY(3px)}\r\n\r\n.dragging{opacity:.45}\r\n\r\n@media(max-width:760px){\r\n .game{\r\n grid-template-rows:122px 1fr 150px;\r\n }\r\n\r\n .top{grid-template-columns:1fr 1fr}\r\n .top .box:nth-child(3){grid-column:1\/-1}\r\n\r\n .cards{\r\n top:96px;\r\n bottom:145px;\r\n grid-template-columns:repeat(2,1fr);\r\n grid-template-rows:repeat(2,1fr);\r\n gap:12px;\r\n }\r\n\r\n .card-img{\r\n width:min(105px,70%);\r\n height:min(82px,50%);\r\n }\r\n\r\n .basket-zone{\r\n width:58vw;\r\n height:105px;\r\n }\r\n\r\n .buddy{\r\n width:88px;\r\n height:88px;\r\n right:12px;\r\n bottom:24px;\r\n }\r\n\r\n .buddy:before{height:30px}\r\n .buddy-eye{top:38px;width:11px;height:11px}\r\n .buddy-eye.left{left:25px}\r\n .buddy-eye.right{right:25px}\r\n .buddy-mouth{bottom:19px;width:34px;height:16px}\r\n\r\n .bottom{\r\n grid-template-columns:190px 1fr 60px;\r\n }\r\n\r\n .teacher-wrap{height:150px}\r\n\r\n .teacher{\r\n width:190px;\r\n max-height:155px;\r\n left:-18px;\r\n }\r\n\r\n .speech{\r\n left:155px;\r\n bottom:50px;\r\n min-width:190px;\r\n font-size:18px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"game\">\r\n <div class=\"top\">\r\n <div class=\"box\" id=\"starsBox\">\u2b50 0 Stars<\/div>\r\n <div class=\"box\" id=\"progressBox\">Round 1 \/ 8<\/div>\r\n <div class=\"box\" id=\"messageBox\">Drag the answer<\/div>\r\n <\/div>\r\n\r\n <div class=\"board\">\r\n <div class=\"question\" id=\"question\">It\u2019s a clock.<\/div>\r\n <div class=\"cards\" id=\"cards\"><\/div>\r\n\r\n <div class=\"basket-zone\">\r\n <div class=\"basket\" id=\"basket\">Drop here<\/div>\r\n <\/div>\r\n\r\n <div class=\"buddy\" id=\"buddy\">\r\n <div class=\"buddy-eye left\"><\/div>\r\n <div class=\"buddy-eye right\"><\/div>\r\n <div class=\"buddy-mouth\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bottom\">\r\n <div class=\"teacher-wrap\">\r\n <img decoding=\"async\" class=\"teacher\" id=\"teacher\" src=\"https:\/\/newgrasp.com\/wp-content\/uploads\/2026\/04\/Teacher.png\" alt=\"Teacher character\">\r\n <div class=\"speech\" id=\"speech\">Let\u2019s play!<\/div>\r\n <\/div>\r\n <div><\/div>\r\n <div><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"overlay show\" id=\"startOverlay\">\r\n <div class=\"modal\">\r\n <h1>At School<\/h1>\r\n <p>Drag the correct flashcard into the basket.<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"overlay\" id=\"endOverlay\">\r\n <div class=\"modal\">\r\n <h1>Amazing!<\/h1>\r\n <p id=\"finalScore\">You collected 0 stars!<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play Again<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst WORDS = [\r\n {id:\"clock\", label:\"clock\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/clock.jpg\"},\r\n {id:\"door\", label:\"door\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/yellow-door.webp\"},\r\n {id:\"board\", label:\"board\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/board-2.png\"},\r\n {id:\"window\", label:\"window\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/window.png\"},\r\n {id:\"desk\", label:\"desk\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2026\/04\/desk-clipart.png\"},\r\n {id:\"bin\", label:\"bin\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/bin.png\"},\r\n {id:\"cupboard\", label:\"cupboard\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/grey-cupboard.jpg\"},\r\n {id:\"chair\", label:\"chair\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/chair-2.png\"}\r\n];\r\n\r\nlet roundOrder = [];\r\nlet roundIndex = 0;\r\nlet stars = 0;\r\nlet currentAnswer = \"\";\r\nlet selectedWord = \"\";\r\nlet locked = false;\r\nlet audioCtx;\r\n\r\nfunction getCtx(){\r\n if(!audioCtx){\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n }\r\n return audioCtx;\r\n}\r\n\r\nfunction tone(freq,duration,type=\"sine\",gain=.04,delay=0){\r\n const ctx = getCtx();\r\n const osc = ctx.createOscillator();\r\n const g = ctx.createGain();\r\n\r\n osc.type = type;\r\n osc.frequency.value = freq;\r\n\r\n g.gain.setValueAtTime(.0001, ctx.currentTime + delay);\r\n g.gain.exponentialRampToValueAtTime(gain, ctx.currentTime + delay + .01);\r\n g.gain.exponentialRampToValueAtTime(.0001, ctx.currentTime + delay + duration);\r\n\r\n osc.connect(g);\r\n g.connect(ctx.destination);\r\n osc.start(ctx.currentTime + delay);\r\n osc.stop(ctx.currentTime + delay + duration + .03);\r\n}\r\n\r\nfunction popSound(){\r\n tone(520,.06,\"triangle\",.04);\r\n tone(700,.05,\"triangle\",.035,.04);\r\n}\r\n\r\nfunction correctSound(){\r\n tone(660,.1,\"sine\",.05);\r\n tone(880,.12,\"sine\",.05,.08);\r\n tone(1120,.15,\"triangle\",.04,.16);\r\n}\r\n\r\nfunction wrongSound(){\r\n tone(240,.12,\"sawtooth\",.025);\r\n tone(190,.14,\"sawtooth\",.02,.08);\r\n}\r\n\r\nfunction tadaSound(){\r\n tone(620,.1,\"triangle\",.05);\r\n tone(840,.12,\"triangle\",.05,.08);\r\n tone(1200,.18,\"triangle\",.05,.18);\r\n}\r\n\r\nfunction startGame(){\r\n try{\r\n getCtx();\r\n if(audioCtx.state === \"suspended\") audioCtx.resume();\r\n }catch(e){}\r\n\r\n document.getElementById(\"startOverlay\").classList.remove(\"show\");\r\n document.getElementById(\"endOverlay\").classList.remove(\"show\");\r\n\r\n roundOrder = shuffle([...WORDS]);\r\n roundIndex = 0;\r\n stars = 0;\r\n locked = false;\r\n\r\n updateStars();\r\n renderRound();\r\n}\r\n\r\nfunction renderRound(){\r\n locked = false;\r\n\r\n if(roundIndex >= roundOrder.length){\r\n endGame();\r\n return;\r\n }\r\n\r\n const answerObj = roundOrder[roundIndex];\r\n currentAnswer = answerObj.id;\r\n\r\n setQuestion(\"It\u2019s a \" + answerObj.label + \".\");\r\n setMessage(\"Drag the answer\");\r\n setSpeech(\"It\u2019s a \" + answerObj.label + \".\");\r\n updateProgress();\r\n\r\n renderOptions(answerObj);\r\n speak(\"It\u2019s a \" + answerObj.label + \".\");\r\n}\r\n\r\nfunction renderOptions(answerObj){\r\n const container = document.getElementById(\"cards\");\r\n container.innerHTML = \"\";\r\n\r\n let wrongOptions = WORDS.filter(w => w.id !== answerObj.id);\r\n wrongOptions = shuffle(wrongOptions).slice(0,2);\r\n\r\n const options = shuffle([answerObj, ...wrongOptions]);\r\n\r\n options.forEach(word=>{\r\n const card = document.createElement(\"button\");\r\n card.className = \"card\";\r\n card.type = \"button\";\r\n card.draggable = true;\r\n card.dataset.word = word.id;\r\ncard.innerHTML = `\r\n <img decoding=\"async\" class=\"card-img\" src=\"${word.img}\" alt=\"${word.label}\">\r\n`;\r\n\r\n card.addEventListener(\"click\", ()=>{\r\n popSound();\r\n selectedWord = word.id;\r\n setMessage(\"Now drop it in the basket\");\r\n document.querySelectorAll(\".card\").forEach(c=>c.style.outline=\"none\");\r\n card.style.outline = \"7px solid rgba(255,216,77,.85)\";\r\n });\r\n\r\n card.addEventListener(\"dragstart\", e=>{\r\n selectedWord = word.id;\r\n card.classList.add(\"dragging\");\r\n e.dataTransfer.setData(\"text\/plain\", word.id);\r\n popSound();\r\n });\r\n\r\n card.addEventListener(\"dragend\", ()=>{\r\n card.classList.remove(\"dragging\");\r\n });\r\n\r\n let touchClone = null;\r\n\r\n card.addEventListener(\"touchstart\", e=>{\r\n if(locked) return;\r\n selectedWord = word.id;\r\n popSound();\r\n\r\n const t = e.touches[0];\r\n touchClone = card.cloneNode(true);\r\n touchClone.style.position = \"fixed\";\r\n touchClone.style.left = (t.clientX - 70) + \"px\";\r\n touchClone.style.top = (t.clientY - 70) + \"px\";\r\n touchClone.style.width = card.offsetWidth + \"px\";\r\n touchClone.style.height = card.offsetHeight + \"px\";\r\n touchClone.style.zIndex = \"300\";\r\n touchClone.style.pointerEvents = \"none\";\r\n touchClone.style.transform = \"scale(.9)\";\r\n document.body.appendChild(touchClone);\r\n card.classList.add(\"dragging\");\r\n },{passive:true});\r\n\r\n card.addEventListener(\"touchmove\", e=>{\r\n if(!touchClone) return;\r\n const t = e.touches[0];\r\n touchClone.style.left = (t.clientX - touchClone.offsetWidth\/2) + \"px\";\r\n touchClone.style.top = (t.clientY - touchClone.offsetHeight\/2) + \"px\";\r\n\r\n const basketRect = document.getElementById(\"basket\").getBoundingClientRect();\r\n const over =\r\n t.clientX >= basketRect.left &&\r\n t.clientX <= basketRect.right &&\r\n t.clientY >= basketRect.top &&\r\n t.clientY <= basketRect.bottom;\r\n\r\n document.getElementById(\"basket\").classList.toggle(\"over\", over);\r\n },{passive:true});\r\n\r\n card.addEventListener(\"touchend\", ()=>{\r\n card.classList.remove(\"dragging\");\r\n\r\n const basket = document.getElementById(\"basket\");\r\n basket.classList.remove(\"over\");\r\n\r\n if(touchClone){\r\n const rect = touchClone.getBoundingClientRect();\r\n const x = rect.left + rect.width\/2;\r\n const y = rect.top + rect.height\/2;\r\n const basketRect = basket.getBoundingClientRect();\r\n\r\n const over =\r\n x >= basketRect.left &&\r\n x <= basketRect.right &&\r\n y >= basketRect.top &&\r\n y <= basketRect.bottom;\r\n\r\n touchClone.remove();\r\n touchClone = null;\r\n\r\n if(over){\r\n checkAnswer(word.id, card);\r\n }\r\n }\r\n });\r\n\r\n container.appendChild(card);\r\n });\r\n}\r\n\r\nconst basket = document.getElementById(\"basket\");\r\n\r\nbasket.addEventListener(\"dragover\", e=>{\r\n e.preventDefault();\r\n basket.classList.add(\"over\");\r\n});\r\n\r\nbasket.addEventListener(\"dragleave\", ()=>{\r\n basket.classList.remove(\"over\");\r\n});\r\n\r\nbasket.addEventListener(\"drop\", e=>{\r\n e.preventDefault();\r\n basket.classList.remove(\"over\");\r\n const word = e.dataTransfer.getData(\"text\/plain\") || selectedWord;\r\n const card = document.querySelector(`[data-word=\"${word}\"]`);\r\n checkAnswer(word, card);\r\n});\r\n\r\nfunction checkAnswer(word, card){\r\n if(locked) return;\r\n\r\n if(word === currentAnswer){\r\n locked = true;\r\n\r\n if(card) card.style.background = \"#fff07a\";\r\n\r\n stars += 1;\r\n updateStars();\r\n\r\n setMessage(\"Correct!\");\r\n setSpeech(\"Correct!\");\r\n speak(\"Correct!\");\r\n correctSound();\r\n\r\n animateTeacher(\"happy\");\r\n animateBuddy(\"happy\");\r\n starConfetti();\r\n flyStar(card || document.getElementById(\"basket\"));\r\n\r\n setTimeout(()=>{\r\n roundIndex++;\r\n renderRound();\r\n },1100);\r\n\r\n }else{\r\n setMessage(\"Try again\");\r\n setSpeech(\"Try again\");\r\n speak(\"Try again\");\r\n wrongSound();\r\n\r\n animateTeacher(\"sad\");\r\n animateBuddy(\"sad\");\r\n\r\n if(card){\r\n card.animate([\r\n {transform:\"translateX(0)\"},\r\n {transform:\"translateX(-10px)\"},\r\n {transform:\"translateX(10px)\"},\r\n {transform:\"translateX(0)\"}\r\n ],{duration:350});\r\n }\r\n }\r\n}\r\n\r\nfunction animateTeacher(type){\r\n const teacher = document.getElementById(\"teacher\");\r\n teacher.classList.remove(\"happy\",\"sad\");\r\n void teacher.offsetWidth;\r\n\r\n teacher.classList.add(type);\r\n setTimeout(()=>teacher.classList.remove(type), type === \"happy\" ? 800 : 600);\r\n}\r\n\r\nfunction animateBuddy(type){\r\n const buddy = document.getElementById(\"buddy\");\r\n buddy.classList.remove(\"happy\",\"sad\");\r\n void buddy.offsetWidth;\r\n\r\n buddy.classList.add(type);\r\n setTimeout(()=>buddy.classList.remove(type), type === \"happy\" ? 900 : 500);\r\n}\r\n\r\nfunction starConfetti(){\r\n for(let i=0;i<26;i++){\r\n const s = document.createElement(\"div\");\r\n s.className = \"star\";\r\n s.textContent = Math.random() > .45 ? \"\u2b50\" : \"\u2728\";\r\n s.style.left = (20 + Math.random()*60) + \"vw\";\r\n s.style.top = (42 + Math.random()*30) + \"vh\";\r\n s.style.animationDelay = (Math.random()*.25) + \"s\";\r\n document.body.appendChild(s);\r\n setTimeout(()=>s.remove(),1100);\r\n }\r\n}\r\n\r\nfunction flyStar(from){\r\n if(!from) return;\r\n\r\n const fromRect = from.getBoundingClientRect();\r\n const toRect = document.getElementById(\"starsBox\").getBoundingClientRect();\r\n\r\n const star = document.createElement(\"div\");\r\n star.className = \"flying-star\";\r\n star.textContent = \"\u2b50\";\r\n star.style.left = (fromRect.left + fromRect.width\/2) + \"px\";\r\n star.style.top = (fromRect.top + fromRect.height\/2) + \"px\";\r\n document.body.appendChild(star);\r\n\r\n star.animate([\r\n {transform:\"translate(0,0) scale(1)\", opacity:1},\r\n {transform:`translate(${toRect.left - fromRect.left}px, ${toRect.top - fromRect.top}px) scale(.45)`, opacity:1}\r\n ],{\r\n duration:700,\r\n easing:\"cubic-bezier(.2,.8,.2,1)\"\r\n });\r\n\r\n setTimeout(()=>star.remove(),760);\r\n}\r\n\r\nfunction updateStars(){\r\n document.getElementById(\"starsBox\").textContent = \"\u2b50 \" + stars + \" Stars\";\r\n}\r\n\r\nfunction updateProgress(){\r\n document.getElementById(\"progressBox\").textContent =\r\n \"Round \" + (roundIndex + 1) + \" \/ \" + roundOrder.length;\r\n}\r\n\r\nfunction setQuestion(text){\r\n document.getElementById(\"question\").textContent = text;\r\n}\r\n\r\nfunction setMessage(text){\r\n document.getElementById(\"messageBox\").textContent = text;\r\n}\r\n\r\nfunction setSpeech(text){\r\n document.getElementById(\"speech\").textContent = text;\r\n}\r\n\r\nfunction endGame(){\r\n tadaSound();\r\n setMessage(\"Amazing!\");\r\n setSpeech(\"Amazing!\");\r\n speak(\"Amazing!\");\r\n\r\n document.getElementById(\"finalScore\").textContent =\r\n \"You collected \" + stars + \" golden stars!\";\r\n\r\n starConfetti();\r\n\r\n setTimeout(()=>{\r\n document.getElementById(\"endOverlay\").classList.add(\"show\");\r\n },800);\r\n}\r\n\r\nfunction speak(text){\r\n if(!(\"speechSynthesis\" in window)) return;\r\n speechSynthesis.cancel();\r\n\r\n const u = new SpeechSynthesisUtterance(text);\r\n u.lang = \"en-US\";\r\n u.rate = .9;\r\n u.pitch = 1.12;\r\n u.volume = 1;\r\n\r\n speechSynthesis.speak(u);\r\n}\r\n\r\nfunction shuffle(arr){\r\n return arr.sort(()=>Math.random() - .5);\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>At School – Drag to Basket Game \u2b50 0 Stars Round 1 \/ 8 Drag the answer It\u2019s a clock. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-28351","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/comments?post=28351"}],"version-history":[{"count":10,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28351\/revisions"}],"predecessor-version":[{"id":28375,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28351\/revisions\/28375"}],"wp:attachment":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/media?parent=28351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nAt School - Drag to Basket Game<\/title>\r\n\r\n<style>\r\n:root{\r\n --yellow:#ffd84d;\r\n --blue:#43b9ff;\r\n --deep-blue:#2377ff;\r\n --red:#ff5b6e;\r\n --green:#62d982;\r\n --chalk:#174f55;\r\n --chalk-light:#247981;\r\n --cream:#fff8df;\r\n --ink:#12365a;\r\n --gold:#ffcf3f;\r\n}\r\n\r\n*{box-sizing:border-box}\r\n\r\nhtml,body{\r\n margin:0;\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n font-family:Arial, sans-serif;\r\n background:#5bc8ff;\r\n}\r\n\r\n.game{\r\n width:100vw;\r\n height:100vh;\r\n overflow:hidden;\r\n padding:12px;\r\n display:grid;\r\n grid-template-rows:82px 1fr 175px;\r\n gap:10px;\r\n background:\r\n radial-gradient(circle at 10% 15%, rgba(255,255,255,.45) 0 6%, transparent 7%),\r\n radial-gradient(circle at 85% 18%, rgba(255,255,255,.4) 0 5%, transparent 6%),\r\n radial-gradient(circle at 25% 88%, rgba(255,255,255,.28) 0 7%, transparent 8%),\r\n linear-gradient(180deg,#7de0ff 0%,#43b9ff 55%,#33a8ff 100%);\r\n}\r\n\r\n.top{\r\n display:grid;\r\n grid-template-columns:1fr 1fr 1fr;\r\n gap:10px;\r\n}\r\n\r\n.box{\r\n background:rgba(255,255,255,.96);\r\n border:4px solid var(--yellow);\r\n border-radius:24px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-weight:900;\r\n font-size:clamp(18px,2vw,28px);\r\n color:var(--ink);\r\n box-shadow:0 8px 18px rgba(0,0,0,.16);\r\n text-align:center;\r\n padding:6px 12px;\r\n}\r\n\r\n.board{\r\n position:relative;\r\n overflow:hidden;\r\n border-radius:36px;\r\n border:7px solid var(--yellow);\r\n background:\r\n radial-gradient(circle at 15% 20%, rgba(255,216,77,.22), transparent 20%),\r\n radial-gradient(circle at 85% 25%, rgba(255,91,110,.18), transparent 22%),\r\n radial-gradient(circle at 75% 80%, rgba(98,217,130,.20), transparent 20%),\r\n linear-gradient(145deg,var(--chalk-light),var(--chalk));\r\n box-shadow:0 12px 30px rgba(0,0,0,.22);\r\n}\r\n\r\n.question{\r\n position:absolute;\r\n top:14px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:min(760px,90%);\r\n padding:12px 22px;\r\n border-radius:24px;\r\n background:rgba(255,255,255,.18);\r\n border:3px dashed rgba(255,255,255,.6);\r\n color:white;\r\n text-align:center;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(28px,3vw,44px);\r\n font-weight:900;\r\n text-shadow:0 3px 0 rgba(0,0,0,.18);\r\n z-index:3;\r\n}\r\n\r\n.cards{\r\n position:absolute;\r\n top:105px;\r\n left:24px;\r\n right:24px;\r\n bottom:115px;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:18px;\r\n z-index:4;\r\n}\r\n\r\n.card{\r\n position:relative;\r\n border:none;\r\n border-radius:26px;\r\n background:linear-gradient(#fffef6,#fff1bd);\r\n border:5px solid white;\r\n box-shadow:0 10px 0 rgba(0,0,0,.12),0 16px 24px rgba(0,0,0,.18);\r\n cursor:grab;\r\n user-select:none;\r\n touch-action:none;\r\n display:flex;\r\n flex-direction:column;\r\n align-items:center;\r\n justify-content:center;\r\n gap:8px;\r\n transition:transform .15s ease, background .2s ease;\r\n}\r\n\r\n.card:active{\r\n cursor:grabbing;\r\n transform:scale(.96);\r\n}\r\n\r\n.card:before{\r\n content:\"\";\r\n position:absolute;\r\n top:-15px;\r\n width:82px;\r\n height:28px;\r\n border-radius:8px;\r\n background:rgba(255,255,255,.68);\r\n border:2px solid rgba(255,255,255,.85);\r\n transform:rotate(-8deg);\r\n box-shadow:0 3px 8px rgba(0,0,0,.1);\r\n}\r\n\r\n.card:nth-child(2):before{transform:rotate(6deg)}\r\n.card:nth-child(3):before{transform:rotate(-4deg)}\r\n\r\n.card-img{\r\n width:min(120px,62%);\r\n height:min(95px,52%);\r\n object-fit:contain;\r\n border-radius:16px;\r\n filter:drop-shadow(0 4px 0 rgba(0,0,0,.08));\r\n}\r\n\r\n.card-word{\r\n display:none;\r\n}\r\n.basket-zone{\r\n position:absolute;\r\n left:50%;\r\n bottom:4px;\r\n transform:translateX(-50%);\r\n width:min(340px,42vw);\r\n height:105px;\r\n z-index:8;\r\n}\r\n\r\n.basket{\r\n width:100%;\r\n height:100%;\r\n border-radius:28px 28px 36px 36px;\r\n background:\r\n repeating-linear-gradient(45deg, #ff9b35 0 14px, #ee7b22 14px 28px);\r\n border:6px solid #9c4b17;\r\n box-shadow:0 10px 0 rgba(0,0,0,.14),0 16px 24px rgba(0,0,0,.18);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(22px,2vw,34px);\r\n font-weight:900;\r\n color:white;\r\n text-shadow:0 2px 0 rgba(0,0,0,.25);\r\n}\r\n\r\n.basket.over{\r\n outline:8px solid rgba(255,216,77,.65);\r\n transform:scale(1.04);\r\n}\r\n\r\n.buddy{\r\n position:absolute;\r\n right:28px;\r\n bottom:24px;\r\n width:125px;\r\n height:125px;\r\n border-radius:50%;\r\n background:linear-gradient(#ffe0b2,#ffbf78);\r\n border:7px solid white;\r\n box-shadow:0 10px 20px rgba(0,0,0,.22);\r\n z-index:4;\r\n}\r\n\r\n.buddy:before{\r\n content:\"\";\r\n position:absolute;\r\n left:18px;\r\n right:18px;\r\n top:-6px;\r\n height:42px;\r\n background:#6b3f20;\r\n border-radius:50% 50% 35% 35%;\r\n}\r\n\r\n.buddy-eye{\r\n position:absolute;\r\n top:52px;\r\n width:16px;\r\n height:16px;\r\n background:#14365a;\r\n border-radius:50%;\r\n}\r\n.buddy-eye.left{left:36px}\r\n.buddy-eye.right{right:36px}\r\n\r\n.buddy-mouth{\r\n position:absolute;\r\n left:50%;\r\n bottom:28px;\r\n transform:translateX(-50%);\r\n width:46px;\r\n height:22px;\r\n background:#14365a;\r\n border-radius:0 0 28px 28px;\r\n}\r\n\r\n.buddy.happy{animation:buddyDance .8s ease}\r\n.buddy.sad{animation:buddyOops .45s ease}\r\n\r\n@keyframes buddyDance{\r\n 0%{transform:translateY(0) rotate(0) scale(1)}\r\n 20%{transform:translateY(-12px) rotate(-10deg) scale(1.08)}\r\n 40%{transform:translateY(0) rotate(10deg)}\r\n 60%{transform:translateY(-10px) rotate(-8deg)}\r\n 80%{transform:translateY(0) rotate(8deg)}\r\n 100%{transform:translateY(0) rotate(0) scale(1)}\r\n}\r\n\r\n@keyframes buddyOops{\r\n 0%,100%{transform:translateX(0)}\r\n 25%{transform:translateX(-8px)}\r\n 50%{transform:translateX(8px)}\r\n 75%{transform:translateX(-5px)}\r\n}\r\n\r\n.bottom{\r\n display:grid;\r\n grid-template-columns:285px 1fr 120px;\r\n gap:10px;\r\n align-items:end;\r\n}\r\n\r\n.teacher-wrap{\r\n position:relative;\r\n height:175px;\r\n}\r\n\r\n.teacher{\r\n position:absolute;\r\n left:-14px;\r\n bottom:-8px;\r\n width:263px;\r\n max-height:190px;\r\n object-fit:contain;\r\n filter:drop-shadow(0 8px 12px rgba(0,0,0,.25));\r\n transform-origin:center bottom;\r\n}\r\n\r\n.teacher.happy{animation:teacherHappy .75s ease}\r\n.teacher.sad{animation:teacherSad .55s ease}\r\n\r\n@keyframes teacherHappy{\r\n 0%{transform:scale(1) rotate(0)}\r\n 25%{transform:scale(1.12) rotate(-6deg)}\r\n 50%{transform:scale(1.08) rotate(6deg)}\r\n 75%{transform:scale(1.12) rotate(-4deg)}\r\n 100%{transform:scale(1) rotate(0)}\r\n}\r\n\r\n@keyframes teacherSad{\r\n 0%{transform:translateX(0)}\r\n 20%{transform:translateX(-8px) rotate(-3deg)}\r\n 40%{transform:translateX(8px) rotate(3deg)}\r\n 60%{transform:translateX(-5px) rotate(-2deg)}\r\n 80%{transform:translateX(5px) rotate(2deg)}\r\n 100%{transform:translateX(0)}\r\n}\r\n\r\n.speech{\r\n position:absolute;\r\n left:230px;\r\n bottom:45px;\r\n min-width:270px;\r\n max-width:58vw;\r\n background:white;\r\n border:4px solid var(--yellow);\r\n border-radius:28px;\r\n padding:14px 20px;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(22px,2vw,32px);\r\n font-weight:900;\r\n color:var(--ink);\r\n box-shadow:0 8px 20px rgba(0,0,0,.16);\r\n}\r\n\r\n.speech:after{\r\n content:\"\";\r\n position:absolute;\r\n left:-14px;\r\n bottom:24px;\r\n border-width:12px 14px 12px 0;\r\n border-style:solid;\r\n border-color:transparent white transparent transparent;\r\n}\r\n\r\n.star{\r\n position:fixed;\r\n z-index:100;\r\n pointer-events:none;\r\n font-size:30px;\r\n animation:starFly .9s ease forwards;\r\n}\r\n\r\n@keyframes starFly{\r\n 0%{opacity:0; transform:translateY(20px) scale(.4) rotate(0)}\r\n 20%{opacity:1}\r\n 100%{opacity:0; transform:translateY(-130px) scale(1.4) rotate(180deg)}\r\n}\r\n\r\n.flying-star{\r\n position:fixed;\r\n z-index:120;\r\n width:36px;\r\n height:36px;\r\n display:grid;\r\n place-items:center;\r\n pointer-events:none;\r\n font-size:30px;\r\n}\r\n\r\n.overlay{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(20,50,80,.35);\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n z-index:200;\r\n}\r\n\r\n.overlay.show{display:flex}\r\n\r\n.modal{\r\n width:min(760px,92vw);\r\n background:white;\r\n border:7px solid var(--yellow);\r\n border-radius:36px;\r\n padding:28px;\r\n text-align:center;\r\n box-shadow:0 22px 42px rgba(0,0,0,.25);\r\n}\r\n\r\n.modal h1{\r\n margin:0 0 10px;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(38px,5vw,64px);\r\n color:var(--ink);\r\n}\r\n\r\n.modal p{\r\n margin:8px 0 22px;\r\n font-size:clamp(22px,2.5vw,32px);\r\n font-weight:900;\r\n color:#33597b;\r\n}\r\n\r\n.btn{\r\n border:none;\r\n border-radius:999px;\r\n padding:16px 38px;\r\n background:linear-gradient(#4d8fff,#316fff);\r\n color:white;\r\n font-family:\"Comic Sans MS\",\"Trebuchet MS\",Arial,sans-serif;\r\n font-size:clamp(24px,2.6vw,34px);\r\n font-weight:900;\r\n cursor:pointer;\r\n box-shadow:0 8px 0 rgba(0,0,0,.14);\r\n}\r\n\r\n.btn:active{transform:translateY(3px)}\r\n\r\n.dragging{opacity:.45}\r\n\r\n@media(max-width:760px){\r\n .game{\r\n grid-template-rows:122px 1fr 150px;\r\n }\r\n\r\n .top{grid-template-columns:1fr 1fr}\r\n .top .box:nth-child(3){grid-column:1\/-1}\r\n\r\n .cards{\r\n top:96px;\r\n bottom:145px;\r\n grid-template-columns:repeat(2,1fr);\r\n grid-template-rows:repeat(2,1fr);\r\n gap:12px;\r\n }\r\n\r\n .card-img{\r\n width:min(105px,70%);\r\n height:min(82px,50%);\r\n }\r\n\r\n .basket-zone{\r\n width:58vw;\r\n height:105px;\r\n }\r\n\r\n .buddy{\r\n width:88px;\r\n height:88px;\r\n right:12px;\r\n bottom:24px;\r\n }\r\n\r\n .buddy:before{height:30px}\r\n .buddy-eye{top:38px;width:11px;height:11px}\r\n .buddy-eye.left{left:25px}\r\n .buddy-eye.right{right:25px}\r\n .buddy-mouth{bottom:19px;width:34px;height:16px}\r\n\r\n .bottom{\r\n grid-template-columns:190px 1fr 60px;\r\n }\r\n\r\n .teacher-wrap{height:150px}\r\n\r\n .teacher{\r\n width:190px;\r\n max-height:155px;\r\n left:-18px;\r\n }\r\n\r\n .speech{\r\n left:155px;\r\n bottom:50px;\r\n min-width:190px;\r\n font-size:18px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"game\">\r\n <div class=\"top\">\r\n <div class=\"box\" id=\"starsBox\">\u2b50 0 Stars<\/div>\r\n <div class=\"box\" id=\"progressBox\">Round 1 \/ 8<\/div>\r\n <div class=\"box\" id=\"messageBox\">Drag the answer<\/div>\r\n <\/div>\r\n\r\n <div class=\"board\">\r\n <div class=\"question\" id=\"question\">It\u2019s a clock.<\/div>\r\n <div class=\"cards\" id=\"cards\"><\/div>\r\n\r\n <div class=\"basket-zone\">\r\n <div class=\"basket\" id=\"basket\">Drop here<\/div>\r\n <\/div>\r\n\r\n <div class=\"buddy\" id=\"buddy\">\r\n <div class=\"buddy-eye left\"><\/div>\r\n <div class=\"buddy-eye right\"><\/div>\r\n <div class=\"buddy-mouth\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bottom\">\r\n <div class=\"teacher-wrap\">\r\n <img decoding=\"async\" class=\"teacher\" id=\"teacher\" src=\"https:\/\/newgrasp.com\/wp-content\/uploads\/2026\/04\/Teacher.png\" alt=\"Teacher character\">\r\n <div class=\"speech\" id=\"speech\">Let\u2019s play!<\/div>\r\n <\/div>\r\n <div><\/div>\r\n <div><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"overlay show\" id=\"startOverlay\">\r\n <div class=\"modal\">\r\n <h1>At School<\/h1>\r\n <p>Drag the correct flashcard into the basket.<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"overlay\" id=\"endOverlay\">\r\n <div class=\"modal\">\r\n <h1>Amazing!<\/h1>\r\n <p id=\"finalScore\">You collected 0 stars!<\/p>\r\n <button class=\"btn\" onclick=\"startGame()\">Play Again<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst WORDS = [\r\n {id:\"clock\", label:\"clock\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/clock.jpg\"},\r\n {id:\"door\", label:\"door\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/yellow-door.webp\"},\r\n {id:\"board\", label:\"board\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/board-2.png\"},\r\n {id:\"window\", label:\"window\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/window.png\"},\r\n {id:\"desk\", label:\"desk\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2026\/04\/desk-clipart.png\"},\r\n {id:\"bin\", label:\"bin\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/bin.png\"},\r\n {id:\"cupboard\", label:\"cupboard\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/grey-cupboard.jpg\"},\r\n {id:\"chair\", label:\"chair\", img:\"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/chair-2.png\"}\r\n];\r\n\r\nlet roundOrder = [];\r\nlet roundIndex = 0;\r\nlet stars = 0;\r\nlet currentAnswer = \"\";\r\nlet selectedWord = \"\";\r\nlet locked = false;\r\nlet audioCtx;\r\n\r\nfunction getCtx(){\r\n if(!audioCtx){\r\n audioCtx = new (window.AudioContext || window.webkitAudioContext)();\r\n }\r\n return audioCtx;\r\n}\r\n\r\nfunction tone(freq,duration,type=\"sine\",gain=.04,delay=0){\r\n const ctx = getCtx();\r\n const osc = ctx.createOscillator();\r\n const g = ctx.createGain();\r\n\r\n osc.type = type;\r\n osc.frequency.value = freq;\r\n\r\n g.gain.setValueAtTime(.0001, ctx.currentTime + delay);\r\n g.gain.exponentialRampToValueAtTime(gain, ctx.currentTime + delay + .01);\r\n g.gain.exponentialRampToValueAtTime(.0001, ctx.currentTime + delay + duration);\r\n\r\n osc.connect(g);\r\n g.connect(ctx.destination);\r\n osc.start(ctx.currentTime + delay);\r\n osc.stop(ctx.currentTime + delay + duration + .03);\r\n}\r\n\r\nfunction popSound(){\r\n tone(520,.06,\"triangle\",.04);\r\n tone(700,.05,\"triangle\",.035,.04);\r\n}\r\n\r\nfunction correctSound(){\r\n tone(660,.1,\"sine\",.05);\r\n tone(880,.12,\"sine\",.05,.08);\r\n tone(1120,.15,\"triangle\",.04,.16);\r\n}\r\n\r\nfunction wrongSound(){\r\n tone(240,.12,\"sawtooth\",.025);\r\n tone(190,.14,\"sawtooth\",.02,.08);\r\n}\r\n\r\nfunction tadaSound(){\r\n tone(620,.1,\"triangle\",.05);\r\n tone(840,.12,\"triangle\",.05,.08);\r\n tone(1200,.18,\"triangle\",.05,.18);\r\n}\r\n\r\nfunction startGame(){\r\n try{\r\n getCtx();\r\n if(audioCtx.state === \"suspended\") audioCtx.resume();\r\n }catch(e){}\r\n\r\n document.getElementById(\"startOverlay\").classList.remove(\"show\");\r\n document.getElementById(\"endOverlay\").classList.remove(\"show\");\r\n\r\n roundOrder = shuffle([...WORDS]);\r\n roundIndex = 0;\r\n stars = 0;\r\n locked = false;\r\n\r\n updateStars();\r\n renderRound();\r\n}\r\n\r\nfunction renderRound(){\r\n locked = false;\r\n\r\n if(roundIndex >= roundOrder.length){\r\n endGame();\r\n return;\r\n }\r\n\r\n const answerObj = roundOrder[roundIndex];\r\n currentAnswer = answerObj.id;\r\n\r\n setQuestion(\"It\u2019s a \" + answerObj.label + \".\");\r\n setMessage(\"Drag the answer\");\r\n setSpeech(\"It\u2019s a \" + answerObj.label + \".\");\r\n updateProgress();\r\n\r\n renderOptions(answerObj);\r\n speak(\"It\u2019s a \" + answerObj.label + \".\");\r\n}\r\n\r\nfunction renderOptions(answerObj){\r\n const container = document.getElementById(\"cards\");\r\n container.innerHTML = \"\";\r\n\r\n let wrongOptions = WORDS.filter(w => w.id !== answerObj.id);\r\n wrongOptions = shuffle(wrongOptions).slice(0,2);\r\n\r\n const options = shuffle([answerObj, ...wrongOptions]);\r\n\r\n options.forEach(word=>{\r\n const card = document.createElement(\"button\");\r\n card.className = \"card\";\r\n card.type = \"button\";\r\n card.draggable = true;\r\n card.dataset.word = word.id;\r\ncard.innerHTML = `\r\n <img decoding=\"async\" class=\"card-img\" src=\"${word.img}\" alt=\"${word.label}\">\r\n`;\r\n\r\n card.addEventListener(\"click\", ()=>{\r\n popSound();\r\n selectedWord = word.id;\r\n setMessage(\"Now drop it in the basket\");\r\n document.querySelectorAll(\".card\").forEach(c=>c.style.outline=\"none\");\r\n card.style.outline = \"7px solid rgba(255,216,77,.85)\";\r\n });\r\n\r\n card.addEventListener(\"dragstart\", e=>{\r\n selectedWord = word.id;\r\n card.classList.add(\"dragging\");\r\n e.dataTransfer.setData(\"text\/plain\", word.id);\r\n popSound();\r\n });\r\n\r\n card.addEventListener(\"dragend\", ()=>{\r\n card.classList.remove(\"dragging\");\r\n });\r\n\r\n let touchClone = null;\r\n\r\n card.addEventListener(\"touchstart\", e=>{\r\n if(locked) return;\r\n selectedWord = word.id;\r\n popSound();\r\n\r\n const t = e.touches[0];\r\n touchClone = card.cloneNode(true);\r\n touchClone.style.position = \"fixed\";\r\n touchClone.style.left = (t.clientX - 70) + \"px\";\r\n touchClone.style.top = (t.clientY - 70) + \"px\";\r\n touchClone.style.width = card.offsetWidth + \"px\";\r\n touchClone.style.height = card.offsetHeight + \"px\";\r\n touchClone.style.zIndex = \"300\";\r\n touchClone.style.pointerEvents = \"none\";\r\n touchClone.style.transform = \"scale(.9)\";\r\n document.body.appendChild(touchClone);\r\n card.classList.add(\"dragging\");\r\n },{passive:true});\r\n\r\n card.addEventListener(\"touchmove\", e=>{\r\n if(!touchClone) return;\r\n const t = e.touches[0];\r\n touchClone.style.left = (t.clientX - touchClone.offsetWidth\/2) + \"px\";\r\n touchClone.style.top = (t.clientY - touchClone.offsetHeight\/2) + \"px\";\r\n\r\n const basketRect = document.getElementById(\"basket\").getBoundingClientRect();\r\n const over =\r\n t.clientX >= basketRect.left &&\r\n t.clientX <= basketRect.right &&\r\n t.clientY >= basketRect.top &&\r\n t.clientY <= basketRect.bottom;\r\n\r\n document.getElementById(\"basket\").classList.toggle(\"over\", over);\r\n },{passive:true});\r\n\r\n card.addEventListener(\"touchend\", ()=>{\r\n card.classList.remove(\"dragging\");\r\n\r\n const basket = document.getElementById(\"basket\");\r\n basket.classList.remove(\"over\");\r\n\r\n if(touchClone){\r\n const rect = touchClone.getBoundingClientRect();\r\n const x = rect.left + rect.width\/2;\r\n const y = rect.top + rect.height\/2;\r\n const basketRect = basket.getBoundingClientRect();\r\n\r\n const over =\r\n x >= basketRect.left &&\r\n x <= basketRect.right &&\r\n y >= basketRect.top &&\r\n y <= basketRect.bottom;\r\n\r\n touchClone.remove();\r\n touchClone = null;\r\n\r\n if(over){\r\n checkAnswer(word.id, card);\r\n }\r\n }\r\n });\r\n\r\n container.appendChild(card);\r\n });\r\n}\r\n\r\nconst basket = document.getElementById(\"basket\");\r\n\r\nbasket.addEventListener(\"dragover\", e=>{\r\n e.preventDefault();\r\n basket.classList.add(\"over\");\r\n});\r\n\r\nbasket.addEventListener(\"dragleave\", ()=>{\r\n basket.classList.remove(\"over\");\r\n});\r\n\r\nbasket.addEventListener(\"drop\", e=>{\r\n e.preventDefault();\r\n basket.classList.remove(\"over\");\r\n const word = e.dataTransfer.getData(\"text\/plain\") || selectedWord;\r\n const card = document.querySelector(`[data-word=\"${word}\"]`);\r\n checkAnswer(word, card);\r\n});\r\n\r\nfunction checkAnswer(word, card){\r\n if(locked) return;\r\n\r\n if(word === currentAnswer){\r\n locked = true;\r\n\r\n if(card) card.style.background = \"#fff07a\";\r\n\r\n stars += 1;\r\n updateStars();\r\n\r\n setMessage(\"Correct!\");\r\n setSpeech(\"Correct!\");\r\n speak(\"Correct!\");\r\n correctSound();\r\n\r\n animateTeacher(\"happy\");\r\n animateBuddy(\"happy\");\r\n starConfetti();\r\n flyStar(card || document.getElementById(\"basket\"));\r\n\r\n setTimeout(()=>{\r\n roundIndex++;\r\n renderRound();\r\n },1100);\r\n\r\n }else{\r\n setMessage(\"Try again\");\r\n setSpeech(\"Try again\");\r\n speak(\"Try again\");\r\n wrongSound();\r\n\r\n animateTeacher(\"sad\");\r\n animateBuddy(\"sad\");\r\n\r\n if(card){\r\n card.animate([\r\n {transform:\"translateX(0)\"},\r\n {transform:\"translateX(-10px)\"},\r\n {transform:\"translateX(10px)\"},\r\n {transform:\"translateX(0)\"}\r\n ],{duration:350});\r\n }\r\n }\r\n}\r\n\r\nfunction animateTeacher(type){\r\n const teacher = document.getElementById(\"teacher\");\r\n teacher.classList.remove(\"happy\",\"sad\");\r\n void teacher.offsetWidth;\r\n\r\n teacher.classList.add(type);\r\n setTimeout(()=>teacher.classList.remove(type), type === \"happy\" ? 800 : 600);\r\n}\r\n\r\nfunction animateBuddy(type){\r\n const buddy = document.getElementById(\"buddy\");\r\n buddy.classList.remove(\"happy\",\"sad\");\r\n void buddy.offsetWidth;\r\n\r\n buddy.classList.add(type);\r\n setTimeout(()=>buddy.classList.remove(type), type === \"happy\" ? 900 : 500);\r\n}\r\n\r\nfunction starConfetti(){\r\n for(let i=0;i<26;i++){\r\n const s = document.createElement(\"div\");\r\n s.className = \"star\";\r\n s.textContent = Math.random() > .45 ? \"\u2b50\" : \"\u2728\";\r\n s.style.left = (20 + Math.random()*60) + \"vw\";\r\n s.style.top = (42 + Math.random()*30) + \"vh\";\r\n s.style.animationDelay = (Math.random()*.25) + \"s\";\r\n document.body.appendChild(s);\r\n setTimeout(()=>s.remove(),1100);\r\n }\r\n}\r\n\r\nfunction flyStar(from){\r\n if(!from) return;\r\n\r\n const fromRect = from.getBoundingClientRect();\r\n const toRect = document.getElementById(\"starsBox\").getBoundingClientRect();\r\n\r\n const star = document.createElement(\"div\");\r\n star.className = \"flying-star\";\r\n star.textContent = \"\u2b50\";\r\n star.style.left = (fromRect.left + fromRect.width\/2) + \"px\";\r\n star.style.top = (fromRect.top + fromRect.height\/2) + \"px\";\r\n document.body.appendChild(star);\r\n\r\n star.animate([\r\n {transform:\"translate(0,0) scale(1)\", opacity:1},\r\n {transform:`translate(${toRect.left - fromRect.left}px, ${toRect.top - fromRect.top}px) scale(.45)`, opacity:1}\r\n ],{\r\n duration:700,\r\n easing:\"cubic-bezier(.2,.8,.2,1)\"\r\n });\r\n\r\n setTimeout(()=>star.remove(),760);\r\n}\r\n\r\nfunction updateStars(){\r\n document.getElementById(\"starsBox\").textContent = \"\u2b50 \" + stars + \" Stars\";\r\n}\r\n\r\nfunction updateProgress(){\r\n document.getElementById(\"progressBox\").textContent =\r\n \"Round \" + (roundIndex + 1) + \" \/ \" + roundOrder.length;\r\n}\r\n\r\nfunction setQuestion(text){\r\n document.getElementById(\"question\").textContent = text;\r\n}\r\n\r\nfunction setMessage(text){\r\n document.getElementById(\"messageBox\").textContent = text;\r\n}\r\n\r\nfunction setSpeech(text){\r\n document.getElementById(\"speech\").textContent = text;\r\n}\r\n\r\nfunction endGame(){\r\n tadaSound();\r\n setMessage(\"Amazing!\");\r\n setSpeech(\"Amazing!\");\r\n speak(\"Amazing!\");\r\n\r\n document.getElementById(\"finalScore\").textContent =\r\n \"You collected \" + stars + \" golden stars!\";\r\n\r\n starConfetti();\r\n\r\n setTimeout(()=>{\r\n document.getElementById(\"endOverlay\").classList.add(\"show\");\r\n },800);\r\n}\r\n\r\nfunction speak(text){\r\n if(!(\"speechSynthesis\" in window)) return;\r\n speechSynthesis.cancel();\r\n\r\n const u = new SpeechSynthesisUtterance(text);\r\n u.lang = \"en-US\";\r\n u.rate = .9;\r\n u.pitch = 1.12;\r\n u.volume = 1;\r\n\r\n speechSynthesis.speak(u);\r\n}\r\n\r\nfunction shuffle(arr){\r\n return arr.sort(()=>Math.random() - .5);\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>At School – Drag to Basket Game \u2b50 0 Stars Round 1 \/ 8 Drag the answer It\u2019s a clock. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-28351","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/comments?post=28351"}],"version-history":[{"count":10,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28351\/revisions"}],"predecessor-version":[{"id":28375,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28351\/revisions\/28375"}],"wp:attachment":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/media?parent=28351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}