','

','

','

// Buggy code:\n${p.buggyCode}

Choose the correct fix:

No variables yet

${s.code}

Choose your action:

','','

','

'],correct:2,explain:'

is largest'}, {topic:'CSS',q:'Make text bold?',options:['font-style: bold','text: bold','font-weight: bold','bold: true'],correct:2,explain:'Use font-weight: bold'}, {topic:'JavaScript',q:'What does === check?',options:['Only value','Only type','Value AND type','Assignment'],correct:2,explain:'Strict equality'}, {topic:'AI',q:'What adjusts during training?',options:['Colors','Weights','HTML','Files'],correct:1,explain:'Weights and biases'}, {topic:'Variables',q:'x = 5; x = x + 3; x is?',options:['5','3','8','53'],correct:2,explain:'5 + 3 = 8'}, {topic:'Loops',q:'for i in range(5) runs?',options:['4','5','6','0'],correct:1,explain:'0,1,2,3,4 — five times'}, {topic:'Functions',q:"Function's main benefit?",options:['More memory','Reuses code','Slower','Adds bugs'],correct:1,explain:'Code reuse!'}, {topic:'Conditionals',q:'if (7 > 5 and 7 < 10)?',options:['True','False','Error','7'],correct:0,explain:'Both true → True'}, {topic:'Master',q:'Which runs in browsers natively?',options:['Python','C++','JavaScript','Java'],correct:2,explain:'JS is native to browsers'}, ]; let state = { qIdx: 0, bossHp: 100, playerHp: 100, combo: 0, won: false, over: false, started: false, feedback: null, selected: null, shakeBoss: false, shakePlayer: false }; let particles = [], animId = null; const card = document.getElementById('fbCard'); const BOSS_MAX = 100, PLAYER_MAX = 100, DMG_TO_BOSS = 18, DMG_TO_PLAYER = 22; function updateHUD() { document.getElementById('fbHUD').innerHTML = makeHUD([`🧑‍💻 ${state.playerHp}/100`,`👑 ${state.bossHp}/100`,`🔥 x${state.combo}`]); } function renderCard() { const q = QUESTIONS[state.qIdx]; card.innerHTML = `

${q.topic}Q${(state.qIdx%QUESTIONS.length)+1}

${q.q}

`; const wrap = document.getElementById('fbOpts'); q.options.forEach((opt, i) => { const btn = document.createElement('button'); btn.className = 'option-btn game-touch'; if (state.selected === i) btn.classList.add(i===q.correct?'correct':'wrong'); if (state.feedback && i === q.correct) btn.style.boxShadow = '0 0 0 2px #22c55e'; if (state.feedback) btn.classList.add('disabled'); btn.textContent = opt; btn.onclick = () => handleAnswer(i); wrap.appendChild(btn); }); if (state.feedback) document.getElementById('fbFb').innerHTML = `

${state.feedback}

