Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine ordering an ice cream: you choose 1 cone type (waffle or sugar) and 1 flavor (vanilla, chocolate, or strawberry). How can you be 100% sure you have listed every possible combination without missing any?

A **compound event** combines two or more individual events. The complete set of all possible outcomes of a chance experiment is called the **sample space** ($S$).

To keep track of multi-stage choices without getting overwhelmed, mathematicians developed systematic listing methods.

How do we organize a two-stage choice so no combination gets lost in the shuffle?

When an experiment has two stages, you can systematically pair each option from Stage 1 with every option from Stage 2 using a two-way grid.

<!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>Two-Way Grid Compound Outcomes</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -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: 100vh;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Formula / Counter Bar */
  .formula-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
  }
  .tag {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 14px;
    transition: background 0.3s, color 0.3s;
  }
  .tag-stage1 { background: #e0f2fe; color: #0284c7; }
  .tag-stage2 { background: #fef3c7; color: #d97706; }
  .tag-total { background: #dcfce7; color: #15803d; }

  /* Grid Layout */
  .grid-board {
    display: grid;
    grid-template-columns: 72px repeat(3, 1fr);
    grid-template-rows: 44px repeat(2, 60px);
    gap: 6px;
    width: 100%;
  }

  .cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.25s ease;
    cursor: pointer;
  }

  .corner {
    background: transparent;
    cursor: default;
  }

  /* Headers */
  .col-head {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
    font-size: 14px;
  }
  .col-head.active {
    background: #fef08a;
    box-shadow: 0 0 0 2px #f59e0b;
  }

  .row-head {
    background: #f0f9ff;
    color: #0369a1;
    border: 1px solid #bae6fd;
    font-size: 14px;
  }
  .row-head.active {
    background: #bae6fd;
    box-shadow: 0 0 0 2px #0284c7;
  }

  /* Outcome Cells */
  .outcome-cell {
    background: #ffffff;
    border: 1.5px solid #e5e7eb;
    font-size: 15px;
    color: #9ca3af;
  }

  .outcome-cell.revealed {
    color: #1e2945;
    background: #ffffff;
    border-color: #cbd5e1;
  }

  .outcome-cell.active {
    background: #ecfdf5;
    border-color: #22c55e;
    color: #15803d;
    box-shadow: 0 0 0 2px #22c55e;
    transform: translateZ(0);
  }

  .outcome-pair {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 15px;
    font-weight: 700;
  }
  .p1 { color: #0284c7; }
  .p2 { color: #d97706; }

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

  .btn {
    border: none;
    background: #f1f5f9;
    color: #334155;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn:hover { background: #e2e8f0; }

  .dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e2e8f0;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
  }
  .dot.active {
    background: #22c55e;
  }
</style>
</head>
<body>

<div class="main-wrap">
  <div class="formula-bar">
    <span class="tag tag-stage1">2 Stages</span>
    <span>×</span>
    <span class="tag tag-stage2">3 Stages</span>
    <span>=</span>
    <span class="tag tag-total" id="totalCount">6 Outcomes</span>
  </div>

  <div class="grid-board" id="grid">
    
    <div class="cell corner"></div>
    <div class="cell col-head" id="c0">⚀ 1</div>
    <div class="cell col-head" id="c1">⚁ 2</div>
    <div class="cell col-head" id="c2">⚂ 3</div>

    
    <div class="cell row-head" id="r0">🪙 H</div>
    <div class="cell outcome-cell" data-row="0" data-col="0" data-idx="0">
      <div class="outcome-pair"><span class="p1">H</span><span class="p2">1</span></div>
    </div>
    <div class="cell outcome-cell" data-row="0" data-col="1" data-idx="1">
      <div class="outcome-pair"><span class="p1">H</span><span class="p2">2</span></div>
    </div>
    <div class="cell outcome-cell" data-row="0" data-col="2" data-idx="2">
      <div class="outcome-pair"><span class="p1">H</span><span class="p2">3</span></div>
    </div>

    
    <div class="cell row-head" id="r1">🪙 T</div>
    <div class="cell outcome-cell" data-row="1" data-col="0" data-idx="3">
      <div class="outcome-pair"><span class="p1">T</span><span class="p2">1</span></div>
    </div>
    <div class="cell outcome-cell" data-row="1" data-col="1" data-idx="4">
      <div class="outcome-pair"><span class="p1">T</span><span class="p2">2</span></div>
    </div>
    <div class="cell outcome-cell" data-row="1" data-col="2" data-idx="5">
      <div class="outcome-pair"><span class="p1">T</span><span class="p2">3</span></div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="playBtn">⏸</button>
    <div class="dots" id="dotsGroup">
      <div class="dot" data-idx="0"></div>
      <div class="dot" data-idx="1"></div>
      <div class="dot" data-idx="2"></div>
      <div class="dot" data-idx="3"></div>
      <div class="dot" data-idx="4"></div>
      <div class="dot" data-idx="5"></div>
    </div>
    <button class="btn" id="nextBtn">▶</button>
  </div>
</div>

<script>
  const totalSteps = 6;
  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  const cells = document.querySelectorAll('.outcome-cell');
  const dots = document.querySelectorAll('.dot');
  const rowHeaders = [document.getElementById('r0'), document.getElementById('r1')];
  const colHeaders = [document.getElementById('c0'), document.getElementById('c1'), document.getElementById('c2')];
  const playBtn = document.getElementById('playBtn');
  const nextBtn = document.getElementById('nextBtn');

  function renderStep(idx) {
    currentStep = idx;

    cells.forEach((cell, i) => {
      const r = parseInt(cell.dataset.row);
      const c = parseInt(cell.dataset.col);

      if (i === idx) {
        cell.classList.add('active', 'revealed');
        rowHeaders[r].classList.add('active');
        colHeaders[c].classList.add('active');
      } else {
        cell.classList.remove('active');
        cell.classList.add('revealed');
      }
    });

    // Clear header highlights that aren't on active cell
    const activeCell = cells[idx];
    const activeR = parseInt(activeCell.dataset.row);
    const activeC = parseInt(activeCell.dataset.col);

    rowHeaders.forEach((rh, r) => {
      if (r !== activeR) rh.classList.remove('active');
    });
    colHeaders.forEach((ch, c) => {
      if (c !== activeC) ch.classList.remove('active');
    });

    // Update dots
    dots.forEach((d, i) => {
      d.classList.toggle('active', i === idx);
    });
  }

  function next() {
    renderStep((currentStep + 1) % totalSteps);
  }

  function startAuto() {
    stopAuto();
    isPlaying = true;
    playBtn.textContent = '⏸';
    timer = setInterval(next, 3000);
  }

  function stopAuto() {
    isPlaying = false;
    playBtn.textContent = '▶';
    if (timer) clearInterval(timer);
  }

  playBtn.addEventListener('click', () => {
    if (isPlaying) stopAuto();
    else { next(); startAuto(); }
  });

  nextBtn.addEventListener('click', () => {
    stopAuto();
    next();
  });

  dots.forEach(d => {
    d.addEventListener('click', () => {
      stopAuto();
      renderStep(parseInt(d.dataset.idx));
    });
  });

  cells.forEach(c => {
    c.addEventListener('click', () => {
      stopAuto();
      renderStep(parseInt(c.dataset.idx));
    });
  });

  renderStep(0);
  startAuto();
</script>
</body>
</html>

Arranging outcomes in rows and columns guarantees that every first choice is paired with every second choice, producing exactly $2 \times 3 = 6$ total outcomes.

Grids work great for two stages — but what happens when you flip three coins in a row?

A **tree diagram** visualizes multi-stage events by splitting each decision into branches that grow outward from left to right.

<!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>Tree Diagram Outcomes</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 8px;
    user-select: none;
  }

  .diagram-container {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .headers {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1.2fr 1.2fr 1.2fr;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    padding: 0 4px;
  }

  .stage-badge {
    background: #f1f5f9;
    padding: 4px 6px;
    border-radius: 6px;
    color: #1e2945;
  }

  svg {
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .branch {
    stroke: #cbd5e1;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke 0.3s ease, stroke-width 0.3s ease;
    fill: none;
  }

  .branch.active {
    stroke: #0284c7;
    stroke-width: 4;
  }

  .node-bg {
    fill: #ffffff;
    stroke: #94a3b8;
    stroke-width: 2;
    transition: stroke 0.3s, fill 0.3s;
  }

  .node-bg.active {
    stroke: #0284c7;
    fill: #e0f2fe;
  }

  .node-txt {
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    fill: #1e2945;
    pointer-events: none;
  }

  .node-txt.active {
    fill: #0369a1;
  }

  .outcome-btn {
    cursor: pointer;
  }

  .outcome-rect {
    fill: #f8fafc;
    stroke: #cbd5e1;
    stroke-width: 1.5;
    rx: 6;
    transition: fill 0.3s, stroke 0.3s;
  }

  .outcome-btn:hover .outcome-rect {
    stroke: #38bdf8;
    fill: #f0f9ff;
  }

  .outcome-btn.active .outcome-rect {
    fill: #0284c7;
    stroke: #0284c7;
  }

  .outcome-txt {
    font-size: 13px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    fill: #334155;
    font-family: monospace;
    pointer-events: none;
    letter-spacing: 1px;
    transition: fill 0.3s;
  }

  .outcome-btn.active .outcome-txt {
    fill: #ffffff;
  }

  .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
  }

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

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

  .btn:active {
    background: #f1f5f9;
  }

  .summary {
    font-size: 14px;
    font-weight: 600;
    color: #0369a1;
    background: #e0f2fe;
    padding: 6px 14px;
    border-radius: 20px;
    min-width: 120px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="diagram-container">
  <div class="headers">
    <div>Start</div>
    <div class="stage-badge">Flip 1</div>
    <div class="stage-badge">Flip 2</div>
    <div class="stage-badge">Flip 3</div>
    <div class="stage-badge">Outcome</div>
  </div>

  <svg viewBox="0 0 540 340">
    
    <g id="branches"></g>
    
    <g id="nodes"></g>
    
    <g id="outcomes"></g>
  </svg>

  <div class="controls">
    <button class="btn" id="prevBtn">◀ Prev</button>
    <div class="summary" id="pathDisplay">H → H → H (HHH)</div>
    <button class="btn" id="nextBtn">Next ▶</button>
    <button class="btn" id="playBtn" style="margin-left:8px;">⏸ Pause</button>
  </div>
</div>

<script>
  const outcomes = [
    { code: 'HHH', path: ['root', 'n_H', 'n_HH', 'n_HHH'] },
    { code: 'HHT', path: ['root', 'n_H', 'n_HH', 'n_HHT'] },
    { code: 'HTH', path: ['root', 'n_H', 'n_HT', 'n_HTH'] },
    { code: 'HTT', path: ['root', 'n_H', 'n_HT', 'n_HTT'] },
    { code: 'THH', path: ['root', 'n_T', 'n_TH', 'n_THH'] },
    { code: 'THT', path: ['root', 'n_T', 'n_TH', 'n_THT'] },
    { code: 'TTH', path: ['root', 'n_T', 'n_TT', 'n_TTH'] },
    { code: 'TTT', path: ['root', 'n_T', 'n_TT', 'n_TTT'] }
  ];

  const nodePos = {
    'root':  { x: 30,  y: 170, label: '•' },
    'n_H':   { x: 135, y: 85,  label: 'H' },
    'n_T':   { x: 135, y: 255, label: 'T' },
    'n_HH':  { x: 255, y: 42,  label: 'H' },
    'n_HT':  { x: 255, y: 128, label: 'T' },
    'n_TH':  { x: 255, y: 212, label: 'H' },
    'n_TT':  { x: 255, y: 298, label: 'T' },
    'n_HHH': { x: 380, y: 22,  label: 'H' },
    'n_HHT': { x: 380, y: 64,  label: 'T' },
    'n_HTH': { x: 380, y: 106, label: 'H' },
    'n_HTT': { x: 380, y: 148, label: 'T' },
    'n_THH': { x: 380, y: 192, label: 'H' },
    'n_THT': { x: 380, y: 234, label: 'T' },
    'n_TTH': { x: 380, y: 276, label: 'H' },
    'n_TTT': { x: 380, y: 318, label: 'T' }
  };

  const branchDefs = [
    { id: 'b_root_H', from: 'root', to: 'n_H' },
    { id: 'b_root_T', from: 'root', to: 'n_T' },
    { id: 'b_H_HH', from: 'n_H', to: 'n_HH' },
    { id: 'b_H_HT', from: 'n_H', to: 'n_HT' },
    { id: 'b_T_TH', from: 'n_T', to: 'n_TH' },
    { id: 'b_T_TT', from: 'n_T', to: 'n_TT' },
    { id: 'b_HH_HHH', from: 'n_HH', to: 'n_HHH' },
    { id: 'b_HH_HHT', from: 'n_HH', to: 'n_HHT' },
    { id: 'b_HT_HTH', from: 'n_HT', to: 'n_HTH' },
    { id: 'b_HT_HTT', from: 'n_HT', to: 'n_HTT' },
    { id: 'b_TH_THH', from: 'n_TH', to: 'n_THH' },
    { id: 'b_TH_THT', from: 'n_TH', to: 'n_THT' },
    { id: 'b_TT_TTH', from: 'n_TT', to: 'n_TTH' },
    { id: 'b_TT_TTT', from: 'n_TT', to: 'n_TTT' }
  ];

  const branchesG = document.getElementById('branches');
  const nodesG = document.getElementById('nodes');
  const outcomesG = document.getElementById('outcomes');

  // Render branches
  branchDefs.forEach(b => {
    const p1 = nodePos[b.from];
    const p2 = nodePos[b.to];
    const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    const midX = (p1.x + p2.x) / 2;
    pathEl.setAttribute('d', `M ${p1.x} ${p1.y} C ${midX} ${p1.y}, ${midX} ${p2.y}, ${p2.x} ${p2.y}`);
    pathEl.setAttribute('class', 'branch');
    pathEl.setAttribute('id', b.id);
    branchesG.appendChild(pathEl);
  });

  // Render nodes
  Object.keys(nodePos).forEach(k => {
    const n = nodePos[k];
    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    g.setAttribute('id', `node_${k}`);

    if (k === 'root') {
      const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      c.setAttribute('cx', n.x);
      c.setAttribute('cy', n.y);
      c.setAttribute('r', 6);
      c.setAttribute('class', 'node-bg active');
      g.appendChild(c);
    } else {
      const c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      c.setAttribute('cx', n.x);
      c.setAttribute('cy', n.y);
      c.setAttribute('r', 13);
      c.setAttribute('class', 'node-bg');
      c.setAttribute('id', `bg_${k}`);

      const t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      t.setAttribute('x', n.x);
      t.setAttribute('y', n.y);
      t.setAttribute('class', 'node-txt');
      t.setAttribute('id', `txt_${k}`);
      t.textContent = n.label;

      g.appendChild(c);
      g.appendChild(t);
    }
    nodesG.appendChild(g);
  });

  // Render outcome boxes
  outcomes.forEach((o, i) => {
    const tip = nodePos[o.path[3]];
    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    g.setAttribute('class', 'outcome-btn');
    g.setAttribute('id', `out_${i}`);
    g.setAttribute('transform', `translate(440, ${tip.y - 14})`);

    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute('width', 70);
    rect.setAttribute('height', 28);
    rect.setAttribute('class', 'outcome-rect');

    const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    txt.setAttribute('x', 35);
    txt.setAttribute('y', 14);
    txt.setAttribute('class', 'outcome-txt');
    txt.textContent = o.code;

    // Connector line from tip to box
    const conn = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    conn.setAttribute('x1', tip.x + 13);
    conn.setAttribute('y1', tip.y);
    conn.setAttribute('x2', 440);
    conn.setAttribute('y2', tip.y);
    conn.setAttribute('stroke', '#e2e8f0');
    conn.setAttribute('stroke-dasharray', '2 2');
    branchesG.appendChild(conn);

    g.appendChild(rect);
    g.appendChild(txt);

    g.addEventListener('click', () => {
      currentIndex = i;
      updateState();
      pauseAuto();
    });

    outcomesG.appendChild(g);
  });

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

  function updateState() {
    const current = outcomes[currentIndex];
    
    // Reset all branches & nodes & outcomes
    document.querySelectorAll('.branch').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.node-bg').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.node-txt').forEach(el => el.classList.remove('active'));
    document.querySelectorAll('.outcome-btn').forEach(el => el.classList.remove('active'));

    // Highlight active path
    const p = current.path;
    for (let i = 0; i < p.length - 1; i++) {
      const from = p[i].replace('n_', '');
      const to = p[i+1].replace('n_', '');
      const bId = `b_${from}_${to}`;
      const bEl = document.getElementById(bId);
      if (bEl) bEl.classList.add('active');
    }

    p.forEach(nodeId => {
      const bg = document.getElementById(`bg_${nodeId}`);
      const txt = document.getElementById(`txt_${nodeId}`);
      if (bg) bg.classList.add('active');
      if (txt) txt.classList.add('active');
    });

    const outBtn = document.getElementById(`out_${currentIndex}`);
    if (outBtn) outBtn.classList.add('active');

    const formattedPath = current.code.split('').join(' → ');
    document.getElementById('pathDisplay').textContent = `${formattedPath} (${current.code})`;
  }

  function next() {
    currentIndex = (currentIndex + 1) % outcomes.length;
    updateState();
  }

  function prev() {
    currentIndex = (currentIndex - 1 + outcomes.length) % outcomes.length;
    updateState();
  }

  function startAuto() {
    isPlaying = true;
    document.getElementById('playBtn').textContent = '⏸ Pause';
    if (timer) clearInterval(timer);
    timer = setInterval(next, 3000);
  }

  function pauseAuto() {
    isPlaying = false;
    document.getElementById('playBtn').textContent = '▶ Play';
    if (timer) clearInterval(timer);
  }

  document.getElementById('nextBtn').addEventListener('click', () => { next(); pauseAuto(); });
  document.getElementById('prevBtn').addEventListener('click', () => { prev(); pauseAuto(); });
  document.getElementById('playBtn').addEventListener('click', () => {
    if (isPlaying) pauseAuto();
    else startAuto();
  });

  updateState();
  startAuto();
</script>

</body>
</html>

Following any single path from the root to the tip gives one specific outcome, such as $\text{Heads} \rightarrow \text{Tails} \rightarrow \text{Heads}$ (HTH).

This calculation follows the **Fundamental Counting Principle**: for independent stages with $n_1, n_2, \dots, n_k$ choices, the total number of outcomes is $n(S) = n_1 \times n_2 \times \dots \times n_k = 2 \times 2 \times 2 = 8$.

This rule is the **Fundamental Counting Principle**: for independent stages, the total number of outcomes in the sample space is calculated as $n(S) = n_1 \times n_2 \times \dots \times n_k$.

What happens to our list of outcomes if you draw items from a bag and don't put them back?

In events **with replacement**, an item is returned after each draw, meaning the available choices remain identical at every stage.

In events **without replacement**, each chosen item is removed, which prevents duplicate picks like $(A, A)$ and reduces the number of available branches on the next turn.

<!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, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .wrapper {
      width: 100%;
      max-width: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Toggle bar */
    .toggle-group {
      display: flex;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 999px;
      width: 100%;
      max-width: 320px;
    }

    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Matrix Container */
    .grid-container {
      display: grid;
      grid-template-columns: 36px repeat(3, 1fr);
      grid-template-rows: 32px repeat(3, 1fr);
      gap: 6px;
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    .header-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      border-radius: 8px;
    }

    .col-header {
      background: #f1f5f9;
      color: #0369a1;
    }

    .row-header {
      background: #f1f5f9;
      color: #0369a1;
    }

    .corner-label {
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
    }

    /* Outcome Tiles */
    .cell {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
    }

    .cell.valid {
      background: #f0f9ff;
      border-color: #bae6fd;
      color: #0369a1;
    }

    /* Excluded diagonal state */
    .without-rep .cell.diagonal {
      background: #fef2f2;
      border-color: #fecaca;
      color: #94a3b8;
      box-shadow: none;
    }

    .strike-line {
      position: absolute;
      width: 65%;
      height: 2px;
      background: #ef4444;
      border-radius: 2px;
      transform: rotate(45deg);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .without-rep .cell.diagonal .strike-line {
      opacity: 1;
    }

    /* Formula / Outcome Count Banner */
    .summary-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
      width: 100%;
      max-width: 320px;
    }

    .math-hl {
      color: #0284c7;
      font-size: 17px;
    }

    .count-pill {
      background: #0284c7;
      color: #ffffff;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
      transition: background 0.3s ease;
    }

    .without-rep-badge .count-pill {
      background: #0d9488;
    }
  </style>
</head>
<body>

  <div class="wrapper" id="app">
    
    <div class="toggle-group">
      <button class="toggle-btn active" id="btnWith" onclick="setMode('with')">With Replacement</button>
      <button class="toggle-btn" id="btnWithout" onclick="setMode('without')">Without Replacement</button>
    </div>

    
    <div class="grid-container" id="grid">
      <div class="header-cell corner-label">1ˢᵗ \ 2ⁿᵈ</div>
      <div class="header-cell col-header">A</div>
      <div class="header-cell col-header">B</div>
      <div class="header-cell col-header">C</div>

      
      <div class="header-cell row-header">A</div>
      <div class="cell valid diagonal"><span class="strike-line"></span>(A, A)</div>
      <div class="cell valid">(A, B)</div>
      <div class="cell valid">(A, C)</div>

      
      <div class="header-cell row-header">B</div>
      <div class="cell valid">(B, A)</div>
      <div class="cell valid diagonal"><span class="strike-line"></span>(B, B)</div>
      <div class="cell valid">(B, C)</div>

      
      <div class="header-cell row-header">C</div>
      <div class="cell valid">(C, A)</div>
      <div class="cell valid">(C, B)</div>
      <div class="cell valid diagonal"><span class="strike-line"></span>(C, C)</div>
    </div>

    
    <div class="summary-badge" id="summary">
      <span class="math-hl" id="mathText">3 × 3 = 9</span>
      <span class="count-pill" id="pillText">9 Outcomes</span>
    </div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    const summary = document.getElementById('summary');
    const btnWith = document.getElementById('btnWith');
    const btnWithout = document.getElementById('btnWithout');
    const mathText = document.getElementById('mathText');
    const pillText = document.getElementById('pillText');

    function setMode(mode) {
      if (mode === 'without') {
        grid.classList.add('without-rep');
        summary.classList.add('without-rep-badge');
        btnWithout.classList.add('active');
        btnWith.classList.remove('active');
        mathText.textContent = '3 × 2 = 6';
        pillText.textContent = '6 Outcomes';
      } else {
        grid.classList.remove('without-rep');
        summary.classList.remove('without-rep-badge');
        btnWith.classList.add('active');
        btnWithout.classList.remove('active');
        mathText.textContent = '3 × 3 = 9';
        pillText.textContent = '9 Outcomes';
      }
    }
  </script>
</body>
</html>

Notice that without replacement, the total number of outcomes drops from $3 \times 3 = 9$ down to $3 \times 2 = 6$ because an item cannot be paired with itself.

Why do many students accidentally count $(A, B)$ and $(B, A)$ as the exact same outcome?

A common mistake is treating $(A, B)$ and $(B, A)$ as identical — but in multi-stage events, drawing $A$ first and $B$ second is a different sequence than drawing $B$ first and $A$ second.

Before you list outcomes, ask two quick questions: Does the order of stages matter, and are items replaced between stages?

math

Listing All Outcomes for Compound Events. Systematically list all possible outcomes for two-stage and multi-stage compound events.

Sample Spaces for Compound Events & Tree Diagrams

Level 9 Probability: Tree Diagrams, Two-Way Tables, and Dependent/Independent Events (AC9M9P01 / VC2M9P01)

GCSE Mathematics: Sample Space Diagrams and Tree Diagrams

When teaching Year 9-10 students to systematically list outcomes under AC9M9P01, begin with concrete two-stage experiments before moving to multi-stage or non-uniform probabilities. Emphasize the representational transition: start with arrays/grids for two-stage experiments (which provide a strong visual check against duplicate or omitted items) and advance to tree diagrams for three stages or dependent sampling scenarios. Always reinforce the 'without replacement' rule explicitly by having students cross out diagonal entries on sample grids and decrease the denominator on subsequent tree branches. Conclude tasks by checking that the sum of all terminal path probabilities equals 1.

Listing All Outcomes for Compound Events

Systematic Lists and Grids

Branching Out with Tree Diagrams