shape-pattern.html

<!doctype html>
<html lang="vi"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>Tìm quy luật hình — Toán tư duy lớp 1</title><style>
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#29263a;background:#f7f5fb}*{box-sizing:border-box}body{margin:0}.app{max-width:760px;margin:auto;padding:18px 14px 32px}.top{display:flex;justify-content:space-between;align-items:center}.title{font-size:22px;font-weight:800}.meta{display:flex;gap:12px;font-weight:700}.progress{height:8px;background:#e5e0ef;border-radius:8px;overflow:hidden;margin:16px 0 22px}.progress>div{height:100%;width:0;background:#6b5bd2;transition:.25s}.card{background:white;border-radius:24px;padding:22px;box-shadow:0 5px 22px #30285c12}.counter{text-align:center;color:#777;margin-bottom:8px}.question{text-align:center;font-size:24px;font-weight:800;margin:8px 0 22px}.sequence{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;min-height:125px;margin-bottom:24px}.seq-item{width:72px;height:72px;border-radius:16px;background:#faf9fd;display:grid;place-items:center;border:2px solid #eeeaf5}.missing{font-size:32px;font-weight:900;color:#8a7fb0}.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.choice{height:120px;border:3px solid #eeeaf5;border-radius:20px;background:#fff;display:grid;place-items:center;cursor:pointer;transition:.15s}.choice:active{transform:scale(.97)}.choice:hover{border-color:#b8aef0}.choice.selected{border-color:#6b5bd2;background:#f5f2ff}.choice.correct{border-color:#43b77a;background:#effbf5}.choice.wrong{border-color:#ef6675;background:#fff2f4}.feedback{text-align:center;min-height:58px;padding:14px 4px 2px;font-size:18px;font-weight:800}.next{width:100%;padding:15px;border:0;border-radius:16px;background:#6b5bd2;color:white;font-size:18px;font-weight:800;cursor:pointer}.next:disabled{opacity:.4;cursor:default}.done{text-align:center;padding:30px 10px}.stars{font-size:42px;letter-spacing:4px}.retry{margin-top:18px}.shape-svg{width:68px;height:68px}.seq-item .shape-svg{width:58px;height:58px}@media(max-width:430px){.choice{height:105px}.seq-item{width:60px;height:60px}.sequence{gap:5px}.question{font-size:21px}}
</style></head><body><main class="app"><div class="top"><div class="title">🔍 Tìm quy luật hình</div><div class="meta"><span id="score">⭐ 0</span><span id="streak">🔥 0</span></div></div><div class="progress"><div id="bar"></div></div><section class="card" id="game"></section></main>
<script src="ttd-shape-pattern-grammar-v3.js"></script><script src="ttd-production-adapter-v1.js"></script><script src="ttd-visual-renderer-v1.js"></script><script>
const TOTAL=10;const generated=TTD_SHAPE_PATTERN_GRAMMAR_V3.generate(80);const bank=generated.map(TTD_PRODUCTION_ADAPTER_V1.toProductionQuestion);if(!bank.every(q=>TTD_PRODUCTION_ADAPTER_V1.validateProduction(q).valid))throw new Error('Production question validation failed');let n=0,score=0,streak=0,locked=false,current=null;
function svg(x){return TTD_VISUAL_RENDERER_V1.renderItem(x).replace('class="ttd-shape"','class="shape-svg"')}
function render(){locked=false;current=bank[n%bank.length];document.getElementById('score').textContent='⭐ '+score;document.getElementById('streak').textContent='🔥 '+streak;document.getElementById('bar').style.width=(n/TOTAL*100)+'%';let html='<div class="counter">Câu '+(n+1)+' / '+TOTAL+' · Level '+current.level+'</div><div class="question">'+current.question+'</div><div class="sequence">';current.problem.sequence.forEach(x=>html+='<div class="seq-item">'+svg(x)+'</div>');html+='<div class="seq-item missing">?</div></div><div class="choices">';current.choices.forEach(x=>html+='<button class="choice" data-id="'+x.id+'">'+svg(x.visual)+'</button>');html+='</div><div class="feedback" id="feedback"></div><button class="next" id="next" disabled>Tiếp theo →</button>';document.getElementById('game').innerHTML=html;document.querySelectorAll('.choice').forEach(b=>b.onclick=()=>answer(b.dataset.id));document.getElementById('next').onclick=next)}
function answer(id){if(locked)return;locked=true;const choice=current.choices.find(x=>x.id===id),correct=choice&&choice.isCorrect,buttons=[...document.querySelectorAll('.choice')];const selected=buttons.find(b=>b.dataset.id===id);if(selected)selected.classList.add('selected',correct?'correct':'wrong');if(correct){score++;streak++;document.getElementById('feedback').textContent='🎉 Chính xác!';}else{streak=0;const right=buttons.find(b=>b.dataset.id===current.answerId);if(right)right.classList.add('correct');document.getElementById('feedback').textContent='💡 Chưa đúng. Hãy nhìn lại quy luật của dãy hình nhé!';}document.getElementById('score').textContent='⭐ '+score;document.getElementById('streak').textContent='🔥 '+streak;document.getElementById('next').disabled=false}
function next(){n++;if(n>=TOTAL){document.getElementById('bar').style.width='100%';const pct=Math.round(score/TOTAL*100),stars=pct>=90?'⭐⭐⭐':pct>=70?'⭐⭐':'⭐';document.getElementById('game').innerHTML='<div class="done"><div class="stars">'+stars+'</div><h2>Hoàn thành!</h2><p>Con đúng <b>'+score+'/'+TOTAL+'</b> câu ('+pct+'%).</p><button class="next retry" onclick="n=0;score=0;streak=0;render()">Chơi lại</button></div>';return}render()}render();
</script><script src="navigation-v2.js?v=20261005"></script><script src="navigation-hardening.js?v=20261003"></script></body></html>