<!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="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .title {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: -0.2px;
      text-align: center;
      margin-bottom: 8px;
    }

    .tree {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      max-width: 340px;
    }

    .node-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
    }

    .question-box {
      flex: 1;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.25;
      min-height: 48px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
      transition: border-color 0.2s, background 0.2s;
    }

    .question-box.active {
      border-color: #3b82f6;
      background: #eff6ff;
    }

    .q-icon {
      font-size: 16px;
      flex-shrink: 0;
    }

    .branch {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-shrink: 0;
      width: 110px;
    }

    .btn-branch {
      border: none;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 10.5px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: filter 0.15s, opacity 0.2s;
      text-align: left;
    }

    .btn-branch:active {
      filter: brightness(0.92);
    }

    /* Color-coded tags */
    .tag-census {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .tag-sample {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #93c5fd;
    }

    .tag-next {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #cbd5e1;
    }

    .tag-dim {
      opacity: 0.35;
    }

    .arrow-icon {
      font-size: 10px;
      margin-left: 2px;
    }

    .connector {
      text-align: center;
      font-size: 11px;
      color: #94a3b8;
      line-height: 1;
      margin: -4px 0 -4px -50px;
    }

    /* Scenario Bar */
    .scenarios-wrap {
      width: 100%;
      max-width: 340px;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid #f1f5f9;
    }

    .scenario-title {
      font-size: 10.5px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 4px;
      text-align: center;
    }

    .scenario-btns {
      display: flex;
      gap: 4px;
    }

    .sc-btn {
      flex: 1;
      padding: 5px 3px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 6px;
      font-size: 10px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      line-height: 1.15;
      text-align: center;
    }

    .sc-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="title">Census vs. Sample Decision Guide</div>

  <div class="tree" id="tree">
    
    <div class="node-row" id="row1">
      <div class="question-box" id="q1">
        <span class="q-icon">👥</span>
        <span>Small &amp; reachable<br>population?</span>
      </div>
      <div class="branch">
        <div class="btn-branch tag-census" id="r1-yes">
          <span>Yes → Census</span>
          <span class="arrow-icon">✓</span>
        </div>
        <div class="btn-branch tag-next" id="r1-no">
          <span>No → Continue</span>
          <span class="arrow-icon">↓</span>
        </div>
      </div>
    </div>

    <div class="connector">↓</div>

    
    <div class="node-row" id="row2">
      <div class="question-box" id="q2">
        <span class="q-icon">🧪</span>
        <span>Destructive test<br>or high cost?</span>
      </div>
      <div class="branch">
        <div class="btn-branch tag-sample" id="r2-yes">
          <span>Yes → Sample</span>
          <span class="arrow-icon">✓</span>
        </div>
        <div class="btn-branch tag-next" id="r2-no">
          <span>No → Continue</span>
          <span class="arrow-icon">↓</span>
        </div>
      </div>
    </div>

    <div class="connector">↓</div>

    
    <div class="node-row" id="row3">
      <div class="question-box" id="q3">
        <span class="q-icon">🗳️</span>
        <span>100% precision<br>required by law?</span>
      </div>
      <div class="branch">
        <div class="btn-branch tag-census" id="r3-yes">
          <span>Yes → Census</span>
          <span class="arrow-icon">✓</span>
        </div>
        <div class="btn-branch tag-sample" id="r3-no">
          <span>No → Sample</span>
          <span class="arrow-icon">✓</span>
        </div>
      </div>
    </div>
  </div>

  <div class="scenarios-wrap">
    <div class="scenario-title">Tap an example to trace the path:</div>
    <div class="scenario-btns">
      <button class="sc-btn" onclick="tracePath(1)">Class Poll<br><span style="font-weight:400">25 students</span></button>
      <button class="sc-btn" onclick="tracePath(2)">Chili Saltiness<br><span style="font-weight:400">50 gal pot</span></button>
      <button class="sc-btn" onclick="tracePath(3)">Official Election<br><span style="font-weight:400">Legal vote</span></button>
    </div>
  </div>

  <script>
    function clearHighlight() {
      document.querySelectorAll('.question-box').forEach(el => el.classList.remove('active'));
      document.querySelectorAll('.btn-branch').forEach(el => el.classList.remove('tag-dim'));
      document.querySelectorAll('.sc-btn').forEach(el => el.classList.remove('active'));
    }

    function tracePath(scenario) {
      clearHighlight();
      event.currentTarget.classList.add('active');

      const allBranches = ['r1-yes', 'r1-no', 'r2-yes', 'r2-no', 'r3-yes', 'r3-no'];

      if (scenario === 1) {
        // Small population -> Census
        document.getElementById('q1').classList.add('active');
        allBranches.forEach(id => {
          if (id !== 'r1-yes') document.getElementById(id).classList.add('tag-dim');
        });
      } else if (scenario === 2) {
        // Chili pot: large, taste test (eats/destroys item) -> Sample
        document.getElementById('q1').classList.add('active');
        document.getElementById('q2').classList.add('active');
        allBranches.forEach(id => {
          if (id !== 'r1-no' && id !== 'r2-yes') document.getElementById(id).classList.add('tag-dim');
        });
      } else if (scenario === 3) {
        // Election -> Large, non-destructive, 100% legal precision required -> Census
        document.getElementById('q1').classList.add('active');
        document.getElementById('q2').classList.add('active');
        document.getElementById('q3').classList.add('active');
        allBranches.forEach(id => {
          if (id !== 'r1-no' && id !== 'r2-no' && id !== 'r3-yes') document.getElementById(id).classList.add('tag-dim');
        });
      }
    }
  </script>
</body>
</html>

Census Versus Sample in Data Collection

<!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="1:1">
  <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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .wrapper {
      width: 100%;
      max-width: 320px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .segmented-control {
      display: flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 10px;
      width: 100%;
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .tab-btn.active.census {
      background: #ffffff;
      color: #16a34a;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .tab-btn.active.sample {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .population-card {
      width: 100%;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .card-header {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #64748b;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 5px;
      width: 100%;
      max-width: 250px;
      aspect-ratio: 1 / 1;
    }
    .dot {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: #cbd5e1;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }
    .dot.census-active {
      background: #22c55e;
      transform: scale(1.05);
    }
    .dot.sample-active {
      background: #0284c7;
      transform: scale(1.15);
      box-shadow: 0 0 4px rgba(2, 132, 199, 0.5);
    }
    .status-badge {
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }
    .status-badge.census {
      background: #dcfce7;
      color: #15803d;
    }
    .status-badge.sample {
      background: #e0f2fe;
      color: #0369a1;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="segmented-control" role="tablist">
      <button class="tab-btn active census" id="btnCensus" role="tab" aria-selected="true">
        ✓ Census
      </button>
      <button class="tab-btn sample" id="btnSample" role="tab" aria-selected="false">
        🔍 Sample
      </button>
    </div>

    <div class="population-card">
      <div class="card-header">Population: 100 Students</div>
      <div class="grid-container" id="grid"></div>
      <div class="status-badge census" id="statusBadge">
        ✓ 100/100 Surveyed
      </div>
    </div>
  </div>

  <script>
    const sampleIndices = new Set([
      3, 8, 14, 22, 31, 37, 45, 52, 59, 66, 73, 80, 86, 92, 97
    ]);

    const grid = document.getElementById('grid');
    const btnCensus = document.getElementById('btnCensus');
    const btnSample = document.getElementById('btnSample');
    const statusBadge = document.getElementById('statusBadge');
    const dots = [];

    for (let i = 0; i < 100; i++) {
      const dot = document.createElement('div');
      dot.className = 'dot census-active';
      grid.appendChild(dot);
      dots.push(dot);
    }

    function setMode(mode) {
      if (mode === 'census') {
        btnCensus.classList.add('active');
        btnSample.classList.remove('active');
        btnCensus.setAttribute('aria-selected', 'true');
        btnSample.setAttribute('aria-selected', 'false');
        statusBadge.className = 'status-badge census';
        statusBadge.textContent = '✓ 100/100 Surveyed';

        dots.forEach(dot => {
          dot.className = 'dot census-active';
        });
      } else {
        btnSample.classList.add('active');
        btnCensus.classList.remove('active');
        btnSample.setAttribute('aria-selected', 'true');
        btnCensus.setAttribute('aria-selected', 'false');
        statusBadge.className = 'status-badge sample';
        statusBadge.textContent = '🔍 15/100 Surveyed';

        dots.forEach((dot, idx) => {
          if (sampleIndices.has(idx)) {
            dot.className = 'dot sample-active';
          } else {
            dot.className = 'dot';
          }
        });
      }
    }

    btnCensus.addEventListener('click', () => setMode('census'));
    btnSample.addEventListener('click', () => setMode('sample'));
  </script>
</body>
</html>

Evaluating Sampling Methods and Identifying Sample Bias

Observational Studies Versus Controlled Experiments

Distinguishing Population Parameters (μ, σ) from Sample Statistics (x̄, s)

Simulating Sample Size Effects on Variability with Technology

Identifying and Preventing Nonresponse and Wording Bias

Designing a Valid Statistical Investigation Plan

math

Sampling Methods, Parameters, and Bias

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

现实情境数学化：从生活现象到数学问题的抽象转化

跨学科实践：校园绿化与微气候环境指标监测分析

科学探究：光的反射折射规律与平面几何坐标建模

数学建模的基本流程：提出假设、建构模型、求解与检验

项目化学习中的分工协作、进度规划与数据共享

用规范数学语言表达世界：科学研究论文与答辩展示

综合与实践：跨学科课题研究与现实情境数学化

社会调研案例：社区生活垃圾分类现状与减量化数学分析

城市交通案例：公交站点候车时间与排队服务系统优化

经济生活案例：商场促销方案与抽奖期望收益评估

体育健康案例：青少年体质健康多项指标的综合评定与聚类

科技前沿案例：家庭碳足迹核算与节能减排趋势预测模型

综合实践探究成果展示、同行互评与深度反思

综合与实践：数据建模与社会生活决策

Techniques for Data Collection

Census vs Sampling

Experiments and Observational Studies

Practicalities and Implications of Data Collection

Random vs Non-Random Sampling

Data Collection Techniques

Analysing Data from Primary Sources

Analysing Data from Secondary Sources

Variation in Random Samples

Effect of Sample Size on Variation

Planning Statistical Investigations with Samples

Ethical and Fair Methods in Statistics

Reporting Findings with Uncertainty

Sample Analysis and Statistical Investigations

Tipos de variables y escalas de medición: nominal, ordinal, intervalo y razón

Población, muestra y técnicas de muestreo aleatorio

Tablas de frecuencias para datos agrupados en intervalos

Histogramas y polígonos de frecuencias

Ojivas y gráficos de frecuencias acumuladas

Recolección, organización y representación de datos estadísticos

Cálculo de la media aritmética en datos agrupados

Cálculo de la mediana y la moda en datos agrupados

Comparación de media, mediana y moda según asimetría

Medidas de posición: cuartiles, deciles y percentiles

Diagramas de caja y bigotes (boxplots) y valores atípicos

Medidas de dispersión: rango y desviación media

Varianza y desviación estándar muestral y poblacional

Coeficiente de variación y comparación de homogeneidad

Interpretación de información estadística en noticias e informes

Medidas de tendencia central, posición y dispersión

Tablas de contingencia o doble entrada

Frecuencias relativas marginales y condicionales

Diagramas de dispersión y asociación entre variables

Tipo de correlación lineal: positiva, negativa y nula

Recta de tendencia o de mejor ajuste

Interpolación y extrapolación con la recta de ajuste

Diferencia entre correlación y causalidad

Distorsión y manipulación en gráficos estadísticos (medios de comunicación)

OGM.9.SP.1

Aligned learning resources

Related diagrams