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

If you flip a bent bottle cap, you can't calculate the theoretical probability of it landing open-side up because its shape isn't symmetrical.

To find that probability, you have to actually test it by flipping it dozens of times and tracking what happens.

A **trial** is a single run of an experiment, and the **frequency** is the count of how many times a specific outcome occurred.

The **relative frequency** is the ratio comparing the frequency of a particular event to the total number of trials conducted.

<!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;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 100%;
  }

  .main-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Selector Tabs */
  .category-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .tab-btn {
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    user-select: none;
  }

  .tab-btn:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  }

  .tab-btn.active {
    border-color: #4f46e5;
    background: #f5f3ff;
  }

  .tab-title {
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .tab-count {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
  }

  /* Token Matrix Display */
  .matrix-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .tokens-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    justify-items: center;
    align-items: center;
  }

  .token {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, outline 0.2s ease;
    outline: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .token.blue { background-color: #3b82f6; }
  .token.green { background-color: #10b981; }
  .token.orange { background-color: #f59e0b; }

  .token.dimmed {
    opacity: 0.22;
  }

  .token.highlighted {
    outline-color: #4f46e5;
    outline-offset: 2px;
  }

  /* Proportional Distribution Bar */
  .prop-bar-container {
    width: 100%;
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
  }

  .prop-bar-seg {
    height: 100%;
    transition: width 0.3s ease;
  }
  .prop-blue { background-color: #3b82f6; }
  .prop-green { background-color: #10b981; }
  .prop-orange { background-color: #f59e0b; }

  /* Calculation Display Card */
  .calc-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
  }

  .formula-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
  }

  .calc-group {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
  }

  .fraction {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    align-items: center;
  }

  .fraction .num {
    padding: 0 4px;
    border-bottom: 2px solid #1e2945;
    color: #4f46e5;
  }

  .fraction .den {
    padding: 0 4px;
    color: #6b7280;
  }

  .math-symbol {
    color: #9ca3af;
    font-weight: 400;
    font-size: 18px;
  }

  .result-val {
    color: #1e2945;
  }

  .badge-pct {
    background: #eef2ff;
    color: #4f46e5;
    font-size: 15px;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 700;
  }
</style>
</head>
<body>

<div class="main-container">
  
  <div class="category-tabs">
    <button class="tab-btn active" data-type="blue" id="btn-blue">
      <span class="tab-title"><span style="color:#3b82f6;">●</span> Event A</span>
      <span class="tab-count" id="lbl-count-blue">f = 6</span>
    </button>
    <button class="tab-btn" data-type="green" id="btn-green">
      <span class="tab-title"><span style="color:#10b981;">●</span> Event B</span>
      <span class="tab-count" id="lbl-count-green">f = 9</span>
    </button>
    <button class="tab-btn" data-type="orange" id="btn-orange">
      <span class="tab-title"><span style="color:#f59e0b;">●</span> Event C</span>
      <span class="tab-count" id="lbl-count-orange">f = 5</span>
    </button>
  </div>

  
  <div class="matrix-card">
    <div class="tokens-grid" id="tokens-grid"></div>
    <div class="prop-bar-container">
      <div class="prop-bar-seg prop-blue" id="bar-blue"></div>
      <div class="prop-bar-seg prop-green" id="bar-green"></div>
      <div class="prop-bar-seg prop-orange" id="bar-orange"></div>
    </div>
  </div>

  
  <div class="calc-card">
    <div class="calc-group">
      <div class="fraction">
        <span class="num" id="calc-num">6</span>
        <span class="den" id="calc-den">20</span>
      </div>
      <span class="math-symbol">=</span>
      <span class="result-val" id="calc-dec">0.30</span>
      <span class="math-symbol">=</span>
      <span class="badge-pct" id="calc-pct">30%</span>
    </div>
  </div>
</div>

<script>
  // Initial trials dataset (20 total)
  const initialData = [
    'blue', 'blue', 'green', 'orange', 'green',
    'blue', 'green', 'green', 'orange', 'blue',
    'green', 'orange', 'blue', 'green', 'green',
    'orange', 'green', 'blue', 'orange', 'green'
  ];

  let currentSelected = 'blue';
  const tokensGrid = document.getElementById('tokens-grid');
  const barBlue = document.getElementById('bar-blue');
  const barGreen = document.getElementById('bar-green');
  const barOrange = document.getElementById('bar-orange');

  const lblBlue = document.getElementById('lbl-count-blue');
  const lblGreen = document.getElementById('lbl-count-green');
  const lblOrange = document.getElementById('lbl-count-orange');

  const calcNum = document.getElementById('calc-num');
  const calcDen = document.getElementById('calc-den');
  const calcDec = document.getElementById('calc-dec');
  const calcPct = document.getElementById('calc-pct');

  const tabs = {
    blue: document.getElementById('btn-blue'),
    green: document.getElementById('btn-green'),
    orange: document.getElementById('btn-orange')
  };

  const colorCycle = { blue: 'green', green: 'orange', orange: 'blue' };

  function render() {
    tokensGrid.innerHTML = '';
    
    let countBlue = 0;
    let countGreen = 0;
    let countOrange = 0;

    initialData.forEach((type, idx) => {
      if (type === 'blue') countBlue++;
      if (type === 'green') countGreen++;
      if (type === 'orange') countOrange++;

      const dot = document.createElement('div');
      dot.className = `token ${type}`;
      if (type === currentSelected) {
        dot.classList.add('highlighted');
      } else {
        dot.classList.add('dimmed');
      }

      // Tap token to cycle color
      dot.addEventListener('click', () => {
        initialData[idx] = colorCycle[initialData[idx]];
        render();
      });

      tokensGrid.appendChild(dot);
    });

    const total = initialData.length;
    const counts = { blue: countBlue, green: countGreen, orange: countOrange };
    const activeCount = counts[currentSelected];

    // Update Tab Labels
    lblBlue.textContent = `f = ${countBlue}`;
    lblGreen.textContent = `f = ${countGreen}`;
    lblOrange.textContent = `f = ${countOrange}`;

    // Update Proportional Bar
    barBlue.style.width = `${(countBlue / total) * 100}%`;
    barGreen.style.width = `${(countGreen / total) * 100}%`;
    barOrange.style.width = `${(countOrange / total) * 100}%`;

    // Update Formula Card
    calcNum.textContent = activeCount;
    calcDen.textContent = total;

    const ratio = activeCount / total;
    calcDec.textContent = ratio.toFixed(2);
    calcPct.textContent = `${Math.round(ratio * 100)}%`;

    // Update Active Tab Styles
    Object.keys(tabs).forEach(key => {
      tabs[key].classList.toggle('active', key === currentSelected);
    });
  }

  // Tab click listeners
  Object.keys(tabs).forEach(key => {
    tabs[key].addEventListener('click', () => {
      currentSelected = key;
      render();
    });
  });

  render();
</script>

</body>
</html>

Relative frequency acts as an estimate of **experimental probability**. By the **Law of Large Numbers**, as the number of trials ($n$) increases, the experimental relative frequency tends to approach the true theoretical probability.

How do we calculate this from real experiment data? Let's walk through an example.

Suppose you flip a bottle cap $80$ times, and it lands face-up $28$ times.

To find the relative frequency of landing face-up, divide the event count ($28$) by the total trials ($80$).

<!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">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Step Navigation */
    .nav-bar {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 10px;
    }
    .step-btn {
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 4px rgba(37,99,235,0.25);
    }
    .play-btn {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    /* Main Display Area */
    .stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    /* 80-Trial Data Grid */
    .grid-container {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
      width: 100%;
    }
    .trial-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
      width: 100%;
      max-width: 280px;
    }
    .cap {
      aspect-ratio: 1;
      border-radius: 50%;
      background: #e2e8f0;
      transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }
    .cap.up {
      background: #2563eb;
    }
    .highlight-up .cap.up {
      box-shadow: 0 0 0 2px #93c5fd;
    }
    .highlight-total .cap {
      filter: brightness(0.95);
    }

    /* Legend */
    .legend {
      display: flex;
      justify-content: center;
      gap: 16px;
      font-size: 13px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    .dot.blue { background: #2563eb; }
    .dot.gray { background: #cbd5e1; }

    /* Math Pipeline Card */
    .math-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
      min-height: 70px;
    }
    .math-part {
      opacity: 0.35;
      transition: opacity 0.3s ease, transform 0.3s ease;
      font-size: 16px;
    }
    .math-part.active {
      opacity: 1;
    }
    .arrow {
      color: #94a3b8;
      font-size: 16px;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="step-btn active" data-step="0">1. Data</button>
    <button class="step-btn" data-step="1">2. Ratio</button>
    <button class="step-btn" data-step="2">3. Percent</button>
    <button class="play-btn" id="playBtn" title="Play / Pause">⏸</button>
  </div>

  
  <div class="stage">
    
    <div class="grid-container" id="gridBox">
      <div class="trial-grid" id="grid"></div>
      <div class="legend">
        <div class="legend-item">
          <div class="dot blue"></div>
          <span>28 Up</span>
        </div>
        <div class="legend-item">
          <div class="dot gray"></div>
          <span>52 Down</span>
        </div>
        <div class="legend-item" style="color: #64748b;">
          <span>(80 Total)</span>
        </div>
      </div>
    </div>

    
    <div class="math-card">
      <div class="math-part active" id="part-fraction"></div>
      <div class="arrow">→</div>
      <div class="math-part" id="part-decimal"></div>
      <div class="arrow">→</div>
      <div class="math-part" id="part-percent"></div>
    </div>
  </div>

  <script>
    // Build 80 dots (28 Up, 52 Down)
    const grid = document.getElementById('grid');
    for (let i = 0; i < 80; i++) {
      const cap = document.createElement('div');
      cap.className = 'cap' + (i < 28 ? ' up' : '');
      grid.appendChild(cap);
    }

    // Render KaTeX Math Expressions
    katex.render('\\frac{28}{80}', document.getElementById('part-fraction'), { throwOnError: false });
    katex.render('0.35', document.getElementById('part-decimal'), { throwOnError: false });
    katex.render('35\\%', document.getElementById('part-percent'), { throwOnError: false });

    const stepBtns = document.querySelectorAll('.step-btn');
    const partFrac = document.getElementById('part-fraction');
    const partDec = document.getElementById('part-decimal');
    const partPct = document.getElementById('part-percent');
    const gridBox = document.getElementById('gridBox');

    function applyStep(index) {
      stepBtns.forEach((b, i) => b.classList.toggle('active', i === index));

      // Visual accents
      gridBox.classList.toggle('highlight-up', index === 0);

      partFrac.classList.toggle('active', index >= 0);
      partDec.classList.toggle('active', index >= 1);
      partPct.classList.toggle('active', index >= 2);
    }

    // Interactive Stepper
    let currentStep = 0;
    let playing = true;
    let timer = null;

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

    function startAuto() {
      stopAuto();
      timer = setInterval(nextStep, 3200);
      playing = true;
      document.getElementById('playBtn').textContent = '⏸';
    }

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

    stepBtns.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        currentStep = i;
        applyStep(currentStep);
        stopAuto();
      });
    });

    document.getElementById('playBtn').addEventListener('click', () => {
      if (playing) stopAuto();
      else startAuto();
    });

    // Initialize
    applyStep(0);
    startAuto();
  </script>
</body>
</html>

This means that during your experiment, the bottle cap landed face-up $35\%$ of the time, which serves as our best experimental estimate for future flips.

What if you are given a full dataset split into multiple categories?

When data is organized in a table, add up every category's count first to determine the total number of trials.

<!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>Calculating Relative Frequency</title>
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .step-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .tab-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }
    .play-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Main Table Container */
    .table-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
      text-align: center;
    }
    th {
      background: #f8fafc;
      color: #64748b;
      font-weight: 600;
      padding: 8px 6px;
      border-bottom: 1px solid #e2e8f0;
      font-size: 13px;
    }
    td {
      padding: 8px 6px;
      border-bottom: 1px solid #f1f5f9;
      color: #1e2945;
      font-weight: 500;
      transition: background 0.3s ease;
    }
    tr.total-row {
      background: #f8fafc;
      font-weight: 700;
    }
    tr.total-row td {
      border-top: 2px solid #e2e8f0;
      border-bottom: none;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
    }

    /* Dynamic Highlight States */
    .highlight-calc {
      background: #e0f2fe;
      color: #0369a1;
      border-radius: 4px;
      padding: 2px 4px;
      font-weight: 700;
    }
    .sum-highlight {
      background: #dcfce7;
      color: #15803d;
      border-radius: 4px;
      padding: 2px 4px;
      font-weight: 700;
    }

    /* Formula & Explanation Bar */
    .formula-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .formula-text {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pill {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #475569;
    }

    /* Visual Proportion Bar */
    .bar-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .progress-bar {
      display: flex;
      height: 22px;
      border-radius: 8px;
      overflow: hidden;
      background: #f1f5f9;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    }
    .bar-seg {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      transition: width 0.4s ease, opacity 0.3s ease;
    }
    .bar-legend {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      padding: 0 2px;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <div class="step-tabs">
      <button class="tab-btn active" id="tab0" onclick="setStep(0)">1. Sum Total</button>
      <button class="tab-btn" id="tab1" onclick="setStep(1)">2. Calculate</button>
      <button class="tab-btn" id="tab2" onclick="setStep(2)">3. Total = 1.00</button>
    </div>
    <button class="play-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> Auto
    </button>
  </div>

  
  <div class="table-card">
    <table>
      <thead>
        <tr>
          <th>Outcome</th>
          <th>Frequency (<span id="mathF"></span>)</th>
          <th>Fraction</th>
          <th>Relative Freq.</th>
          <th>%</th>
        </tr>
      </thead>
      <tbody>
        <tr id="row0">
          <td><span class="badge"><span class="dot" style="background:#0284c7"></span>Blue</span></td>
          <td id="f0">7</td>
          <td id="frac0">-</td>
          <td id="rf0">-</td>
          <td id="pct0">-</td>
        </tr>
        <tr id="row1">
          <td><span class="badge"><span class="dot" style="background:#0d9488"></span>Teal</span></td>
          <td id="f1">6</td>
          <td id="frac1">-</td>
          <td id="rf1">-</td>
          <td id="pct1">-</td>
        </tr>
        <tr id="row2">
          <td><span class="badge"><span class="dot" style="background:#8b5cf6"></span>Purple</span></td>
          <td id="f2">5</td>
          <td id="frac2">-</td>
          <td id="rf2">-</td>
          <td id="pct2">-</td>
        </tr>
        <tr id="row3">
          <td><span class="badge"><span class="dot" style="background:#f59e0b"></span>Amber</span></td>
          <td id="f3">2</td>
          <td id="frac3">-</td>
          <td id="rf3">-</td>
          <td id="pct3">-</td>
        </tr>
        <tr class="total-row">
          <td>Total (<span id="mathN"></span>)</td>
          <td id="totalF">20</td>
          <td id="totalFrac">-</td>
          <td id="totalRf">-</td>
          <td id="totalPct">-</td>
        </tr>
      </tbody>
    </table>
  </div>

  
  <div class="formula-panel">
    <div class="formula-text" id="formulaContainer"></div>
    <div class="pill" id="statusPill">Step 1 of 3</div>
  </div>

  
  <div class="bar-section">
    <div class="progress-bar">
      <div class="bar-seg" id="b0" style="width: 35%; background: #0284c7;">35%</div>
      <div class="bar-seg" id="b1" style="width: 30%; background: #0d9488;">30%</div>
      <div class="bar-seg" id="b2" style="width: 25%; background: #8b5cf6;">25%</div>
      <div class="bar-seg" id="b3" style="width: 10%; background: #f59e0b;">10%</div>
    </div>
    <div class="bar-legend">
      <span>0.00 (0%)</span>
      <span>Whole Sample Space = 1.00 (100%)</span>
    </div>
  </div>

  <script>
    const data = [
      { name: 'Blue', f: 7, frac: '\\frac{7}{20}', rf: '0.35', pct: '35%' },
      { name: 'Teal', f: 6, frac: '\\frac{6}{20}', rf: '0.30', pct: '30%' },
      { name: 'Purple', f: 5, frac: '\\frac{5}{20}', rf: '0.25', pct: '25%' },
      { name: 'Amber', f: 2, frac: '\\frac{2}{20}', rf: '0.10', pct: '10%' }
    ];

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

    // Render KaTeX header labels
    function renderHeaders() {
      if (window.katex) {
        katex.render("f", document.getElementById('mathF'));
        katex.render("n", document.getElementById('mathN'));
      }
    }

    function updateView(step) {
      currentStep = step;

      // Update tabs
      for (let i = 0; i < 3; i++) {
        const tab = document.getElementById('tab' + i);
        if (i === step) {
          tab.classList.add('active');
        } else {
          tab.classList.remove('active');
        }
      }

      const totalF = document.getElementById('totalF');
      const formulaEl = document.getElementById('formulaContainer');
      const pill = document.getElementById('statusPill');

      if (step === 0) {
        // Step 1: Sum Total
        pill.textContent = "Step 1: Find Total (n)";
        totalF.className = 'sum-highlight';
        
        data.forEach((d, i) => {
          document.getElementById(`frac${i}`).textContent = '-';
          document.getElementById(`rf${i}`).textContent = '-';
          document.getElementById(`pct${i}`).textContent = '-';
          document.getElementById(`rf${i}`).className = '';
        });
        document.getElementById('totalFrac').textContent = '-';
        document.getElementById('totalRf').textContent = '-';
        document.getElementById('totalPct').textContent = '-';
        document.getElementById('totalRf').className = '';

        if (window.katex) {
          katex.render("n = 7 + 6 + 5 + 2 = 20", formulaEl);
        } else {
          formulaEl.textContent = "n = 7 + 6 + 5 + 2 = 20";
        }

        // Dim bar segments
        for (let i = 0; i < 4; i++) {
          document.getElementById(`b${i}`).style.opacity = '0.35';
        }

      } else if (step === 1) {
        // Step 2: Calculate Relative Frequency
        pill.textContent = "Step 2: Frequency ÷ Total";
        totalF.className = '';

        data.forEach((d, i) => {
          if (window.katex) {
            katex.render(d.frac, document.getElementById(`frac${i}`));
          } else {
            document.getElementById(`frac${i}`).textContent = `${d.f}/20`;
          }
          document.getElementById(`rf${i}`).textContent = d.rf;
          document.getElementById(`pct${i}`).textContent = d.pct;
          document.getElementById(`rf${i}`).className = 'highlight-calc';
        });

        document.getElementById('totalFrac').textContent = '-';
        document.getElementById('totalRf').textContent = '-';
        document.getElementById('totalPct').textContent = '-';
        document.getElementById('totalRf').className = '';

        if (window.katex) {
          katex.render("\\text{Relative Frequency} = \\frac{f}{n}", formulaEl);
        } else {
          formulaEl.textContent = "Relative Frequency = f / n";
        }

        for (let i = 0; i < 4; i++) {
          document.getElementById(`b${i}`).style.opacity = '1';
        }

      } else if (step === 2) {
        // Step 3: Total Sums to 1.00 (100%)
        pill.textContent = "Step 3: Sum = 1.00";
        totalF.className = '';

        data.forEach((d, i) => {
          if (window.katex) {
            katex.render(d.frac, document.getElementById(`frac${i}`));
          } else {
            document.getElementById(`frac${i}`).textContent = `${d.f}/20`;
          }
          document.getElementById(`rf${i}`).textContent = d.rf;
          document.getElementById(`pct${i}`).textContent = d.pct;
          document.getElementById(`rf${i}`).className = '';
        });

        if (window.katex) {
          katex.render("\\frac{20}{20}", document.getElementById('totalFrac'));
        } else {
          document.getElementById('totalFrac').textContent = '20/20';
        }
        document.getElementById('totalRf').textContent = '1.00';
        document.getElementById('totalPct').textContent = '100%';
        document.getElementById('totalRf').className = 'sum-highlight';

        if (window.katex) {
          katex.render("0.35 + 0.30 + 0.25 + 0.10 = 1.00", formulaEl);
        } else {
          formulaEl.textContent = "0.35 + 0.30 + 0.25 + 0.10 = 1.00";
        }

        for (let i = 0; i < 4; i++) {
          document.getElementById(`b${i}`).style.opacity = '1';
        }
      }
    }

    function setStep(step) {
      updateView(step);
    }

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

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      playing = true;
      document.getElementById('playIcon').textContent = '⏸';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      playing = false;
      document.getElementById('playIcon').textContent = '▶';
    }

    function togglePlay() {
      if (playing) {
        stopTimer();
      } else {
        startTimer();
      }
    }

    // Initialize on load
    window.addEventListener('DOMContentLoaded', () => {
      renderHeaders();
      updateView(0);
      startTimer();
    });
  </script>
</body>
</html>

Notice that when you add the relative frequencies of all possible outcomes together ($0.35 + 0.30 + 0.25 + 0.10$), the sum is always exactly $1.00$ (or $100\%$).

Even though the arithmetic is straightforward, there is one common pitfall to watch out for.

A frequent mistake is dividing by the count of another category rather than the grand total of all trials.

For instance, the relative frequency of taking the bus is $\frac{70}{200} = 0.35$, not $\frac{70}{60}$; always verify that your denominator includes every single trial.

math

Calculating Relative Frequencies from Given or Collected Data. Calculate relative frequencies by dividing the frequency of an event by the total number of trials.

Experimental Probability and Relative Frequency

Relative Frequency and Estimating Probabilities

Year 9 Mathematics: Calculate Relative Frequency and Experimental Probability

To achieve global mastery under AC9M9P02, adopt a concrete-representational-abstract (CRA) instructional flow: begin with hands-on or digital data generation (rolling dice or spinning spinners $10$ vs $500$ times) to visually establish how relative frequency stabilizes. Transition to two-way contingency tables, explicitly using highlighters to map the linguistic differences between 'and', inclusive 'or', and exclusive 'or' to their respective table regions before computing quotients.

Calculating Relative Frequencies from Given or Collected Data

What Is Relative Frequency?

Calculating from Collected Data