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 playing a game where spinning your favorite color wins you a prize! Would you rather your color have a tiny slice or a giant slice of the wheel?

A **spinner** is a flat circle divided into slices called **sectors**, with an arrow that spins freely around the center.

<!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: 10px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .main-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 16px;
  }
  .spinner-box {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
  }
  .spinner-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
  }
  .needle-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-origin: 50% 50%;
    transition: transform 1.2s cubic-bezier(0.15, 0.9, 0.25, 1);
  }
  .needle-svg {
    width: 100%;
    height: 100%;
  }
  .stats-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .stat-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stat-header {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
  }
  .bar-bg {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
  }
  .bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.3s ease;
  }
  .controls {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  button {
    background: #22b7ff;
    color: #ffffff;
    border: none;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
  }
  button:active {
    filter: brightness(0.92);
  }
  button.btn-secondary {
    background: #f1f5f9;
    color: #475569;
    box-shadow: none;
  }
  .total-count {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="main-row">
    <div class="spinner-box">
      
      <svg class="spinner-svg" viewBox="0 0 100 100">
        
        <path d="M 50 50 L 50 2 A 48 48 0 0 1 50 98 Z" fill="#3b82f6" />
        
        <path d="M 50 50 L 50 98 A 48 48 0 0 1 2 50 Z" fill="#10b981" />
        
        <path d="M 50 50 L 2 50 A 48 48 0 0 1 50 2 Z" fill="#f59e0b" />
        
        <circle cx="50" cy="50" r="48" fill="none" stroke="#ffffff" stroke-width="2" />
        
        <text x="74" y="54" fill="#ffffff" font-size="10" font-weight="bold" text-anchor="middle">½</text>
        <text x="32" y="72" fill="#ffffff" font-size="10" font-weight="bold" text-anchor="middle">¼</text>
        <text x="32" y="34" fill="#ffffff" font-size="10" font-weight="bold" text-anchor="middle">¼</text>
      </svg>

      <div class="needle-container" id="needle">
        <svg class="needle-svg" viewBox="0 0 100 100">
          <polygon points="50,10 44,48 56,48" fill="#1e2945" />
          <circle cx="50" cy="50" r="7" fill="#1e2945" />
          <circle cx="50" cy="50" r="3" fill="#ffffff" />
        </svg>
      </div>
    </div>

    <div class="stats-box">
      <div class="stat-row">
        <div class="stat-header">
          <span style="color:#3b82f6;">Blue (½)</span>
          <span id="count-blue">0</span>
        </div>
        <div class="bar-bg">
          <div class="bar-fill" id="bar-blue" style="background:#3b82f6;"></div>
        </div>
      </div>

      <div class="stat-row">
        <div class="stat-header">
          <span style="color:#10b981;">Green (¼)</span>
          <span id="count-green">0</span>
        </div>
        <div class="bar-bg">
          <div class="bar-fill" id="bar-green" style="background:#10b981;"></div>
        </div>
      </div>

      <div class="stat-row">
        <div class="stat-header">
          <span style="color:#f59e0b;">Yellow (¼)</span>
          <span id="count-yellow">0</span>
        </div>
        <div class="bar-bg">
          <div class="bar-fill" id="bar-yellow" style="background:#f59e0b;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button id="btn-spin">Spin ▶</button>
    <button id="btn-spin10" class="btn-secondary">+10 Spins</button>
    <button id="btn-reset" class="btn-secondary">↺</button>
  </div>

  <div class="total-count" id="total-text">Total: 0</div>
</div>

<script>
  let currentAngle = 0;
  let counts = { blue: 0, green: 0, yellow: 0, total: 0 };
  let isSpinning = false;

  const needle = document.getElementById('needle');
  const countBlue = document.getElementById('count-blue');
  const countGreen = document.getElementById('count-green');
  const countYellow = document.getElementById('count-yellow');
  const barBlue = document.getElementById('bar-blue');
  const barGreen = document.getElementById('bar-green');
  const barYellow = document.getElementById('bar-yellow');
  const totalText = document.getElementById('total-text');

  function getSector(deg) {
    const norm = (deg % 360 + 360) % 360;
    if (norm >= 0 && norm < 180) return 'blue';
    if (norm >= 180 && norm < 270) return 'green';
    return 'yellow';
  }

  function updateDisplay() {
    countBlue.textContent = counts.blue;
    countGreen.textContent = counts.green;
    countYellow.textContent = counts.yellow;
    totalText.textContent = `Total: ${counts.total}`;

    const max = Math.max(counts.blue, counts.green, counts.yellow, 1);
    barBlue.style.width = `${(counts.blue / max) * 100}%`;
    barGreen.style.width = `${(counts.green / max) * 100}%`;
    barYellow.style.width = `${(counts.yellow / max) * 100}%`;
  }

  function spinSingle() {
    if (isSpinning) return;
    isSpinning = true;
    needle.style.transition = 'transform 1.2s cubic-bezier(0.15, 0.9, 0.25, 1)';
    
    // Pick random target angle (avoiding exact boundaries)
    const extraRounds = 4 + Math.floor(Math.random() * 3);
    const targetDeg = Math.floor(Math.random() * 356) + 2;
    currentAngle += extraRounds * 360 + targetDeg;
    needle.style.transform = `rotate(${currentAngle}deg)`;

    setTimeout(() => {
      const outcome = getSector(currentAngle);
      counts[outcome]++;
      counts.total++;
      updateDisplay();
      isSpinning = false;
    }, 1200);
  }

  function spinFast(times) {
    if (isSpinning) return;
    for (let i = 0; i < times; i++) {
      const r = Math.random();
      if (r < 0.5) counts.blue++;
      else if (r < 0.75) counts.green++;
      else counts.yellow++;
      counts.total++;
    }
    // Visual spin flourish
    needle.style.transition = 'transform 0.5s ease-out';
    currentAngle += 720 + Math.floor(Math.random() * 360);
    needle.style.transform = `rotate(${currentAngle}deg)`;
    updateDisplay();
  }

  document.getElementById('btn-spin').addEventListener('click', spinSingle);
  document.getElementById('btn-spin10').addEventListener('click', () => spinFast(10));
  document.getElementById('btn-reset').addEventListener('click', () => {
    if (isSpinning) return;
    counts = { blue: 0, green: 0, yellow: 0, total: 0 };
    updateDisplay();
  });
</script>

</body>
</html>

The theoretical probability of landing on a sector depends directly on its central angle $\theta$ and size relative to the entire circle:

$$P(\text{Event}) = \frac{\theta}{360^\circ} = \frac{\text{Sector Area}}{\text{Total Area}}$$

What happens if we spin this arrow over and over again?

The theoretical probability $P(\text{Event})$ of landing on a sector depends on its central angle $\theta$ out of $360^\circ$:
$$P(\text{Event}) = \frac{\theta}{360^\circ} = \frac{\textbf{Sector Area}}{\textbf{Total Area}}$$

From these trials, we calculate the **Experimental Probability**:
$$\text{Experimental Probability} = \frac{\textbf{Number of Times Outcome Occurs}}{\textbf{Total Number of Spins (Trials)}}$$

When parts are not the same size, we call them **unequal**. The bigger a slice is, the more likely the arrow will stop there.

Each time we spin the arrow, we call it a **trial**, and we record the color it lands on with a **tally mark**.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  body { background: transparent; color: #1e2945; display: flex; justify-content: center; align-items: center; padding: 12px; }
  .diagram { width: 100%; max-width: 580px; display: flex; flex-direction: column; gap: 14px; }
  .main-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
  
  .spinner-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .spinner-wrapper { position: relative; width: 180px; height: 180px; }
  .needle {
    transform-origin: 90px 90px;
    transition: transform 1.2s cubic-bezier(0.15, 0.85, 0.35, 1);
  }

  .controls { display: flex; gap: 8px; }
  .btn {
    appearance: none; border: none; outline: none; cursor: pointer;
    font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 8px;
    display: inline-flex; align-items: center; gap: 6px; user-select: none;
  }
  .btn-spin { background: #22b7ff; color: #ffffff; }
  .btn-spin:active { opacity: 0.85; }
  .btn-spin:disabled { opacity: 0.5; cursor: not-allowed; }
  .btn-reset { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
  .btn-reset:active { background: #e2e8f0; }

  .tally-panel {
    flex: 1; min-width: 220px; background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  }
  .panel-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 700; color: #64748b; text-transform: uppercase;
    letter-spacing: 0.5px; border-bottom: 1px solid #f1f5f9; padding-bottom: 6px;
  }
  .trials-badge {
    background: #f1f5f9; color: #1e2945; font-size: 12px;
    font-weight: 600; padding: 2px 8px; border-radius: 10px;
  }

  .tally-row {
    display: grid; grid-template-columns: 60px 1fr 28px;
    align-items: center; gap: 8px; min-height: 28px;
  }
  .color-label { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
  .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .dot-blue { background: #22b7ff; }
  .dot-yellow { background: #f59e0b; }
  .dot-green { background: #10b981; }

  .tally-display { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 24px; }
  .tally-mark { stroke: #334155; stroke-width: 2; stroke-linecap: round; }
  .count-val { font-size: 14px; font-weight: 700; text-align: right; color: #1e2945; }
</style>
</head>
<body>

<div class="diagram">
  <div class="main-row">
    <div class="spinner-box">
      <div class="spinner-wrapper">
        <svg viewBox="0 0 180 180" width="180" height="180">
          
          <path d="M 90 10 A 80 80 0 0 1 90 170 Z" fill="#22b7ff" />
          
          <path d="M 90 170 A 80 80 0 0 1 10 90 L 90 90 Z" fill="#f59e0b" />
          
          <path d="M 10 90 A 80 80 0 0 1 90 10 L 90 90 Z" fill="#10b981" />
          
          
          <circle cx="90" cy="90" r="80" fill="none" stroke="#ffffff" stroke-width="3" />
          
          
          <text x="130" y="95" fill="#ffffff" font-size="12" font-weight="700" text-anchor="middle">½</text>
          <text x="50" y="135" fill="#ffffff" font-size="12" font-weight="700" text-anchor="middle">¼</text>
          <text x="50" y="55" fill="#ffffff" font-size="12" font-weight="700" text-anchor="middle">¼</text>

          
          <g id="needle" class="needle">
            <polygon points="90,24 83,90 97,90" fill="#1e2945" />
            <circle cx="90" cy="90" r="8" fill="#1e2945" />
            <circle cx="90" cy="90" r="3" fill="#ffffff" />
          </g>
        </svg>
      </div>
      <div class="controls">
        <button id="spinBtn" class="btn btn-spin">▶ Spin</button>
        <button id="resetBtn" class="btn btn-reset">↺</button>
      </div>
    </div>

    <div class="tally-panel">
      <div class="panel-header">
        <span>Tally Table</span>
        <span class="trials-badge">Trials: <span id="trialCount">0</span></span>
      </div>

      <div class="tally-row">
        <div class="color-label"><span class="dot dot-blue"></span>Blue</div>
        <div class="tally-display" id="tally-blue"></div>
        <div class="count-val" id="count-blue">0</div>
      </div>

      <div class="tally-row">
        <div class="color-label"><span class="dot dot-yellow"></span>Yellow</div>
        <div class="tally-display" id="tally-yellow"></div>
        <div class="count-val" id="count-yellow">0</div>
      </div>

      <div class="tally-row">
        <div class="color-label"><span class="dot dot-green"></span>Green</div>
        <div class="tally-display" id="tally-green"></div>
        <div class="count-val" id="count-green">0</div>
      </div>
    </div>
  </div>
</div>

<script>
  const spinBtn = document.getElementById('spinBtn');
  const resetBtn = document.getElementById('resetBtn');
  const needle = document.getElementById('needle');
  const trialCountEl = document.getElementById('trialCount');

  const counts = { blue: 0, yellow: 0, green: 0 };
  let currentRotation = 0;
  let isSpinning = false;

  function makeTallySVG(num) {
    if (num === 5) {
      return `<svg width="22" height="18" viewBox="0 0 22 18">
        <line x1="3" y1="2" x2="3" y2="16" class="tally-mark"/>
        <line x1="7" y1="2" x2="7" y2="16" class="tally-mark"/>
        <line x1="11" y1="2" x2="11" y2="16" class="tally-mark"/>
        <line x1="15" y1="2" x2="15" y2="16" class="tally-mark"/>
        <line x1="1" y1="15" x2="18" y2="3" class="tally-mark"/>
      </svg>`;
    }
    let lines = '';
    for (let i = 0; i < num; i++) {
      const x = 3 + i * 4;
      lines += `<line x1="${x}" y1="2" x2="${x}" y2="16" class="tally-mark"/>`;
    }
    return `<svg width="${num * 4 + 4}" height="18" viewBox="0 0 ${num * 4 + 4} 18">${lines}</svg>`;
  }

  function updateTally(color) {
    const container = document.getElementById('tally-' + color);
    const count = counts[color];
    const fives = Math.floor(count / 5);
    const rem = count % 5;
    let html = '';
    for (let i = 0; i < fives; i++) html += makeTallySVG(5);
    if (rem > 0) html += makeTallySVG(rem);
    container.innerHTML = html;
    document.getElementById('count-' + color).textContent = count;
  }

  function spin() {
    if (isSpinning) return;
    isSpinning = true;
    spinBtn.disabled = true;

    const rand = Math.random();
    let targetDeg, landedColor;

    if (rand < 0.5) {
      landedColor = 'blue';
      targetDeg = 15 + Math.random() * 150;
    } else if (rand < 0.75) {
      landedColor = 'yellow';
      targetDeg = 195 + Math.random() * 60;
    } else {
      landedColor = 'green';
      targetDeg = 285 + Math.random() * 60;
    }

    const spins = (Math.floor(Math.random() * 2) + 3) * 360;
    const baseRot = currentRotation - (currentRotation % 360);
    currentRotation = baseRot + spins + targetDeg;
    needle.style.transform = `rotate(${currentRotation}deg)`;

    setTimeout(() => {
      counts[landedColor]++;
      updateTally(landedColor);
      trialCountEl.textContent = counts.blue + counts.yellow + counts.green;
      isSpinning = false;
      spinBtn.disabled = false;
    }, 1250);
  }

  function reset() {
    if (isSpinning) return;
    counts.blue = 0;
    counts.yellow = 0;
    counts.green = 0;
    ['blue', 'yellow', 'green'].forEach(updateTally);
    trialCountEl.textContent = '0';
    currentRotation = 0;
    needle.style.transform = 'rotate(0deg)';
  }

  spinBtn.addEventListener('click', spin);
  resetBtn.addEventListener('click', reset);
</script>
</body>
</html>

From our tally counts, we can find the **Experimental Probability** of each color:

Across a small batch of $10$ spins, experimental frequencies show natural variation and can differ from the sector sizes.

According to the Law of **Large Numbers**, conducting many repeated trials causes the experimental results to converge toward the theoretical probabilities.

$$\text{Experimental Probability} = \frac{\text{Number of Times Outcome Occurs}}{\text{Total Number of Spins (Trials)}}$$

Does the blue slice always win every single spin?

Even though red and yellow are smaller, the arrow can still land on them! A larger slice gives a higher **chance**, but each individual spin is still a surprise.

Try drawing your own circle with three different slice sizes and count where the spinner stops after ten spins!

In a small batch of $10$ spins, results show natural statistical variation and might not match the sector sizes exactly.

However, by the Law of **Large Numbers**, as the number of trials increases, the experimental probabilities get closer and closer to the theoretical sector fractions.

math

Designing and Testing Custom Probability Spinners. Design circular spinners with unequal sector angles and test experimental landing frequencies against sector fractions.

Which Spinners? & Interactive Spinners

Adjustable Probability Spinner & Experimental Data Collector

Probability, Chance, and Conducting Simple Experiments

Adopt a concrete-representational-abstract (CRA) progression. Start with hands-on construction using paper plates, split-pin fasteners, and paperclips to physically partition circles into benchmark fractions ($\frac{1}{2}, \frac{1}{4}, \frac{1}{8}$). Have learners predict outcomes using qualitative chance vocabulary before conducting experiments in small groups (e.g., $10$ to $20$ spins). Aggregate class data on a shared tally board or digital simulator to demonstrate how experimental frequencies align closely with theoretical sector fractions as total trials increase.

Designing and Testing Custom Probability Spinners

Testing Our Spinner