程序员 写一个html代码 页面显示所有声母韵母 可拉取组合要求1给随机的汉字标音 2 注音正确出现图片1声音1 错误出现图片2声音2 右上角显示积分正确+2错误-1你会怎么写

以下是一个简单的HTML代码示例，实现了随机显示汉字的标音、根据标音的准确性显示不同图片、并在右上角显示积分的功能：

<!DOCTYPE html>
<html>
<head>
    <title>标音练习</title>
    <style>
        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>声母.韵母 组合练习</h1>
    <h2 id="syllable"></h2>
    <img id="image" src="" alt="声音图片">
    <div id="score">积分: 0</div>

    <script>
        var syllables = [
            { chinese: "爸", pinyin: "bā", correct: "1" },
            { chinese: "妈", pinyin: "mā", correct: "1" },
            { chinese: "哥", pinyin: "gē", correct: "1" },
            { chinese: "姐", pinyin: "jiě", correct: "1" },
            { chinese: "弟", pinyin: "dì", correct: "1" },
            { chinese: "妹", pinyin: "mèi", correct: "1" },
            { chinese: "孩", pinyin: "hái", correct: "2" },
            { chinese: "兄", pinyin: "xiōng", correct: "2" },
            { chinese: "妻", pinyin: "qī", correct: "2" },
            { chinese: "夫", pinyin: "fū", correct: "2" }
        ];

        var score = 0;
        var syllableIndex = Math.floor(Math.random() * syllables.length);

        function displaySyllable() {
            var syllable = syllables[syllableIndex];
            document.getElementById("syllable").textContent = syllable.chinese + " - " + syllable.pinyin;
            document.getElementById("image").src = syllable.correct === "1" ? "image1.png" : "image2.png";
        }

        function updateScore(correct) {
            score += correct ? 2 : -1;
            document.getElementById("score").textContent = "积分: " + score;
        }

        displaySyllable();

        document.addEventListener("keydown", function(event) {
            if (event.key === "1" || event.key === "2") {
                var correct = event.key === syllables[syllableIndex].correct;
                updateScore(correct);
                syllableIndex = Math.floor(Math.random() * syllables.length);
                displaySyllable();
            }
        });
    </script>
</body>
</html>

在上面的代码中，我们首先定义了一个syllables数组，其中包含了不同汉字的标音信息。每个标音对象都有chinese（汉字）、pinyin（标音）、correct（标音准确性，1代表正确，2代表错误）属性。

然后，我们使用syllableIndex来随机选择一个标音对象，并将其显示在页面上的<h2>标签中。根据correct属性的值，我们设置了<img>标签的src属性，来显示不同的声音图片。

同时，我们使用score变量来记录积分，并将其显示在页面右上角的<div>标签中。根据用户的输入（按下键盘上的1或2键），我们更新积分，并随机选择下一个标音对象进行显示。

请注意，为了方便测试，你需要将代码中的image1.png和image2.png替换为实际的图片路径

程序员写一个html代码页面显示所有声母韵母可拉取组合要求1给随机的汉字标音 2 注音正确出现图片1声音1 错误出现图片2声音2 右上角显示积分正确+2错误-1你会怎么写

程序员 写一个html代码 页面显示所有声母韵母 可拉取组合要求1给随机的汉字标音 2 注音正确出现图片1声音1 错误出现图片2声音2 右上角显示积分正确+2错误-1你会怎么写

程序员写一个html代码页面显示所有声母韵母可拉取组合要求1给随机的汉字标音 2 注音正确出现图片1声音1 错误出现图片2声音2 右上角显示积分正确+2错误-1你会怎么写