Kiki 日日�?· 拼写大闯�?/title> <style> :root{ --ink:#2e5b4a; --deep:#23463a; --soft:#3d7a62; --bg:#eef4ef; --line:#cfe0d4; --warm:#f2f7f2; --white:#fff; --green:#2e9e58; --red:#e0665a; --yellow:#f3b53f; --gold:#e8a900; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} body{font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:linear-gradient(160deg,#e6f2ea 0%,var(--bg) 55%,#dcebe2 100%);color:var(--deep);min-height:100vh;padding:16px 12px 40px;} .wrap{max-width:680px;margin:0 auto;} header{text-align:center;padding:18px 10px 6px;} header h1{font-size:26px;color:var(--deep);letter-spacing:1px;} header .sub{color:var(--soft);font-size:13px;margin-top:6px;} .daybar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 6px;} .pill{padding:8px 15px;border-radius:999px;border:2px solid var(--line);background:var(--white);color:var(--soft);font-size:14px;cursor:pointer;transition:.15s;} .pill.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:bold;} .pill:hover{transform:translateY(-1px);} .modes{display:flex;gap:8px;justify-content:center;margin:16px 0 6px;} .mode{padding:10px 20px;border-radius:12px;border:2px solid var(--line);background:var(--white);color:var(--soft);font-size:15px;cursor:pointer;transition:.15s;} .mode.on{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:bold;} .card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:22px 20px;box-shadow:0 10px 26px rgba(46,91,74,.12);margin-top:14px;} .topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .progress{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden;margin:0 12px;} .progress>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--soft),var(--ink));transition:width .3s;border-radius:6px;} .stat{font-size:14px;color:var(--soft);white-space:nowrap;} .stat b{color:var(--ink);font-size:17px;} .q{text-align:center;} .emoji{font-size:64px;line-height:1;margin:10px 0 2px;} .cn{font-size:30px;font-weight:bold;color:var(--deep);} .lv{display:inline-block;margin-top:10px;font-size:12px;color:var(--soft);background:var(--bg);border-radius:6px;padding:2px 10px;} .tone{font-size:13px;color:#8aa697;margin-top:4px;} .slots{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:20px 0 8px;min-height:52px;} .slot{width:42px;height:52px;border:2px dashed var(--line);border-radius:10px;font-size:28px;font-weight:bold;color:var(--ink);display:flex;align-items:center;justify-content:center;background:var(--warm);transition:.15s;} .slot.filled{border-style:solid;border-color:var(--soft);background:#fff;} .slot.ok{background:#e6f7ec;border-color:var(--green);color:var(--green);} .slot.bad{background:#fdecea;border-color:var(--red);color:var(--red);animation:shake .35s;} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .tiles{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0 6px;} .tile{width:46px;height:54px;border-radius:10px;border:2px solid var(--soft);background:var(--white);font-size:28px;font-weight:bold;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s;box-shadow:0 3px 0 rgba(46,91,74,.2);} .tile:hover{transform:translateY(-2px);} .tile:active{transform:translateY(1px);box-shadow:none;} .tile.used{opacity:.18;pointer-events:none;} .answer{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:16px;} .btn{padding:11px 22px;border:none;border-radius:11px;font-size:15px;cursor:pointer;font-weight:bold;transition:.15s;} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--ink);color:#fff;} .btn-ghost{background:var(--bg);color:var(--soft);} .btn-yellow{background:var(--yellow);color:#5b4400;} .btn:disabled{opacity:.4;cursor:not-allowed;} .typebox{display:flex;justify-content:center;gap:10px;align-items:center;margin:18px 0 8px;flex-wrap:wrap;} #txt{width:min(340px,78%);height:54px;border:2px solid var(--soft);border-radius:11px;font-size:26px;text-align:center;color:var(--ink);outline:none;text-transform:lowercase;} #txt:focus{border-color:var(--ink);} .hintbtn{font-size:13px;color:var(--soft);text-decoration:underline;cursor:pointer;background:none;border:none;} .feed{text-align:center;min-height:34px;font-size:16px;font-weight:bold;margin:10px 0 0;} .feed.good{color:var(--green);} .feed.bad{color:var(--red);} .result{text-align:center;padding:10px 0;} .result .big{font-size:52px;} .result h2{font-size:24px;margin:10px 0 4px;} .stars{font-size:40px;letter-spacing:6px;margin:6px 0;} .scoreline{color:var(--soft);font-size:15px;margin-bottom:18px;} .soundbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:13px;color:var(--soft);margin-top:6px;} footer{text-align:center;color:#9db7a8;font-size:12px;margin-top:26px;} .hint{text-align:center;margin-top:4px;min-height:20px;font-size:13px;color:var(--soft);} </style> <script src="report.js"></script> </head> <body> <div class="wrap"> <header> <h1>🦾 Kiki 日日�?· 拼写大闯�?/h1> <div class="sub">剑一 · 剑二 · 剑三单词拼写练习</div> </header> <div class="daybar" id="daybar"></div> <div class="modes"> <button class="mode on" data-mode="tile">字母拼字</button> <button class="mode" data-mode="type">拼写听写</button> </div> <div class="card" id="card"></div> <div class="soundbar"><input type="checkbox" id="snd" checked><label for="snd">音效</label></div> </div> <footer>Kiki · 拼写练习 · 坚持天天�?/footer> <script> // ---------- 数据（第1�?42 词） ---------- const WORDS=[ {d:1,en:"adventure",cn:"冒险",em:"🧭"}, {d:1,en:"ambulance",cn:"救护�?,em:"🚑"}, {d:1,en:"audience",cn:"观众",em:"👏"}, {d:1,en:"camera",cn:"相机",em:"📷"}, {d:1,en:"dolphin",cn:"海豚",em:"🐬"}, {d:1,en:"apple",cn:"苹果",em:"🍎"}, {d:2,en:"basement",cn:"地下�?,em:"🏚�?}, {d:2,en:"behaviour",cn:"行为",em:"🤗"}, {d:2,en:"bracelet",cn:"手镯",em:"💎"}, {d:2,en:"clothes",cn:"衣服",em:"👕"}, {d:2,en:"farmer",cn:"农民",em:"👨‍�?}, {d:2,en:"banana",cn:"香蕉",em:"🍌"}, {d:3,en:"calculator",cn:"计算�?,em:"🧮"}, {d:3,en:"community",cn:"社区",em:"👥"}, {d:3,en:"costume",cn:"服装",em:"🎭"}, {d:3,en:"glasses",cn:"眼镜",em:"👓"}, {d:3,en:"hobby",cn:"爱好",em:"🎯"}, {d:3,en:"cat",cn:"�?,em:"🐱"}, {d:4,en:"competition",cn:"比赛",em:"🏆"}, {d:4,en:"dictionary",cn:"词典",em:"📖"}, {d:4,en:"environment",cn:"环境",em:"🌍"}, {d:4,en:"kitchen",cn:"厨房",em:"🍳"}, {d:4,en:"mirror",cn:"镜子",em:"🪞"}, {d:4,en:"dog",cn:"�?,em:"🐶"}, {d:5,en:"exhibition",cn:"展览",em:"🖼�?}, {d:5,en:"festival",cn:"节日",em:"🎉"}, {d:5,en:"furniture",cn:"家具",em:"🛋�?}, {d:5,en:"necklace",cn:"项链",em:"📿"}, {d:5,en:"planet",cn:"行星",em:"🪐"}, {d:5,en:"fish",cn:"�?,em:"🐟"}, {d:6,en:"garage",cn:"车库",em:"🚗"}, {d:6,en:"helicopter",cn:"直升�?,em:"🚁"}, {d:6,en:"instrument",cn:"乐器",em:"🎹"}, {d:6,en:"question",cn:"问题",em:"�?}, {d:6,en:"village",cn:"村庄",em:"🏘�?}, {d:6,en:"red",cn:"红色�?,em:"🔴"}, {d:7,en:"jewellery",cn:"珠宝",em:"💍"}, {d:7,en:"message",cn:"消息",em:"💬"}, {d:7,en:"temperature",cn:"温度",em:"🌡�?}, {d:7,en:"angry",cn:"生气�?,em:"😠"}, {d:7,en:"weekend",cn:"周末",em:"🗓�?}, {d:7,en:"happy",cn:"开心的",em:"😄"} ]; // ---------- 状�?---------- let state={day:"all",mode:"tile",queue:[],idx:0,score:0,perfect:0,total:0}; let cur=null, filled=[], used=[], attempts=0, hintUse=false; let sndOn=true; const $card=document.getElementById("card"); const AC=g("correct"), AW=g("wrong"), AP=g("win"); function g(n){try{return new Audio("data:audio/wav;base64,"+W[n]);}catch(e){return null;}} // ---------- 工具 ---------- function shuffle(a){a=a.slice();for(let i=a.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[a[i],a[j]]=[a[j],a[i]];}return a;} function level(str){const i=WORDS.findIndex(w=>w.en===str);return ["剑一","剑二","剑三"][[0,1,2][Math.floor(i/6)%3]];} function play(a){if(sndOn&&a){try{a.currentTime=0;a.play();}catch(e){}}} // ---------- 界面：day bar / modes ---------- (function(){ const bar=document.getElementById("daybar"); const pills=[["all","全部"],...Array.from({length:7},(_,i)=>[String(i+1),"Day "+(i+1)])]; bar.innerHTML=pills.map(([v,t])=>`<button class="pill ${v==="all"?"on":""}" data-v="${v}">${t}</button>`).join(""); })(); document.getElementById("daybar").addEventListener("click",e=>{ const p=e.target.closest(".pill");if(!p)return; document.querySelectorAll(".pill").forEach(x=>x.classList.toggle("on",x===p)); state.day=p.dataset.v;start(); }); document.querySelectorAll(".mode").forEach(m=>m.addEventListener("click",()=>{ document.querySelectorAll(".mode").forEach(x=>x.classList.toggle("on",x===m)); state.mode=m.dataset.mode;start(); })); document.getElementById("snd").addEventListener("change",e=>sndOn=e.target.checked); // ---------- 开始新一局 ---------- function start(){ state.queue=state.day==="all"?WORDS.slice():WORDS.filter(w=>w.d==+state.day).slice(); state.queue=shuffle(state.queue); state.idx=0;state.score=0;state.total=state.queue.length; render(); } function nextWord(){ state.idx++; if(state.idx>=state.queue.length){renderResult();return;} render(); } // ---------- 渲染 ---------- function render(){ const cards=$card; if(state.idx>=state.queue.length){renderResult();return;} cur=state.queue[state.idx]; filled=[];used=[];attempts=0;hintUse=false; const pool=shuffle(cur.en.split("")); cards.innerHTML=` <div class="topline"> <div class="stat">�?<b>${state.idx+1}</b>/${state.total}</div> <div class="progress"><i style="width:${(state.idx/state.total*100)}%"></i></div> <div class="stat">得分 <b>${state.score}</b></div> </div> <div class="q"> <div class="emoji">${cur.em}</div> <div class="cn">${cur.cn}</div> <span class="lv">${level(cur.en)}</span> <div class="tone">${state.mode==="tile"?"点选下面的字母拼出单词 �?:"在框里打出这个英文单�?}</div> </div> <div class="slots"></div> <div class="tiles"></div> <div class="hint"></div> <div class="answer"></div> <div class="feed"></div>`; drawSlots(); if(state.mode==="tile"){drawTiles();}else{drawType();} } function drawSlots(){ const el=$card.querySelector(".slots"); el.innerHTML=cur.en.split("").map(()=>`<div class="slot"></div>`).join(""); } function paintSlots(){ const slots=$card.querySelectorAll(".slot"); cur.en.split("").forEach((ch,i)=>{ const s=slots[i]; if(i<filled.length){s.textContent=filled[i];s.classList.add("filled"); s.classList.toggle("ok",filled[i]===ch);s.classList.toggle("bad",filled[i]!==ch); }else{s.textContent="";s.classList.remove("filled","ok","bad");} }); } // ---------- 模式一：字母拼�?---------- function drawTiles(){ const pool=shuffle(cur.en.split("")); const el=$card.querySelector(".tiles"); el.innerHTML=pool.map((ch,i)=>`<button class="tile" data-i="${i}">${ch}</button>`).join(""); const ans=$card.querySelector(".answer"); ans.innerHTML=`<button class="btn btn-ghost" data-a="hint">提示</button> <button class="btn btn-ghost" data-a="clear">重排</button> <button class="btn btn-primary" data-a="ok">确认</button>`; } $card.addEventListener("click",e=>{ const tile=e.target.closest(".tile"); if(tile && state.mode==="tile"){ const i=+tile.dataset.i; if(used[i])return; used[i]=true;tile.classList.add("used"); filled.push(tile.textContent); paintSlots(); if(filled.length===cur.en.length)checkTile(); return; } const btn=e.target.closest(".btn");if(!btn)return; const a=btn.dataset.a; if(a==="hint")applyHint(); else if(a==="clear")resetTiles(); else if(a==="ok")checkTile(); }); function resetTiles(){ filled=[];used=[];attempts=0; const tiles=$card.querySelectorAll(".tile"); tiles.forEach(t=>t.classList.remove("used")); paintSlots(); const f=$card.querySelector(".feed"); if(f)f.textContent=""; } function applyHint(){ if(hintUse)return; hintUse=true; const target=cur.en[filled.length]; const tiles=$card.querySelectorAll(".tile"); for(const t of tiles){ if(t.classList.contains("used"))continue; if(t.textContent===target){ used[+t.dataset.i]=true; t.classList.add("used"); filled.push(target); paintSlots(); break; } } const h=$card.querySelector(".hint"); if(h)h.textContent="已用提示（本词扣2分）"; if(filled.length===cur.en.length)checkTile(); } function checkTile(){ const word=filled.join(""); const f=$card.querySelector(".feed"); if(word===cur.en){ let bonus=attempts===0?10:5; if(attempts===0)bonus+=3; const pts=hintUse?bonus-2:bonus; state.score+=pts; play(AC); const slots=$card.querySelectorAll(".slot");slots.forEach(s=>{s.classList.add("ok");}); if(f)f.className="feed good"; if(f)f.textContent=`太棒了！+${pts} 分`; $card.querySelectorAll(".btn").forEach(b=>b.disabled=true); setTimeout(nextWord,1100); }else{ if(f)f.className="feed bad"; if(f)f.textContent="再试一次！"; play(AW); attempts++; filled=[];used=[]; const slots=$card.querySelectorAll(".slot");slots.forEach(s=>s.classList.add("bad")); setTimeout(()=>{ $card.querySelectorAll(".tile").forEach(t=>t.classList.remove("used")); paintSlots(); },350); } } // ---------- 模式二：拼写听写 ---------- function drawType(){ const el=$card.querySelector(".answer"); el.innerHTML=`<input id="txt" autocomplete="off" spellcheck="false"> <button class="btn btn-ghost" data-a="hint">提示</button> <button class="btn btn-primary" data-a="ok">确认</button>`; setTimeout(()=>{const t=document.getElementById("txt");if(t)t.focus();},50); } $card.addEventListener("input",e=>{ if(e.target.id==="txt"){$card.querySelectorAll(".slot").forEach((s,i)=>{s.textContent=(e.target.value[i]||"");s.classList.toggle("filled",!!e.target.value[i]);}); }}); $card.addEventListener("click",e=>{ const btn=e.target.closest(".btn");if(!btn)return; const a=btn.dataset.a; if(a==="hint"){ if(hintUse)return;hintUse=true; const inp=document.getElementById("txt");if(inp){inp.value+=cur.en[0];inp.dispatchEvent(new Event("input"));} const h=$card.querySelector(".hint");if(h)h.textContent="已补首字母（�?分）"; }else if(a==="ok"){ const inp=document.getElementById("txt");if(!inp)return; const word=inp.value.trim().toLowerCase(); const f=$card.querySelector(".feed"); if(word===cur.en){ const pts=hintUse?4:(attempts===0?10:6); state.score+=pts;play(AC); const slots=$card.querySelectorAll(".slot");slots.forEach(s=>s.classList.add("ok")); if(f)f.className="feed good";if(f)f.textContent=`拼对啦！+${pts} 分`; $card.querySelectorAll(".btn").forEach(b=>b.disabled=true); setTimeout(nextWord,1100); }else{ attempts++;play(AW); if(f)f.className="feed bad";if(f)f.textContent="不对哦，再按一次输入试�?; } } }); $card.addEventListener("keydown",e=>{ if(e.key==="Enter"&&state.mode==="type"){ const b=$card.querySelector('.btn[data-a="ok"]'); if(b)b.click(); } }); // ---------- 结果 ---------- function renderResult(){ const total=state.total,score=state.score; const ratio=total?score/(total*8):0; const stars=ratio>=0.95?"⭐⭐�?:ratio>=0.75?"⭐⭐":"�?; $card.innerHTML=` <div class="result"> <div class="big">🎉</div> <h2>完成�?/h2> <div class="stars">${stars}</div> <div class="scoreline">本组 ${total} 个词 · 总分 <b>${score}</b></div> <button class="btn btn-primary" onclick="start()">再来一局</button> </div>`; if(AP)play(AP); } // ---------- 音效 ---------- const W={ correct:"UklGRiQAAABXRUJQVlA4IBgAAACwAQCdASoIAAgAAwA8JYwCDOBsAFAAAA==", wrong:"UklGRiQAAABXRUJQVlA4IBgAAACwAQCdASoIAAgAAwA8JYwCDOBsAEAAAA==", win:"UklGRiQAAABXRUJQVlA4IBgAAACwAQCdASoIAAgAAwA8JYwCDOBsAFAAAA==" }; start(); </script> <script src="report.js"></script> <script> (function(){ var STUDENT_LIST = ['Kiki']; function addStudentBox(){ if(document.getElementById('studentBox')) return; var head = document.querySelector('.head'); if(!head) return; var box = document.createElement('div'); box.id = 'studentBox'; box.className = 'stat'; box.style.marginTop = '12px'; head.parentNode.insertBefore(box, head.nextSibling); if(typeof renderStudentBox === 'function'){ renderStudentBox('studentBox', STUDENT_LIST); } } function detectEndAndReport(){ var endEl = document.getElementById('end'); if(!endEl) return; var reported = false; var observer = new MutationObserver(function(){ var display = endEl.style.display; if(display && display !== 'none' && !reported){ reported = true; setTimeout(function(){ reportGameScore(); }, 500); } }); observer.observe(endEl, { attributes:true, attributeFilter:['style'], childList:false }); } function reportGameScore(){ if(typeof reportScore !== 'function') return; var student = localStorage.getItem('rowe_student_name'); if(!student) return; var known = 0, total = 0; var endNote = document.getElementById('endNote'); if(endNote){ var text = endNote.textContent || ''; var totalMatch = text.match(/共\s*(\d+)\s*[题个]/); if(totalMatch) total = parseInt(totalMatch[1]); var starMatch = text.match(/[\u2b50\u2605]\s*(\d+)/); var scoreMatch = text.match(/得分\s*(\d+)/); if(starMatch) known = parseInt(starMatch[1]); else if(scoreMatch) known = parseInt(scoreMatch[1]); } if(!total || !known){ var starsEl = document.getElementById('stars'); var totalEl = document.getElementById('total') || document.getElementById('totalCards'); if(starsEl) known = parseInt(starsEl.textContent) || known; if(totalEl) total = parseInt(totalEl.textContent) || total; } var pageTitle = document.title || location.pathname.split('/').pop(); var gameName = pageTitle; var week = 'W?'; var wMatch = pageTitle.match(/W(\d+)/i); if(wMatch) week = 'W' + wMatch[1]; gameName = pageTitle.replace(/.*?W\d+\s*/i, '').replace(/^\u00b7\s*/, '').trim() || pageTitle; var s = document.getElementById('reportStatus'); if(!s && endNote){ var span = document.createElement('span'); span.id = 'reportStatus'; span.style.cssText = 'font-size:12px;color:var(--mm,#40916C);margin-top:6px;display:inline-block'; span.textContent = '... loading'; endNote.appendChild(document.createElement('br')); endNote.appendChild(span); s = span; } if(total <= 0){ if(s){ s.textContent = 'cannot detect score'; s.style.color = '#C0392B'; } return; } if(s){ s.textContent = 'submitting...'; } reportScore({ game:gameName, week:week, known:known, total:total }).then(function(r){ if(!s) return; if(r && r.ok){ s.textContent = 'submitted OK'; s.style.color = '#2D6A4F'; } else if(r && r.pending){ s.textContent = 'offline - will retry'; s.style.color = '#D4A017'; } else{ s.textContent = 'submit failed: ' + (r && r.error || 'unknown'); s.style.color = '#C0392B'; } }); } function init(){ addStudentBox(); detectEndAndReport(); } if(document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', init); } else { init(); } })(); </script> </body> </html>