<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      width: 100%;
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      user-select: none;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 500px;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
    }

    .play-btn {
      width: 36px;
      height: 34px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .play-btn:hover {
      background: #e2e8f0;
    }

    /* Stage Container */
    .stage {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 320px;
    }

    .step-view {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .step-view.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Step 1: Raw Data Grid */
    .raw-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      width: 100%;
    }

    .raw-chip {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 600;
    }

    .badge-grade {
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 11px;
    }
    .badge-jr { background: #dbeafe; color: #1d4ed8; }
    .badge-sr { background: #f3e8ff; color: #7e22ce; }

    .badge-pref {
      padding: 2px 5px;
      border-radius: 4px;
      font-size: 11px;
    }
    .badge-ath { background: #dcfce7; color: #15803d; }
    .badge-art { background: #ffedd5; color: #c2410c; }

    /* Step 2 & 3: Two-Way Table */
    .table-wrap {
      width: 100%;
    }

    .two-way-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 4px;
      table-layout: fixed;
    }

    th, td {
      text-align: center;
      padding: 8px 4px;
      border-radius: 6px;
      font-size: 13px;
    }

    .th-header {
      background: #e2e8f0;
      color: #334155;
      font-weight: 700;
    }

    .th-side {
      background: #e2e8f0;
      color: #334155;
      font-weight: 700;
      width: 22%;
    }

    .th-corner {
      background: transparent;
      border: none;
    }

    .cell-data {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      font-weight: 700;
      font-size: 15px;
      color: #0f172a;
      height: 60px;
    }

    .tallies {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: 1px;
      margin-bottom: 2px;
    }

    .num-count {
      font-size: 17px;
      font-weight: 800;
      color: #0284c7;
    }

    /* Marginals for Step 3 */
    .cell-total {
      background: #f1f5f9;
      border: 1px dashed #94a3b8;
      font-weight: 700;
      font-size: 14px;
      color: #475569;
    }

    .cell-total.highlight {
      background: #e0f2fe;
      border: 1px solid #38bdf8;
      color: #0369a1;
      font-size: 16px;
      font-weight: 800;
    }

    .grand-total {
      background: #dcfce7 !important;
      border: 2px solid #22c55e !important;
      color: #15803d !important;
      font-size: 17px !important;
      font-weight: 900 !important;
    }

    .calc-hint {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      display: block;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Raw Data</button>
    <button class="step-btn" onclick="setStep(1)">2. Tally</button>
    <button class="step-btn" onclick="setStep(2)">3. Totals</button>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" title="Auto Play">▶</button>
  </div>

  
  <div class="stage">
    
    
    <div class="step-view active" id="view0">
      <div class="raw-grid">
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>

        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-art">Arts</span></div>

        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-ath">Ath</span></div>

        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-ath">Ath</span></div>

        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-art">Arts</span></div>
        <div class="raw-chip"><span class="badge-grade badge-jr">Jr</span><span class="badge-pref badge-ath">Ath</span></div>
        <div class="raw-chip"><span class="badge-grade badge-sr">Sr</span><span class="badge-pref badge-art">Arts</span></div>
      </div>
    </div>

    
    <div class="step-view" id="view1">
      <div class="table-wrap">
        <table class="two-way-table">
          <tr>
            <th class="th-corner"></th>
            <th class="th-header">Athletics</th>
            <th class="th-header">Arts</th>
            <th class="th-header" style="opacity:0.35;">Total</th>
          </tr>
          <tr>
            <th class="th-side">Junior</th>
            <td class="cell-data">
              <div class="tallies">卌 ||</div>
              <div class="num-count">7</div>
            </td>
            <td class="cell-data">
              <div class="tallies">|||</div>
              <div class="num-count">3</div>
            </td>
            <td class="cell-total">—</td>
          </tr>
          <tr>
            <th class="th-side">Senior</th>
            <td class="cell-data">
              <div class="tallies">||||</div>
              <div class="num-count">4</div>
            </td>
            <td class="cell-data">
              <div class="tallies">卌 |</div>
              <div class="num-count">6</div>
            </td>
            <td class="cell-total">—</td>
          </tr>
          <tr>
            <th class="th-side" style="opacity:0.35;">Total</th>
            <td class="cell-total">—</td>
            <td class="cell-total">—</td>
            <td class="cell-total">—</td>
          </tr>
        </table>
      </div>
    </div>

    
    <div class="step-view" id="view2">
      <div class="table-wrap">
        <table class="two-way-table">
          <tr>
            <th class="th-corner"></th>
            <th class="th-header">Athletics</th>
            <th class="th-header">Arts</th>
            <th class="th-header" style="background:#bae6fd; color:#0369a1;">Total</th>
          </tr>
          <tr>
            <th class="th-side">Junior</th>
            <td class="cell-data">7</td>
            <td class="cell-data">3</td>
            <td class="cell-total highlight">
              10
              <span class="calc-hint">7 + 3</span>
            </td>
          </tr>
          <tr>
            <th class="th-side">Senior</th>
            <td class="cell-data">4</td>
            <td class="cell-data">6</td>
            <td class="cell-total highlight">
              10
              <span class="calc-hint">4 + 6</span>
            </td>
          </tr>
          <tr>
            <th class="th-side" style="background:#bae6fd; color:#0369a1;">Total</th>
            <td class="cell-total highlight">
              11
              <span class="calc-hint">7 + 4</span>
            </td>
            <td class="cell-total highlight">
              9
              <span class="calc-hint">3 + 6</span>
            </td>
            <td class="cell-total grand-total">
              N = 20
              <span class="calc-hint" style="color:#166534;">10 + 10</span>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>

  <script>
    let currentStep = 0;
    let timer = null;

    const btns = document.querySelectorAll('.step-btn');
    const views = [
      document.getElementById('view0'),
      document.getElementById('view1'),
      document.getElementById('view2')
    ];
    const playBtn = document.getElementById('playBtn');

    function setStep(index) {
      currentStep = index;
      btns.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      views.forEach((view, i) => {
        view.classList.toggle('active', i === index);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % 3);
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶';
      } else {
        nextStep();
        timer = setInterval(nextStep, 3500);
        playBtn.textContent = '⏸';
      }
    }
  </script>
</body>
</html>

Organizing Categorical Data Using Two-Way Tables

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2x2 Contingency Table Marginal Sums</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    /* Math typography styling */
    .math {
      font-family: "Times New Roman", Times, Georgia, serif;
      font-style: italic;
    }
    .math sub, .math sup {
      font-style: normal;
      font-size: 0.72em;
    }
    .math .op {
      font-style: normal;
      margin: 0 4px;
      color: #64748b;
    }
    .math .sym {
      font-style: normal;
    }

    /* Controls Header */
    .controls {
      display: flex;
      gap: 8px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }

    .btn {
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      padding: 6px 14px;
      border-radius: 9999px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn.active-row-btn {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #3b82f6;
      box-shadow: 0 0 0 1px #3b82f6;
    }

    .btn.active-col-btn {
      background: #f5f3ff;
      color: #6d28d9;
      border-color: #8b5cf6;
      box-shadow: 0 0 0 1px #8b5cf6;
    }

    .btn.active-total-btn {
      background: #ecfdf5;
      color: #047857;
      border-color: #10b981;
      box-shadow: 0 0 0 1px #10b981;
    }

    /* Grid Diagram Wrapper */
    .matrix-wrapper {
      position: relative;
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
    }

    .matrix-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr) 28px 1fr;
      grid-template-rows: repeat(2, auto) 28px auto;
      gap: 8px 6px;
      align-items: center;
    }

    /* Cell Styles */
    .cell {
      position: relative;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      min-height: 52px;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .cell-main {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.2;
    }

    .cell-desc {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    /* Cell Categories */
    .cell.data-cell {
      background: #ffffff;
      border-color: #cbd5e1;
      color: #1e293b;
    }

    .cell.row-sum {
      border-color: #93c5fd;
      background: #f0f7ff;
      color: #1d4ed8;
    }

    .cell.col-sum {
      border-color: #c4b5fd;
      background: #f7f5ff;
      color: #6d28d9;
    }

    .cell.grand-total {
      border-color: #6ee7b7;
      background: #f0fdf4;
      color: #047857;
    }

    /* Inter-cell Connectors (operators between borders) */
    .connector {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #94a3b8;
      transition: color 0.25s ease, opacity 0.25s ease;
    }

    .connector-h {
      grid-column: 3;
      height: 100%;
    }

    .connector-v {
      grid-row: 3;
      width: 100%;
      height: 28px;
    }

    /* Highlight States */
    .mode-rows .cell.data-cell {
      border-color: #93c5fd;
      background: #f8faff;
    }
    .mode-rows .cell.row-sum {
      border-color: #3b82f6;
      background: #dbeafe;
      box-shadow: 0 0 0 2px #3b82f6;
    }
    .mode-rows .connector-h {
      color: #3b82f6;
    }

    .mode-cols .cell.data-cell {
      border-color: #c4b5fd;
      background: #faf8ff;
    }
    .mode-cols .cell.col-sum {
      border-color: #8b5cf6;
      background: #ede9fe;
      box-shadow: 0 0 0 2px #8b5cf6;
    }
    .mode-cols .connector-v {
      color: #8b5cf6;
    }

    .mode-total .cell.row-sum {
      border-color: #3b82f6;
      background: #eff6ff;
    }
    .mode-total .cell.col-sum {
      border-color: #8b5cf6;
      background: #f5f3ff;
    }
    .mode-total .cell.grand-total {
      border-color: #10b981;
      background: #d1fae5;
      box-shadow: 0 0 0 2px #10b981;
    }
    .mode-total .connector-h.total-conn {
      color: #10b981;
    }
    .mode-total .connector-v.total-conn {
      color: #10b981;
    }

    /* Formula & Explanation Bar */
    .info-panel {
      margin-top: 14px;
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .equation-bar {
      width: 100%;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      min-height: 48px;
      text-align: center;
      transition: all 0.25s ease;
    }

    .info-note {
      font-size: 12px;
      line-height: 1.45;
      color: #475569;
      text-align: center;
      background: #ffffff;
      padding: 4px 8px;
    }

    .legend-tag {
      display: inline-block;
      font-weight: 600;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 11px;
    }
    .tag-row { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .tag-col { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
    .tag-total { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

    @media (max-width: 380px) {
      .cell {
        min-height: 46px;
        padding: 4px 2px;
      }
      .cell-main {
        font-size: 15px;
      }
      .cell-desc {
        font-size: 9px;
      }
      .btn {
        padding: 5px 10px;
        font-size: 12px;
      }
      .equation-bar {
        font-size: 13px;
        padding: 8px 6px;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn active-row-btn" id="btn-0" onclick="setStep(0)">
      <span>Row Sums</span> <span class="math"><i>R</i><sub><i>i</i></sub></span>
    </button>
    <button class="btn" id="btn-1" onclick="setStep(1)">
      <span>Column Sums</span> <span class="math"><i>C</i><sub><i>j</i></sub></span>
    </button>
    <button class="btn" id="btn-2" onclick="setStep(2)">
      <span>Grand Total</span> <span class="math"><i>N</i></span>
    </button>
  </div>

  
  <div class="matrix-wrapper">
    <div class="matrix-grid mode-rows" id="grid">
      
      <div class="cell data-cell" style="grid-column: 1; grid-row: 1;">
        <div class="cell-main math"><i>n</i><sub>11</sub></div>
        <div class="cell-desc">Row 1, Col 1</div>
      </div>
      <div class="cell data-cell" style="grid-column: 2; grid-row: 1;">
        <div class="cell-main math"><i>n</i><sub>12</sub></div>
        <div class="cell-desc">Row 1, Col 2</div>
      </div>
      <div class="connector connector-h" style="grid-row: 1;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="4" y1="12" x2="20" y2="12"></line>
          <polyline points="14 6 20 12 14 18"></polyline>
        </svg>
      </div>
      <div class="cell row-sum" style="grid-column: 4; grid-row: 1;">
        <div class="cell-main math"><i>R</i><sub>1</sub></div>
        <div class="cell-desc math"><i>n</i><sub>11</sub> + <i>n</i><sub>12</sub></div>
      </div>

      
      <div class="cell data-cell" style="grid-column: 1; grid-row: 2;">
        <div class="cell-main math"><i>n</i><sub>21</sub></div>
        <div class="cell-desc">Row 2, Col 1</div>
      </div>
      <div class="cell data-cell" style="grid-column: 2; grid-row: 2;">
        <div class="cell-main math"><i>n</i><sub>22</sub></div>
        <div class="cell-desc">Row 2, Col 2</div>
      </div>
      <div class="connector connector-h" style="grid-row: 2;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="4" y1="12" x2="20" y2="12"></line>
          <polyline points="14 6 20 12 14 18"></polyline>
        </svg>
      </div>
      <div class="cell row-sum" style="grid-column: 4; grid-row: 2;">
        <div class="cell-main math"><i>R</i><sub>2</sub></div>
        <div class="cell-desc math"><i>n</i><sub>21</sub> + <i>n</i><sub>22</sub></div>
      </div>

      
      <div class="connector connector-v" style="grid-column: 1;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="4" x2="12" y2="20"></line>
          <polyline points="6 14 12 20 18 14"></polyline>
        </svg>
      </div>
      <div class="connector connector-v" style="grid-column: 2;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="4" x2="12" y2="20"></line>
          <polyline points="6 14 12 20 18 14"></polyline>
        </svg>
      </div>
      <div class="connector connector-v total-conn" style="grid-column: 4;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="12" y1="4" x2="12" y2="20"></line>
          <polyline points="6 14 12 20 18 14"></polyline>
        </svg>
      </div>

      
      <div class="cell col-sum" style="grid-column: 1; grid-row: 4;">
        <div class="cell-main math"><i>C</i><sub>1</sub></div>
        <div class="cell-desc math"><i>n</i><sub>11</sub> + <i>n</i><sub>21</sub></div>
      </div>
      <div class="cell col-sum" style="grid-column: 2; grid-row: 4;">
        <div class="cell-main math"><i>C</i><sub>2</sub></div>
        <div class="cell-desc math"><i>n</i><sub>12</sub> + <i>n</i><sub>22</sub></div>
      </div>
      <div class="connector connector-h total-conn" style="grid-row: 4;">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="4" y1="12" x2="20" y2="12"></line>
          <polyline points="14 6 20 12 14 18"></polyline>
        </svg>
      </div>
      <div class="cell grand-total" style="grid-column: 4; grid-row: 4;">
        <div class="cell-main math"><i>N</i></div>
        <div class="cell-desc">Grand Total</div>
      </div>
    </div>
  </div>

  
  <div class="info-panel">
    <div class="equation-bar" id="eq-bar"></div>
    <div class="info-note" id="info-desc"></div>
  </div>

  <script>
    const stepsData = [
      {
        modeClass: "mode-rows",
        btnClass: "active-row-btn",
        borderHighlight: "#3b82f6",
        equationHtml: `<span class="math"><b><i>R</i><sub>1</sub></b> = <i>n</i><sub>11</sub> + <i>n</i><sub>12</sub> &nbsp;&nbsp;|&nbsp;&nbsp; <b><i>R</i><sub>2</sub></b> = <i>n</i><sub>21</sub> + <i>n</i><sub>22</sub></span>`,
        descHtml: `<span class="legend-tag tag-row">Horizontal Sum</span> Adding cell frequencies across each row gives marginal row totals <span class="math"><i>R</i><sub>1</sub></span> and <span class="math"><i>R</i><sub>2</sub></span>.`
      },
      {
        modeClass: "mode-cols",
        btnClass: "active-col-btn",
        borderHighlight: "#8b5cf6",
        equationHtml: `<span class="math"><b><i>C</i><sub>1</sub></b> = <i>n</i><sub>11</sub> + <i>n</i><sub>21</sub> &nbsp;&nbsp;|&nbsp;&nbsp; <b><i>C</i><sub>2</sub></b> = <i>n</i><sub>12</sub> + <i>n</i><sub>22</sub></span>`,
        descHtml: `<span class="legend-tag tag-col">Vertical Sum</span> Adding cell frequencies down each column gives marginal column totals <span class="math"><i>C</i><sub>1</sub></span> and <span class="math"><i>C</i><sub>2</sub></span>.`
      },
      {
        modeClass: "mode-total",
        btnClass: "active-total-btn",
        borderHighlight: "#10b981",
        equationHtml: `<span class="math"><span class="sym">&sum;</span> <i>R</i><sub><i>i</i></sub> = <i>R</i><sub>1</sub> + <i>R</i><sub>2</sub> = <b><i>N</i></b> = <i>C</i><sub>1</sub> + <i>C</i><sub>2</sub> = <span class="sym">&sum;</span> <i>C</i><sub><i>j</i></sub></span>`,
        descHtml: `<span class="legend-tag tag-total">Sum Equivalence</span> Summing all row totals or all column totals yields the identical sample total <span class="math"><b><i>N</i></b></span>.`
      }
    ];

    function setStep(index) {
      const grid = document.getElementById("grid");
      const eqBar = document.getElementById("eq-bar");
      const infoDesc = document.getElementById("info-desc");

      // Update button styles
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById(`btn-${i}`);
        btn.className = "btn" + (i === index ? ` ${stepsData[index].btnClass}` : "");
      }

      // Update grid mode class
      grid.className = "matrix-grid " + stepsData[index].modeClass;

      // Update equation and description
      eqBar.innerHTML = stepsData[index].equationHtml;
      eqBar.style.borderColor = stepsData[index].borderHighlight;
      infoDesc.innerHTML = stepsData[index].descHtml;
    }

    // Initialize with Step 0 (Row sums)
    setStep(0);
  </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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background-color: #f8fafc;
      color: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .main-view {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 620px;
      flex: 1;
    }

    /* Left: Slips Column */
    .slips-column {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
      min-width: 140px;
      max-width: 190px;
    }

    .slip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: all 0.3s ease;
      opacity: 0.9;
    }

    .slip.active {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
      transform: translateX(4px);
      opacity: 1;
    }

    .slip.sorted {
      opacity: 0.35;
      background: #f1f5f9;
      transform: scale(0.96);
    }

    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .tag-grade {
      background: #eff6ff;
      color: #3b82f6;
    }

    .tag-place {
      background: #f0fdfa;
      color: #0d9488;
    }

    /* Center: Transition arrow */
    .arrow-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #94a3b8;
      font-size: 20px;
      font-weight: bold;
    }

    /* Right: Table */
    .table-column {
      flex: 1.2;
      min-width: 175px;
      max-width: 240px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr 1fr;
      grid-template-rows: auto 1fr 1fr;
      gap: 6px;
      text-align: center;
      font-size: 13px;
    }

    .cell {
      padding: 8px 4px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    }

    .cell-header {
      color: #64748b;
      font-size: 12px;
      background: #f8fafc;
    }

    .cell-data {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #1e293b;
      font-size: 16px;
      font-weight: 700;
      min-height: 42px;
      transition: all 0.3s ease;
    }

    .cell-data.highlight {
      background: #dbeafe;
      border-color: #3b82f6;
      color: #1d4ed8;
      transform: scale(1.05);
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 12px;
      width: 100%;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #3b82f6;
      border-color: #3b82f6;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #2563eb;
    }

    .dots-container {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: all 0.2s;
    }

    .dot.active {
      background: #3b82f6;
      transform: scale(1.2);
    }

    @media (max-width: 420px) {
      .main-view {
        gap: 8px;
      }
      .slip {
        padding: 6px 6px;
      }
      .tag {
        font-size: 10px;
      }
      .grid {
        font-size: 11px;
        gap: 4px;
      }
      .cell-header {
        font-size: 10px;
      }
      .cell-data {
        font-size: 14px;
        min-height: 36px;
      }
    }
  </style>
</head>
<body>

  <div class="main-view">
    
    <div class="slips-column" id="slipsList">
      <div class="slip" id="slip-0">
        <span class="tag tag-grade">Junior</span>
        <span class="tag tag-place">Library</span>
      </div>
      <div class="slip" id="slip-1">
        <span class="tag tag-grade">Senior</span>
        <span class="tag tag-place">Home</span>
      </div>
      <div class="slip" id="slip-2">
        <span class="tag tag-grade">Junior</span>
        <span class="tag tag-place">Home</span>
      </div>
      <div class="slip" id="slip-3">
        <span class="tag tag-grade">Junior</span>
        <span class="tag tag-place">Library</span>
      </div>
    </div>

    
    <div class="arrow-divider">→</div>

    
    <div class="table-column">
      <div class="grid">
        <div class="cell cell-header"></div>
        <div class="cell cell-header">Library</div>
        <div class="cell cell-header">Home</div>

        <div class="cell cell-header">Junior</div>
        <div class="cell cell-data" id="cell-jl">0</div>
        <div class="cell cell-data" id="cell-jh">0</div>

        <div class="cell cell-header">Senior</div>
        <div class="cell cell-data" id="cell-sl">0</div>
        <div class="cell cell-data" id="cell-sh">0</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" onclick="prevStep()">◀</button>
    <button class="btn btn-primary" id="playBtn" onclick="togglePlay()">⏸</button>
    <button class="btn" id="nextBtn" onclick="nextStep()">▶</button>
    <div class="dots-container" id="dotsGroup">
      <button class="dot active" onclick="goToStep(0)" aria-label="Step 0"></button>
      <button class="dot" onclick="goToStep(1)" aria-label="Step 1"></button>
      <button class="dot" onclick="goToStep(2)" aria-label="Step 2"></button>
      <button class="dot" onclick="goToStep(3)" aria-label="Step 3"></button>
      <button class="dot" onclick="goToStep(4)" aria-label="Step 4"></button>
    </div>
  </div>

  <script>
    const stepsData = [
      { jl: 0, jh: 0, sl: 0, sh: 0, activeSlip: null, highlightCell: null },
      { jl: 1, jh: 0, sl: 0, sh: 0, activeSlip: 0, highlightCell: 'cell-jl' },
      { jl: 1, jh: 0, sl: 0, sh: 1, activeSlip: 1, highlightCell: 'cell-sh' },
      { jl: 1, jh: 1, sl: 0, sh: 1, activeSlip: 2, highlightCell: 'cell-jh' },
      { jl: 2, jh: 1, sl: 0, sh: 1, activeSlip: 3, highlightCell: 'cell-jl' }
    ];

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function render() {
      const data = stepsData[currentStep];

      // Update table cell values
      document.getElementById('cell-jl').textContent = data.jl;
      document.getElementById('cell-jh').textContent = data.jh;
      document.getElementById('cell-sl').textContent = data.sl;
      document.getElementById('cell-sh').textContent = data.sh;

      // Update cell highlights
      ['cell-jl', 'cell-jh', 'cell-sl', 'cell-sh'].forEach(id => {
        const el = document.getElementById(id);
        if (id === data.highlightCell) {
          el.classList.add('highlight');
        } else {
          el.classList.remove('highlight');
        }
      });

      // Update slips styling
      for (let i = 0; i < 4; i++) {
        const slip = document.getElementById('slip-' + i);
        slip.classList.remove('active', 'sorted');
        if (data.activeSlip === i) {
          slip.classList.add('active');
        } else if (data.activeSlip !== null && i < data.activeSlip) {
          slip.classList.add('sorted');
        } else if (currentStep === 4) {
          slip.classList.add('sorted');
        }
      }

      // Update indicator dots
      const dots = document.querySelectorAll('.dot');
      dots.forEach((dot, idx) => {
        if (idx === currentStep) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    }

    function goToStep(step) {
      currentStep = step;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % stepsData.length;
      render();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + stepsData.length) % stepsData.length;
      render();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 3000);
    }

    render();
    startTimer();
  </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">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e293b;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }

    .nav-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-bottom: 14px;
      max-width: 100%;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }

    .table-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Grid structure */
    .grid-table {
      display: grid;
      grid-template-columns: 86px repeat(3, 1fr) 72px;
      gap: 4px;
      width: 100%;
      text-align: center;
      user-select: none;
    }

    .cell {
      border-radius: 6px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      transition: opacity 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      cursor: pointer;
      position: relative;
    }

    .cell .val {
      font-size: 14px;
      font-weight: 700;
    }

    .cell-dim {
      opacity: 0.3;
    }

    /* Header styling */
    .col-title-bar {
      grid-column: 2 / 5;
      background: #f8fafc;
      border: 1.5px dashed #94a3b8;
      color: #334155;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.2px;
      border-radius: 6px;
      padding: 4px;
    }

    .col-header {
      background: #e2e8f0;
      font-weight: 600;
      font-size: 12px;
      color: #334155;
    }

    .row-header {
      background: #e2e8f0;
      font-weight: 600;
      font-size: 12px;
      color: #334155;
    }

    .row-title-cell {
      background: #f8fafc;
      border: 1.5px dashed #94a3b8;
      color: #334155;
      font-weight: 700;
      font-size: 11px;
      line-height: 1.2;
    }

    /* Section colors */
    .joint-cell {
      background: #dbeafe;
      color: #1e3a8a;
    }

    .marginal-cell {
      background: #fef3c7;
      color: #78350f;
    }

    .grand-total-cell {
      background: #d1fae5;
      color: #064e3b;
      font-weight: 800;
    }

    .highlighted {
      box-shadow: 0 0 0 2.5px #0f172a inset;
      font-weight: 700;
    }

    /* Explanatory callout tag */
    .callout-box {
      margin-top: 14px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      width: 100%;
      max-width: 480px;
      transition: all 0.2s ease;
    }

    .tag-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 11px;
      margin-right: 6px;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" data-mode="all">Overview</button>
    <button class="tab-btn" data-mode="row-var">Row Variable</button>
    <button class="tab-btn" data-mode="col-var">Col Variable</button>
    <button class="tab-btn" data-mode="joint">Joint (6)</button>
    <button class="tab-btn" data-mode="marginal">Marginal (5)</button>
    <button class="tab-btn" data-mode="grand">Grand Total (N)</button>
  </div>

  <div class="table-container">
    <div class="grid-table">
      
      <div class="cell" style="visibility: hidden;"></div>
      <div class="cell col-title-bar" data-type="col-var">
        Column Variable: Transportation
      </div>
      <div class="cell col-header marginal-cell" data-type="marginal" style="font-weight:700;">Total</div>

      
      <div class="cell row-title-cell" data-type="row-var">
        Row Variable:<br>Grade Level
      </div>
      <div class="cell col-header" data-type="col-var">Bus</div>
      <div class="cell col-header" data-type="col-var">Car</div>
      <div class="cell col-header" data-type="col-var">Walk</div>
      <div class="cell marginal-cell" data-type="marginal" style="font-size:11px;">Row Totals</div>

      
      <div class="cell row-header" data-type="row-var">11th Grade</div>
      <div class="cell joint-cell" data-type="joint"><span class="val">40</span></div>
      <div class="cell joint-cell" data-type="joint"><span class="val">30</span></div>
      <div class="cell joint-cell" data-type="joint"><span class="val">30</span></div>
      <div class="cell marginal-cell" data-type="marginal"><span class="val">100</span></div>

      
      <div class="cell row-header" data-type="row-var">12th Grade</div>
      <div class="cell joint-cell" data-type="joint"><span class="val">25</span></div>
      <div class="cell joint-cell" data-type="joint"><span class="val">55</span></div>
      <div class="cell joint-cell" data-type="joint"><span class="val">20</span></div>
      <div class="cell marginal-cell" data-type="marginal"><span class="val">100</span></div>

      
      <div class="cell marginal-cell" data-type="marginal" style="font-size:11px;">Col Totals</div>
      <div class="cell marginal-cell" data-type="marginal"><span class="val">65</span></div>
      <div class="cell marginal-cell" data-type="marginal"><span class="val">85</span></div>
      <div class="cell marginal-cell" data-type="marginal"><span class="val">50</span></div>
      <div class="cell grand-total-cell" data-type="grand"><span class="val">N = 200</span></div>
    </div>

    <div class="callout-box" id="infoText">
      Tap any section or button to explore the anatomy of a 2-way table.
    </div>
  </div>

  <script>
    const descriptions = {
      'all': 'Tap any section to explore 2-way table components.',
      'row-var': '<span class="tag-pill" style="background:#e2e8f0;color:#334155;">Row Variable</span> Categorizes data horizontally across rows.',
      'col-var': '<span class="tag-pill" style="background:#e2e8f0;color:#334155;">Column Variable</span> Categorizes data vertically down columns.',
      'joint': '<span class="tag-pill" style="background:#dbeafe;color:#1e3a8a;">Joint Frequencies</span> Counts for combinations of both categories.',
      'marginal': '<span class="tag-pill" style="background:#fef3c7;color:#78350f;">Marginal Frequencies</span> Subtotals for each separate single category.',
      'grand': '<span class="tag-pill" style="background:#d1fae5;color:#064e3b;">Grand Total (N)</span> Total number of all observations surveyed.'
    };

    const cells = document.querySelectorAll('.cell[data-type]');
    const tabs = document.querySelectorAll('.tab-btn');
    const infoText = document.getElementById('infoText');

    function setMode(mode) {
      tabs.forEach(tab => {
        tab.classList.toggle('active', tab.dataset.mode === mode);
      });

      cells.forEach(cell => {
        const type = cell.dataset.type;
        if (mode === 'all') {
          cell.classList.remove('cell-dim', 'highlighted');
        } else if (type === mode) {
          cell.classList.remove('cell-dim');
          cell.classList.add('highlighted');
        } else {
          cell.classList.add('cell-dim');
          cell.classList.remove('highlighted');
        }
      });

      infoText.innerHTML = descriptions[mode];
    }

    tabs.forEach(tab => {
      tab.addEventListener('click', () => setMode(tab.dataset.mode));
    });

    cells.forEach(cell => {
      cell.addEventListener('click', () => {
        const type = cell.dataset.type;
        setMode(type);
      });
    });
  </script>
</body>
</html>

OGM.13.STA.4

Aligned learning resources

Related diagrams