Exam2 练习 · Quiz 分数服务器

This article is only available in Chinese for now. The interface is translated; the prose is still on the way.

代码：CSSE280 HW\111\｜所属课程：CSSE280 总览

一句话：一个判断题小测验页面，提交后把姓名和得分 POST 给 Flask 服务器存进 PickleDB，再用另一个页面拉取并展示所有人的成绩表。

文件结构

文件	作用
`httpserver.py`	服务器 v1（旧版，见下面"版本演进"）
`httpserver1.py`	服务器 v2（当前版）：Flask + PickleDB
`public/problem1.html`	判断题测验页：选完提交姓名+得分
`public/problem2.html`	成绩表页：加载时 fetch `/scores` 渲染表格

API 设计（v2）

方法	路由	作用
GET	`/` `/problem1`	返回测验页
GET	`/problem2`	返回成绩表页
POST	`/score`	收 `{name, score}`，写入 `scores` 字典（同名覆盖），返回 204
GET	`/scores`	把字典转成按名字排序的 `[{name, score}]` 列表返回

版本演进：v1 → v2 修了什么

v1 send_from_directory("", ...) 目录传错 → v2 改为 "public"
v1 只能存一个人的成绩（db.set("name") / db.set("score") 互相覆盖）→ v2 用 scores 字典按名字存，同名提交取最新
v2 新增 /scores 接口 + save_db() 兼容不同 PickleDB 版本

值得记住的技巧

1. 纯 CSS 判卷 —— 不写一行 JS 就能即时显示对错，靠 :has() 选择器 + 自定义属性：

label:has(input[type="radio"][correct="true"]:checked) { color: green; }
label:has(input[type="radio"][correct="true"]:checked)::after { content: " - Correct"; }
label:has(input[type="radio"][correct="false"]:checked) { color: red; }

2. fetch 发 JSON 的标准姿势：

await fetch("/score", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name, score })
});

3. 空数据重定向：problem2.html 发现 /scores 返回空列表时 window.location.href = "/problem1?empty=true" 跳回测验页。

关联

同样用 Flask：Lab2 - 购物清单（Flask REST API）
前端渲染表格的做法（createElement + appendChild）与 Lab2 的 renderLists 一致