小学科学教学论坛

https://chat.deepseek.com/

deep seek+豆包


给AI科学助教发布指令：
1.找一张比较真实的地球，月球，与太阳三者的位置图，2.在位置图上标注三个位置，通过调整人的观察位置，可以在一个小窗口看到，从A位置看到的现象太阳大月球小，移动到B位置可以看到太阳小月球大，移动到C位置，可以看到太阳和月球一样大，以html结构为答案，3.A、B、C三个位置可以在宇宙中，不一定在地球上，把C位置放到地球上，看到太阳和月球差不多大，并且从三个位置看到的月球与太阳分开，不要重叠

最终效果：

https://www.doubao.com/share/code/43c157a726caa861

第一代

第二代

第三代

    天体视大小观测模拟（修正版）
    
        .main-container {
            width: 1200px;
            height: 800px;
            margin: 20px auto;
            position: relative;
            background: url('https://www.esa.int/var/esa/storage/images/esa_multimedia/images/2013/04/solar_system/12761224-2-eng-GB/Solar_System_pillars.jpg') center/cover;
        }

        .celestial {
            position: absolute;
            border-radius: 50%;
            transition: all 0.3s ease-out;
        }

        #sun {
            width: 180px;
            height: 180px;
            background: url('https://upload.wikimedia.org/wikipedia/commons/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg') center/cover;
            top: 20%;
            left: 15%;
        }

        #earth {
            width: 100px;
            height: 100px;
            background: url('https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg') center/cover;
            top: 50%;
            left: 45%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 30px rgba(0, 128, 255, 0.5);
        }

        #moon {
            width: 40px;
            height: 40px;
            background: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg') center/cover;
            top: 55%;
            left: 55%;
        }

        .observation-point {
            position: absolute;
            width: 35px;
            height: 35px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            transition: all 0.3s;
            border: 2px solid cyan;
        }

        /* 观测点新定位 */
        #pointA { top: 40%; left: 30%; }  /* 太阳与地球中间 */
        #pointB { top: 70%; left: 70%; }  /* 深空位置 */
        #pointC {                        /* 地球表面 */
            top: 50%;
            left: 45%;
            transform: translate(-50%, -50%);
            background: rgba(255,255,255,0.7);
        }

        .viewport {
            width: 400px;
            height: 300px;
            border: 3px solid rgba(255,255,255,0.8);
            position: fixed;
            top: 50px;
            right: 50px;
            background: rgba(0,0,0,0.95);
            overflow: hidden;
            border-radius: 10px;
        }

        .view-object {
            position: absolute;
            border-radius: 50%;
            transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

        #viewSun {
            background: radial-gradient(#ffae00, #ff4500);
            box-shadow: 0 0 80px #ff8c00;
        }

        #viewMoon {
            background: radial-gradient(#888, #444);
            box-shadow: 0 0 40px #666;
        }
    


    <div class="main-container">
        <div class="celestial"></div>
        <div class="celestial"></div>
        <div class="celestial"></div>
        
        <div class="observation-point">A</div>
        <div class="observation-point">B</div>
        <div class="observation-point">C</div>

        <div class="viewport">
            <div class="view-object"></div>
            <div class="view-object"></div>
        </div>
    </div>

    
        const viewSun = document.getElementById('viewSun');
        const viewMoon = document.getElementById('viewMoon');

        const viewConfig = {
            A: { // 太阳与地球中间
                sunSize: 180,
                sunX: '15%',
                sunY: '30%',
                moonSize: 40,
                moonX: '75%',
                moonY: '60%'
            },
            B: { // 深空观测点
                sunSize: 60,
                sunX: '80%',
                sunY: '70%',
                moonSize: 160,
                moonX: '20%',
                moonY: '30%'
            },
            C: { // 地球表面
                sunSize: 100,
                sunX: '30%',
                sunY: '45%',
                moonSize: 95,
                moonX: '70%',
                moonY: '45%'
            }
        };

        function setView(position) {
            const cfg = viewConfig[position];
            
            // 设置太阳参数
            viewSun.style.width = viewSun.style.height = `${cfg.sunSize}px`;
            viewSun.style.left = cfg.sunX;
            viewSun.style.top = cfg.sunY;
            
            // 设置月球参数
            viewMoon.style.width = viewMoon.style.height = `${cfg.moonSize}px`;
            viewMoon.style.left = cfg.moonX;
            viewMoon.style.top = cfg.moonY;
        }

        // 初始化设置
        setView('C');

AI根据教学的需求的调整，真的是时代的进步

AI辅助教学太厉害了，学生可以更直观地感受。

指令准确也非常重要，让ai听得懂

直观模拟，将抽象知识变形象，帮助理解:default69:

AI辅助教学，虚拟动画变得便捷许多

这个位置有点抽象，学生看起来可能会有困难，最好有一张立体图，让学生清楚看到观察者在宇宙中的位置，就更好了。

像这样子的代码要怎么用呀？放到哪里去？

ai产生的影响越来越大，如何在教学中引导学生新技术的适应和创新，值得思考

这个代码是放到哪里用啊？

同问，代码是要放到哪里用呀？

代码好像放在记事本，修改后缀html

代码看起来有点复杂~

ai助力高效教学

抽象变直观

同问代码如何使用

花面膜泥还是不够直观，学生具象思维比抽象思维好用的多，有没有什么AR眼镜能身临其境。

哈哈，ai时代真的来了

AI的辅助作用越来越多了~

确实是非常直观

还可以这样用，学习了

未来是属于会使用ai的人

学习提问的能力

很直观生动

AI时代，怎样用好AI工具，懂得喂对指令很重要啊。

有了AI  ，科普视频越来越简单了么呢

提问很有技巧。