Level 0 - What's This?<\/title>\r\n <style>\r\n * { box-sizing: border-box; }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n background: linear-gradient(180deg, #fdf2ff, #eef7ff);\r\n color: #24324a;\r\n }\r\n\r\n.game-wrap {\r\n width: 100%;\r\n max-width: 1140px;\r\n height: 95vh;\r\n margin: 0 auto;\r\n padding: 0px 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n overflow: hidden;\r\n}\r\n .header {\r\n text-align: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n .title {\r\n font-size: clamp(26px, 4vw, 52px);\r\n font-weight: 800;\r\n margin: 0 0 6px;\r\n line-height: 1.0;\r\n }\r\n\r\n .subtitle {\r\n font-size: clamp(16px, 2vw, 24px);\r\n margin: 0;\r\n color: #5e6b84;\r\n }\r\n\r\n .top-bar {\r\n display: flex;\r\n gap: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n flex-shrink: 0;\r\n }\r\n\r\n .pill {\r\n background: #fff;\r\n border: 2px solid #e7eaf3;\r\n border-radius: 999px;\r\n padding: 10px 16px;\r\n font-weight: 700;\r\n box-shadow: 0 4px 10px rgba(0,0,0,.05);\r\n font-size: clamp(14px, 1.3vw, 22px);\r\n }\r\n\r\n .panel {\r\n background: #fff;\r\n border-radius: 24px;\r\n padding: 16px;\r\n box-shadow: 0 10px 28px rgba(18,28,55,.08);\r\n border: 1px solid #edf0f7;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n flex: 1;\r\n min-height: 0;\r\n }\r\n\r\n .question-box {\r\n background: linear-gradient(180deg, #f7f2ff, #eef6ff);\r\n border: 2px solid #e3d6ff;\r\n border-radius: 24px;\r\n padding: 18px;\r\n text-align: center;\r\n }\r\n\r\n .question-label {\r\n font-size: clamp(16px, 1.4vw, 22px);\r\n color: #6f7d98;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .target-word {\r\n font-size: clamp(28px, 4vw, 54px);\r\n font-weight: 900;\r\n color: #6f39e8;\r\n text-transform: lowercase;\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .sound-btn {\r\n border: 0;\r\n border-radius: 999px;\r\n padding: 12px 18px;\r\n font-size: clamp(16px, 1.2vw, 22px);\r\n font-weight: 800;\r\n cursor: pointer;\r\n background: linear-gradient(90deg, #8c52ff, #cb6ce6);\r\n color: #fff;\r\n box-shadow: 0 8px 18px rgba(140,82,255,.22);\r\n transition: transform .2s ease;\r\n }\r\n\r\n .sound-btn:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .choices {\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 14px;\r\n align-content: start;\r\n }\r\n\r\n .choice-card {\r\n background: #fafbff;\r\n border: 2px solid #dfe6ff;\r\n border-radius: 24px;\r\n padding: 14px;\r\n min-height: 190px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: .22s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .choice-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 24px rgba(140,82,255,.12);\r\n }\r\n\r\n .choice-card.correct {\r\n background: #eefaf2;\r\n border-color: #8ed2a0;\r\n }\r\n\r\n .choice-card.wrong {\r\n background: #fff4f4;\r\n border-color: #f2a6a6;\r\n animation: shake .28s linear;\r\n }\r\n\r\n .choice-card.disabled {\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes shake {\r\n 0% { transform: translateX(0); }\r\n 25% { transform: translateX(-4px); }\r\n 50% { transform: translateX(4px); }\r\n 75% { transform: translateX(-4px); }\r\n 100% { transform: translateX(0); }\r\n }\r\n\r\n .img-wrap {\r\n width: clamp(72px, 8vw, 120px);\r\n height: clamp(72px, 8vw, 120px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .img-wrap img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n transition: transform .25s ease, filter .25s ease;\r\n }\r\n\r\n .img-wrap.correct-bounce img {\r\n animation: correctPop .8s ease;\r\n filter: drop-shadow(0 8px 14px rgba(140,82,255,.22));\r\n }\r\n\r\n @keyframes correctPop {\r\n 0% { transform: scale(1) translateY(0); }\r\n 20% { transform: scale(1.22) translateY(-10px) rotate(-5deg); }\r\n 40% { transform: scale(1.06) translateY(0) rotate(4deg); }\r\n 60% { transform: scale(1.16) translateY(-5px) rotate(-3deg); }\r\n 100% { transform: scale(1) translateY(0) rotate(0); }\r\n }\r\n\r\n .choice-label {\r\n font-size: clamp(16px, 1.2vw, 22px);\r\n font-weight: 800;\r\n color: #53627d;\r\n text-transform: lowercase;\r\n }\r\n\r\n .sparkles {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n opacity: 0;\r\n }\r\n\r\n .choice-card.correct .sparkles {\r\n animation: sparkleFlash .8s ease;\r\n }\r\n\r\n @keyframes sparkleFlash {\r\n 0% { opacity: 0; transform: scale(.8); }\r\n 30% { opacity: 1; transform: scale(1); }\r\n 100% { opacity: 0; transform: scale(1.15); }\r\n }\r\n\r\n .sparkle {\r\n position: absolute;\r\n font-size: 20px;\r\n animation: floatUp .8s ease forwards;\r\n }\r\n\r\n .sparkle:nth-child(1) { top: 18%; left: 18%; }\r\n .sparkle:nth-child(2) { top: 12%; right: 18%; animation-delay: .05s; }\r\n .sparkle:nth-child(3) { bottom: 18%; left: 24%; animation-delay: .1s; }\r\n .sparkle:nth-child(4) { bottom: 14%; right: 22%; animation-delay: .15s; }\r\n\r\n @keyframes floatUp {\r\n 0% { opacity: 0; transform: translateY(8px) scale(.7); }\r\n 40% { opacity: 1; transform: translateY(-4px) scale(1); }\r\n 100% { opacity: 0; transform: translateY(-16px) scale(1.1); }\r\n }\r\n\r\n .controls {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-top: auto;\r\n padding-top: 6px;\r\n }\r\n\r\n button {\r\n border: 0;\r\n border-radius: 14px;\r\n padding: 12px 18px;\r\n font-size: clamp(15px, 1vw, 20px);\r\n font-weight: 800;\r\n cursor: pointer;\r\n background: linear-gradient(90deg, #8c52ff, #cb6ce6);\r\n color: #fff;\r\n box-shadow: 0 8px 18px rgba(140,82,255,.22);\r\n transition: transform .2s ease;\r\n }\r\n\r\n button:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n button.secondary {\r\n background: #edf2ff;\r\n color: #31456a;\r\n box-shadow: none;\r\n }\r\n\r\n .message {\r\n text-align: center;\r\n font-size: clamp(18px, 1.4vw, 28px);\r\n font-weight: 800;\r\n min-height: 30px;\r\n margin-top: 4px;\r\n }\r\n\r\n #nextRoundBtn {\r\n display: none;\r\n }\r\n\r\n #confetti {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n pointer-events: none;\r\n z-index: 9999;\r\n }\r\n\r\n .win-popup {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(20, 16, 35, 0.45);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity .25s ease;\r\n z-index: 10000;\r\n padding: 20px;\r\n }\r\n\r\n .win-popup.show {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .win-popup-card {\r\n background: #fff;\r\n width: min(460px, 92vw);\r\n border-radius: 28px;\r\n padding: 28px 24px;\r\n text-align: center;\r\n box-shadow: 0 18px 45px rgba(0,0,0,.18);\r\n animation: popupPop .38s ease;\r\n border: 2px solid #eee7ff;\r\n }\r\n\r\n .win-popup-card h2 {\r\n margin: 0 0 10px;\r\n font-size: clamp(28px, 3vw, 42px);\r\n color: #6f39e8;\r\n }\r\n\r\n .win-popup-card p {\r\n margin: 0 0 18px;\r\n font-size: clamp(18px, 1.5vw, 24px);\r\n color: #53627d;\r\n font-weight: 700;\r\n }\r\n\r\n .win-stars {\r\n font-size: 34px;\r\n margin-bottom: 12px;\r\n animation: starDance .9s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes popupPop {\r\n 0% { transform: scale(.65); opacity: 0; }\r\n 70% { transform: scale(1.04); opacity: 1; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n @keyframes starDance {\r\n from { transform: translateY(0) rotate(-4deg); }\r\n to { transform: translateY(-6px) rotate(4deg); }\r\n }\r\n\r\n @media (max-width: 1000px) {\r\n .choices {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .game-wrap {\r\n min-height: 100vh;\r\n }\r\n\r\n .choices {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .choice-card {\r\n min-height: 160px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <canvas id=\"confetti\"><\/canvas>\r\n\r\n <div id=\"winPopup\" class=\"win-popup\">\r\n <div class=\"win-popup-card\">\r\n <div class=\"win-stars\">\ud83c\udfc6 \u2728 \u2b50<\/div>\r\n <h2>Amazing!<\/h2>\r\n <p>You finished all rounds!<\/p>\r\n <button onclick=\"closeWinPopup()\">Play Again<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"game-wrap\">\r\n <div class=\"header\">\r\n <h1 class=\"title\">What\u2019s This?<\/h1>\r\n <p class=\"subtitle\">Choose the correct picture<\/p>\r\n <\/div>\r\n\r\n <div class=\"top-bar\">\r\n <div class=\"pill\">Level 0<\/div>\r\n <div class=\"pill\">Topic: School & Toys<\/div>\r\n <div class=\"pill\">Round: <span id=\"roundNum\">1<\/span> \/ 2<\/div>\r\n <div class=\"pill\">Question: <span id=\"questionNum\">1<\/span><\/div>\r\n <div class=\"pill\">Score: <span id=\"score\">0<\/span> \/ 10<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <div class=\"question-box\">\r\n <div class=\"question-label\">Listen and choose<\/div>\r\n <div id=\"targetWord\" class=\"target-word\">book<\/div>\r\n <button class=\"sound-btn\" onclick=\"speakCurrentWord()\">\ud83d\udd0a Hear the word<\/button>\r\n <\/div>\r\n\r\n <div id=\"choices\" class=\"choices\"><\/div>\r\n\r\n <div class=\"controls\">\r\n <button id=\"nextRoundBtn\" onclick=\"nextRound()\">Next Round<\/button>\r\n <button onclick=\"resetGame()\">Play Again<\/button>\r\n <button class=\"secondary\" onclick=\"repeatQuestion()\">Repeat Word<\/button>\r\n <\/div>\r\n\r\n <div id=\"message\" class=\"message\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const allItems = [\r\n { id: \"book\", label: \"book\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/01\/SAT1_Flashcard_25.jpg\" },\r\n { id: \"bag\", label: \"bag\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/01\/SAT1_Flashcard_28.jpg\" },\r\n { id: \"pencil\", label: \"pencil\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/01\/SAT1_Flashcard_26.jpg\" },\r\n { id: \"crayon\", label: \"crayon\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/SAT1_Flashcard_27-217x300.jpg\" },\r\n { id: \"doll\", label: \"doll\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/doll.jpeg\" },\r\n { id: \"ball\", label: \"ball\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/ball-1.png\" },\r\n { id: \"boat\", label: \"boat\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/boat.jpeg\" },\r\n { id: \"teddy bear\", label: \"teddy bear\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/teddy-bear.jpeg\" },\r\n { id: \"number 3\", label: \"number Three\", img: \"images\/3.png\" },\r\n { id: \"number 4\", label: \"number four\", img: \"images\/4.png\" }\r\n ];\r\n\r\n const rounds = [\r\n allItems.slice(0, 6),\r\n allItems.slice(6)\r\n ];\r\n\r\n const targetWordEl = document.getElementById(\"targetWord\");\r\n const choicesEl = document.getElementById(\"choices\");\r\n const scoreEl = document.getElementById(\"score\");\r\n const roundNumEl = document.getElementById(\"roundNum\");\r\n const questionNumEl = document.getElementById(\"questionNum\");\r\n const messageEl = document.getElementById(\"message\");\r\n const nextRoundBtn = document.getElementById(\"nextRoundBtn\");\r\n const winPopup = document.getElementById(\"winPopup\");\r\n\r\n let totalScore = 0;\r\n let currentRound = 0;\r\n let currentItems = [];\r\n let currentQuestionIndex = 0;\r\n let roundCorrectCount = 0;\r\n let currentTarget = null;\r\n let audioCtx = null;\r\n let speechReady = false;\r\n\r\n const confettiCanvas = document.getElementById(\"confetti\");\r\n const confettiCtx = confettiCanvas.getContext(\"2d\");\r\n let confettiPieces = [];\r\n let confettiAnimationId = null;\r\n\r\n function resizeConfettiCanvas() {\r\n confettiCanvas.width = window.innerWidth;\r\n confettiCanvas.height = window.innerHeight;\r\n }\r\n\r\n resizeConfettiCanvas();\r\n window.addEventListener(\"resize\", resizeConfettiCanvas);\r\n\r\n function initAudio() {\r\n const AudioContextClass = window.AudioContext || window.webkitAudioContext;\r\n if (AudioContextClass && !audioCtx) {\r\n audioCtx = new AudioContextClass();\r\n }\r\n if (audioCtx && audioCtx.state === \"suspended\") {\r\n audioCtx.resume();\r\n }\r\n speechReady = true;\r\n }\r\n\r\n document.addEventListener(\"click\", initAudio);\r\n document.addEventListener(\"touchstart\", initAudio);\r\n document.addEventListener(\"pointerdown\", initAudio);\r\n\r\n function playTone(type = \"correct\") {\r\n initAudio();\r\n if (!audioCtx) return;\r\n\r\n const baseTime = audioCtx.currentTime + 0.01;\r\n\r\n if (type === \"correct\") {\r\n const notes = [523.25, 659.25, 783.99];\r\n notes.forEach((freq, index) => {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n\r\n osc.type = \"sine\";\r\n osc.frequency.value = freq;\r\n\r\n const start = baseTime + index * 0.08;\r\n gain.gain.setValueAtTime(0.0001, start);\r\n gain.gain.exponentialRampToValueAtTime(0.18, start + 0.02);\r\n gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.22);\r\n\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n osc.start(start);\r\n osc.stop(start + 0.24);\r\n });\r\n } else {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n\r\n osc.type = \"square\";\r\n osc.frequency.setValueAtTime(220, baseTime);\r\n osc.frequency.exponentialRampToValueAtTime(160, baseTime + 0.18);\r\n\r\n gain.gain.setValueAtTime(0.0001, baseTime);\r\n gain.gain.exponentialRampToValueAtTime(0.12, baseTime + 0.02);\r\n gain.gain.exponentialRampToValueAtTime(0.0001, baseTime + 0.22);\r\n\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n osc.start(baseTime);\r\n osc.stop(baseTime + 0.22);\r\n }\r\n }\r\n\r\n function speakWord(word) {\r\n if (!(\"speechSynthesis\" in window)) return;\r\n speechReady = true;\r\n window.speechSynthesis.cancel();\r\n\r\n const utterance = new SpeechSynthesisUtterance(word);\r\n utterance.lang = \"en-GB\";\r\n utterance.rate = 0.85;\r\n utterance.pitch = 1;\r\n utterance.volume = 1;\r\n\r\n const voices = window.speechSynthesis.getVoices();\r\n const preferredVoice =\r\n voices.find(v => v.lang === \"en-GB\") ||\r\n voices.find(v => v.lang && v.lang.startsWith(\"en\")) ||\r\n null;\r\n\r\n if (preferredVoice) utterance.voice = preferredVoice;\r\n window.speechSynthesis.speak(utterance);\r\n }\r\n\r\n if (\"speechSynthesis\" in window) {\r\n window.speechSynthesis.onvoiceschanged = () => {};\r\n }\r\n\r\n function speakCurrentWord() {\r\n if (currentTarget) speakWord(currentTarget.label);\r\n }\r\n\r\n function repeatQuestion() {\r\n speakCurrentWord();\r\n }\r\n\r\n function launchConfetti() {\r\n confettiPieces = [];\r\n const colors = [\"#8c52ff\", \"#cb6ce6\", \"#ffd93d\", \"#6bcB77\", \"#4d96ff\", \"#ff6b6b\"];\r\n\r\n for (let i = 0; i < 140; i++) {\r\n confettiPieces.push({\r\n x: Math.random() * confettiCanvas.width,\r\n y: -20 - Math.random() * confettiCanvas.height * 0.3,\r\n size: 6 + Math.random() * 8,\r\n speedY: 2 + Math.random() * 4,\r\n speedX: -2 + Math.random() * 4,\r\n rotation: Math.random() * 360,\r\n rotationSpeed: -8 + Math.random() * 16,\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n shape: Math.random() > 0.5 ? \"rect\" : \"circle\"\r\n });\r\n }\r\n\r\n if (confettiAnimationId) cancelAnimationFrame(confettiAnimationId);\r\n\r\n const duration = 1300;\r\n const startTime = performance.now();\r\n\r\n function animate(now) {\r\n confettiCtx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);\r\n\r\n confettiPieces.forEach(piece => {\r\n piece.x += piece.speedX;\r\n piece.y += piece.speedY;\r\n piece.rotation += piece.rotationSpeed;\r\n\r\n confettiCtx.save();\r\n confettiCtx.translate(piece.x, piece.y);\r\n confettiCtx.rotate(piece.rotation * Math.PI \/ 180);\r\n confettiCtx.fillStyle = piece.color;\r\n\r\n if (piece.shape === \"rect\") {\r\n confettiCtx.fillRect(-piece.size \/ 2, -piece.size \/ 2, piece.size, piece.size * 0.7);\r\n } else {\r\n confettiCtx.beginPath();\r\n confettiCtx.arc(0, 0, piece.size \/ 2, 0, Math.PI * 2);\r\n confettiCtx.fill();\r\n }\r\n\r\n confettiCtx.restore();\r\n });\r\n\r\n if (now - startTime < duration) {\r\n confettiAnimationId = requestAnimationFrame(animate);\r\n } else {\r\n confettiCtx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);\r\n }\r\n }\r\n\r\n confettiAnimationId = requestAnimationFrame(animate);\r\n }\r\n\r\n function showWinPopup() {\r\n winPopup.classList.add(\"show\");\r\n }\r\n\r\n function closeWinPopup() {\r\n winPopup.classList.remove(\"show\");\r\n resetGame();\r\n }\r\n\r\n function shuffle(array) {\r\n const arr = [...array];\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n return arr;\r\n }\r\n\r\n function loadRound(roundIndex) {\r\n currentRound = roundIndex;\r\n currentItems = shuffle(rounds[roundIndex]);\r\n currentQuestionIndex = 0;\r\n roundCorrectCount = 0;\r\n roundNumEl.textContent = roundIndex + 1;\r\n nextRoundBtn.style.display = \"none\";\r\n messageEl.textContent = \"\";\r\n loadQuestion();\r\n }\r\n\r\n function loadQuestion() {\r\n currentTarget = currentItems[currentQuestionIndex];\r\n targetWordEl.textContent = currentTarget.label;\r\n questionNumEl.textContent = currentQuestionIndex + 1;\r\n\r\n renderChoices();\r\n setTimeout(() => {\r\n speakCurrentWord();\r\n }, 250);\r\n }\r\n\r\n function getChoices() {\r\n const roundPool = rounds[currentRound];\r\n const distractors = shuffle(roundPool.filter(item => item.id !== currentTarget.id)).slice(0, 2);\r\n return shuffle([currentTarget, ...distractors]);\r\n }\r\n\r\n function renderChoices() {\r\n choicesEl.innerHTML = \"\";\r\n const choices = getChoices();\r\n\r\n choices.forEach(item => {\r\n const card = document.createElement(\"div\");\r\n card.className = \"choice-card\";\r\n card.dataset.id = item.id;\r\n\r\n card.innerHTML = `\r\n <div class=\"sparkles\">\r\n <span class=\"sparkle\">\u2728<\/span>\r\n <span class=\"sparkle\">\u2b50<\/span>\r\n <span class=\"sparkle\">\u2728<\/span>\r\n <span class=\"sparkle\">\u2b50<\/span>\r\n <\/div>\r\n <div class=\"img-wrap\">\r\n <img decoding=\"async\" src=\"${item.img}\" alt=\"${item.label}\" onerror=\"this.style.display='none'\">\r\n <\/div>\r\n <div class=\"choice-label\">${item.label}<\/div>\r\n `;\r\n\r\n card.addEventListener(\"click\", () => handleChoice(card, item));\r\n choicesEl.appendChild(card);\r\n });\r\n }\r\n\r\n function disableChoices() {\r\n document.querySelectorAll(\".choice-card\").forEach(card => {\r\n card.classList.add(\"disabled\");\r\n });\r\n }\r\n\r\n function handleChoice(card, item) {\r\n initAudio();\r\n\r\n if (item.id === currentTarget.id) {\r\n disableChoices();\r\n card.classList.add(\"correct\");\r\n playTone(\"correct\");\r\n launchConfetti();\r\n\r\n const imgWrap = card.querySelector(\".img-wrap\");\r\n imgWrap.classList.remove(\"correct-bounce\");\r\n void imgWrap.offsetWidth;\r\n imgWrap.classList.add(\"correct-bounce\");\r\n\r\n totalScore++;\r\n roundCorrectCount++;\r\n scoreEl.textContent = totalScore;\r\n messageEl.textContent = \"\u2705 Correct!\";\r\n\r\n setTimeout(() => {\r\n if (currentQuestionIndex < currentItems.length - 1) {\r\n currentQuestionIndex++;\r\n messageEl.textContent = \"\";\r\n loadQuestion();\r\n } else {\r\n if (currentRound < rounds.length - 1) {\r\n messageEl.textContent = \"\ud83c\udf89 Great! Click Next Round\";\r\n nextRoundBtn.style.display = \"inline-block\";\r\n } else {\r\n messageEl.textContent = \"\";\r\n launchConfetti();\r\n setTimeout(() => {\r\n showWinPopup();\r\n }, 250);\r\n }\r\n }\r\n }, 1100);\r\n } else {\r\n card.classList.add(\"wrong\");\r\n playTone(\"wrong\");\r\n messageEl.textContent = \"\u274c Try again\";\r\n\r\n setTimeout(() => {\r\n card.classList.remove(\"wrong\");\r\n if (!(currentRound === rounds.length - 1 && currentQuestionIndex === currentItems.length - 1)) {\r\n messageEl.textContent = \"\";\r\n }\r\n }, 700);\r\n }\r\n }\r\n\r\n function nextRound() {\r\n if (currentRound < rounds.length - 1) {\r\n loadRound(currentRound + 1);\r\n }\r\n }\r\n\r\n function resetGame() {\r\n totalScore = 0;\r\n scoreEl.textContent = totalScore;\r\n winPopup.classList.remove(\"show\");\r\n messageEl.textContent = \"\";\r\n loadRound(0);\r\n }\r\n\r\n loadRound(0);\r\n <\/script>\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>Level 0 – What’s This? \ud83c\udfc6 \u2728 \u2b50 Amazing! You finished all rounds! Play Again What\u2019s This? Choose the correct […]<\/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-28006","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28006","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=28006"}],"version-history":[{"count":10,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28006\/revisions"}],"predecessor-version":[{"id":28261,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28006\/revisions\/28261"}],"wp:attachment":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/media?parent=28006"}],"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\n Level 0 - What's This?<\/title>\r\n <style>\r\n * { box-sizing: border-box; }\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n }\r\n\r\n body {\r\n font-family: Arial, sans-serif;\r\n background: linear-gradient(180deg, #fdf2ff, #eef7ff);\r\n color: #24324a;\r\n }\r\n\r\n.game-wrap {\r\n width: 100%;\r\n max-width: 1140px;\r\n height: 95vh;\r\n margin: 0 auto;\r\n padding: 0px 12px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n overflow: hidden;\r\n}\r\n .header {\r\n text-align: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n .title {\r\n font-size: clamp(26px, 4vw, 52px);\r\n font-weight: 800;\r\n margin: 0 0 6px;\r\n line-height: 1.0;\r\n }\r\n\r\n .subtitle {\r\n font-size: clamp(16px, 2vw, 24px);\r\n margin: 0;\r\n color: #5e6b84;\r\n }\r\n\r\n .top-bar {\r\n display: flex;\r\n gap: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n flex-shrink: 0;\r\n }\r\n\r\n .pill {\r\n background: #fff;\r\n border: 2px solid #e7eaf3;\r\n border-radius: 999px;\r\n padding: 10px 16px;\r\n font-weight: 700;\r\n box-shadow: 0 4px 10px rgba(0,0,0,.05);\r\n font-size: clamp(14px, 1.3vw, 22px);\r\n }\r\n\r\n .panel {\r\n background: #fff;\r\n border-radius: 24px;\r\n padding: 16px;\r\n box-shadow: 0 10px 28px rgba(18,28,55,.08);\r\n border: 1px solid #edf0f7;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n flex: 1;\r\n min-height: 0;\r\n }\r\n\r\n .question-box {\r\n background: linear-gradient(180deg, #f7f2ff, #eef6ff);\r\n border: 2px solid #e3d6ff;\r\n border-radius: 24px;\r\n padding: 18px;\r\n text-align: center;\r\n }\r\n\r\n .question-label {\r\n font-size: clamp(16px, 1.4vw, 22px);\r\n color: #6f7d98;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .target-word {\r\n font-size: clamp(28px, 4vw, 54px);\r\n font-weight: 900;\r\n color: #6f39e8;\r\n text-transform: lowercase;\r\n line-height: 1.1;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .sound-btn {\r\n border: 0;\r\n border-radius: 999px;\r\n padding: 12px 18px;\r\n font-size: clamp(16px, 1.2vw, 22px);\r\n font-weight: 800;\r\n cursor: pointer;\r\n background: linear-gradient(90deg, #8c52ff, #cb6ce6);\r\n color: #fff;\r\n box-shadow: 0 8px 18px rgba(140,82,255,.22);\r\n transition: transform .2s ease;\r\n }\r\n\r\n .sound-btn:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n .choices {\r\n display: grid;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n gap: 14px;\r\n align-content: start;\r\n }\r\n\r\n .choice-card {\r\n background: #fafbff;\r\n border: 2px solid #dfe6ff;\r\n border-radius: 24px;\r\n padding: 14px;\r\n min-height: 190px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: .22s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .choice-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 24px rgba(140,82,255,.12);\r\n }\r\n\r\n .choice-card.correct {\r\n background: #eefaf2;\r\n border-color: #8ed2a0;\r\n }\r\n\r\n .choice-card.wrong {\r\n background: #fff4f4;\r\n border-color: #f2a6a6;\r\n animation: shake .28s linear;\r\n }\r\n\r\n .choice-card.disabled {\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes shake {\r\n 0% { transform: translateX(0); }\r\n 25% { transform: translateX(-4px); }\r\n 50% { transform: translateX(4px); }\r\n 75% { transform: translateX(-4px); }\r\n 100% { transform: translateX(0); }\r\n }\r\n\r\n .img-wrap {\r\n width: clamp(72px, 8vw, 120px);\r\n height: clamp(72px, 8vw, 120px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .img-wrap img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain;\r\n display: block;\r\n transition: transform .25s ease, filter .25s ease;\r\n }\r\n\r\n .img-wrap.correct-bounce img {\r\n animation: correctPop .8s ease;\r\n filter: drop-shadow(0 8px 14px rgba(140,82,255,.22));\r\n }\r\n\r\n @keyframes correctPop {\r\n 0% { transform: scale(1) translateY(0); }\r\n 20% { transform: scale(1.22) translateY(-10px) rotate(-5deg); }\r\n 40% { transform: scale(1.06) translateY(0) rotate(4deg); }\r\n 60% { transform: scale(1.16) translateY(-5px) rotate(-3deg); }\r\n 100% { transform: scale(1) translateY(0) rotate(0); }\r\n }\r\n\r\n .choice-label {\r\n font-size: clamp(16px, 1.2vw, 22px);\r\n font-weight: 800;\r\n color: #53627d;\r\n text-transform: lowercase;\r\n }\r\n\r\n .sparkles {\r\n position: absolute;\r\n inset: 0;\r\n pointer-events: none;\r\n opacity: 0;\r\n }\r\n\r\n .choice-card.correct .sparkles {\r\n animation: sparkleFlash .8s ease;\r\n }\r\n\r\n @keyframes sparkleFlash {\r\n 0% { opacity: 0; transform: scale(.8); }\r\n 30% { opacity: 1; transform: scale(1); }\r\n 100% { opacity: 0; transform: scale(1.15); }\r\n }\r\n\r\n .sparkle {\r\n position: absolute;\r\n font-size: 20px;\r\n animation: floatUp .8s ease forwards;\r\n }\r\n\r\n .sparkle:nth-child(1) { top: 18%; left: 18%; }\r\n .sparkle:nth-child(2) { top: 12%; right: 18%; animation-delay: .05s; }\r\n .sparkle:nth-child(3) { bottom: 18%; left: 24%; animation-delay: .1s; }\r\n .sparkle:nth-child(4) { bottom: 14%; right: 22%; animation-delay: .15s; }\r\n\r\n @keyframes floatUp {\r\n 0% { opacity: 0; transform: translateY(8px) scale(.7); }\r\n 40% { opacity: 1; transform: translateY(-4px) scale(1); }\r\n 100% { opacity: 0; transform: translateY(-16px) scale(1.1); }\r\n }\r\n\r\n .controls {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n margin-top: auto;\r\n padding-top: 6px;\r\n }\r\n\r\n button {\r\n border: 0;\r\n border-radius: 14px;\r\n padding: 12px 18px;\r\n font-size: clamp(15px, 1vw, 20px);\r\n font-weight: 800;\r\n cursor: pointer;\r\n background: linear-gradient(90deg, #8c52ff, #cb6ce6);\r\n color: #fff;\r\n box-shadow: 0 8px 18px rgba(140,82,255,.22);\r\n transition: transform .2s ease;\r\n }\r\n\r\n button:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n button.secondary {\r\n background: #edf2ff;\r\n color: #31456a;\r\n box-shadow: none;\r\n }\r\n\r\n .message {\r\n text-align: center;\r\n font-size: clamp(18px, 1.4vw, 28px);\r\n font-weight: 800;\r\n min-height: 30px;\r\n margin-top: 4px;\r\n }\r\n\r\n #nextRoundBtn {\r\n display: none;\r\n }\r\n\r\n #confetti {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n pointer-events: none;\r\n z-index: 9999;\r\n }\r\n\r\n .win-popup {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(20, 16, 35, 0.45);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity .25s ease;\r\n z-index: 10000;\r\n padding: 20px;\r\n }\r\n\r\n .win-popup.show {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .win-popup-card {\r\n background: #fff;\r\n width: min(460px, 92vw);\r\n border-radius: 28px;\r\n padding: 28px 24px;\r\n text-align: center;\r\n box-shadow: 0 18px 45px rgba(0,0,0,.18);\r\n animation: popupPop .38s ease;\r\n border: 2px solid #eee7ff;\r\n }\r\n\r\n .win-popup-card h2 {\r\n margin: 0 0 10px;\r\n font-size: clamp(28px, 3vw, 42px);\r\n color: #6f39e8;\r\n }\r\n\r\n .win-popup-card p {\r\n margin: 0 0 18px;\r\n font-size: clamp(18px, 1.5vw, 24px);\r\n color: #53627d;\r\n font-weight: 700;\r\n }\r\n\r\n .win-stars {\r\n font-size: 34px;\r\n margin-bottom: 12px;\r\n animation: starDance .9s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes popupPop {\r\n 0% { transform: scale(.65); opacity: 0; }\r\n 70% { transform: scale(1.04); opacity: 1; }\r\n 100% { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n @keyframes starDance {\r\n from { transform: translateY(0) rotate(-4deg); }\r\n to { transform: translateY(-6px) rotate(4deg); }\r\n }\r\n\r\n @media (max-width: 1000px) {\r\n .choices {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .game-wrap {\r\n min-height: 100vh;\r\n }\r\n\r\n .choices {\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n }\r\n\r\n .choice-card {\r\n min-height: 160px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <canvas id=\"confetti\"><\/canvas>\r\n\r\n <div id=\"winPopup\" class=\"win-popup\">\r\n <div class=\"win-popup-card\">\r\n <div class=\"win-stars\">\ud83c\udfc6 \u2728 \u2b50<\/div>\r\n <h2>Amazing!<\/h2>\r\n <p>You finished all rounds!<\/p>\r\n <button onclick=\"closeWinPopup()\">Play Again<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"game-wrap\">\r\n <div class=\"header\">\r\n <h1 class=\"title\">What\u2019s This?<\/h1>\r\n <p class=\"subtitle\">Choose the correct picture<\/p>\r\n <\/div>\r\n\r\n <div class=\"top-bar\">\r\n <div class=\"pill\">Level 0<\/div>\r\n <div class=\"pill\">Topic: School & Toys<\/div>\r\n <div class=\"pill\">Round: <span id=\"roundNum\">1<\/span> \/ 2<\/div>\r\n <div class=\"pill\">Question: <span id=\"questionNum\">1<\/span><\/div>\r\n <div class=\"pill\">Score: <span id=\"score\">0<\/span> \/ 10<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <div class=\"question-box\">\r\n <div class=\"question-label\">Listen and choose<\/div>\r\n <div id=\"targetWord\" class=\"target-word\">book<\/div>\r\n <button class=\"sound-btn\" onclick=\"speakCurrentWord()\">\ud83d\udd0a Hear the word<\/button>\r\n <\/div>\r\n\r\n <div id=\"choices\" class=\"choices\"><\/div>\r\n\r\n <div class=\"controls\">\r\n <button id=\"nextRoundBtn\" onclick=\"nextRound()\">Next Round<\/button>\r\n <button onclick=\"resetGame()\">Play Again<\/button>\r\n <button class=\"secondary\" onclick=\"repeatQuestion()\">Repeat Word<\/button>\r\n <\/div>\r\n\r\n <div id=\"message\" class=\"message\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const allItems = [\r\n { id: \"book\", label: \"book\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/01\/SAT1_Flashcard_25.jpg\" },\r\n { id: \"bag\", label: \"bag\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/01\/SAT1_Flashcard_28.jpg\" },\r\n { id: \"pencil\", label: \"pencil\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/01\/SAT1_Flashcard_26.jpg\" },\r\n { id: \"crayon\", label: \"crayon\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/SAT1_Flashcard_27-217x300.jpg\" },\r\n { id: \"doll\", label: \"doll\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/doll.jpeg\" },\r\n { id: \"ball\", label: \"ball\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/ball-1.png\" },\r\n { id: \"boat\", label: \"boat\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/boat.jpeg\" },\r\n { id: \"teddy bear\", label: \"teddy bear\", img: \"https:\/\/newgrasp.com\/wp-content\/uploads\/2025\/04\/teddy-bear.jpeg\" },\r\n { id: \"number 3\", label: \"number Three\", img: \"images\/3.png\" },\r\n { id: \"number 4\", label: \"number four\", img: \"images\/4.png\" }\r\n ];\r\n\r\n const rounds = [\r\n allItems.slice(0, 6),\r\n allItems.slice(6)\r\n ];\r\n\r\n const targetWordEl = document.getElementById(\"targetWord\");\r\n const choicesEl = document.getElementById(\"choices\");\r\n const scoreEl = document.getElementById(\"score\");\r\n const roundNumEl = document.getElementById(\"roundNum\");\r\n const questionNumEl = document.getElementById(\"questionNum\");\r\n const messageEl = document.getElementById(\"message\");\r\n const nextRoundBtn = document.getElementById(\"nextRoundBtn\");\r\n const winPopup = document.getElementById(\"winPopup\");\r\n\r\n let totalScore = 0;\r\n let currentRound = 0;\r\n let currentItems = [];\r\n let currentQuestionIndex = 0;\r\n let roundCorrectCount = 0;\r\n let currentTarget = null;\r\n let audioCtx = null;\r\n let speechReady = false;\r\n\r\n const confettiCanvas = document.getElementById(\"confetti\");\r\n const confettiCtx = confettiCanvas.getContext(\"2d\");\r\n let confettiPieces = [];\r\n let confettiAnimationId = null;\r\n\r\n function resizeConfettiCanvas() {\r\n confettiCanvas.width = window.innerWidth;\r\n confettiCanvas.height = window.innerHeight;\r\n }\r\n\r\n resizeConfettiCanvas();\r\n window.addEventListener(\"resize\", resizeConfettiCanvas);\r\n\r\n function initAudio() {\r\n const AudioContextClass = window.AudioContext || window.webkitAudioContext;\r\n if (AudioContextClass && !audioCtx) {\r\n audioCtx = new AudioContextClass();\r\n }\r\n if (audioCtx && audioCtx.state === \"suspended\") {\r\n audioCtx.resume();\r\n }\r\n speechReady = true;\r\n }\r\n\r\n document.addEventListener(\"click\", initAudio);\r\n document.addEventListener(\"touchstart\", initAudio);\r\n document.addEventListener(\"pointerdown\", initAudio);\r\n\r\n function playTone(type = \"correct\") {\r\n initAudio();\r\n if (!audioCtx) return;\r\n\r\n const baseTime = audioCtx.currentTime + 0.01;\r\n\r\n if (type === \"correct\") {\r\n const notes = [523.25, 659.25, 783.99];\r\n notes.forEach((freq, index) => {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n\r\n osc.type = \"sine\";\r\n osc.frequency.value = freq;\r\n\r\n const start = baseTime + index * 0.08;\r\n gain.gain.setValueAtTime(0.0001, start);\r\n gain.gain.exponentialRampToValueAtTime(0.18, start + 0.02);\r\n gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.22);\r\n\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n osc.start(start);\r\n osc.stop(start + 0.24);\r\n });\r\n } else {\r\n const osc = audioCtx.createOscillator();\r\n const gain = audioCtx.createGain();\r\n\r\n osc.type = \"square\";\r\n osc.frequency.setValueAtTime(220, baseTime);\r\n osc.frequency.exponentialRampToValueAtTime(160, baseTime + 0.18);\r\n\r\n gain.gain.setValueAtTime(0.0001, baseTime);\r\n gain.gain.exponentialRampToValueAtTime(0.12, baseTime + 0.02);\r\n gain.gain.exponentialRampToValueAtTime(0.0001, baseTime + 0.22);\r\n\r\n osc.connect(gain);\r\n gain.connect(audioCtx.destination);\r\n\r\n osc.start(baseTime);\r\n osc.stop(baseTime + 0.22);\r\n }\r\n }\r\n\r\n function speakWord(word) {\r\n if (!(\"speechSynthesis\" in window)) return;\r\n speechReady = true;\r\n window.speechSynthesis.cancel();\r\n\r\n const utterance = new SpeechSynthesisUtterance(word);\r\n utterance.lang = \"en-GB\";\r\n utterance.rate = 0.85;\r\n utterance.pitch = 1;\r\n utterance.volume = 1;\r\n\r\n const voices = window.speechSynthesis.getVoices();\r\n const preferredVoice =\r\n voices.find(v => v.lang === \"en-GB\") ||\r\n voices.find(v => v.lang && v.lang.startsWith(\"en\")) ||\r\n null;\r\n\r\n if (preferredVoice) utterance.voice = preferredVoice;\r\n window.speechSynthesis.speak(utterance);\r\n }\r\n\r\n if (\"speechSynthesis\" in window) {\r\n window.speechSynthesis.onvoiceschanged = () => {};\r\n }\r\n\r\n function speakCurrentWord() {\r\n if (currentTarget) speakWord(currentTarget.label);\r\n }\r\n\r\n function repeatQuestion() {\r\n speakCurrentWord();\r\n }\r\n\r\n function launchConfetti() {\r\n confettiPieces = [];\r\n const colors = [\"#8c52ff\", \"#cb6ce6\", \"#ffd93d\", \"#6bcB77\", \"#4d96ff\", \"#ff6b6b\"];\r\n\r\n for (let i = 0; i < 140; i++) {\r\n confettiPieces.push({\r\n x: Math.random() * confettiCanvas.width,\r\n y: -20 - Math.random() * confettiCanvas.height * 0.3,\r\n size: 6 + Math.random() * 8,\r\n speedY: 2 + Math.random() * 4,\r\n speedX: -2 + Math.random() * 4,\r\n rotation: Math.random() * 360,\r\n rotationSpeed: -8 + Math.random() * 16,\r\n color: colors[Math.floor(Math.random() * colors.length)],\r\n shape: Math.random() > 0.5 ? \"rect\" : \"circle\"\r\n });\r\n }\r\n\r\n if (confettiAnimationId) cancelAnimationFrame(confettiAnimationId);\r\n\r\n const duration = 1300;\r\n const startTime = performance.now();\r\n\r\n function animate(now) {\r\n confettiCtx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);\r\n\r\n confettiPieces.forEach(piece => {\r\n piece.x += piece.speedX;\r\n piece.y += piece.speedY;\r\n piece.rotation += piece.rotationSpeed;\r\n\r\n confettiCtx.save();\r\n confettiCtx.translate(piece.x, piece.y);\r\n confettiCtx.rotate(piece.rotation * Math.PI \/ 180);\r\n confettiCtx.fillStyle = piece.color;\r\n\r\n if (piece.shape === \"rect\") {\r\n confettiCtx.fillRect(-piece.size \/ 2, -piece.size \/ 2, piece.size, piece.size * 0.7);\r\n } else {\r\n confettiCtx.beginPath();\r\n confettiCtx.arc(0, 0, piece.size \/ 2, 0, Math.PI * 2);\r\n confettiCtx.fill();\r\n }\r\n\r\n confettiCtx.restore();\r\n });\r\n\r\n if (now - startTime < duration) {\r\n confettiAnimationId = requestAnimationFrame(animate);\r\n } else {\r\n confettiCtx.clearRect(0, 0, confettiCanvas.width, confettiCanvas.height);\r\n }\r\n }\r\n\r\n confettiAnimationId = requestAnimationFrame(animate);\r\n }\r\n\r\n function showWinPopup() {\r\n winPopup.classList.add(\"show\");\r\n }\r\n\r\n function closeWinPopup() {\r\n winPopup.classList.remove(\"show\");\r\n resetGame();\r\n }\r\n\r\n function shuffle(array) {\r\n const arr = [...array];\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n return arr;\r\n }\r\n\r\n function loadRound(roundIndex) {\r\n currentRound = roundIndex;\r\n currentItems = shuffle(rounds[roundIndex]);\r\n currentQuestionIndex = 0;\r\n roundCorrectCount = 0;\r\n roundNumEl.textContent = roundIndex + 1;\r\n nextRoundBtn.style.display = \"none\";\r\n messageEl.textContent = \"\";\r\n loadQuestion();\r\n }\r\n\r\n function loadQuestion() {\r\n currentTarget = currentItems[currentQuestionIndex];\r\n targetWordEl.textContent = currentTarget.label;\r\n questionNumEl.textContent = currentQuestionIndex + 1;\r\n\r\n renderChoices();\r\n setTimeout(() => {\r\n speakCurrentWord();\r\n }, 250);\r\n }\r\n\r\n function getChoices() {\r\n const roundPool = rounds[currentRound];\r\n const distractors = shuffle(roundPool.filter(item => item.id !== currentTarget.id)).slice(0, 2);\r\n return shuffle([currentTarget, ...distractors]);\r\n }\r\n\r\n function renderChoices() {\r\n choicesEl.innerHTML = \"\";\r\n const choices = getChoices();\r\n\r\n choices.forEach(item => {\r\n const card = document.createElement(\"div\");\r\n card.className = \"choice-card\";\r\n card.dataset.id = item.id;\r\n\r\n card.innerHTML = `\r\n <div class=\"sparkles\">\r\n <span class=\"sparkle\">\u2728<\/span>\r\n <span class=\"sparkle\">\u2b50<\/span>\r\n <span class=\"sparkle\">\u2728<\/span>\r\n <span class=\"sparkle\">\u2b50<\/span>\r\n <\/div>\r\n <div class=\"img-wrap\">\r\n <img decoding=\"async\" src=\"${item.img}\" alt=\"${item.label}\" onerror=\"this.style.display='none'\">\r\n <\/div>\r\n <div class=\"choice-label\">${item.label}<\/div>\r\n `;\r\n\r\n card.addEventListener(\"click\", () => handleChoice(card, item));\r\n choicesEl.appendChild(card);\r\n });\r\n }\r\n\r\n function disableChoices() {\r\n document.querySelectorAll(\".choice-card\").forEach(card => {\r\n card.classList.add(\"disabled\");\r\n });\r\n }\r\n\r\n function handleChoice(card, item) {\r\n initAudio();\r\n\r\n if (item.id === currentTarget.id) {\r\n disableChoices();\r\n card.classList.add(\"correct\");\r\n playTone(\"correct\");\r\n launchConfetti();\r\n\r\n const imgWrap = card.querySelector(\".img-wrap\");\r\n imgWrap.classList.remove(\"correct-bounce\");\r\n void imgWrap.offsetWidth;\r\n imgWrap.classList.add(\"correct-bounce\");\r\n\r\n totalScore++;\r\n roundCorrectCount++;\r\n scoreEl.textContent = totalScore;\r\n messageEl.textContent = \"\u2705 Correct!\";\r\n\r\n setTimeout(() => {\r\n if (currentQuestionIndex < currentItems.length - 1) {\r\n currentQuestionIndex++;\r\n messageEl.textContent = \"\";\r\n loadQuestion();\r\n } else {\r\n if (currentRound < rounds.length - 1) {\r\n messageEl.textContent = \"\ud83c\udf89 Great! Click Next Round\";\r\n nextRoundBtn.style.display = \"inline-block\";\r\n } else {\r\n messageEl.textContent = \"\";\r\n launchConfetti();\r\n setTimeout(() => {\r\n showWinPopup();\r\n }, 250);\r\n }\r\n }\r\n }, 1100);\r\n } else {\r\n card.classList.add(\"wrong\");\r\n playTone(\"wrong\");\r\n messageEl.textContent = \"\u274c Try again\";\r\n\r\n setTimeout(() => {\r\n card.classList.remove(\"wrong\");\r\n if (!(currentRound === rounds.length - 1 && currentQuestionIndex === currentItems.length - 1)) {\r\n messageEl.textContent = \"\";\r\n }\r\n }, 700);\r\n }\r\n }\r\n\r\n function nextRound() {\r\n if (currentRound < rounds.length - 1) {\r\n loadRound(currentRound + 1);\r\n }\r\n }\r\n\r\n function resetGame() {\r\n totalScore = 0;\r\n scoreEl.textContent = totalScore;\r\n winPopup.classList.remove(\"show\");\r\n messageEl.textContent = \"\";\r\n loadRound(0);\r\n }\r\n\r\n loadRound(0);\r\n <\/script>\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>Level 0 – What’s This? \ud83c\udfc6 \u2728 \u2b50 Amazing! You finished all rounds! Play Again What\u2019s This? Choose the correct […]<\/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-28006","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28006","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=28006"}],"version-history":[{"count":10,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28006\/revisions"}],"predecessor-version":[{"id":28261,"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/pages\/28006\/revisions\/28261"}],"wp:attachment":[{"href":"https:\/\/newgrasp.com\/en\/wp-json\/wp\/v2\/media?parent=28006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}