有机物检测实验室闯关

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有机物检测实验室闯关</title>
<style>
*{box-sizing:border-box;font-family:system-ui}
body{background:#1a3636;color:#fff;padding:20px;margin:0}
#game{max-width:800px;margin:0 auto;background:#244444;padding:24px;border-radius:14px;box-shadow:0 0 16px #0005}
.lev{display:none}
.lev.active{display:block}
.opt{display:block;width:100%;padding:14px;margin:8px 0;border:none;border-radius:10px;font-size:17px;cursor:pointer;background:#366;color:#fff}
.opt:hover{background:#488}
#tip{margin-top:16px;padding:14px;border-radius:10px;background:#0003;min-height:80px}
#score{text-align:right;font-size:18px}
h2{margin-top:0}
</style>
</head>
<body>
<div id="game">
<div id="score">得分：<span id="s">0</span></div>

<!-- 首页 -->
<div class="lev active" id="start">
<h2>🧪有机物检测实验室闯关</h2>
<p>任务：完成还原糖、蛋白质检测闯关，判断选材、试剂顺序、实验异常问题</p>
<button class="opt" onclick="go(1)">开始闯关</button>
</div>

<!--关卡1 选材判断-->
<div class="lev" id="l1">
<h2>第1关：实验选材判断</h2>
<p>检测还原糖，最合适的实验材料是？</p>
<button class="opt" onclick="ans(1,0)">A.苹果匀浆 ✅（富含还原糖，颜色浅）</button>
<button class="opt" onclick="ans(1,1)">B.西瓜汁（红色干扰砖红色观察）</button>
<button class="opt" onclick="ans(1,1)">C.甘蔗汁（蔗糖不属于还原糖）</button>
<div id="tip"></div>
<button class="opt" onclick="go(2)">下一关</button>
</div>

<!--关卡2 试剂顺序【核心驱动问题】-->
<div class="lev" id="l2">
<h2>第2关：试剂添加顺序与条件</h2>
<p>判断说法：检测还原糖、蛋白质，试剂添加顺序、反应条件完全一样？</p>
<button class="opt" onclick="ans(2,1)">A.正确</button>
<button class="opt" onclick="ans(2,0)">B.错误 ✅</button>
<div id="tip"></div>
<button class="opt" onclick="go(3)">下一关</button>
</div>

<!--关卡3 实验异常+肉眼显色局限-->
<div class="lev" id="l3">
<h2>第3关：实验异常分析</h2>
<p>做还原糖实验，水浴后没有看到砖红色沉淀，哪一项<strong>不是</strong>可能的原因？</p>
<button class="opt" onclick="ans(3,1)">A.选用梨匀浆作材料</button>
<button class="opt" onclick="ans(3,0)">B.斐林试剂没有现配现用，试剂失效</button>
<button class="opt" onclick="ans(3,0)">C.水浴温度不足50~65℃</button>
<button class="opt" onclick="ans(3,0)">D.材料是甘蔗汁，不含还原糖</button>
<div id="tip"></div>
<button class="opt" onclick="go(4)">下一关</button>
</div>

<!--关卡4 科学思维：肉眼检测局限 -->
<div class="lev" id="l4">
<h2>第4关：科学思维挑战</h2>
<p>只用肉眼观察显色，可以直接测出还原糖的含量多少吗？肉眼看颜色深浅有什么局限？</p>
<button class="opt" onclick="ans(4,1)">A.可以，颜色越深代表含量精确数值</button>
<button class="opt" onclick="ans(4,0)">B.不可以，肉眼只能定性（有没有）；颜色深浅靠主观判断，误差大 ✅</button>
<div id="tip"></div>
<button class="opt" onclick="go(5)">查看闯关总结</button>
</div>

<!--结束页-->
<div class="lev" id="l5">
<h2>🏁闯关完成！实验室报告</h2>
<p>总分：<span id="fs">0</span>/4</p>
<p>📖知识点回顾（小组上课讲解用）：<br>
1.斐林试剂：甲乙等量混合、现配现用，50-65℃水浴；<br>
2.双缩脲试剂：先A液，再加B液，不需要加热；<br>
3.肉眼显色只能判断物质有没有，不能精准测定含量，主观误差大；<br>
4.无砖红色沉淀原因：材料选错、试剂失效、温度不合适。
</p>
<button class="opt" onclick="restart()">重新闯关</button>
</div>
</div>

<script>
let score=0;
const tipBox=document.getElementById('tip');
const sDom=document.getElementById('s');
function go(n){
  document.querySelectorAll('.lev').forEach(e=>e.classList.remove('active'))
  document.getElementById('l'+n)?.classList.add('active')
  if(n===1)document.getElementById('start').classList.remove('active')
  if(n===5)document.getElementById('fs').innerText=score;
}
function ans(lev,isRight){
  if(isRight===0){
    score++;sDom.innerText=score;
    if(lev===1)tipBox.innerText="✅正确！苹果果肉浅色、还原糖丰富。西瓜红色掩盖砖红色；甘蔗是蔗糖，不属于还原糖。";
    if(lev===2)tipBox.innerText="✅正确！二者完全不同。斐林：甲乙先混合、水浴加热；双缩脲：先A后B，不用加热。选错会出现异常沉淀，看不到目标颜色。";
    if(lev===3)tipBox.innerText="✅正确！梨是合适材料；其余三项都会导致无法出现砖红色沉淀。";
    if(lev===4)tipBox.innerText="✅正确！肉眼只能定性判断有没有有机物，不能定量测出具体含量。每个人对深浅判断不一样，存在主观误差。";
  }else{
    tipBox.innerText="❌答错，看提示学习知识点！"
  }
}
function restart(){score=0;sDom.innerText=0;go(1);tipBox.innerText=""}
</script>
</body>
</html>