Vincent · W3 拼写大挑�?/title> <style> *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} :root{ --d:#1B4332;--m:#2D6A4F;--mm:#40916C;--l:#52B788;--p:#95D5B2; --bg:#F0F7F4;--card:#FFFFFF;--bd:#B7E4C7;--ok:#2D6A4F;--bad:#C0392B; --text:#1B4332;--text-l:#52796F;--gold:#D4A017; } body{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh} .wrap{max-width:560px;margin:0 auto;padding:14px 14px 40px} .head{background:linear-gradient(135deg,var(--d),var(--m));color:#fff;border-radius:18px;padding:18px 18px 14px;box-shadow:0 4px 14px rgba(27,67,50,.18)} .head h1{font-size:20px;letter-spacing:.5px;display:flex;align-items:center;gap:8px} .head .sub{font-size:12px;opacity:.85;margin-top:4px} .meta{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap} .chip{background:rgba(255,255,255,.16);border-radius:14px;padding:3px 10px;font-size:11px} .day-bar{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin:14px 0 10px} .day-bar::-webkit-scrollbar{display:none} .day-btn{flex:0 0 auto;border:1.5px solid var(--bd);background:var(--card);border-radius:14px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--text-l);cursor:pointer;white-space:nowrap} .day-btn.on{background:var(--m);color:#fff;border-color:var(--m)} .stat{display:flex;justify-content:space-between;align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:9px 14px;margin:8px 0 12px;font-size:12.5px;color:var(--text-l);box-shadow:0 2px 8px rgba(27,67,50,.05)} .stat b{color:var(--d);font-size:14px} .stat .score{color:var(--m)} .stat .star{color:var(--gold)} .spell-area{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:22px 16px;box-shadow:0 4px 16px rgba(27,67,50,.08);text-align:center} .spell-emo{font-size:54px;margin-bottom:2px} .spell-cn{font-size:17px;color:var(--text-l);margin-bottom:4px;font-weight:600} .spell-tag{display:inline-block;font-size:11px;font-weight:700;border-radius:12px;padding:2px 10px;margin-bottom:12px} .spell-tag.t2{background:#D0EBD8;color:#1B5E20} .spell-tag.t3{background:#C7E3F5;color:#0B3D66} .letter-slots{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin:6px 0 14px;min-height:54px} .letter-slot{width:38px;height:48px;border-bottom:3px solid var(--mm);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--d);text-transform:lowercase} .letter-slot.space{border-bottom:none;width:14px} .letter-slot.filled{color:var(--m)} .letter-slot.wrong{color:var(--bad);animation:shake .3s} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}} .keyboard{margin-top:14px} .kb-row{display:flex;justify-content:center;gap:4px;margin-bottom:5px} .key{flex:1;max-width:38px;height:44px;border:1.5px solid var(--bd);background:#F6FBF8;border-radius:8px;font-size:16px;font-weight:600;color:var(--d);cursor:pointer;display:flex;align-items:center;justify-content:center;text-transform:lowercase;transition:.1s} .key:active{transform:scale(.92);background:var(--p)} .key.wide{max-width:70px;font-size:12px;background:var(--m);color:#fff;border-color:var(--m);font-weight:700} .key.wide.sec{background:#e8e0d0;color:#6b5b2a;border-color:#d4c8a8} .spell-feedback{height:22px;font-size:13px;font-weight:700;margin-top:8px} .spell-feedback.ok{color:var(--ok)} .spell-feedback.no{color:var(--bad)} .spell-actions{display:flex;gap:8px;margin-top:14px;justify-content:center;flex-wrap:wrap} .spell-btn{border:none;border-radius:20px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer} .spell-btn.hint{background:var(--p);color:var(--d)} .spell-btn.skip{background:#e8e0d0;color:#6b5b2a} .end{display:none;text-align:center;background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:28px 20px;margin-top:6px} .end .emo{font-size:52px} .end h2{font-size:22px;color:var(--d);margin:6px 0} .end .note{font-size:13px;color:var(--text-l);margin-bottom:14px;line-height:1.6} .btn{display:inline-block;border:none;background:var(--m);color:#fff;border-radius:24px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;margin:4px} .btn.ghost{background:var(--card);color:var(--m);border:2px solid var(--m)} .btn-row{margin-top:8px} .foot{text-align:center;font-size:11px;color:var(--text-l);margin-top:18px;line-height:1.7} .toast{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%) scale(.6);background:var(--ok);color:#fff;padding:14px 28px;border-radius:30px;font-size:18px;font-weight:800;opacity:0;pointer-events:none;z-index:999;transition:all .25s;box-shadow:0 4px 20px rgba(0,0,0,.3)} .toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);} .toast.bad{background:var(--bad)} @media(max-width:380px){ .letter-slot{width:30px;height:42px;font-size:18px} .key{max-width:32px;height:40px;font-size:14px} .key.wide{max-width:60px;font-size:11px} } </style> <script src="report.js"></script> </head> <body> <div class="wrap"> <div class="head"> <h1>🌳 Vincent · W3 拼写大挑�?/h1> <div class="sub">剑二 + 剑三 · 6 �?90 �?· 看中文拼英文</div> <div class="meta"> <span class="chip">✍️ 字母拼写</span><span class="chip">💡 可提�?/span><span class="chip">📱 手机可玩</span> </div> </div> <div id="studentBox" class="stat" style="margin-top:12px"></div> <div class="day-bar" id="dayBar"></div> <div class="stat"> <span>�?<b id="cur">1</b> / <b id="total">0</b> �?/span> <span>得分 <b class="score" id="score">0</b></span> <span class="star">�?<b id="stars">0</b></span> </div> <div class="spell-area"> <div class="spell-emo" id="spellEmoji">🌳</div> <div class="spell-cn" id="spellCn">�?/div> <span class="spell-tag t2" id="spellTag">剑二</span> <div class="letter-slots" id="letterSlots"></div> <div class="spell-feedback" id="spellFb"> </div> <div class="keyboard" id="keyboard"></div> <div class="spell-actions"> <button class="spell-btn hint" onclick="spellHint()">💡 提示一个字�?/button> <button class="spell-btn skip" onclick="spellSkip()">跳过 �?/button> </div> </div> <div class="end" id="end"> <div class="emo" id="endEmo">🎉</div> <h2 id="endTitle"></h2> <div class="note" id="endNote"></div> <div class="btn-row"> <button class="btn" onclick="restart()">再玩一�?/button> </div> </div> <div class="foot">Vincent · W3 剑二剑三词汇 · 拼字练习</div> </div> <div class="toast" id="toast"></div> <script> // ===== 词库 W3 ===== const DAYS = { 1:[ ["tree","�?,2,"🌳"],["flower","�?,2,"🌸"],["river","河流",2,"🏞�?], ["sea","大海",2,"🌊"],["bird","�?,2,"🐦"],["duck","鸭子",2,"🦆"], ["field","田野",2,"🌾"],["hill","小山",2,"⛰️"],["grass","�?,2,"🌿"], ["forest","森林",3,"🌲"],["island","岛屿",3,"🏝�?],["mountain","高山",3,"🏔�?], ["lion","狮子",3,"🦁"],["tiger","老虎",3,"🐯"],["wolf","�?,3,"🐺"] ], 2:[ ["apple","苹果",2,"🍎"],["banana","香蕉",2,"🍌"],["bread","面包",2,"🍞"], ["cake","蛋糕",2,"🍰"],["juice","果汁",2,"🧃"],["milk","牛奶",2,"🥛"], ["rice","米饭",2,"🍚"],["egg","鸡蛋",2,"🥚"],["cook","烹饪",2,"🍳"], ["cheese","奶酪",3,"🧀"],["carrot","胡萝�?,3,"🥕"],["potato","土豆",3,"🥔"], ["tomato","番茄",3,"🍅"],["salad","沙拉",3,"🥗"],["grape","葡萄",3,"🍇"] ], 3:[ ["doctor","医生",2,"👨‍⚕�?],["nurse","护士",2,"👩‍⚕�?],["farmer","农民",2,"🧑‍�?], ["driver","司机",2,"🚗"],["singer","歌手",2,"🎤"],["dancer","舞�?,2,"💃"], ["vet","兽医",2,"🐾"],["postman","邮递员",2,"📮"],["cleaner","清洁�?,2,"🧹"], ["dentist","牙医",3,"🦷"],["waiter","服务�?,3,"🤵"],["builder","建筑�?,3,"🧱"], ["artist","画家",3,"🎨"],["manager","经理",3,"💼"],["firefighter","消防�?,3,"🚒"] ], 4:[ ["park","公园",2,"🏞�?],["zoo","动物�?,2,"🦁"],["hospital","医院",2,"🏥"], ["shop","商店",2,"🏪"],["restaurant","餐馆",2,"🍽�?],["hotel","酒店",2,"🏨"], ["bank","银行",2,"🏦"],["cafe","咖啡�?,2,"�?],["playground","操场",2,"🛝"], ["theatre","剧院",3,"🎭"],["factory","工厂",3,"🏭"],["garage","车库",3,"🚗"], ["stadium","体育�?,3,"🏟�?],["tower","�?,3,"🗼"],["countryside","乡村",3,"🏘�?] ], 5:[ ["paper","�?,2,"📄"],["wood","木头",2,"🪵"],["bag","�?,2,"👜"], ["box","盒子",2,"📦"],["key","钥匙",2,"🔑"],["map","地图",2,"🗺�?], ["letter","�?,2,"✉️"],["stamp","邮票",2,"🏷�?],["card","卡片",2,"🃏"], ["glass","玻璃",3,"🍸"],["metal","金属",3,"⚙️"],["plastic","塑料",3,"♻️"], ["gold","黄金",3,"🥇"],["silver","�?,3,"🥈"],["rubber","橡胶",3,"🧽"] ], 6:[ ["head","�?,2,"🤯"],["arm","手臂",2,"💪"],["leg","�?,2,"🦵"], ["hand","�?,2,"🖐�?],["foot","�?,2,"🦶"],["finger","手指",2,"👉"], ["body","身体",2,"🧍"],["face","�?,2,"🙂"],["hair","头发",2,"💇"], ["neck","脖子",3,"🧣"],["shoulder","肩膀",3,"🤷"],["stomach","�?,3,"🤰"], ["heel","脚后�?,3,"👠"],["toe","脚趾",3,"👣"],["back","�?,3,"🔙"] ] }; const DAY_NAMES = {1:"Day1 自然与动�?,2:"Day2 食物与烹�?,3:"Day3 职业与工�?,4:"Day4 地方与设�?,5:"Day5 材料与物�?,6:"Day6 身体与健�?}; const DAY_KEYS = ['1','2','3','4','5','6']; const QWERTY = [ ['q','w','e','r','t','y','u','i','o','p'], ['a','s','d','f','g','h','j','k','l'], ['z','x','c','v','b','n','m'] ]; let day = 'all', score = 0, stars = 0; let pool = [], idx = 0, answer = '', input = [], hintsUsed = 0; function initDayBar(){ const bar = document.getElementById('dayBar'); bar.innerHTML = ''; const items = [{k:'all',n:'全部 90 �?},...DAY_KEYS.map(k=>({k, n:DAY_NAMES[k]}))]; items.forEach(it=>{ const b = document.createElement('button'); b.className = 'day-btn' + (it.k===day?' on':''); b.textContent = it.n; b.onclick = ()=>{ day = it.k; initDayBar(); restart(); }; bar.appendChild(b); }); } function getPool(){ if(day==='all') return Object.values(DAYS).flat(); return DAYS[day].slice(); } function shuffled(a){const b=a.slice();for(let i=b.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[b[i],b[j]]=[b[j],b[i]];}return b;} function startSpell(){ pool = shuffled(getPool()); idx = 0; score = 0; stars = 0; nextSpell(); updateStat(); } function nextSpell(){ if(idx >= pool.length){ finishSpell(); return; } const w = pool[idx]; answer = w[0].toLowerCase(); input = []; hintsUsed = 0; document.getElementById('spellEmoji').textContent = w[3]; document.getElementById('spellCn').textContent = w[1]; const tag = document.getElementById('spellTag'); tag.textContent = w[2]===2?'剑二':'剑三'; tag.className = 'spell-tag ' + (w[2]===2?'t2':'t3'); renderLetterSlots(); renderKeyboard(); document.getElementById('spellFb').innerHTML = ' '; updateStat(); } function renderLetterSlots(){ const box = document.getElementById('letterSlots'); box.innerHTML = ''; for(let i=0;i<answer.length;i++){ const ch = answer[i]; if(ch===' ' || ch==='-'){ const sp = document.createElement('div'); sp.className = 'letter-slot space'; sp.textContent = ch===' '?' ':'-'; sp.style.fontSize = '18px'; box.appendChild(sp); } else { const slot = document.createElement('div'); slot.className = 'letter-slot'; const inpIdx = getInputIndexForPos(i); if(inpIdx !== -1 && inpIdx < input.length){ slot.textContent = input[inpIdx]; slot.classList.add('filled'); } box.appendChild(slot); } } } function getInputIndexForPos(pos){ let count = 0; for(let i=0;i<pos;i++){ if(answer[i] !== ' ' && answer[i] !== '-') count++; } return count; } function getLetterCount(){ return answer.replace(/[ -]/g,'').length; } function renderKeyboard(){ const kb = document.getElementById('keyboard'); kb.innerHTML = ''; QWERTY.forEach((row, ri)=>{ const rowEl = document.createElement('div'); rowEl.className = 'kb-row'; if(ri === 2){ const del = document.createElement('div'); del.className = 'key wide sec'; del.textContent = '�?�?; del.onclick = backspace; rowEl.appendChild(del); } row.forEach(letter=>{ const k = document.createElement('div'); k.className = 'key'; k.textContent = letter; k.dataset.letter = letter; k.onclick = ()=>pressKey(letter); rowEl.appendChild(k); }); if(ri === 2){ const ent = document.createElement('div'); ent.className = 'key wide'; ent.textContent = '确认 �?; ent.onclick = checkSpell; rowEl.appendChild(ent); } kb.appendChild(rowEl); }); } function pressKey(letter){ if(input.length >= getLetterCount()) return; input.push(letter); renderLetterSlots(); document.getElementById('spellFb').innerHTML = ' '; if(input.length === getLetterCount()){ setTimeout(checkSpell, 200); } } function backspace(){ if(input.length > 0){ input.pop(); document.getElementById('spellFb').innerHTML = ' '; renderLetterSlots(); } } function checkSpell(){ const cleanAns = answer.replace(/[ -]/g,''); const typed = input.join(''); const fb = document.getElementById('spellFb'); if(typed === cleanAns){ const gained = Math.max(5, 15 - hintsUsed * 3); score += gained; stars++; fb.textContent = '�?正确�?' + gained + '�?; fb.className = 'spell-feedback ok'; showToast('正确�?' + gained + '�?); setTimeout(()=>{ idx++; nextSpell(); }, 800); } else { fb.textContent = '�?不对，再想想�?; fb.className = 'spell-feedback no'; showToast('再试�?, true); const slots = document.querySelectorAll('.letter-slot:not(.space)'); const lastIdx = input.length - 1; if(slots[lastIdx]){ slots[lastIdx].classList.add('wrong'); setTimeout(()=>slots[lastIdx].classList.remove('wrong'), 400); } } updateStat(); } function spellHint(){ const cleanAns = answer.replace(/[ -]/g,''); if(hintsUsed >= Math.ceil(cleanAns.length/2)){ showToast('提示用完�?, true); return; } const nextLetter = cleanAns[input.length]; if(!nextLetter) return; input.push(nextLetter); hintsUsed++; renderLetterSlots(); document.getElementById('spellFb').innerHTML = '<span style="color:var(--mm)">提示�? + nextLetter + '</span>'; if(input.length === cleanAns.length) setTimeout(checkSpell, 300); } function spellSkip(){ const fb = document.getElementById('spellFb'); fb.innerHTML = '<span style="color:var(--text-l)">答案�? + answer + '</span>'; fb.className = 'spell-feedback'; score = Math.max(0, score - 3); updateStat(); setTimeout(()=>{ idx++; nextSpell(); }, 1500); } function finishSpell(){ document.querySelector('.spell-area').style.display = 'none'; showEnd(); } function updateStat(){ document.getElementById('cur').textContent = Math.min(idx+1, pool.length); document.getElementById('total').textContent = pool.length; document.getElementById('score').textContent = score; document.getElementById('stars').textContent = stars; } function showEnd(){ const e = document.getElementById('end'); e.style.display = 'block'; const total = pool.length; const ratio = stars / total; let emo, title, note; if(ratio >= 0.9){ emo='🏆'; title='太棒了，全对�?; note='拼写掌握得非常牢�?; } else if(ratio >= 0.7){ emo='🌟'; title='好厉害！'; note='正确率很高，再来一次冲满分�?; } else if(ratio >= 0.5){ emo='💪'; title='不错哦！'; note='继续多玩几遍，越拼越熟练�?; } else{ emo='🌱'; title='再加把劲�?; note='先选某一天的词反复练，熟悉后再挑战全部�?; } document.getElementById('endEmo').textContent = emo; document.getElementById('endTitle').textContent = title; document.getElementById('endNote').innerHTML = note + `<br>（共 ${total} �?· 得分 ${score} · �?{stars}�?br><span id="reportStatus" style="font-size:12px;color:var(--mm,#40916C);margin-top:6px;display:inline-block">�?上报�?..</span>`; // 上报成绩 if(typeof reportScore === 'function'){ reportScore({ game:'拼写大挑�?, week:'W3', known:stars, total:total }).then(r=>{ const s = document.getElementById('reportStatus'); if(!s) return; if(r && r.ok){ s.textContent = '�?已上报老师'; s.style.color = '#2D6A4F'; } else if(r && r.pending){ s.textContent = '📡 无网络，稍后自动上报'; s.style.color = '#D4A017'; } else{ s.textContent = '�?上报失败�? + (r?.error || '未知'); s.style.color = '#C0392B'; } }); } } function restart(){ document.getElementById('end').style.display = 'none'; document.querySelector('.spell-area').style.display = 'block'; startSpell(); window.scrollTo({top:0, behavior:'smooth'}); } function showToast(text, isBad){ const t = document.getElementById('toast'); if(!t) return; t.textContent = text; t.className = 'toast show' + (isBad?' bad':''); clearTimeout(showToast._t); showToast._t = setTimeout(()=>t.classList.remove('show'), 700); } document.addEventListener('keydown', e=>{ if(e.key === 'Backspace'){ backspace(); e.preventDefault(); } else if(e.key === 'Enter'){ checkSpell(); e.preventDefault(); } else if(/^[a-zA-Z]$/.test(e.key)){ pressKey(e.key.toLowerCase()); } }); initDayBar(); if(typeof renderStudentBox === 'function') renderStudentBox('studentBox', ['Vincent']); startSpell(); </script> <script src="report.js"></script> <script> (function(){ var STUDENT_LIST = ['Vincent']; 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>