<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼音小测试</title>
    <style>
        *{box-sizing:border-box;font-family:system-ui}
        body{max-width:500px;margin:30px auto;padding:0 16px;background:#f8fafc}
        .box{background:white;padding:24px;border-radius:16px;box-shadow:0 2px 10px #00000015}
        .word{font-size:42px;text-align:center;margin:20px 0;font-weight:bold}
        input{width:100%;padding:12px 14px;font-size:18px;border:2px solid #ddd;border-radius:10px;outline:none}
        input:focus{border-color:#3b82f6}
        .btn{width:100%;margin-top:14px;padding:12px;border:none;background:#3b82f6;color:white;font-size:18px;border-radius:10px}
        .tip{margin-top:16px;font-size:17px;text-align:center}
        .ok{color:#16a34a}
        .no{color:#ef4444}
        .info{margin-top:20px;color:#555}
        .error-item{padding:6px 0}
    </style>
</head>
<body>
    <div class="box">
        <h2 style="text-align:center">📝 拼音测试</h2>
        <div id="question" class="word"></div>
        <input id="answer" placeholder="在这里输入拼音（带声调）">
        <button class="btn" onclick="check()">提交答案</button>
        <div id="msg" class="tip"></div>
        <div class="info">
            <div>✅ 答对：<span id="right">0</span></div>
            <div>❌ 答错：<span id="wrong">0</span></div>
            <div id="errList"></div>
        </div>
        <button class="btn" style="background:#22c55e;margin-top:10px" onclick="nextOne()">下一题</button>
        <button class="btn" style="background:#94a3b8;margin-top:10px" onclick="restart()">重新开始</button>
    </div>

<script>
const wordList = [
    {w:"春天",p:"chūn tiān"},
    {w:"下雨",p:"xià yǔ"},
    {w:"小鸟",p:"xiǎo niǎo"},
    {w:"学校",p:"xué xiào"},
    {w:"开心",p:"kāi xīn"},
    {w:"朋友",p:"péng you"},
    {w:"书本",p:"shū běn"},
    {w:"太阳",p:"tài yáng"},
    {w:"白云",p:"bái yún"},
    {w:"水果",p:"shuǐ guǒ"},
    {w:"高山",p:"gāo shān"},
    {w:"河水",p:"hé shuǐ"},
    {w:"星星",p:"xīng xing"},
    {w:"花朵",p:"huā duǒ"},
    {w:"跑步",p:"pǎo bù"},
]
let pool = []
let now = null
let right = 0
let wrong = 0
let errors = []

function shuffle(arr){
    let a=[...arr]
    for(let i=a.length-1;i>0;i--){
        let j=Math.floor(Math.random()*(i+1))
        [a[i],a[j]]=[a[j],a[i]]
    }
    return a
}
function load(){
    pool=shuffle(wordList)
    right=0;wrong=0;errors=[]
    document.getElementById('right').innerText=right
    document.getElementById('wrong').innerText=wrong
    document.getElementById('errList').innerText=""
    nextOne()
}
function nextOne(){
    if(pool.length===0){
        document.getElementById('question').innerText="🎉全部做完啦！"
        document.getElementById('msg').innerText=""
        return
    }
    now = pool.shift()
    document.getElementById('question').innerText=now.w
    document.getElementById('answer').value=""
    document.getElementById('msg').innerText=""
}
function check(){
    let u = document.getElementById('answer').value.trim()
    if(!now) return
    if(u === now.p){
        document.getElementById('msg').className="tip ok"
        document.getElementById('msg').innerText="✅答对啦！"
        right++
    }else{
        document.getElementById('msg').className="tip no"
        document.getElementById('msg').innerText=`❌错啦！正确：${now.p}`
        wrong++
        errors.push(now)
        document.getElementById('errList').innerHTML=errors.map(x=>`<div class="error-item">${x.w}：${x.p}</div>`).join('')
    }
    document.getElementById('right').innerText=right
    document.getElementById('wrong').innerText=wrong
}
function restart(){
    load()
}
load()
</script>
</body>
</html>