`; startCanvas(); } function startCanvas() { const canvas = document.getElementById('fbCanvas'); if (!canvas) return; const ctx = canvas.getContext('2d'); if (animId) cancelAnimationFrame(animId); function render() { ctx.clearRect(0,0,canvas.width,canvas.height); const grad = ctx.createRadialGradient(canvas.width/2,canvas.height/2,0,canvas.width/2,canvas.height/2,canvas.width); grad.addColorStop(0,'#3a1a1a'); grad.addColorStop(1,'#0a0a0a'); ctx.fillStyle = grad; ctx.fillRect(0,0,canvas.width,canvas.height); const bossX = canvas.width/2, bossY = 130; const shake = state.shakeBoss?(Math.random()-0.5)*12:0; ctx.fillStyle = `rgba(220,38,38,${0.2+0.1*Math.sin(Date.now()/200)})`; ctx.beginPath(); ctx.arc(bossX+shake, bossY, 90, 0, Math.PI*2); ctx.fill(); ctx.font = '80px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('👑', bossX+shake, bossY+25); ctx.fillStyle = '#ef4444'; ctx.font = '24px sans-serif'; ctx.fillText('👁️', bossX-20+shake, bossY+50); ctx.fillText('👁️', bossX+20+shake, bossY+50); ctx.textAlign = 'left'; ctx.fillStyle = '#000'; ctx.fillRect(canvas.width/2-100, 30, 200, 16); ctx.fillStyle = '#dc2626'; ctx.fillRect(canvas.width/2-100, 30, 200*(state.bossHp/BOSS_MAX), 16); ctx.fillStyle = '#fff'; ctx.font = 'bold 12px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(`CODE MASTER ${state.bossHp}/${BOSS_MAX}`, canvas.width/2, 42); ctx.textAlign = 'left'; ctx.fillStyle = '#000'; ctx.fillRect(canvas.width/2-100, canvas.height-50, 200, 16); ctx.fillStyle = '#22c55e'; ctx.fillRect(canvas.width/2-100, canvas.height-50, 200*(state.playerHp/PLAYER_MAX), 16); ctx.fillStyle = '#fff'; ctx.textAlign = 'center'; ctx.fillText(`YOU ${state.playerHp}/${PLAYER_MAX}`, canvas.width/2, canvas.height-38); ctx.textAlign = 'left'; const pShake = state.shakePlayer?(Math.random()-0.5)*10:0; ctx.font = '40px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('🧑‍💻', canvas.width/2+pShake, canvas.height-60); ctx.textAlign = 'left'; particles.forEach(p => { p.x += p.vx; p.y += p.vy; p.vy += 0.2; p.life--; ctx.globalAlpha = Math.max(0, p.life/30); ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, 3, 0, Math.PI*2); ctx.fill(); ctx.globalAlpha = 1; }); particles = particles.filter(p => p.life > 0); animId = requestAnimationFrame(render); } render(); } function spawnParticles(x, y, color, count) { for (let i = 0; i < count; i++) particles.push({x,y,vx:(Math.random()-0.5)*8,vy:(Math.random()-0.5)*8-2,life:25+Math.random()*10,color}); } function handleAnswer(i) { if (state.feedback) return; state.selected = i; const q = QUESTIONS[state.qIdx]; const canvas = document.getElementById('fbCanvas'); const cx = canvas.width/2; if (i === q.correct) { state.combo++; const dmg = DMG_TO_BOSS+Math.min(10, state.combo*2); state.bossHp = Math.max(0, state.bossHp-dmg); state.shakeBoss = true; spawnParticles(cx, 130, '#fbbf24', 25); state.feedback = `✅ ${q.explain} (-${dmg} HP!)`; recordAnswer('master', true, q.q); Audio.play('win'); updateHUD(); setTimeout(() => state.shakeBoss = false, 400); if (state.bossHp <= 0) { state.won = true; setTimeout(() => { const stars = state.playerHp>=80?3:state.playerHp>=40?2:1; showWinOverlay(card, level, `🎉 CodeQuest Complete! 🎉`, stars, state.bossHp); }, 1500); } else { setTimeout(() => { state.feedback = null; state.selected = null; state.qIdx = (state.qIdx+1)%QUESTIONS.length; renderCard(); }, 2200); } } else { if (activeShield) { activeShield = false; toast('Shield saved you!', 'success'); state.feedback = '🛡️ Shield used!'; state.selected = null; setTimeout(() => { state.feedback = null; renderCard(); }, 1000); return; } state.combo = 0; state.playerHp = Math.max(0, state.playerHp-DMG_TO_PLAYER); state.shakePlayer = true; spawnParticles(cx, canvas.height-60, '#ef4444', 20); state.feedback = `❌ Correct: "${q.options[q.correct]}". ${q.explain} (-${DMG_TO_PLAYER} HP!)`; recordAnswer('master', false, q.q); Audio.play('error'); updateHUD(); setTimeout(() => state.shakePlayer = false, 400); if (state.playerHp <= 0) { state.over = true; setTimeout(() => showGameOverOverlay(card, level, 'Code Master laughs...', () => startFinalBoss(body, level)), 1500); } else { setTimeout(() => { state.feedback = null; state.selected = null; state.qIdx = (state.qIdx+1)%QUESTIONS.length; renderCard(); }, 2800); } } renderCard(); } function startGame() { state.started = true; updateHUD(); renderCard(); } window.currentGameCleanup = () => { if (animId) cancelAnimationFrame(animId); }; updateHUD(); makeStartOverlay(level, card, `Answer correctly to damage boss. Wrong = you take damage. Build combos!`, startGame); } // ---- PWA SERVICE WORKER (inline registration for offline) ---- if ('serviceWorker' in navigator) { const swCode = ` const CACHE = 'codequest-v2'; self.addEventListener('install', e => { self.skipWaiting(); }); self.addEventListener('activate', e => { e.waitUntil(self.clients.claim()); }); self.addEventListener('fetch', e => { e.respondWith( caches.match(e.request).then(r => r || fetch(e.request).then(resp => { if (e.request.method === 'GET' && e.request.url.startsWith(self.location.origin)) { const clone = resp.clone(); caches.open(CACHE).then(c => c.put(e.request, clone)); } return resp; }).catch(() => r)) ); }); `; const blob = new Blob([swCode], { type: 'application/javascript' }); const swUrl = URL.createObjectURL(blob); navigator.serviceWorker.register(swUrl).catch(() => {}); } // ---- INIT ---- checkDaily(); checkAchievements(); if (S.settings.music) Audio.startMusic(); document.addEventListener('click', function initAudio() { Audio.init(); if (S.settings.music) Audio.startMusic(); document.removeEventListener('click', initAudio); }, { once: true }); window.addEventListener('resize', () => { if (activeLevel === null) render(); }); render();