高中英语班级向日葵积分种植园（账号+密钥登录） html 动画

🌻 向日葵积分系统 · 账号密码使用指南 🌻 班级向日葵积分种植系统 账号密码 · 多设备同步 手把手操作指南（零基础版） 每一步都写明「点哪里、看到什么、填什么」，照着做即可 📌 先看这里：三分钟搞明白要做啥 这份指南讲怎么用「账号密码」登录，让你的积分数据在手机、平板、教室电脑、家里电脑之间自动同步。 整个过程分两大块，各做一次就行： 1. 第一大块：申请一个「网络硬盘」（约 15 分钟，一辈子只做这一次） 1. 第二大块：在各台设备上填一次钥匙、注册账号、登录（每台设备约 2 分钟） 💡 打个比方，一下子就懂了 Supabase（发音：苏帕贝斯）就是一个放在网上的「免费网络硬盘」，专门用来存你的积分数据。 你做的事，其实跟「租个网盘存照片」一模一样： 　① 先去注册一个网盘账号（第一大块做的） 　② 拿到网盘的地址和门禁卡（两把钥匙） 　③ 在网盘里建一个文件夹（叫「建表」） 　④ 在自己的每台设备上，用地址+门禁卡连上这个网盘 　⑤ 设一个账号密码，以后各设备都用这个账号登录，数据自动同步 整个过程不需要懂英文、不需要懂技术，只要会「点按钮、复制、粘贴」就能完成。 需要准备什么 1. 一台能上网的电脑：建议用 Chrome 或 Edge 浏览器（别用 IE） 1. 一个常用邮箱：QQ邮箱、163邮箱、微信绑定的邮箱都可以，用来注册账号、收验证邮件 1. 一支笔、一张纸：用来抄下账号密码（这一步千万别省，理由见后面） 1. 大约 15~20 分钟：建议找个安静的时间一次性做完，中途别关网页 ⚠️⚠️ 最重要的一句话，请先看这句 本系统没有「忘记密码」功能。 密码是加密保存的，一旦忘记，谁也找不回来（包括做这个网页的人）。 唯一后果：原来的数据进不去了，只能重新注册一个新账号、从头录一遍。 所以：注册完请立刻把账号和密码抄在纸上，夹在备课本里。 这句话在后面还会再提醒一次。 第一大块：申请「网络硬盘」（只做一次） 一、注册 Supabase 账号 第 1 步　打开 Supabase 官网 1. 🔍 点哪里：双击打开浏览器，在最上面那条白色长条（地址栏）里，把里面原有的字全删掉 1. ⌨️ 填什么：输入 supabase.com，然后按键盘上的回车键（Enter） 1. 👀 看到什么：一个英文网站。右上角有个按钮，写着「Start your project」或「Sign in」 1. 🖱️ 怎么做：点这个按钮，页面会跳到登录/注册界面 1. ✅ 走对了吗：页面变了，出现了让你填邮箱、或者让你选「Continue with GitHub」的界面。是这样就对了。 第 2 步　用邮箱注册（推荐，最简单） 1. 🖱️ 怎么做：找到填邮箱的框，点进去，输入你常用的邮箱地址 1. ⌨️ 填什么：邮箱下面一般还有个密码框，设一个你能记住的密码（这是 Supabase 网站的密码，先抄在纸上） 1. 🖱️ 怎么做：点「Sign up」（注册）按钮 1. 📧 接着做：打开你的邮箱，找到 Supabase 发来的验证邮件（可能在垃圾邮件里，找找看） 1. 🖱️ 怎么做：点邮件里那个大大的按钮或链接（通常写着 Verify / Confirm） 1. ✅ 走对了吗：浏览器里显示验证成功，或者自动跳回 Supabase 网站 ⚠️ 这里有两个账号密码，千万别搞混了！ 很多老师在这里会糊涂，请特别留意： 【第一个】Supabase 网站的账号密码 　· 干什么用：登录 supabase.com 这个管理后台（就是你正在注册的这个） 　· 谁在用：只有你自己，学生绝对看不到 　· 什么时候用：只有要改服务器设置、或者唤醒休眠项目时才需要 【第二个】积分网页里的账号密码 　· 干什么用：在向日葵积分网页里登录，同步你的班级数据 　· 谁在用：你（和各台设备） 　· 什么时候用：每次在新设备上打开网页时 两个密码可以设成一样的，也可以不一样 —— 但都要抄下来！ 第 3 步　建一个「组织」（如果系统要求） 1. 👀 看到什么：如果页面提示「Create an organization」（创建组织），就按下面做；没看到就直接跳到第 4 步 1. ⌨️ 填什么：Name 填你的名字或学校名（中文也行） 1. 🖱️ 怎么做：点「Create organization」 1. ✅ 走对了吗：进入一个新页面，中间有个大大的绿色按钮「New project」 第 4 步　新建一个「项目」（这就是你的网络硬盘） 1. 🖱️ 怎么做：点那个绿色的「New project」按钮 1. 👀 看到什么：弹出一个表单，要填几项： 1. 　· Name：项目名。建议填 sunflower 或 jifen（只能用小写字母、数字、横线，不能用中文空格） 1. 　· Database Password：数据库密码。旁边一般有个「Generate a password」按钮，点它自动生成一串 1. 　· Region（重要）：点开这个下拉框，在里面找「Southeast Asia (Singapore)」并选中。找不到就选「Tokyo (Japan)」 1. 🖱️ 怎么做：点页面底部的「Create new project」 1. ⏳ 接着做：屏幕上出现转圈，显示 Setting up project… 之类的字。 1. 这一步要等 1~3 分钟。去倒杯水，千万别关掉网页，等它自己跳。 1. ✅ 走对了吗：页面自动跳转，左边出现一列菜单（有 Table Editor、SQL Editor 等），说明项目建好了！ 📝 顺手抄一下：数据库密码 在第 4 步里自动生成的那串「Database Password」， 请现在就抄在纸上，标注「数据库密码」。 日常用不到它，但万一以后要找回数据，没有它会很麻烦。 二、拿到两把「钥匙」（约 3 分钟） 为什么需要钥匙？打个比方：网页要去你的网络硬盘取数据，得知道两件事 —— 硬盘在哪个地址（网址），以及拿什么凭证进门（门禁卡）。 第 5 步　进入设置页面 1. 🔍 点哪里：看屏幕最左边的那一竖排菜单，一直拉到最底下 1. 🖱️ 怎么做：找到一个齿轮图标 ⚙️，旁边写着「Project Settings」，点它 1. 👀 看到什么：页面中间出现一排小标签：General、API、Database、API Docs…… 1. 🖱️ 怎么做：点「API」这个标签 1. ✅ 走对了吗：页面里出现了「Project URL」字样，下面还有好几串长长的字符 第 6 步　复制第一把钥匙：Project URL（地址） 1. 🔍 找什么：页面上找到「Project URL」这一行 1. 👀 长什么样：是一串网址，样子像这样： https://abcdefghijklmnop.supabase.co 1. 🖱️ 怎么做：点这串网址右边那个「复制」小图标（两个小方块叠在一起的样子），最省事 1. 　（或者）：用鼠标左键按住，从开头的 h 一直拖到结尾的 o，整串变蓝后按 Ctrl + C 1. 📝 贴到哪：打开电脑的「记事本」（点左下角开始 → 输入「记事本」→ 回车），按 Ctrl + V，按回车换行 1. ✅ 走对了吗：记事本第一行是一串网址，开头 https://，结尾 supabase.co， 1. 并且前后都没有空格（这点很关键，多个空格就连不上） 第 7 步　复制第二把钥匙：anon key（门禁卡） 1. 🔍 找什么：在同一页往下拉，找到写着「Project API keys」的区域 1. 👀 长什么样：里面有好几行。认准标签上写着 anon 和 public 的那一行（不是 service_role！） 1. 　：后面跟着一长串字符，开头是 eyJhbGciOi 这几个字母 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS... 1. 🖱️ 怎么做：强烈建议点这行右边的「复制」按钮（手动拖很容易漏字符） 1. 📝 贴到哪：回到记事本，按回车换到第二行，按 Ctrl + V 1. ✅ 走对了吗：第二行是一长串字符（200 多个），开头是 eyJ ⚠️ 千万别复制错了！ 页面上还有一个叫「service_role」的钥匙，它更长，而且旁边通常有红色警告字。 那个千万不能用来填到我们的网页里（它是管理员钥匙，泄露了别人能改你的数据）。 我们要的是：标签写着「anon」+「public」的那一把。 如果不确定复制对没对，就看开头：正确的那把以 eyJ 开头。 三、在硬盘里建一个「文件夹」（约 2 分钟） 钥匙有了，但硬盘还是空的。得先建一个专门放积分数据的「表格」。这活儿听着吓人，其实就是复制粘贴一下，点个按钮。 第 8 步　打开 SQL Editor（执行代码的地方） 1. 🔍 点哪里：看左边那列菜单 1. 🖱️ 怎么做：找到「SQL Editor」，点它（图标像个数据库或终端窗口） 1. 👀 看到什么：中间出现一个大的空白框，可以打字，上方可能写着「New query」 1. ✅ 走对了吗：鼠标在大框里点一下，能看到光标在闪 第 9 步　把建表语句粘贴进去 1. 🔍 去哪拿语句：回到我们的积分网页 → 点「👤 登录」标签 → 点「⚙️ Supabase 服务器设置」把面板展开 1. 　：面板里有个灰色小框，里面就是这段语句，右上角有个「复制」按钮，点它 1. 🖱️ 怎么做：回到 Supabase 的 SQL Editor 大框里点一下，按 Ctrl + V 1. ✅ 走对了吗：框里出现几行英文（第一行是 create table if not exists garden (） 第 10 步　运行它 1. 🖱️ 怎么做：点右下角绿色的「Run」按钮（也可以按 Ctrl + 回车） 1. ⏳ 等多久：1~2 秒就有结果 1. ✅ 走对了吗：框的下方出现绿色提示，写着 Success 或者 Success. No rows returned 1. ❌ 如果是红色：说明没成功，多半是已经建过表了（重复执行会提示已存在），或者语句没复制全。重新复制一次再试。 🎉 恭喜！到这儿，「网络硬盘」就准备好了 接下来只要把两把钥匙填到网页里，就能用了。 记事本里现在应该有两行内容：第一行是网址，第二行是 eyJ 开头的一长串。先别关记事本，马上要用。 第二大块：在网页里登录（每台设备做一次） 四、把两把钥匙填进网页（约 2 分钟） 第 11 步　打开积分网页，切到登录标签 1. 🖱️ 怎么做：打开这个积分网页，你会看到三个标签：🔑 离线 / 👤 登录 / 📝 注册 1. 🖱️ 怎么做：点「👤 登录」 1. 👀 看到什么：下面出现「账号」「密码」两个输入框，最下面还有「⚙️ Supabase 服务器设置」 1. 　：（没配过服务器的话，配置面板会自动展开；如果收着，点那个按钮就展开了） 第 12 步　填写三项内容 1. 　① 数据分区：默认填着 main，不动它就行。 1. （多位老师共用一个 Supabase 项目时，各填不同名字，比如「三年级」「五年级」，数据就互不干扰） 1. 　② Project URL：把记事本第一行的网址粘贴进来 1. 　③ anon key：把记事本第二行那一长串粘贴进来 ⚠️ 粘贴后一定要检查（这是最常见的失败原因） 用鼠标在输入框里点一下，按键盘的「Home」键或「←」方向键，看光标能不能跑到最前面。 如果能，说明这串字符前面有空格 —— 把空格删掉。 后面也一样，按「End」键看光标是不是紧贴最后一个字符。 一句话：网址和 key 的前后，都不能有多余的空格。 第 13 步　测试连接 1. 🖱️ 怎么做：点「测试连接并保存」按钮 1. ⏳ 等多久：1~2 秒 1. ✅ 走对了吗：上方出现绿色文字「🟢 Supabase 已连接 · 分区「main」」，并弹出「连接成功」 1. ❌ 如果是红色：别慌，翻到本指南最后一章「常见问题排查」，按现象对照着查 五、注册你自己的账号密码（约 1 分钟） 第 14 步　切到注册标签并填写 1. 🖱️ 怎么做：点「📝 注册」标签 1. ⌨️ 账号怎么填：3~20 位，可以用字母、数字、下划线、中文。建议用姓名拼音，比如 wanglaoshi 1. ⌨️ 密码怎么填：至少 6 位。建议「字母+数字」组合，比如 sun2024 1. ⌨️ 确认密码：下面那个框，把密码一字不差再打一遍 1. 🖱️ 怎么做：点「注册并进入」 1. ✅ 走对了吗：直接进到班级首页了，右上角显示你的账号名 🚨🚨 现在，立刻，把账号和密码抄在纸上！ 再说一次，因为这是最容易出事的一步： 本系统没有「忘记密码」功能，密码是加密保存的，忘记 = 永远找不回。 一旦忘记，原来的班级、学生、积分数据都进不去了，只能重新注册、重新录一遍。 请现在就抄下来，写清楚哪一个是积分网页的账号密码。 （如果多位老师共用一台电脑，请各注册各的账号，数据互不干扰） 六、在手机 / 平板 / 教室电脑上登录 装好一个设备后，其他设备怎么弄？很简单，但有个前提。 📋 前提：所有设备要打开「同一个网址」 这个积分网页要放到一个网址上（GitHub Pages、Vercel、腾讯云静态托管等，把文件拖进去就行）， 手机、平板、教室电脑都打开这个网址。 如果是直接双击本地文件打开的（地址栏是 file:// 开头）， 大部分浏览器会拦截联网请求，导致连不上服务器。 所以建议：一定要放到网址上用。 第 15 步　在新设备上登录（每台设备约 1 分钟） 1. 🖱️ 怎么做：打开网页 → 点「👤 登录」标签 1. 📌 第一次要点什么：这台设备第一次用，配置面板会自动展开，需要把两把钥匙再贴一次 1. 　：（网址和 key 存在浏览器里，换设备带不过去，所以每台设备首次要贴一次） 1. 🖱️ 怎么做：贴上 URL 和 key → 点「测试连接并保存」→ 变绿 1. 🖱️ 怎么做：然后点「👤 登录」，输入你注册的账号密码 → 登录 1. ✅ 走对了吗：你的班级和学生数据自动出现了！ 1. 📌 以后呢：这台设备会一直记住钥匙和登录状态，下次打开网页直接就能用，不用再贴一次 ✨ 同步是怎么发生的 数据每 8 秒自动同步一次。比如在手机上给学生加了分， 最多 8 秒后，教室电脑的屏幕上也会自动多出一朵向日葵。 不需要手动点「同步」，完全自动。 七、出问题了怎么办（照着查） 别慌，九成的问题都在下面这张表里。先找到你的「现象」，再看「怎么办」。 你看到的现象 怎么解决 测试连接显示 HTTP 401 钥匙复制错了，或者复制成了 service_role。回到 Project Settings → API，重新复制 anon public 那一把 测试连接显示 HTTP 404 没执行建表语句，或者语句没复制全。回到 SQL Editor，重新复制粘贴一次，再点 Run 提示「请先完成服务器连接」 URL 或 key 有一项没填。检查两个框都填了，且前后没有多余空格 提示「连接失败」但没写数字 网址打错了，或者断网了。检查网址是不是 supabase.co 结尾；换个网络试试 注册时提示「该账号已被注册」 这个名字被注册过了。换个名字，比如后面加个数字 注册时提示「账号需 3-20 位」 名字太短。至少 3 个字，比如 wls 或 王老师 注册时提示「密码至少 6 位」 密码太短。设 6 位以上，建议「字母+数字」 登录时提示「账号不存在」 账号打错了，或者这台设备还没注册过。确认账号；新设备要先注册过，才能登录 登录时提示「密码不正确」 密码记错了。密码无法找回，只能重新注册一个新账号（旧数据就进不去了） 数据没同步到另一台设备 两台设备账号不同，或数据分区不同。确认两台是同一账号、分区名一模一样 一切正常但速度很慢 建项目时地区选远了。应该选 Singapore 或 Tokyo；已建好的只能将就用 八、寒暑假回来打不开？（7 天休眠） ⚠️ 免费项目的一个小麻烦，提前知道就不慌 Supabase 的免费项目，如果连续 7 天没有任何人打开过网页， 它会自动「睡着」（官方叫 Pause）。这是官方规定，不是网页坏了。 睡着后是什么表现 1. 　：打开网页登录时，提示「连接失败」或者一堆 HTTP 错误 1. 　：数据卡住不动，不同步了 ✅ 先放心：数据绝对没有丢 项目只是「睡着」了，不是「删了」。 唤醒之后，数据原封不动还在。 怎么唤醒（30 秒搞定，共 4 步） 第 16 步　登录 Supabase 网站 1. 🖱️ 怎么做：浏览器打开 supabase.com，用你注册的邮箱账号登录 第 17 步　找到「恢复」按钮 1. 👀 看到什么：进到你的项目，如果顶部有橙色/黄色提示条，写着 Project paused，旁边有个按钮 1. 🖱️ 怎么做：点那个按钮（写着 Restore 或 Resume project，中文意思是「恢复项目」） 第 18 步　等一两分钟 1. 👀 看到什么：状态从 Paused 变成 Active，旁边的小圆点变成绿色 第 19 步　回到网页重新登录 1. 🖱️ 怎么做：刷新积分网页，用账号密码重新登录，数据就都回来了 怎么避免被打扰 1. 平时正常使用：只要 7 天内有人打开过网页，就不会睡 1. 寒暑假前：用顶栏 🔑 导出一份密钥或备份文件保存好，万一服务器真睡了，也能离线继续用 1. 彻底省心：改用「🔑 离线」模式，完全不依赖服务器，靠复制密钥搬数据 九、我的信息记录卡（建议打印，填好夹在备课本里） 下面这张表，请你一边做一边填。填完剪下来夹在备课本里，以后找回密码、唤醒服务器都要用。 Supabase 登录邮箱 Supabase 网站密码 项目名（Name） 数据库密码 项目地区（Region） Project URL（网址） anon key（门禁卡） 积分网页 · 账号 积分网页 · 密码 数据分区名 唤醒服务器速记（贴在电脑旁） 第 1 步 打开 supabase.com，用上面的邮箱登录 第 2 步 进项目，点顶部提示条上的 Restore / Resume project 第 3 步 等 1~2 分钟，状态变 Active（绿点） 第 4 步 刷新积分网页，用上面的账号密码重新登录 📞 实在搞不定？找人帮忙时，把这张卡给他看 如果让同事或懂技术的朋友帮忙，直接把这张记录卡给他， 他能立刻知道你卡在哪一步（也能帮你判断是不是钥匙贴错了）。 但请注意：anon key 相当于你数据的门禁卡， 只给信得过的人看，不要发到公开的群里。 第 页 学科网（北京）股份有限公司 $ 向日葵积分种植系统（密钥版） —— 操作指南 一、首次打开 1. 双击 HTML 文件，在浏览器中打开网页。 2. 首次使用选择「新建一份空白数据」，直接进入系统。 3. 系统默认创建 1 个班级，包含 5 名示例学生，你可以直接修改名称开始使用。 二、班级管理 1. 修改班级名称：在首页直接点击班级卡片上的名称即可编辑。 2. 设置班级数量：点击右上角 ⚙️ 设置按钮，修改班级个数（最多 60 个），点击确定保存。 3. 班级排序：系统自动按各班级人均积分由高到低排列，前三名分别显示奖牌。 4. 搜索班级：点击顶栏 🔍 放大镜图标，输入班级名称，回车即可跳转到该班级标签。 三、学生管理 1. 进入班级：在首页点击对应班级卡片。 2. 设置学生人数：点击右上角 ⚙️，输入人数（最多 60），下方自动生成对应数量的姓名文本框。 3. 编辑学生姓名：在文本框中直接输入，每行末尾的 🗑 可删除该学生，最后一个框后的 ➕ 可逐个新增。 4. 删除/新增学生会影响总人数的显示数字。点击确定保存，取消则保持原数据。 5. 学生排序：页面自动按积分由高到低排列，前三名显示动态皇冠👑。 6. 搜索学生：在班级页点击 🔍，输入姓名回车即可定位。 四、积分操作 1. 进入学生个人页：在班级页单击学生姓名标签。 2. 解锁编辑：首次点击积分输入框时，系统会要求输入密码（默认 LR2684），输入正确后即可操作。 3. 加减分：在积分框中输入数字，带 + 号表示加分，带 - 号表示减分。每 20 分对应 1 朵向日葵。 4. 查看花园：个人页面展示动态大花园，向日葵随风摆动，种植进度以百分数显示。超过 50 朵时，新增的向日葵以"+1"飘字和弹幕形式呈现。 5. 返回：点击右上角「返回」按钮回到班级页，或再次点击返回回到首页。 五、多设备同步（密钥方式） 1. 生成密钥：在任意一台设备上，点击顶栏 🔑，选择「生成最新密钥」，复制整段编码。 2. 发送密钥：通过微信/QQ 等方式将密钥发送到另一台设备。 3. 导入密钥：在另一台设备上打开网页，选择「我已有密钥，粘贴导入」，粘贴编码即可。 4. ⚠️ 重要提醒：密钥不会自动更新。每次在一台设备上修改了数据后，如需同步到其他设备，都需要重新生成密钥并再次发送。 六、数据备份 1. 文件备份：点击顶栏 🔑 →「导出为 JSON 文件」，将文件保存到本地。 2. 恢复数据：点击「从 JSON 文件导入」，选择之前备份的文件即可覆盖恢复。 3. 清空数据：如需重置，可点击「清空本机数据」（需连续确认两次，操作前请务必备份）。 七、注意事项 事项 说明 密码 默认 LR2684，解锁后同一浏览器会话内无需再次输入；关闭浏览器后重新打开需再次解锁 警告标志 仅当学生曾经获得过积分且被扣回 0 分时才显示警告，新建的 0 分学生不会显示 密钥更新 数据变动后必须重新生成密钥才能同步最新状态 浏览器缓存 本工具数据存储在浏览器本地，清除缓存会导致数据丢失，请定期导出备份 学科网（北京）股份有限公司 $null