<!--
THIRD-PARTY NOTICE: 3Dmol.js 2.5.5 and incorporated components
3Dmol.js incorporates code from GLmol, Three.js, and jQuery and
is licensed under a BSD-3-Clause license.

* 3Dmol.js
	Copyright (c) 2014, University of Pittsburgh and contributors
	All rights reserved.

	Redistribution and use in source and binary forms, with or without 
	modification, are permitted provided that the following conditions are met:

	1. Redistributions of source code must retain the above copyright 
	notice, this list of conditions and the following disclaimer.

	2. Redistributions in binary form must reproduce the above copyright 
	notice, this list of conditions and the following disclaimer in the 
	documentation and/or other materials provided with the distribution.

	3. Neither the name of the copyright holder nor the names of its 
	contributors may be used to endorse or promote products derived from 
	this software without specific prior written permission.

	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 
	"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 
	LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A 
	PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
	HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 
	SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED 
	TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR 
	PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF 
	LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 
	NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 
	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

* GLmol
 GLmol - Molecular Viewer on WebGL/Javascript (0.47)
  (C) Copyright 2011-2012, biochem_fan
      License: dual license of MIT or LGPL3

  Contributors:
    Robert Hanson for parseXYZ, deferred instantiation


* Three.js 
     https://github.com/mrdoob/three.js

     Copyright (c) 2010-2012 three.js Authors. All rights reserved.

     Permission is hereby granted, free of charge, to any person obtaining a copy
     of this software and associated documentation files (the "Software"), to deal
     in the Software without restriction, including without limitation the rights
     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     copies of the Software, and to permit persons to whom the Software is
     furnished to do so, subject to the following conditions:

     The above copyright notice and this permission notice shall be included in
     all copies or substantial portions of the Software.

     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.

* jQuery
     http://jquery.org/

     Copyright (c) 2011 John Resig

     Permission is hereby granted, free of charge, to any person obtaining
     a copy of this software and associated documentation files (the
     "Software"), to deal in the Software without restriction, including
     without limitation the rights to use, copy, modify, merge, publish,
     distribute, sublicense, and/or sell copies of the Software, and to
     permit persons to whom the Software is furnished to do so, subject to
     the following conditions:

     The above copyright notice and this permission notice shall be
     included in all copies or substantial portions of the Software.

     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
     EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
     MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
     NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
     LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
     OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
     WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


-->
<!doctype html>
<html lang="zh-CN" data-ready="false" data-style="stick" data-domain-guide="hidden" data-lesson-step="predict">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水分子的三个原子怎样排列？</title>
    <style>
:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: #eef8ff;
  background: #07111e;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #07111e;
}

body { min-height: 100vh; }
button { font: inherit; }

button {
  min-height: 42px;
  border: 1px solid rgba(150, 206, 238, 0.34);
  border-radius: 11px;
  padding: 0.66rem 0.82rem;
  color: #eef8ff;
  background: #143253;
  cursor: pointer;
  text-align: left;
}

button:hover,
button:focus-visible {
  border-color: #83e8d6;
  background: #1b496f;
  outline: 3px solid rgba(131, 232, 214, 0.18);
}

button:disabled {
  cursor: not-allowed;
  color: #7890a2;
  background: #10263d;
  border-color: rgba(126, 157, 181, 0.2);
  opacity: 0.72;
}

button:disabled:hover {
  outline: none;
  background: #10263d;
  border-color: rgba(126, 157, 181, 0.2);
}

button[aria-pressed="true"] {
  color: #06171b;
  background: #81ead7;
  border-color: #b8fff1;
}

.lesson-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 420px);
}

.molecule-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(36, 111, 156, 0.35), transparent 28rem),
    #07111e;
}

.molecule-stage canvas { display: block; }
#molecule-viewer { transition: opacity 180ms ease; }

.prediction-screen {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: none;
  place-items: center;
  padding-top: 7rem;
  color: #a9c6d8;
  font-size: clamp(1rem, 2vw, 1.25rem);
  letter-spacing: 0.08em;
  background:
    radial-gradient(circle at 50% 52%, rgba(28, 83, 110, 0.34), transparent 18rem),
    #07111e;
}

html[data-lesson-step="predict"] #molecule-viewer {
  opacity: 0;
  pointer-events: none;
}

html[data-lesson-step="predict"] .prediction-screen { display: grid; }

