汉字注音练习 - 在线互动学习工具 - 常规

<!DOCTYPE html>
<html>
<head>
    <title>汉字注音练习</title>
    <style>
        #score {
            position: fixed;
            top: 10px;
            right: 10px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>汉字注音练习</h1>
    <div id="score">积分: <span id="points">0</span></div>
    <div id="combination"></div>
    <div id="feedback"></div>
    <div id="result"></div>
<pre><code>&lt;script&gt;
    // 声母列表
    var initials = ['b', 'p', 'm', 'f', 'd', 't', 'n', 'l', 'g', 'k', 'h', 'j', 'q', 'x', 'zh', 'ch', 'sh', 'r', 'z', 'c', 's'];

    // 韵母列表
    var finals = ['a', 'o', 'e', 'i', 'u', 'v', 'ai', 'ei', 'ui', 'ao', 'ou', 'iu', 'ie', 've', 'er', 'an', 'en', 'in', 'un', 'vn', 'ang', 'eng', 'ing', 'ong'];

    // 图片路径
    var correctImage = 'image1.png';
    var incorrectImage = 'image2.png';

    // 当前积分
    var points = 0;

    // 随机生成声母和韵母的组合
    function generateCombination() {
        var initial = initials[Math.floor(Math.random() * initials.length)];
        var final = finals[Math.floor(Math.random() * finals.length)];
        return initial + final;
    }

    // 更新页面上的组合显示
    function updateCombination() {
        var combination = generateCombination();
        document.getElementById('combination').innerHTML = combination;
        document.getElementById('feedback').innerHTML = '';
        document.getElementById('result').innerHTML = '';
    }

    // 处理用户注音
    function handlePronunciation(pronunciation) {
        var combination = document.getElementById('combination').innerHTML;
        if (pronunciation === combination) {
            document.getElementById('result').innerHTML = '&lt;img src=' + correctImage + '&gt;声音1';
            points++;
        } else {
            document.getElementById('result').innerHTML = '&lt;img src=' + incorrectImage + '&gt;声音2';
            points--;
        }
        document.getElementById('points').innerHTML = points;
        updateCombination();
    }

    // 监听键盘事件
    document.addEventListener('keyup', function(event) {
        handlePronunciation(event.key);
    });

    // 初始化页面
    updateCombination();
&lt;/script&gt;
</code></pre>
</body>
</html>