OpenVibeBETA

交互练习 · 跟做练习

小学高段 · 9–12 岁建议成人支持课堂场景

布置一座自己的数字植物园

拖动植物、调整层次和说明文字，用网页空间表达一种真实的生态观察。

打开原项目 先做第一个变化
看到第一个变化
15 分钟内
做出完整版本
120 分钟内
运行方式
下载 3-terrarium/solution 目录后直接打开 index.html
使用的积木
HTML / CSS / JavaScript / DOM

FIRST VISIBLE CHANGE

先做这一件事

拖动一株植物到新位置，并把页面标题改成自己的环境主题。

CREATOR LOOP / 创造者六环

前五环长能力，最后一环长身份。

  • 科学
  • 艺术
  • 信息科技
  1. 01
    问题

    思考怎样用有限空间表达一种植物生长环境。

  2. 02
    知识

    学习植物需求、空间层次以及 DOM 元素与坐标关系。

  3. 03
    工具

    使用拖放与 CSS 布局实现自己的环境规则。

  4. 04
    作品

    完成一座可拖动、有统一环境主题和可靠说明的数字植物园。

  5. 05
    反馈

    请同伴找出一处不理解或不合理的布局并据此修改。

  6. 06
    身份

    能够署名解释布局规则、事实来源和自己做出的生态判断。

你必须亲自做

  • 决定环境主题与植物布局规则
  • 亲自判断哪些说明可靠并选择引用来源

AI 可以帮助

  • 解释 DOM、拖动坐标和 CSS 层次
  • 协助整理来源格式和检查布局代码

完成前要验证

  • 用可靠来源核对植物说明，并请同伴检查布局规则

三段路径 · 自动保存在本机

从第一个变化，到你的版本

0/ 3 步
0115 分钟
  1. 打开页面
  2. 拖动一株植物
  3. 修改植物园标题

做完的标志：植物能被拖动，页面显示你的主题。

0245 分钟
  1. 选择光照或高度规则
  2. 重新摆放全部植物
  3. 为两株植物写说明

做完的标志：别人能从布局和文字看出你的规则。

032 小时
  1. 查找一个可靠植物来源
  2. 核对两条说明
  3. 请同伴找出不合理位置

做完的标志：布局和说明经过来源核对与同伴反馈。

AUTHORSHIP / 作者记录

作品可以请 AI 帮忙，这三件事由你亲自写。

记录只保存在这台设备，没有登录也能使用。

完成三步、署名并写下至少 10 个字的关键决定后可完成。

AI 协作提示词

让 AI 带路，不让它抢走决定

请先解释植物拖动时 DOM 元素和坐标怎样变化，不要替我决定生态主题。等我给出布局规则后，再帮我逐步调整样式和说明，并提醒我核对植物事实来源。