.stage-heading {
  position: absolute;
  z-index: 6;
  top: 18px;
  left: 20px;
  max-width: min(72%, 680px);
  padding: 0.82rem 0.95rem;
  border: 1px solid rgba(141, 210, 245, 0.25);
  border-radius: 14px;
  background: rgba(6, 18, 32, 0.8);
  backdrop-filter: blur(10px);
}

.stage-heading span,
.step-kicker {
  color: #83ead7;
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.12em;
}

.stage-heading h1 { margin: 0.25rem 0 0; font-size: clamp(1.1rem, 2vw, 1.55rem); }
.stage-heading p { max-width: 630px; margin: 0.38rem 0 0; color: #b9d0df; font-size: 0.84rem; line-height: 1.55; }

.angle-badge {
  position: absolute;
  z-index: 6;
  left: 22px;
  bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid rgba(121, 231, 213, 0.3);
  border-radius: 12px;
  background: rgba(8, 28, 40, 0.82);
}

.angle-badge strong { font-size: 1.45rem; color: #8ff1de; }
.angle-badge span { color: #c4dbe7; font-size: 0.82rem; }

.lesson-panel {
  padding: 1rem;
  border-left: 1px solid rgba(135, 191, 225, 0.18);
  background: rgba(9, 23, 39, 0.98);
}

.lesson-step {
  margin-bottom: 0.9rem;
  padding: 1rem;
  border: 1px solid rgba(132, 182, 220, 0.2);
  border-radius: 14px;
  background: rgba(17, 39, 64, 0.84);
}

.lesson-step.is-current { border-color: rgba(131, 234, 215, 0.64); }
.lesson-step h2 { margin: 0.28rem 0 0.55rem; color: #f2fbff; font-size: 1rem; line-height: 1.35; }
.lesson-step p { margin: 0.35rem 0; color: #c1d4e1; font-size: 0.88rem; line-height: 1.58; }

.choice-row,
.control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.72rem;
}

.choice-row button,
.quiz button { width: 100%; margin-top: 0.45rem; }

.continue-btn {
  width: 100%;
  margin-top: 0.7rem;
  text-align: center;
}

.review-btn {
  width: auto !important;
  min-height: 36px;
  margin-top: 0.35rem !important;
  padding: 0.5rem 0.68rem;
  color: #b9d9e8;
  background: #102a43;
  font-size: 0.82rem;
}

.choice-row button[data-selected="true"] { border-color: #83ead7; background: #1c536e; }

.status,
.completion {
  min-height: 3rem;
  margin-top: 0.72rem;
  padding: 0.7rem;
  border: 1px solid rgba(126, 223, 242, 0.22);
  border-radius: 10px;
  color: #e5f9ff;
  background: #091d2f;
  font-size: 0.86rem;
  line-height: 1.5;
}

.quiz + .quiz { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px solid rgba(138, 188, 220, 0.16); }
.quiz-feedback { min-height: 1.3rem; color: #91ead8 !important; font-size: 0.82rem !important; }
.completion[data-complete="true"] { color: #9ff3c8; border-color: rgba(112, 238, 178, 0.44); }
.lesson-boundary { background: rgba(24, 34, 51, 0.84); }

@media (max-width: 900px) {
  .lesson-shell { grid-template-columns: 1fr; }
  .molecule-stage { position: relative; height: 62vh; min-height: 460px; }
  .lesson-panel { border-left: 0; border-top: 1px solid rgba(135, 191, 225, 0.18); }
  .stage-heading { max-width: calc(100% - 40px); }
}

@media (max-width: 480px) {
  .control-grid,
  .choice-row { grid-template-columns: 1fr; }
  .molecule-stage { min-height: 430px; }
}

    </style>
    <script src="./water-structure-lab.script-1.js"></script>
  </head>
  <body>
    <main class="lesson-shell">
      <section class="molecule-stage" aria-label="可旋转的水分子三维模型">
        <header class="stage-heading">
          <span>观察任务</span>
          <h1 id="stage-title">水分子的三个原子怎样排列？</h1>
          <p id="stage-intro">先只根据已有知识作出预测。提交后，三维模型才会打开。</p>
        </header>
        <div id="molecule-viewer" style="position:absolute;inset:0" aria-label="水分子三维画布"></div>
        <div class="prediction-screen" aria-hidden="true">
          <span>先预测，再看模型</span>
        </div>
        <div class="angle-badge" hidden aria-label="教材给定：水分子的氢氧氢键角约为104.5度；不是画布测量值">
          <strong>104.5°</strong>
          <span>教材给定 · 非画布测量</span>
        </div>
      </section>

      <aside class="lesson-panel">
        <section class="lesson-step is-current" data-step-card="predict">
          <p class="step-kicker">01 先预测</p>
          <h2>只看化学式，你会画成哪一种？</h2>
          <div class="choice-row" data-quiz="prediction">
            <button type="button" data-answer="line">H—O—H 直线形</button>
            <button type="button" data-answer="bent">H—O—H 弯曲形</button>
          </div>
          <p class="quiz-feedback" aria-live="polite">先选一个答案；这里不立即判分。</p>
        </section>

        <section class="lesson-step" data-step-card="observe" hidden>
          <p class="step-kicker">02 动手观察</p>
          <h2>旋转模型，别被单一视角骗过</h2>
          <p>在左侧拖动旋转，用放大和重置确认两个 O—H 键没有排成一条直线。</p>
          <div class="control-grid">
            <button id="zoom-in-btn" type="button">＋ 放大</button>
            <button id="zoom-out-btn" type="button">－ 缩小</button>
            <button id="reset-btn" type="button">重置视角</button>
          </div>
          <div class="status" id="observation-status" aria-live="polite">拖动模型后，再进入下一步。</div>
          <button class="continue-btn" id="continue-explain-btn" type="button" disabled>完成真实旋转后继续</button>
        </section>

        <section class="lesson-step" data-step-card="explain" hidden>
          <p class="step-kicker">03 用电子域解释</p>
          <h2>区分电子对几何与分子构型</h2>
          <p>氧原子周围有四个电子密度区域：沿两个 O—H 键的成键域，加上两个孤电子对方向。电子对几何近似四面体；只看三个原子的位置时，分子构型是弯曲形。</p>
          <p>下方两个半透明球是作者添加的孤电子对方向示意，不是真实电子云，也不是 3Dmol.js 的化学计算结果。</p>
          <div class="control-grid">
            <button id="domain-btn" type="button" aria-pressed="false">显示电子域示意</button>
            <button id="stick-btn" type="button" aria-pressed="true">球棍模型</button>
            <button id="sphere-btn" type="button" aria-pressed="false">空间填充</button>
            <button id="oxygen-btn" type="button">定位中心氧</button>
            <button id="hydrogen-btn" type="button">定位两个氢</button>
          </div>
          <div class="status" id="atom-info" aria-live="polite">球棍模型更容易观察键和键角；空间填充模型更适合比较原子占据空间。</div>
          <button class="continue-btn" id="continue-check-btn" type="button">我已区分两个名称，进入检查</button>
        </section>

        <section class="lesson-step" data-step-card="check" hidden>
          <p class="step-kicker">04 形成性检查</p>
          <h2>把两个名称分清楚</h2>
          <div class="quiz" data-quiz="geometry">
            <p>水分子的电子对几何与分子构型分别是？</p>
            <button type="button" data-answer="wrong">都是弯曲形</button>
            <button type="button" data-answer="correct">近似四面体、弯曲形</button>
            <button type="button" data-answer="wrong">都是四面体</button>
            <p class="quiz-feedback" aria-live="polite"></p>
            <button class="review-btn" id="review-explain-btn" type="button">回看电子域解释</button>
          </div>
          <div class="quiz" data-quiz="evidence">
            <p>哪条证据最能反驳“水分子是直线形”？</p>
            <button type="button" data-answer="wrong">氧原子通常画成红色</button>
            <button type="button" data-answer="correct">从不同视角看，两条 O—H 键始终不共线</button>
            <p class="quiz-feedback" aria-live="polite"></p>
            <button class="review-btn" id="review-observe-btn" type="button">回到旋转观察</button>
          </div>
          <div class="completion" id="completion-status" aria-live="polite">完成两道检查后，生成课堂结论。</div>
        </section>

        <section class="lesson-step lesson-boundary" data-step-card="boundary" hidden>
          <p class="step-kicker">本课边界</p>
          <p>本课只解释水分子的电子对几何、分子构型，并补充教材给出的约 104.5° 键角；这个数不是从当前画布测出来的。分子极性、完整 VSEPR 构型表与定量推导留给后续内容。</p>
        </section>
      </aside>
    </main>
    <script src="./water-structure-lab.script-2.js"></script>
  </body>
</html>