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

Can a puppy sprout wings and fly to the moon? Some things can never happen, while other things are guaranteed to happen!

In math, **probability** is simply a number that measures how likely an event is to happen.

We measure all probability on a scale that starts at **0** and ends at **1**.

<!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>Probability Scale 0 to 1</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    /* Visual Indicator Display */
    .preview-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid #e6e6e6;
      text-align: center;
    }

    .visual-circle {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      position: relative;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06);
      transition: background 0.2s ease;
    }

    .status-term {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      min-height: 26px;
    }

    .values-row {
      display: flex;
      gap: 12px;
      margin-top: 6px;
      font-size: 15px;
      font-weight: 600;
      color: #6b7280;
    }

    .values-row span {
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
      color: #1e2945;
    }

    /* Probability Track */
    .scale-container {
      width: 100%;
      padding: 8px 4px 0 4px;
      position: relative;
    }

    .track-wrapper {
      position: relative;
      height: 14px;
      border-radius: 7px;
      background: linear-gradient(to right, #ef4444, #f59e0b, #3b82f6, #10b981);
      margin: 12px 14px;
    }

    .slider {
      -webkit-appearance: none;
      appearance: none;
      position: absolute;
      top: -9px;
      left: -14px;
      width: calc(100% + 28px);
      height: 32px;
      background: transparent;
      outline: none;
      cursor: pointer;
      z-index: 10;
      margin: 0;
    }

    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      cursor: grab;
      transition: border-color 0.15s ease;
    }

    .slider::-moz-range-thumb {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      border: 3px solid #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      cursor: grab;
    }

    /* Preset Snap Buttons */
    .snap-points {
      display: flex;
      justify-content: space-between;
      width: 100%;
      position: relative;
      margin-top: 4px;
    }

    .snap-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #4b5563;
      border-radius: 8px;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 54px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .snap-btn .sub {
      font-size: 11px;
      font-weight: 400;
      color: #9ca3af;
    }

    .snap-btn.active {
      border-color: #1e2945;
      background: #1e2945;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.2);
    }

    .snap-btn.active .sub {
      color: #cbd5e1;
    }
  </style>
</head>
<body>

<div class="container">
  
  <div class="preview-card">
    <div id="visualPie" class="visual-circle">
      <span id="visualIcon">⚖️</span>
    </div>
    <div id="termLabel" class="status-term">Even Chance</div>
    <div class="values-row">
      <span id="fracVal">1/2</span>
      <span id="decVal">0.50</span>
      <span id="pctVal">50%</span>
    </div>
  </div>

  
  <div class="scale-container">
    <div class="track-wrapper">
      <input type="range" id="probRange" class="slider" min="0" max="100" value="50" step="1">
    </div>

    <div class="snap-points">
      <button class="snap-btn" onclick="setProb(0)">
        <span>0</span>
        <span class="sub">0%</span>
      </button>
      <button class="snap-btn" onclick="setProb(25)">
        <span>¼</span>
        <span class="sub">25%</span>
      </button>
      <button class="snap-btn active" onclick="setProb(50)">
        <span>½</span>
        <span class="sub">50%</span>
      </button>
      <button class="snap-btn" onclick="setProb(75)">
        <span>¾</span>
        <span class="sub">75%</span>
      </button>
      <button class="snap-btn" onclick="setProb(100)">
        <span>1</span>
        <span class="sub">100%</span>
      </button>
    </div>
  </div>
</div>

<script>
  const range = document.getElementById('probRange');
  const termLabel = document.getElementById('termLabel');
  const fracVal = document.getElementById('fracVal');
  const decVal = document.getElementById('decVal');
  const pctVal = document.getElementById('pctVal');
  const visualPie = document.getElementById('visualPie');
  const visualIcon = document.getElementById('visualIcon');
  const snapButtons = document.querySelectorAll('.snap-btn');

  const snaps = [0, 25, 50, 75, 100];

  function getTerm(val) {
    if (val === 0) return { term: 'Impossible', icon: '✕', color: '#ef4444' };
    if (val < 40) return { term: 'Unlikely', icon: '◇', color: '#f59e0b' };
    if (val <= 60) return { term: 'Even Chance', icon: '⚖️', color: '#3b82f6' };
    if (val < 100) return { term: 'Likely', icon: '✦', color: '#10b981' };
    return { term: 'Certain', icon: '✓', color: '#059669' };
  }

  function getFraction(val) {
    if (val === 0) return '0';
    if (val === 25) return '1/4';
    if (val === 50) return '1/2';
    if (val === 75) return '3/4';
    if (val === 100) return '1';
    return `${val}/100`;
  }

  function updateView(val) {
    const num = parseInt(val, 10);
    const { term, icon, color } = getTerm(num);
    const dec = (num / 100).toFixed(2);

    termLabel.textContent = term;
    termLabel.style.color = color;
    fracVal.textContent = getFraction(num);
    decVal.textContent = (num === 0 || num === 100) ? (num / 100).toFixed(0) : dec;
    pctVal.textContent = num + '%';
    visualIcon.textContent = icon;

    visualPie.style.background = `conic-gradient(${color} 0% ${num}%, #e2e8f0 ${num}% 100%)`;

    snapButtons.forEach((btn, i) => {
      btn.classList.toggle('active', snaps[i] === num);
    });
  }

  function setProb(val) {
    range.value = val;
    updateView(val);
  }

  range.addEventListener('input', (e) => {
    updateView(e.target.value);
  });

  // Initial state
  updateView(50);
