<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      border: 1px solid #d1d5db;
      background: #f8fafc;
      color: #4b5563;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn:hover { background: #e2e8f0; }
    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .plot-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .header-row {
      display: grid;
      grid-template-columns: 1fr 44px 1fr;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      padding-bottom: 6px;
      border-bottom: 2px solid #cbd5e1;
    }
    .team-alpha { color: #0284c7; }
    .stem-title { color: #64748b; font-size: 12px; align-self: center; }
    .team-beta { color: #7c3aed; }

    .data-row {
      display: grid;
      grid-template-columns: 1fr 44px 1fr;
      align-items: center;
      min-height: 38px;
      position: relative;
    }

    .leaves-left {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      padding-right: 10px;
    }

    .stem-cell {
      background: #f1f5f9;
      font-weight: 700;
      font-size: 15px;
      text-align: center;
      line-height: 34px;
      border-radius: 4px;
      color: #334155;
      border-left: 2px solid #cbd5e1;
      border-right: 2px solid #cbd5e1;
    }

    .leaves-right {
      display: flex;
      justify-content: flex-start;
      gap: 6px;
      padding-left: 10px;
    }

    .leaf {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 4px;
      transition: all 0.25s ease;
      color: #334155;
    }

    /* Highlight classes */
    .shape-cluster-a {
      background: rgba(2, 132, 199, 0.18);
      color: #0369a1;
      font-weight: 700;
    }
    .shape-cluster-b {
      background: rgba(124, 58, 237, 0.18);
      color: #6d28d9;
      font-weight: 700;
    }

    .median-leaf {
      box-shadow: 0 0 0 2px #f59e0b;
      background: #fef3c7 !important;
      color: #b45309 !important;
      font-weight: 800;
      position: relative;
    }

    .minmax-leaf {
      box-shadow: 0 0 0 2px #ef4444;
      background: #fee2e2 !important;
      color: #b91c1c !important;
      font-weight: 800;
    }

    .badge-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
      width: 100%;
      max-width: 440px;
    }

    .stat-badge {
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.3;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      transition: all 0.25s ease;
      min-height: 48px;
    }

    .stat-badge.active-a {
      background: #f0f9ff;
      border-color: #38bdf8;
      color: #0369a1;
    }
    .stat-badge.active-b {
      background: #faf5ff;
      border-color: #c084fc;
      color: #6d28d9;
    }

    .stat-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.8;
      margin-bottom: 2px;
    }

    .stat-val {
      font-size: 13px;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn active" onclick="setMode('shape')">✦ Shape</button>
    <button class="btn" onclick="setMode('median')">✦ Median</button>
    <button class="btn" onclick="setMode('range')">✦ Range</button>
  </div>

  <div class="plot-container">
    <div class="header-row">
      <div class="team-alpha">Team Alpha (n=11)</div>
      <div class="stem-title">STEM</div>
      <div class="team-beta">Team Beta (n=11)</div>
    </div>

    
    <div class="data-row">
      <div class="leaves-left">
        <span class="leaf shape-a" id="a-98">8</span>
        <span class="leaf shape-a" id="a-95">5</span>
        <span class="leaf shape-a" id="a-90">0</span>
      </div>
      <div class="stem-cell">9</div>
      <div class="leaves-right"></div>
    </div>

    
    <div class="data-row">
      <div class="leaves-left">
        <span class="leaf shape-a" id="a-89">9</span>
        <span class="leaf shape-a" id="a-86">6</span>
        <span class="leaf shape-a" id="a-84">4</span>
        <span class="leaf shape-a" id="a-81">1</span>
      </div>
      <div class="stem-cell">8</div>
      <div class="leaves-right">
        <span class="leaf shape-b" id="b-86">6</span>
      </div>
    </div>

    
    <div class="data-row">
      <div class="leaves-left">
        <span class="leaf" id="a-78">8</span>
        <span class="leaf" id="a-72">2</span>
      </div>
      <div class="stem-cell">7</div>
      <div class="leaves-right">
        <span class="leaf shape-b" id="b-74">4</span>
        <span class="leaf shape-b" id="b-78">8</span>
      </div>
    </div>

    
    <div class="data-row">
      <div class="leaves-left">
        <span class="leaf" id="a-65">5</span>
      </div>
      <div class="stem-cell">6</div>
      <div class="leaves-right">
        <span class="leaf shape-b" id="b-60">0</span>
        <span class="leaf shape-b" id="b-63">3</span>
        <span class="leaf shape-b" id="b-65">5</span>
        <span class="leaf shape-b" id="b-68">8</span>
        <span class="leaf shape-b" id="b-69">9</span>
      </div>
    </div>

    
    <div class="data-row">
      <div class="leaves-left">
        <span class="leaf" id="a-58">8</span>
      </div>
      <div class="stem-cell">5</div>
      <div class="leaves-right">
        <span class="leaf shape-b" id="b-51">1</span>
        <span class="leaf shape-b" id="b-57">7</span>
      </div>
    </div>

    
    <div class="data-row">
      <div class="leaves-left"></div>
      <div class="stem-cell">4</div>
      <div class="leaves-right">
        <span class="leaf shape-b" id="b-42">2</span>
      </div>
    </div>
  </div>

  <div class="badge-bar">
    <div class="stat-badge active-a" id="badge-alpha">
      <div class="stat-title" id="title-alpha">Distribution</div>
      <div class="stat-val" id="val-alpha">Clustered High (80–98)</div>
    </div>
    <div class="stat-badge active-b" id="badge-beta">
      <div class="stat-title" id="title-beta">Distribution</div>
      <div class="stat-val" id="val-beta">Spread Out (42–86)</div>
    </div>
  </div>

  <script>
    const modes = {
      shape: {
        apply: () => {
          document.querySelectorAll('.shape-a').forEach(el => el.classList.add('shape-cluster-a'));
          document.querySelectorAll('.shape-b').forEach(el => el.classList.add('shape-cluster-b'));
        },
        tA: 'Shape', vA: 'Peaked High (Stems 8–9)',
        tB: 'Shape', vB: 'Symmetric Peak (Stem 6)'
      },
      median: {
        apply: () => {
          document.getElementById('a-84').classList.add('median-leaf');
          document.getElementById('b-65').classList.add('median-leaf');
        },
        tA: 'Median Score', vA: '84 (6th value)',
        tB: 'Median Score', vB: '65 (6th value)'
      },
      range: {
        apply: () => {
          document.getElementById('a-58').classList.add('minmax-leaf');
          document.getElementById('a-98').classList.add('minmax-leaf');
          document.getElementById('b-42').classList.add('minmax-leaf');
          document.getElementById('b-86').classList.add('minmax-leaf');
        },
        tA: 'Range', vA: '98 − 58 = 40',
        tB: 'Range', vB: '86 − 42 = 44'
      }
    };

    function clearHighlights() {
      document.querySelectorAll('.leaf').forEach(el => {
        el.className = 'leaf ' + (el.id.startsWith('a') ? 'shape-a' : 'shape-b');
      });
    }

    function setMode(modeKey) {
      document.querySelectorAll('.btn').forEach((b, idx) => {
        const keys = ['shape', 'median', 'range'];
        b.classList.toggle('active', keys[idx] === modeKey);
      });

      clearHighlights();
      const m = modes[modeKey];
      m.apply();

      document.getElementById('title-alpha').textContent = m.tA;
      document.getElementById('val-alpha').textContent = m.vA;
      document.getElementById('title-beta').textContent = m.tB;
      document.getElementById('val-beta').textContent = m.vB;
    }

    // Init
    setMode('shape');
  </script>
</body>
</html>

Comparing Two Data Sets Using Back-to-Back Stem-and-Leaf Diagrams

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Back-to-Back Stem-and-Leaf Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Plot Table */
    .plot-table {
      width: 100%;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 10px 8px;
    }

    .header-row {
      display: grid;
      grid-template-columns: 1fr 64px 1fr;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 2px solid #e2e8f0;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    .header-alpha {
      color: #2563eb;
      text-align: right;
      padding-right: 12px;
    }

    .header-stem {
      color: #1e293b;
      background: #f1f5f9;
      border-radius: 6px;
      padding: 3px 0;
      font-size: 12px;
    }

    .header-beta {
      color: #0d9488;
      text-align: left;
      padding-left: 12px;
    }

    .row {
      display: grid;
      grid-template-columns: 1fr 64px 1fr;
      align-items: center;
      padding: 3px 0;
      border-radius: 6px;
      transition: background-color 0.2s ease;
    }

    .row.focus-row {
      background: #f8fafc;
    }

    .leaves-left {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding-right: 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 15px;
      font-weight: 600;
    }

    .stem-cell {
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      color: #1e293b;
      background: #e2e8f0;
      border-radius: 6px;
      padding: 2px 0;
      border-left: 2px solid #cbd5e1;
      border-right: 2px solid #cbd5e1;
      transition: all 0.2s ease;
    }

    .leaves-right {
      display: flex;
      justify-content: flex-start;
      gap: 8px;
      padding-left: 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 15px;
      font-weight: 600;
    }

    .leaf {
      cursor: pointer;
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    .leaf-alpha {
      color: #2563eb;
      background: #eff6ff;
    }

    .leaf-beta {
      color: #0d9488;
      background: #f0fdfa;
    }

    .leaf.active-alpha {
      background: #2563eb;
      color: #ffffff;
      box-shadow: 0 0 0 2px #93c5fd;
      transform: scale(1.08);
    }

    .leaf.active-beta {
      background: #0d9488;
      color: #ffffff;
      box-shadow: 0 0 0 2px #99f6e4;
      transform: scale(1.08);
    }

    .stem-cell.active-stem {
      background: #1e293b;
      color: #ffffff;
      box-shadow: 0 0 0 2px #64748b;
    }

    /* Key Card */
    .key-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .key-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .key-card.selected-alpha {
      border-color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
      background: #f8faff;
    }

    .key-card.selected-beta {
      border-color: #0d9488;
      box-shadow: 0 2px 8px rgba(13, 148, 136, 0.15);
      background: #f0fdfa;
    }

    .key-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .alpha-title { color: #2563eb; }
    .beta-title { color: #0d9488; }

    .key-math {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .key-guide {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .badge-leaf {
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 12px;
    }

    .badge-alpha { background: #dbeafe; color: #1e40af; }
    .badge-beta { background: #ccfbf1; color: #115e59; }
    .badge-stem { background: #e2e8f0; color: #1e293b; }

    .dir-arrow {
      font-weight: 800;
      font-size: 13px;
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">

    
    <div class="plot-table">
      <div class="header-row">
        <div class="header-alpha">Team Alpha<br><span style="font-size:11px;font-weight:500;">(Leaves)</span></div>
        <div class="header-stem">Stem<br><span style="font-size:10px;font-weight:500;">(Tens)</span></div>
        <div class="header-beta">Team Beta<br><span style="font-size:11px;font-weight:500;">(Leaves)</span></div>
      </div>

      
      <div class="row" id="row-5">
        <div class="leaves-left">
          <span class="leaf leaf-alpha" data-side="left" data-stem="5" data-leaf="8">8</span>
          <span class="leaf leaf-alpha" data-side="left" data-stem="5" data-leaf="4">4</span>
        </div>
        <div class="stem-cell" id="stem-5">5</div>
        <div class="leaves-right">
          <span class="leaf leaf-beta" data-side="right" data-stem="5" data-leaf="2">2</span>
          <span class="leaf leaf-beta" data-side="right" data-stem="5" data-leaf="7">7</span>
        </div>
      </div>

      
      <div class="row" id="row-6">
        <div class="leaves-left">
          <span class="leaf leaf-alpha" data-side="left" data-stem="6" data-leaf="5">5</span>
          <span class="leaf leaf-alpha" data-side="left" data-stem="6" data-leaf="0">0</span>
        </div>
        <div class="stem-cell" id="stem-6">6</div>
        <div class="leaves-right">
          <span class="leaf leaf-beta" data-side="right" data-stem="6" data-leaf="1">1</span>
          <span class="leaf leaf-beta" data-side="right" data-stem="6" data-leaf="6">6</span>
        </div>
      </div>

      
      <div class="row focus-row" id="row-7">
        <div class="leaves-left">
          <span class="leaf leaf-alpha" data-side="left" data-stem="7" data-leaf="8">8</span>
          <span class="leaf leaf-alpha active-alpha" id="target-leaf-alpha" data-side="left" data-stem="7" data-leaf="2">2</span>
          <span class="leaf leaf-alpha" data-side="left" data-stem="7" data-leaf="1">1</span>
        </div>
        <div class="stem-cell active-stem" id="stem-7">7</div>
        <div class="leaves-right">
          <span class="leaf leaf-beta active-beta" id="target-leaf-beta" data-side="right" data-stem="7" data-leaf="3">3</span>
          <span class="leaf leaf-beta" data-side="right" data-stem="7" data-leaf="5">5</span>
          <span class="leaf leaf-beta" data-side="right" data-stem="7" data-leaf="9">9</span>
        </div>
      </div>

      
      <div class="row" id="row-8">
        <div class="leaves-left">
          <span class="leaf leaf-alpha" data-side="left" data-stem="8" data-leaf="6">6</span>
          <span class="leaf leaf-alpha" data-side="left" data-stem="8" data-leaf="3">3</span>
        </div>
        <div class="stem-cell" id="stem-8">8</div>
        <div class="leaves-right">
          <span class="leaf leaf-beta" data-side="right" data-stem="8" data-leaf="4">4</span>
          <span class="leaf leaf-beta" data-side="right" data-stem="8" data-leaf="8">8</span>
        </div>
      </div>

      
      <div class="row" id="row-9">
        <div class="leaves-left">
          <span class="leaf leaf-alpha" data-side="left" data-stem="9" data-leaf="1">1</span>
        </div>
        <div class="stem-cell" id="stem-9">9</div>
        <div class="leaves-right">
          <span class="leaf leaf-beta" data-side="right" data-stem="9" data-leaf="0">0</span>
          <span class="leaf leaf-beta" data-side="right" data-stem="9" data-leaf="5">5</span>
        </div>
      </div>
    </div>

    
    <div class="key-container">
      
      <div class="key-card selected-alpha" id="card-alpha">
        <div class="key-title alpha-title">Left Key (Team Alpha)</div>
        <div class="key-math" id="math-alpha">
          <span class="badge-leaf badge-alpha" id="disp-alpha-leaf">2</span>
          <span>|</span>
          <span class="badge-leaf badge-stem" id="disp-alpha-stem">7</span>
          <span>=</span>
          <span id="disp-alpha-val">72</span> pts
        </div>
        <div class="key-guide">
          <span>Read stem</span>
          <span class="dir-arrow" style="color:#2563eb;">←</span>
          <span>left to leaf</span>
        </div>
      </div>

      
      <div class="key-card selected-beta" id="card-beta">
        <div class="key-title beta-title">Right Key (Team Beta)</div>
        <div class="key-math" id="math-beta">
          <span class="badge-leaf badge-stem" id="disp-beta-stem">7</span>
          <span>|</span>
          <span class="badge-leaf badge-beta" id="disp-beta-leaf">3</span>
          <span>=</span>
          <span id="disp-beta-val">73</span> pts
        </div>
        <div class="key-guide">
          <span>Read stem</span>
          <span class="dir-arrow" style="color:#0d9488;">→</span>
          <span>right to leaf</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    const leaves = document.querySelectorAll('.leaf');
    const stems = document.querySelectorAll('.stem-cell');
    const cardAlpha = document.getElementById('card-alpha');
    const cardBeta = document.getElementById('card-beta');

    const dispAlphaLeaf = document.getElementById('disp-alpha-leaf');
    const dispAlphaStem = document.getElementById('disp-alpha-stem');
    const dispAlphaVal = document.getElementById('disp-alpha-val');

    const dispBetaLeaf = document.getElementById('disp-beta-leaf');
    const dispBetaStem = document.getElementById('disp-beta-stem');
    const dispBetaVal = document.getElementById('disp-beta-val');

    let activeAlphaStem = '7';
    let activeBetaStem = '7';

    function updateAlpha(leafVal, stemVal, element) {
      document.querySelectorAll('.leaf-alpha').forEach(l => l.classList.remove('active-alpha'));
      if (element) element.classList.add('active-alpha');
      activeAlphaStem = stemVal;
      dispAlphaLeaf.textContent = leafVal;
      dispAlphaStem.textContent = stemVal;
      dispAlphaVal.textContent = stemVal + leafVal;
      cardAlpha.classList.add('selected-alpha');
      syncStemHighlights();
    }

    function updateBeta(leafVal, stemVal, element) {
      document.querySelectorAll('.leaf-beta').forEach(l => l.classList.remove('active-beta'));
      if (element) element.classList.add('active-beta');
      activeBetaStem = stemVal;
      dispBetaLeaf.textContent = leafVal;
      dispBetaStem.textContent = stemVal;
      dispBetaVal.textContent = stemVal + leafVal;
      cardBeta.classList.add('selected-beta');
      syncStemHighlights();
    }

    function syncStemHighlights() {
      stems.forEach(s => s.classList.remove('active-stem'));
      const sA = document.getElementById('stem-' + activeAlphaStem);
      const sB = document.getElementById('stem-' + activeBetaStem);
      if (sA) sA.classList.add('active-stem');
      if (sB) sB.classList.add('active-stem');
    }

    leaves.forEach(leaf => {
      leaf.addEventListener('click', () => {
        const side = leaf.dataset.side;
        const sVal = leaf.dataset.stem;
        const lVal = leaf.dataset.leaf;
        if (side === 'left') {
          updateAlpha(lVal, sVal, leaf);
        } else {
          updateBeta(lVal, sVal, leaf);
        }
      });
    });

    cardAlpha.addEventListener('click', () => {
      const target = document.getElementById('target-leaf-alpha');
      updateAlpha('2', '7', target);
    });

    cardBeta.addEventListener('click', () => {
      const target = document.getElementById('target-leaf-beta');
      updateBeta('3', '7', target);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Reading Back-to-Back Stem-and-Leaf</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    .badge-rule {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 13.5px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(37,99,235,0.08);
      margin-bottom: 12px;
    }

    .plot-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .plot-headers {
      display: grid;
      grid-template-columns: 1fr 70px 1fr;
      width: 100%;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #64748b;
      text-transform: uppercase;
    }

    .plot-row {
      display: grid;
      grid-template-columns: 1fr 70px 1fr;
      width: 100%;
      align-items: center;
      background: #f8fafc;
      border-radius: 12px;
      padding: 10px 6px;
      border: 1px solid #e2e8f0;
    }

    .leaf-side {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .leaf-left {
      justify-content: flex-end;
      padding-right: 12px;
    }

    .leaf-right {
      justify-content: flex-start;
      padding-left: 12px;
    }

    .cell {
      width: 38px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      border-radius: 8px;
      transition: all 0.3s ease;
      position: relative;
    }

    .cell-leaf {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #334155;
    }

    .cell-stem {
      background: #0284c7;
      border: 1.5px solid #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
      margin: 0 auto;
    }

    /* Outward reading indicators */
    .arrows-row {
      display: grid;
      grid-template-columns: 1fr 70px 1fr;
      width: 100%;
      align-items: center;
      text-align: center;
    }

    .arrow-box {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 6px;
      transition: all 0.3s ease;
      opacity: 0.4;
    }

    .arrow-left {
      color: #0284c7;
      justify-content: flex-end;
      padding-right: 12px;
    }

    .arrow-right {
      color: #0284c7;
      justify-content: flex-start;
      padding-left: 12px;
    }

    /* Results container */
    .results-row {
      display: grid;
      grid-template-columns: 1fr 70px 1fr;
      width: 100%;
      max-width: 440px;
      gap: 8px;
    }

    .res-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
    }

    .res-eq {
      font-size: 13px;
      color: #64748b;
      font-weight: 600;
    }

    .res-val {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
    }

    /* Active Highlight States */
    .active-left .cell-leaf-l,
    .active-left .arrow-left,
    .active-left .res-box-l {
      border-color: #0284c7;
      opacity: 1;
    }
    .active-left .cell-leaf-l {
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(2,132,199,0.25);
    }
    .active-left .res-box-l {
      background: #f0f9ff;
      border-color: #38bdf8;
    }

    .active-right .cell-leaf-r,
    .active-right .arrow-right,
    .active-right .res-box-r {
      border-color: #0284c7;
      opacity: 1;
    }
    .active-right .cell-leaf-r {
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(2,132,199,0.25);
    }
    .active-right .res-box-r {
      background: #f0f9ff;
      border-color: #38bdf8;
    }

    /* Control Tabs */
    .controls {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
      margin-top: 10px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body class="active-left active-right">

  <div class="badge-rule">
    Rule: Always start at Stem &amp; read outward
  </div>

  <div class="plot-container">
    <div class="plot-headers">
      <div>Team A (Leaf)</div>
      <div>Stem</div>
      <div>Team B (Leaf)</div>
    </div>

    <div class="plot-row">
      <div class="leaf-side leaf-left">
        <div class="cell cell-leaf cell-leaf-l" id="l4">4</div>
        <div class="cell cell-leaf cell-leaf-l" id="l1">1</div>
      </div>
      <div class="cell cell-stem">6</div>
      <div class="leaf-side leaf-right">
        <div class="cell cell-leaf cell-leaf-r" id="r3">3</div>
        <div class="cell cell-leaf cell-leaf-r" id="r8">8</div>
      </div>
    </div>

    <div class="arrows-row">
      <div class="arrow-box arrow-left">
        <span>⬅️ Read left</span>
      </div>
      <div></div>
      <div class="arrow-box arrow-right">
        <span>Read right ➡️</span>
      </div>
    </div>
  </div>

  <div class="results-row">
    <div class="res-box res-box-l">
      <div class="res-eq">6 &amp; 1 ➔ <b class="res-val">61</b></div>
      <div class="res-eq">6 &amp; 4 ➔ <b class="res-val">64</b></div>
    </div>
    <div style="display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#94a3b8;">
      VALUES
    </div>
    <div class="res-box res-box-r">
      <div class="res-eq">6 &amp; 3 ➔ <b class="res-val">63</b></div>
      <div class="res-eq">6 &amp; 8 ➔ <b class="res-val">68</b></div>
    </div>
  </div>

  <div class="controls">
    <button class="tab-btn active" id="btnBoth" onclick="setMode('both')">Both Sides</button>
    <button class="tab-btn" id="btnLeft" onclick="setMode('left')">⬅️ Left (61, 64)</button>
    <button class="tab-btn" id="btnRight" onclick="setMode('right')">Right (63, 68) ➡️</button>
  </div>

  <script>
    function setMode(mode) {
      document.body.classList.remove('active-left', 'active-right');
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));

      if (mode === 'both') {
        document.body.classList.add('active-left', 'active-right');
        document.getElementById('btnBoth').classList.add('active');
      } else if (mode === 'left') {
        document.body.classList.add('active-left');
        document.getElementById('btnLeft').classList.add('active');
      } else if (mode === 'right') {
        document.body.classList.add('active-right');
        document.getElementById('btnRight').classList.add('active');
      }
    }
  </script>
</body>
</html>

全面调查（普查）与抽样调查的认识

总体、个体、样本与样本容量

抽样的必要性与破坏性试验分析

认识简单随机抽样的特征与等可能性

抽签法（抓阄法）的操作步骤与实践

随机数表法与随机数发生器的使用

样本的代表性、广泛性与抽样偏差防范

统计调查问卷的设计与数据收集方法

数据处理的四大环节：收集、整理、描述与分析

利用科学计算器进行统计数据输入与批量处理

数据清洗、异常值剔除与抽样反思

math

数据的收集与简单随机抽样

扇形统计图的结构特征与百分比意义

各部分所对圆心角度数的计算

扇形统计图的规范作图步骤

从扇形统计图中提取信息并推算具体频数

条形图、折线图与扇形统计图的对比与合理选择

统计图表组合问题：条形图与扇形图的综合互补应用

通过表格与折线图观察变化趋势

随机现象中的趋势图分析与长期规律感知

警惕误导：纵坐标非零起点与不当图表比例分析

基于趋势图的数据外推预测与决策建议

扇形统计图与统计图表趋势分析

频数、频率与频数分布的意义

确定极差、组距与组数的原则与方法

数据分组区间的设定与边界值处理规则

编制频数分布表与累积频数整理

绘制等组距频数直方图的规范步骤

频数折线图的绘制与直方图的关联

辨析条形统计图与频数直方图的本质区别

利用频数直方图解释数据分布形态与特征

基于频数直方图估计概率、比例与达标率

频数分布与频数直方图

算术平均数的意义与基础计算

加权平均数的概念与“权”的统计意义

按百分比、比例与频数计算加权平均数

利用组中值估计频数分布分组数据的平均数

中位数的概念与确定方法（奇数与偶数个数据）

中位数不受极端值影响的稳健性分析

众数的概念、识别与应用场景

平均数、中位数与众数的综合对比与合理选用

使用科学计算器求解复杂数据的平均数与中位数

数据平移与缩放对平均数、中位数、众数的影响

数据的集中趋势（平均数、加权平均数、中位数与众数）

Comparing Distributions with Parallel Dot Plots

Constructing and Comparing Distributions Using Box Plots

Measuring Difference Between Centers as a Multiple of MAD

Measuring Difference Between Medians as a Multiple of IQR

Drawing Informal Comparative Inferences About Two Populations

Comparative Data Analysis and Population Inferences

为什么需要刻画数据的离散程度（波动程度）

极差刻画离散程度的简易性与局限性

数据的离差概念与“离差之和恒为零”性质

离差平方和（SS）的概念与计算方法

方差的定义、公式推导与统计意义

方差的简便计算公式与代数变形技巧

标准差的概念与物理量纲单位的恢复

使用科学计算器计算离差平方和、方差与标准差

数据线性变换（加常数与乘常数）对方差的影响规律

方差在产品质量稳定性与选手选拔中的实际应用

数据的离散程度（离差平方和与方差）

四分位数的定义与三个分割点（Q1、Q2、Q3）

有序数据集四分位数的规范计算步骤与位置确定

四分位距（IQR）的计算及其对离散程度的稳健度量

五数概括法（最小值、Q1、Q2、Q3、最大值）与箱线图

绘制单组数据标准箱线图的规范步骤

基于箱线图与 1.5×IQR 准则识别可疑离群值

并列箱线图在多组数据对比中的应用与分析

百分位数的意义、计算及其在评价等级中的应用

箱线图、直方图与折线图的特征对比与综合解读

分位数与箱线图（四分位数、百分位数与数据分布）

数据分类的实际需求与评价分组好坏的数学标准

组内离差平方和（Within-group SS）的定义与计算

组间离差平方和与总离差平方和的分解思想

一维数据两分类切分点的枚举与最小准则选择

数据多分类（三分组）的最优分割点搜索策略

利用电子表格与计算器辅助进行数据聚类运算

最优分类结果的实际解释与行业标准对照

基于离差平方和的数据分类与聚类方法

样本估计总体的统计推断思想与逻辑依据

用样本平均数估计总体平均数与总体总量

用样本百分比（比例）估计总体比例与达标人数

用样本方差估计总体方差与总体波动水平

捕获-再捕获法（捉放法/标记重捕法）估计物种总量

撰写完整数据分析报告与合理性解释

基于统计推断的商业采购、市政规划决策案例

统计结论的质疑、辩论、交流与批判性反思

样本估计总体与数据决策推断

频率与概率的辩证关系：实验值与理论值

抛硬币历史试验：大量重复试验下的频率稳定性

用频率估计概率的计算方法与适用情境

绘制频率折线图并观察围绕概率的收敛振荡

替代物模拟实验的设计原则与操作

利用计算器随机数发生器与蒙特卡罗方法模拟概率

蒙特卡罗投点法估计不规则图形面积与圆周率 $\pi$

频率估计概率的误差控制与必要样本量分析

频率与概率（大量重复试验与模拟）

Medidas de tendencia central: media

Cálculo e interpretación de la mediana en datos ordenados

Identificación de la moda en datos cualitativos y cuantitativos

Elección de la medida de tendencia central más adecuada

Resolución de problemas a partir de tablas y gráficos estadísticos

Formulación de preguntas e hipótesis con datos estadísticos

Predicciones y justificación de conclusiones estadísticas

Estadística descriptiva: Medidas de tendencia central y análisis de datos

Distinción entre fenómenos deterministas y aleatorios

Espacio muestral y tipos de eventos: seguro, posible e imposible

Diagramas de árbol para predecir posibilidades en experimentos compuestos

Cálculo de la probabilidad clásica: regla de Laplace

Probabilidad como fracción, decimal y porcentaje

Probabilidad frecuencial y simulación de experimentos

Conjeturas y toma de decisiones en juegos de azar

Probabilidad y experimentos aleatorios

Comparing Data From Different Groups

Comparing Two Groups with Dot Plots

Comparing Two Groups with Box Plots

Comparing Shapes, Centers, and Spreads of Data Sets

Real-World Data Comparison Problems

Comparing Data Sets with Dot Plots and Box Plots

Setting Up Comparisons Between Two Populations

Comparing Population Means Using Sample Data

Comparing Population Proportions Using Sample Data

Using Overlapping Distributions to Compare Populations

Making Informal Comparative Inferences About Populations

Using Measures of Center and Spread to Compare Populations

Real-World Population Comparison Problems

Comparing Two Populations Using Sample Data

OGM.8.SP.4

OGM.8.SP.4

Aligned learning resources

Related diagrams