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:#fff;--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} .head h1{font-size:20px;letter-spacing:.5px} .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)} .q-area{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:26px 16px;box-shadow:0 4px 16px rgba(27,67,50,.08);text-align:center} .q-emo{font-size:62px;margin-bottom:6px} .q-cn{font-size:22px;color:var(--d);font-weight:700;margin-bottom:4px} .q-tag{display:inline-block;font-size:11px;font-weight:700;border-radius:12px;padding:2px 10px;margin-bottom:16px} .q-tag.t2{background:#D0EBD8;color:#1B5E20} .q-tag.t3{background:#C7E3F5;color:#0B3D66} .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px} .opt{border:2px solid var(--bd);background:#F6FBF8;border-radius:14px;padding:16px 8px;font-size:17px;font-weight:700;color:var(--d);cursor:pointer;text-transform:lowercase;transition:.12s;min-height:60px;display:flex;align-items:center;justify-content:center} .opt:active{transform:scale(.95);background:var(--p)} .opt.correct{background:var(--ok);color:#fff;border-color:var(--ok)} .opt.wrong{background:var(--bad);color:#fff;border-color:var(--bad)} .opt.dim{opacity:.35;pointer-events:none} .q-fb{height:24px;font-size:14px;font-weight:700;margin-top:14px} .q-fb.ok{color:var(--ok)} .q-fb.no{color:var(--bad)} .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} .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){.opt{font-size:15px;padding:14px 6px}} </style> <script src="report.js"></script> </head> <body> <div class="wrap"> <div class="head"> <h1>�?Vincent · W3 快选闯�?/h1> <div class="sub">看中文，选出正确的英文单�?· 剑二 + 剑三 90 �?/div> <div class="meta"><span class="chip">🔀 四选一</span><span class="chip">⏱️ 快速复�?/span><span class="chip">📱 手机可玩</span></div> </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="q-area"> <div class="q-emo" id="qEmoji">🌳</div> <div class="q-cn" id="qCn">�?/div> <span class="q-tag t2" id="qTag">剑二</span> <div class="opts" id="opts"></div> <div class="q-fb" id="qFb"> </div> </div> <div class="end" id="end"> <div class="emo" id="endEmo">🎉</div> <h2 id="endTitle"></h2> <div class="note" id="endNote"></div> <button class="btn" onclick="restart()">再玩一�?/button> </div> <div class="foot">Vincent · W3 剑二剑三词汇 · 快选闯�?/div> </div> <div class="toast" id="toast"></div> <script> 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']; let day='all', score=0, stars=0, pool=[], idx=0, answered=false; 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 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 start(){pool=shuffled(getPool());idx=0;score=0;stars=0;next();updateStat();} function allWords(){return Object.values(DAYS).flat();} function next(){ if(idx>=pool.length){finish();return;} answered=false; const w=pool[idx]; document.getElementById('qEmoji').textContent=w[3]; document.getElementById('qCn').textContent=w[1]; const tag=document.getElementById('qTag');tag.textContent=w[2]===2?'剑二':'剑三';tag.className='q-tag '+(w[2]===2?'t2':'t3'); const all=allWords(); const wrongs=shuffled(all.filter(x=>x[0]!==w[0])).slice(0,3).map(x=>x[0]); const opts=shuffled([w[0],...wrongs]); const box=document.getElementById('opts');box.innerHTML=''; opts.forEach(o=>{const d=document.createElement('div');d.className='opt';d.textContent=o;d.onclick=()=>choose(d,o,w[0]);box.appendChild(d);}); document.getElementById('qFb').innerHTML=' '; updateStat(); } function choose(el,val,ans){ if(answered)return; answered=true; const fb=document.getElementById('qFb'); const all=document.querySelectorAll('.opt'); if(val===ans){ score+=10;stars++; el.classList.add('correct'); all.forEach(x=>{if(x!==el)x.classList.add('dim');}); fb.innerHTML='�?正确�?10�?;fb.className='q-fb ok'; showToast('正确�?10'); setTimeout(()=>{idx++;next();},800); }else{ el.classList.add('wrong'); all.forEach(x=>{if(x.textContent!==ans)x.classList.add('dim');}); all.forEach(x=>{if(x.textContent===ans)x.classList.add('correct');}); fb.innerHTML='�?正确答案�?+ans;fb.className='q-fb no'; showToast('再想�?,true); setTimeout(()=>{idx++;next();},1300); } updateStat(); } function finish(){document.querySelector('.q-area').style.display='none';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').textContent=note+`（共 ${total} �?· 得分 ${score} · �?{stars}）`;} 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 restart(){document.getElementById('end').style.display='none';document.querySelector('.q-area').style.display='block';start();window.scrollTo({top:0,behavior:'smooth'});} function showToast(t,bad){const t2=document.getElementById('toast');t2.textContent=t;t2.className='toast show'+(bad?' bad':'');clearTimeout(showToast._t);showToast._t=setTimeout(()=>t2.classList.remove('show'),700);} initDayBar();start(); </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>