课程教学二维码问卷投票系统

这是一个可直接部署到 Firebase Hosting 或 GitHub Pages + Firebase Firestore 的静态网页程序，满足以下教学场景：

• 学生扫码进入投票页面
• 填写姓名
• 对 2021 年 3 月 1 日的 10000 美元投资方案进行单选
• 教师后台查看频率统计、饼图和具体姓名

---

一、文件说明

• index.html：页面结构
• style.css：界面样式
• app.js：投票逻辑、Firestore 读写、饼图与二维码
• firebase.json：Firebase Hosting 配置
• firestore.rules：Firestore 规则示例

---

二、先创建 Firebase 项目

1. 打开 Firebase 控制台
2. 新建项目
3. 开启 Firestore Database
4. 开启 Hosting
5. 在项目设置里找到 Web 应用配置
6. 把 app.js 里的 firebaseConfig 替换成你的真实配置

---

三、创建 Firestore 数据库

建议集合名使用：

• 集合：votes

每条记录会自动写入：

• name
• choice
• createdAt

---

四、建议的 Firestore 规则（课堂演示版）

把 firestore.rules 发布到项目中。

注意：这套规则更适合课堂教学演示，不适合高安全正式业务。

---

五、后台入口

部署后：

• 学生投票页：你的网址
• 教师后台：你的网址/?admin=1

默认后台密码在 app.js 中：

const ADMIN_PASSWORD = "teacher123";

你可以自行修改。

---

六、最短部署方法

方案 A：Firebase Hosting（最稳）

1. 安装 Node.js
2. 安装 Firebase CLI
   npm install -g firebase-tools
3. 登录
   firebase login
4. 进入本文件夹
5. 初始化 Hosting
   firebase init hosting
6. 选择当前 Firebase 项目
7. 公共目录填：.
8. 选择单页应用：N
9. 不覆盖已有 index.html
10. 发布
    firebase deploy

发布完成后会得到一个公开网址。

---

方案 B：GitHub Pages + Firebase Firestore

1. 建 GitHub 仓库
2. 把本文件夹全部上传
3. 打开 Pages
4. 选择从 main 分支根目录发布
5. 等待生成公开网址

只要 app.js 中 Firebase 配置正确，GitHub Pages 也能正常读写 Firestore。

---

七、课堂使用方式

1. 教师先打开后台 ?admin=1
2. 页面会自动生成当前网址的二维码
3. 学生扫码进入投票页
4. 提交姓名和选项
5. 教师后台点击“刷新数据”查看实时统计
6. 点击某个选项卡片可查看具体姓名

---

八、可进一步扩展

你之后还可以继续加这些功能：

• 限制同名只能投一次
• 导出 Excel
• 实时自动刷新
• 添加更多题目
• 设置投票截止时间
• 美化为课堂大屏版