</script>

</body>
</html>

A score of **0** means impossible, **1** means certain, and everything in between describes a chance that might happen.

How do we write these chances with numbers?

You can write any probability in three matching forms: as a **fraction**, a **decimal**, or a **percentage**.

<!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>Probability Scale: 3 Matching Forms</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
    }

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

    /* Top Visual Area */
    .visual-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .wheel-container {
      position: relative;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background: #e2e8f0;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 2px #cbd5e1;
      overflow: hidden;
    }

    .wheel-fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: conic-gradient(#3b82f6 var(--deg, 180deg), transparent 0deg);
      transition: background 0.15s ease-out;
    }

    .forms-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      flex-grow: 1;
    }

    .form-card {
      background: #f1f5f9;
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 70px;
      border: 1px solid #e2e8f0;
    }

    .form-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .form-val {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }

    .fraction-val {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.1;
    }

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

    .fraction-den {
      padding: 0 2px;
    }

    /* Slider Area */
    .slider-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 20px 16px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .range-wrap {
      position: relative;
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
    }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #e2e8f0;
      outline: none;
      margin: 0;
      cursor: pointer;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #3b82f6;
      border: 3px solid #ffffff;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
      cursor: pointer;
      transition: transform 0.1s ease;
    }

    input[type="range"]::-moz-range-thumb {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #3b82f6;
      border: 3px solid #ffffff;
      box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
      cursor: pointer;
    }

    /* Preset Buttons */
    .presets-row {
      display: flex;
      justify-content: space-between;
      gap: 6px;
    }

    .preset-btn {
      flex: 1;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 2px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.15s ease;
      text-align: center;
    }

    .preset-btn.active {
      background: #3b82f6;
      color: #ffffff;
      border-color: #3b82f6;
      box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
    }
  </style>
</head>
<body>

<div class="main-layout">
  
  <div class="visual-row">
    <div class="wheel-container">
      <div class="wheel-fill" id="wheelFill" style="--deg: 180deg;"></div>
    </div>

    <div class="forms-grid">
      <div class="form-card">
        <div class="form-label">Fraction</div>
        <div class="form-val" id="fracDisplay">
          <div class="fraction-val">
            <span class="fraction-num">1</span>
            <span class="fraction-den">2</span>
          </div>
        </div>
      </div>

      <div class="form-card">
        <div class="form-label">Decimal</div>
        <div class="form-val" id="decDisplay">0.5</div>
      </div>

      <div class="form-card">
        <div class="form-label">Percent</div>
        <div class="form-val" id="pctDisplay">50%</div>
      </div>
    </div>
  </div>

  
  <div class="slider-box">
    <div class="range-wrap">
      <input type="range" id="probRange" min="0" max="100" value="50" step="1" aria-label="Probability Scale">
    </div>

    <div class="presets-row">
      <button class="preset-btn" data-val="0">0</button>
      <button class="preset-btn" data-val="25">¼</button>
      <button class="preset-btn active" data-val="50">½</button>
      <button class="preset-btn" data-val="75">¾</button>
      <button class="preset-btn" data-val="100">1</button>
    </div>
  </div>
</div>

