数轴动画助理解有理数比较 - 知达AI助教 | 教育人工智能案例

帮我生成有理数比较的教学dong’hua
以下是一个有理数比较教学的HTML页面，包含简单的动画效果和中文说明。页面通过视觉化的方式帮助学生理解有理数的比较规则。

代码生成完成

页面功能说明：

数轴展示：页面包含一个数轴，标有从 -3 到 2 的刻度，用于直观显示有理数的位置。

动画效果：点击“比较有理数”按钮后，两个橙色圆点会沿数轴移动到指定位置（例如 -2 和 2）。

比较规则解释：动画结束后，页面会显示文字解释，说明如何通过数轴比较有理

知达任务回放中

数轴动画助理解有理数比较

代码

预览

90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
            <div class="point" id="pointA" style="left: 40%;"
                ></div>
            <div class="point" id="pointB" style="left: 70%;"
                ></div>
        </div>
    </div>
    <button onclick="compareNumbers()">比较有理数</button>
    <div class="explanation" id="explanation">
        点击按钮查看两个有理数的比较结果！
    </div>
    <script>
        function compareNumbers() {
            const pointA = document.getElementById('pointA');
            const pointB = document.getElementById('pointB');
            const explanation = document.getElementById
                ('explanation');
            // 移动点到新位置
            pointA.style.left = '25%'; // -2
            pointB.style.left = '85%'; // 2
            // 显示比较结果
            setTimeout(() => {
                explanation.innerHTML = `
                    在数轴上，数字越靠右，值越大。<br>
                    -2 位于 2 的左边，因此 -2 < 2。
                `;
            }, 1000);
        }
    </script>
</body>
</html>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

页面功能说明：