{
  "kind": "html",
  "title": "Animal & planet quiz for Zosia",
  "html": "<style>\n*{box-sizing:border-box}\nbody{margin:0;background:#fff4d6;color:#2b2140;font:18px/1.4 \"Comic Sans MS\",\"Chalkboard SE\",system-ui,-apple-system,Roboto,sans-serif;min-height:100vh}\n.wrap{max-width:620px;margin:0 auto;padding:20px 16px 30px;text-align:center}\n.dots{display:flex;justify-content:center;gap:8px;margin-bottom:14px}\n.dots i{width:14px;height:14px;border-radius:50%;background:#f1d79a}\n.dots i.ok{background:#3bb273}.dots i.no{background:#ff7a59}.dots i.now{outline:3px solid #7b5cff;outline-offset:2px}\n.big{font-size:84px;line-height:1;margin:10px 0}\nh1{font-size:26px;margin:6px 0 16px}\n.ans{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.ans button{font:inherit;font-size:22px;font-weight:700;border:0;border-radius:20px;padding:18px 10px;min-height:80px;cursor:pointer;color:#fff;box-shadow:0 5px 0 rgba(0,0,0,.18);transition:transform .1s}\n.ans button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}\n.ans button:nth-child(1){background:#7b5cff}.ans button:nth-child(2){background:#ff8a3d}.ans button:nth-child(3){background:#1fb5c9}.ans button:nth-child(4){background:#e8478b}\n.ans button.right{background:#3bb273!important}.ans button.wrong{opacity:.35}\n.msg{min-height:30px;margin:14px 0 0;font-weight:700}\n.end .stars{font-size:56px;letter-spacing:6px}\n.end button{font:inherit;font-weight:700;border:0;border-radius:20px;padding:16px 28px;background:#7b5cff;color:#fff;font-size:20px;margin-top:16px;cursor:pointer}\n</style>\n<div class=\"wrap\" id=\"app\"></div>\n<script>\nvar Q=[\n {e:'🐙',q:'How many arms does an octopus have?',a:['6','8','10','12'],r:1},\n {e:'🌍',q:'Which planet do we live on?',a:['Mars','Venus','Earth','Jupiter'],r:2},\n {e:'🦒',q:'Which animal has the longest neck?',a:['Giraffe','Horse','Camel','Ostrich'],r:0},\n {e:'🌈',q:'How many colours are in a rainbow?',a:['5','6','7','9'],r:2},\n {e:'🐝',q:'What do bees make?',a:['Milk','Honey','Jam','Butter'],r:1}\n],i=0,score=0,picks=[],start=Date.now(),sent=false,app=document.getElementById('app');\nvar cheers=['Brilliant!','You got it!','Super smart!','Yes!!','Amazing!'];\nfunction dots(){return '<div class=\"dots\">'+Q.map(function(_,k){return '<i class=\"'+(k<picks.length?(picks[k].ok?'ok':'no'):(k===i?'now':''))+'\"></i>'}).join('')+'</div>'}\nfunction show(){\n  if(i>=Q.length)return done();\n  var q=Q[i];\n  app.innerHTML=dots()+'<div class=\"big\">'+q.e+'</div><h1>'+q.q+'</h1><div class=\"ans\">'+q.a.map(function(t,k){return '<button data-k=\"'+k+'\">'+t+'</button>'}).join('')+'</div><p class=\"msg\" id=\"m\"></p>';\n  app.querySelectorAll('.ans button').forEach(function(b){b.onclick=function(){pick(+b.dataset.k)}});\n}\nfunction pick(k){\n  var q=Q[i],ok=k===q.r;if(picks.length>i)return;\n  picks.push({question:i+1,picked:q.a[k],ok:ok});if(ok)score++;\n  app.querySelectorAll('.ans button').forEach(function(b,n){b.disabled=true;b.classList.add(n===q.r?'right':'wrong')});\n  document.getElementById('m').textContent=ok?cheers[i%cheers.length]+' 🎉':'Nice try! It’s '+q.a[q.r]+'.';\n  setTimeout(function(){i++;show()},1300);\n}\nfunction done(){\n  var stars='⭐'.repeat(score)+'☆'.repeat(Q.length-score);\n  app.innerHTML=dots()+'<div class=\"end\"><div class=\"big\">'+(score>=4?'🏆':score>=2?'🎈':'🌟')+'</div><h1>You got '+score+' out of '+Q.length+'!</h1><div class=\"stars\">'+stars+'</div><button id=\"fin\">Tell Dad my score</button></div>';\n  document.getElementById('fin').onclick=function(){if(sent)return;sent=true;(window.Bridgit||window.Bridget).respond(JSON.stringify({score:score,out_of:Q.length,seconds:Math.round((Date.now()-start)/1000),answers:picks}))};\n}\nshow();\n</script>\n"
}