<script>
  const slider = document.getElementById('probRange');
  const wheelFill = document.getElementById('wheelFill');
  const fracDisplay = document.getElementById('fracDisplay');
  const decDisplay = document.getElementById('decDisplay');
  const pctDisplay = document.getElementById('pctDisplay');
  const presetBtns = document.querySelectorAll('.preset-btn');

  function gcd(a, b) {
    return b === 0 ? a : gcd(b, a % b);
  }

  function getFractionHtml(val) {
    if (val === 0) return '0';
    if (val === 100) return '1';
    
    // Simplify fraction val / 100
    const divisor = gcd(val, 100);
    const num = val / divisor;
    const den = 100 / divisor;

    return `
      <div class="fraction-val">
        <span class="fraction-num">${num}</span>
        <span class="fraction-den">${den}</span>
      </div>
    `;
  }

  function updateProbability(val) {
    val = Math.max(0, Math.min(100, Math.round(val)));
    
    // Update visual circle
    const degrees = (val / 100) * 360;
    wheelFill.style.setProperty('--deg', `${degrees}deg`);

    // Update 3 matching formats
    pctDisplay.textContent = `${val}%`;
    decDisplay.textContent = (val / 100).toFixed(val % 10 === 0 && val !== 0 && val !== 100 ? 1 : (val === 0 || val === 100 ? 0 : 2));
    fracDisplay.innerHTML = getFractionHtml(val);

    // Update active preset styling
    presetBtns.forEach(btn => {
      if (parseInt(btn.dataset.val, 10) === val) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
  }

  slider.addEventListener('input', (e) => {
    updateProbability(parseInt(e.target.value, 10));
  });

  presetBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const val = parseInt(btn.dataset.val, 10);
      slider.value = val;
      updateProbability(val);
    });
  });

  // Initial render
  updateProbability(50);
</script>

</body>
</html>

Because they all describe the exact same slice of chance, $\frac{1}{2}$, $0.5$, and $50\%$ mean the exact same thing.

Let's put this into action with a real game spinner!

Imagine a wheel divided into 4 equal slices: 3 slices are blue, and 1 slice is yellow.

