100个问题，3秒出分：极简无广告版「莱斯纯度测试」开源实现解析

作者提米哥

你可能听说过「莱斯纯度测试（Rice Purity Test）」——它不是考试，也不是人生KPI，而是源自美国莱斯大学（Rice University）的一份100题怀旧清单。
你勾选自己“经历过”的事，系统自动算出你的「纯度分数」：

分数 = 100 − 已勾选项数
✅ 勾得越少 → 分数越高 → “越纯”（比如没谈过恋爱、没喝过酒、没逃过课…）
✅ 勾得越多 → 分数越低 → “越野”（生活经验丰富，故事很多 😎）

听起来像玩笑？但它真实存在了近50年，是无数大学生毕业前的集体回忆。

但现实很骨感：网上搜到的版本，不是满屏弹窗广告，就是UI混乱、加载慢、手机点不动……
于是，开发者提米哥决定：重写一个真正给开发者和普通人用的干净版本——不加戏、不营销、不追踪，就干一件事：
👉 快速、安静、准确地帮你算出那个数字。

它为什么“真干净”？（技术侧重点）

  • ✅ 零第三方脚本：没有 Google Analytics、没有 Facebook Pixel、没有埋点SDK
  • ✅ 全静态部署：HTML + CSS + 原生 JS，无框架（不用 React/Vue），打开即用
  • ✅ 离线可用：下载 HTML 文件后，关掉网络也能答题、计算、看结果
  • ✅ 响应式优先：手机横屏/竖屏、平板、MacBook 都能舒服操作

核心逻辑？其实就12行 JavaScript（已加中文注释）

<!-- 这段代码直接嵌在页面 <script> 标签里，无依赖 -->
<script>
function calculateScore() {
  // 1. 找到所有被勾选的复选框（name="q"）
  const checkedItems = document.querySelectorAll('input[name="q"]:checked');
  // 2. 统计勾选数量
  const count = checkedItems.length;
  // 3. 计算纯度分：100 减去勾选数
  const score = 100 - count;
  // 4. 把分数写进页面中 id="result" 的元素里
  document.getElementById('result').textContent = score;
  // 5. 根据分数区间，显示一句轻松的小解读（非评判，纯彩蛋）
  const desc = score >= 90 ? '清澈如初' : 
               score >= 70 ? '微风拂面' : 
               score >= 50 ? '烟火人间' : '故事集已满';
  document.getElementById('desc').textContent = desc;
}
</script>

💡 看懂了吗？没有 API 请求、没有后端、不传数据——所有逻辑在浏览器里当场完成。
这就是「前端极简主义」的实战范例：用最少的代码，解决最具体的问题。

你能学到什么？（开发者视角）

  • 如何用原生 JS 替代框架做表单交互（省包、提速、降维护成本）
  • 怎么设计「语义化+无障碍友好」的复选框结构（每个 <input> 都配 <label>）
  • 移动端 touch 优化小技巧（比如 cursor: pointer + min-height: 44px 防误触）
  • 静态站点如何自带 FAQ 和上下文说明（纯 HTML/CSS 实现，无需 CMS）

✅ 想立刻试试？
👉 https://ricepurityscore.org

（友情提示：测完可以截图分享，但别当真——它只是时光的温柔快照，不是人生评分卡 🌟）

类似文章