<!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>Probability Scale 0 to 1</title>
<link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
<script src="{{VENDOR_CDN}}/katex.min.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: center;
    min-height: 100%;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .tabs {
    display: flex;
    gap: 8px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 24px;
  }
  .tab-btn {
    border: none;
    background: transparent;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .tab-btn.active-blue {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
  }
  .tab-btn.active-yellow {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(245,158,11,0.25);
  }
  .wheel-container {
    position: relative;
    width: 170px;
    height: 170px;
    cursor: pointer;
  }
  .slice {
    transition: opacity 0.25s ease, stroke-width 0.25s ease;
    cursor: pointer;
  }
  .slice:hover {
    opacity: 0.9;
  }
  .slice-blue {
    fill: #3b82f6;
  }
  .slice-yellow {
    fill: #fbbf24;
  }
  .dimmed {
    opacity: 0.35;
  }
  .scale-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .scale-track-wrap {
    position: relative;
    width: 100%;
    height: 28px;
    margin: 28px 0 6px;
  }
  .scale-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 8px;
    transform: translateY(-50%);
    background: #e2e8f0;
    border-radius: 4px;
  }
  .scale-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 8px;
    transform: translateY(-50%);
    border-radius: 4px;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s ease;
  }
  .marker {
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid #2563eb;
    transform: translate(-50%, -50%);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 2;
  }
  .marker-badge {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #1e2945;
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
  }
  .marker-badge::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1e2945;
  }
  .scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
  }
  .tick-mark {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 14px;
    background: #cbd5e1;
    transform: translate(-50%, -50%);
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="tabs">
    <button id="btnBlue" class="tab-btn active-blue">Blue (3 of 4)</button>
    <button id="btnYellow" class="tab-btn">Yellow (1 of 4)</button>
  </div>

  <div class="wheel-container">
    <svg viewBox="0 0 160 160" width="100%" height="100%">
      
      
      <path id="s1" class="slice slice-blue" d="M80,80 L80,10 A70,70 0 0,1 150,80 Z" stroke="#ffffff" stroke-width="2"/>
      
      <path id="s2" class="slice slice-blue" d="M80,80 L150,80 A70,70 0 0,1 80,150 Z" stroke="#ffffff" stroke-width="2"/>
      
      <path id="s3" class="slice slice-blue" d="M80,80 L80,150 A70,70 0 0,1 10,80 Z" stroke="#ffffff" stroke-width="2"/>
      
      <path id="s4" class="slice slice-yellow" d="M80,80 L10,80 A70,70 0 0,1 80,10 Z" stroke="#ffffff" stroke-width="2"/>
      
      <circle cx="80" cy="80" r="14" fill="#ffffff" stroke="#cbd5e1" stroke-width="2"/>
      <circle cx="80" cy="80" r="5" fill="#64748b"/>
    </svg>
  </div>

  <div class="scale-card">
    <div class="scale-track-wrap">
      <div class="scale-bar"></div>
      <div class="tick-mark" style="left: 0%;"></div>
      <div class="tick-mark" style="left: 50%;"></div>
      <div class="tick-mark" style="left: 100%;"></div>
      <div id="scaleFill" class="scale-fill" style="width: 75%; background-color: #3b82f6;"></div>
      <div id="marker" class="marker" style="left: 75%; border-color: #2563eb;">
        <div id="badge" class="marker-badge"></div>
      </div>
    </div>
    <div class="scale-labels">
      <span>0</span>
      <span>0.5</span>
      <span>1</span>
    </div>
  </div>
</div>

<script>
  const btnBlue = document.getElementById('btnBlue');
  const btnYellow = document.getElementById('btnYellow');
  const marker = document.getElementById('marker');
  const scaleFill = document.getElementById('scaleFill');
  const badge = document.getElementById('badge');
  const blueSlices = [document.getElementById('s1'), document.getElementById('s2'), document.getElementById('s3')];
  const yellowSlice = document.getElementById('s4');

  function renderMath(tex, el) {
    if (window.katex) {
      katex.render(tex, el, { throwOnError: false });
    } else {
      el.textContent = tex;
    }
  }

  function setMode(mode) {
    if (mode === 'blue') {
      btnBlue.className = 'tab-btn active-blue';
      btnYellow.className = 'tab-btn';
      marker.style.left = '75%';
      marker.style.borderColor = '#2563eb';
      scaleFill.style.width = '75%';
      scaleFill.style.backgroundColor = '#3b82f6';
      blueSlices.forEach(s => s.classList.remove('dimmed'));
      yellowSlice.classList.add('dimmed');
      renderMath('\\frac{3}{4} = 0.75 = 75\\%', badge);
    } else {
      btnBlue.className = 'tab-btn';
      btnYellow.className = 'tab-btn active-yellow';
      marker.style.left = '25%';
      marker.style.borderColor = '#d97706';
      scaleFill.style.width = '25%';
      scaleFill.style.backgroundColor = '#fbbf24';
      blueSlices.forEach(s => s.classList.add('dimmed'));
      yellowSlice.classList.remove('dimmed');
      renderMath('\\frac{1}{4} = 0.25 = 25\\%', badge);
    }
  }

  btnBlue.addEventListener('click', () => setMode('blue'));
  btnYellow.addEventListener('click', () => setMode('yellow'));
  blueSlices.forEach(s => s.addEventListener('click', () => setMode('blue')));
  yellowSlice.addEventListener('click', () => setMode('yellow'));

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

Since blue takes up 3 out of 4 equal parts, the probability of spinning blue is $\frac{3}{4}$, which equals **$0.75$** or **$75\%$**.

What if you spin this wheel multiple times in a row?

## Predicting Outcomes: Expected Frequency

To predict how often an event will happen over $n$ repeated trials, multiply the number of trials by the theoretical probability: $$\text{Expected Frequency} = n \times P(E)$$

For example, if you spin the wheel $n = 40$ times, the **expected frequency** of landing on blue is $40 \times \frac{3}{4} = 30$ times.

Keep in mind that real mathematical probabilities can never be less than $0$ or greater than $1$ ($100\%$). Whenever you solve a probability problem, double-check that your answer lands right on that 0 to 1 scale!

What if you spun that color wheel $100$ times? Probability lets us predict how many times an outcome will happen.

The **expected frequency** is the predicted number of times an event occurs over $n$ repeated trials.

To find it, multiply the number of trials by the theoretical probability: $$\text{Expected Frequency} = n \times P(E)$$

For $100$ spins, the expected frequency of landing on blue is $100 \times \frac{3}{4} = \mathbf{75}$ times.

math

Reviewing Theoretical Probability: Scale from 0 to 1. Express probabilities of single events using fractions, decimals, and percentages on the 0 to 1 scale.

Probability on the 0 to 1 Scale and Simple Events

Understanding the Probability Scale and Calculating Single Event Probability

Tools for Thinking About Probability: Design Your Own Scale

To achieve mastery of MNU 4-22a and the 0 to 1 probability scale, instruction should employ a Concrete-Pictorial-Abstract (CPA) progression. Begin with physical experiments (spinners, dice, colored counters) to ground the concept of likelihood, transition to a unified visual number line mapping fractions, decimals, and percentages concurrently, and conclude with formal symbolic algebra for complement rules ($P(E') = 1 - P(E)$) and expected frequency calculations ($n \cdot P(E)$).

Reviewing Theoretical Probability: Scale from 0 to 1

The 0 to 1 Scale

Three Ways to Write Chance