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 typing `1-2-3-4` to unlock your phone. If you type `4-3-2-1` instead, the phone stays locked — because the sequence matters.

Now imagine ordering a pizza with pepperoni, mushrooms, and olives. Whether the chef tosses the olives on first or last, you get the exact same pizza.

<!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>Permutations vs Combinations</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }
    body {
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .toggle-bar {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 10px;
      gap: 4px;
      margin-bottom: 16px;
      width: 100%;
      max-width: 400px;
    }
    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    .stage {
      width: 100%;
      max-width: 400px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }
    .items-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      min-height: 80px;
      position: relative;
      width: 100%;
    }
    .item-card {
      width: 68px;
      height: 74px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 28px;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s;
    }
    .item-tag {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
    }
    .podium-tag {
      font-size: 11px;
      font-weight: 700;
      color: #2563eb;
    }
    .flow-arrow {
      font-size: 20px;
      color: #94a3b8;
    }
    .result-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 12px;
      background: #f8fafc;
      border-radius: 10px;
      border: 1px dashed #cbd5e1;
      gap: 6px;
    }
    .result-main {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
    }
    .badge-blue {
      background: #eff6ff;
      color: #2563eb;
    }
    .badge-amber {
      background: #fef3c7;
      color: #d97706;
    }
    .shuffle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 400px;
      margin-top: 12px;
      padding: 12px;
      background: #2563eb;
      color: #ffffff;
      border: none;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s ease, opacity 0.2s;
    }
    .shuffle-btn:active {
      opacity: 0.9;
    }
    .counter-row {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 13px;
      color: #64748b;
      padding: 0 4px;
    }
    .counter-val {
      font-weight: 700;
      color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="toggle-bar">
    <button class="toggle-btn active" id="btn-combo" onclick="setMode('combination')">
      Combination
    </button>
    <button class="toggle-btn" id="btn-perm" onclick="setMode('permutation')">
      Permutation
    </button>
  </div>

  <div class="stage">
    <div class="counter-row">
      <span id="order-label">Order: <strong>Does NOT Matter</strong></span>
      <span>Arrangement: <span class="counter-val" id="seq-index">1 / 6</span></span>
    </div>

    
    <div class="items-container" id="slots-area">
      
    </div>

    
    <div class="result-display">
      <div class="result-main" id="outcome-text">
        <span>🍕</span>
        <span>Same Pizza (1 Result)</span>
      </div>
      <div class="badge badge-blue" id="badge-info">Order has no effect</div>
    </div>
  </div>

  <button class="shuffle-btn" onclick="nextPermutation()">
    <span>🔀</span> Swap Order
  </button>

  <script>
    const permutations = [
      [ { emoji: '🍄', tag: 'A' }, { emoji: '🫒', tag: 'B' }, { emoji: '🌶️', tag: 'C' } ],
      [ { emoji: '🍄', tag: 'A' }, { emoji: '🌶️', tag: 'C' }, { emoji: '🫒', tag: 'B' } ],
      [ { emoji: '🫒', tag: 'B' }, { emoji: '🍄', tag: 'A' }, { emoji: '🌶️', tag: 'C' } ],
      [ { emoji: '🫒', tag: 'B' }, { emoji: '🌶️', tag: 'C' }, { emoji: '🍄', tag: 'A' } ],
      [ { emoji: '🌶️', tag: 'C' }, { emoji: '🍄', tag: 'A' }, { emoji: '🫒', tag: 'B' } ],
      [ { emoji: '🌶️', tag: 'C' }, { emoji: '🫒', tag: 'B' }, { emoji: '🍄', tag: 'A' } ]
    ];

    let currentMode = 'combination'; // 'combination' or 'permutation'
    let permIndex = 0;

    function render() {
      const currentArr = permutations[permIndex];
      const slots = document.getElementById('slots-area');
      slots.innerHTML = '';

      currentArr.forEach((item, i) => {
        const card = document.createElement('div');
        card.className = 'item-card';
        
        const emojiEl = document.createElement('div');
        emojiEl.textContent = item.emoji;

        const subEl = document.createElement('div');
        if (currentMode === 'permutation') {
          subEl.className = 'podium-tag';
          subEl.textContent = i === 0 ? '1st' : i === 1 ? '2nd' : '3rd';
          card.style.borderColor = '#93c5fd';
        } else {
          subEl.className = 'item-tag';
          subEl.textContent = 'Topping';
          card.style.borderColor = '#e2e8f0';
        }

        card.appendChild(emojiEl);
        card.appendChild(subEl);
        slots.appendChild(card);
      });

      document.getElementById('seq-index').textContent = `${permIndex + 1} / 6`;

      const orderLabel = document.getElementById('order-label');
      const outcomeText = document.getElementById('outcome-text');
      const badgeInfo = document.getElementById('badge-info');

      if (currentMode === 'combination') {
        orderLabel.innerHTML = 'Order: <strong>Doesn’t Matter</strong>';
        outcomeText.innerHTML = '<span>🍕</span><span>Same Pizza (1 Group)</span>';
        badgeInfo.className = 'badge badge-blue';
        badgeInfo.textContent = 'Any order = 1 outcome';
      } else {
        orderLabel.innerHTML = 'Order: <strong>Matters</strong>';
        outcomeText.innerHTML = `<span>🏆</span><span>Sequence #${permIndex + 1} (Distinct)</span>`;
        badgeInfo.className = 'badge badge-amber';
        badgeInfo.textContent = 'Each order = New outcome (6 total)';
      }
    }

    function setMode(mode) {
      currentMode = mode;
      document.getElementById('btn-combo').classList.toggle('active', mode === 'combination');
      document.getElementById('btn-perm').classList.toggle('active', mode === 'permutation');
      render();
    }

    function nextPermutation() {
      permIndex = (permIndex + 1) % permutations.length;
      render();
    }

    render();
  </script>
</body>
</html>

In mathematics, this single distinction divides all counting problems into two major families. What happens when every unique sequence creates a new result?

A **permutation** is an arrangement of items where the specific order or sequence is crucial. In the 12th century, Indian mathematician Bhaskara II first formalized permutation formulas while analyzing poetic meters and musical rhythm patterns.

Suppose 5 sprinters run a race, and we award Gold, Silver, and Bronze medals. Giving Gold to Alex and Silver to Ben is completely different from giving Gold to Ben and Silver to Alex.

<!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: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Mode Switcher */
  .switch-bar {
    display: flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 24px;
    gap: 4px;
    width: 100%;
    max-width: 380px;
  }
  .switch-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
  }
  .switch-btn.active {
    background: #ffffff;
    color: #1e2945;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  /* Stage Container */
  .stage-area {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Slots / Enclosure */
  .slots-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
    padding: 12px;
    border-radius: 20px;
    transition: all 0.3s ease;
  }
  .mode-team .slots-wrapper {
    background: #eff6ff;
    border: 2px dashed #93c5fd;
  }
  .mode-medals .slots-wrapper {
    background: transparent;
    border: 2px solid transparent;
  }

  /* Slot Columns */
  .slot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 100px;
  }

  /* Podium / Base */
  .podium-base {
    width: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.3s ease;
  }
  .mode-medals .base-1 { height: 52px; background: #fef08a; color: #854d0e; border: 1px solid #fde047; }
  .mode-medals .base-2 { height: 40px; background: #e2e8f0; color: #475569; border: 1px solid #cbd5e1; }
  .mode-medals .base-3 { height: 32px; background: #fed7aa; color: #9a3412; border: 1px solid #fdba74; }
  
  .mode-team .podium-base {
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
  }

  /* Runner Tokens */
  .runner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .runner-sub {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
  }
  .runner-a { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
  .runner-b { background: linear-gradient(135deg, #ec4899, #be185d); }
  .runner-c { background: linear-gradient(135deg, #10b981, #047857); }

  /* Controls */
  .action-btn {
    border: none;
    background: #ffffff;
    color: #1e2945;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, box-shadow 0.2s;
  }
  .action-btn:active {
    background: #f1f5f9;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }

  /* Result Badge */
  .result-banner {
    width: 100%;
    max-width: 380px;
    padding: 10px 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
  }
  .result-medals {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
  }
  .result-team {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
  }
</style>
</head>
<body class="mode-medals">

  
  <div class="switch-bar">
    <button class="switch-btn active" id="btnMedals">🥇 Medals (Order)</button>
    <button class="switch-btn" id="btnTeam">👥 Team (No Order)</button>
  </div>

  
  <div class="stage-area">
    <div class="slots-wrapper" id="slotsWrapper">
      
      <div class="slot-col" id="col1">
        <div class="runner runner-a" id="runnerSlot1">
          <span>A</span>
          <span class="runner-sub">Alex</span>
        </div>
        <div class="podium-base base-1" id="base1">🥇 1st</div>
      </div>

      
      <div class="slot-col" id="col2">
        <div class="runner runner-b" id="runnerSlot2">
          <span>B</span>
          <span class="runner-sub">Ben</span>
        </div>
        <div class="podium-base base-2" id="base2">🥈 2nd</div>
      </div>

      
      <div class="slot-col" id="col3">
        <div class="runner runner-c" id="runnerSlot3">
          <span>C</span>
          <span class="runner-sub">Chris</span>
        </div>
        <div class="podium-base base-3" id="base3">🥉 3rd</div>
      </div>
    </div>
  </div>

  
  <button class="action-btn" id="swapBtn">
    ⇄ Swap A &amp; B
  </button>

  
  <div class="result-banner result-medals" id="resultBanner">
    Outcome: Alex (1st), Ben (2nd)
  </div>

<script>
  let mode = 'medals'; // 'medals' | 'team'
  let swapped = false;

  const btnMedals = document.getElementById('btnMedals');
  const btnTeam = document.getElementById('btnTeam');
  const swapBtn = document.getElementById('swapBtn');
  const resultBanner = document.getElementById('resultBanner');
  const base1 = document.getElementById('base1');
  const base2 = document.getElementById('base2');
  const base3 = document.getElementById('base3');
  const r1 = document.getElementById('runnerSlot1');
  const r2 = document.getElementById('runnerSlot2');

  function update() {
    document.body.className = mode === 'medals' ? 'mode-medals' : 'mode-team';
    btnMedals.classList.toggle('active', mode === 'medals');
    btnTeam.classList.toggle('active', mode === 'team');

    // Runner positions
    if (!swapped) {
      r1.className = 'runner runner-a';
      r1.innerHTML = '<span>A</span><span class="runner-sub">Alex</span>';
      r2.className = 'runner runner-b';
      r2.innerHTML = '<span>B</span><span class="runner-sub">Ben</span>';
    } else {
      r1.className = 'runner runner-b';
      r1.innerHTML = '<span>B</span><span class="runner-sub">Ben</span>';
      r2.className = 'runner runner-a';
      r2.innerHTML = '<span>A</span><span class="runner-sub">Alex</span>';
    }

    if (mode === 'medals') {
      base1.textContent = '🥇 1st';
      base2.textContent = '🥈 2nd';
      base3.textContent = '🥉 3rd';
      resultBanner.className = 'result-banner result-medals';
      resultBanner.textContent = swapped
        ? '✦ New Outcome: Ben (1st), Alex (2nd)'
        : '✦ Outcome: Alex (1st), Ben (2nd)';
    } else {
      base1.textContent = 'Member';
      base2.textContent = 'Member';
      base3.textContent = 'Member';
      resultBanner.className = 'result-banner result-team';
      resultBanner.textContent = '✓ Same Team: { Alex, Ben, Chris }';
    }
  }

  btnMedals.onclick = () => { mode = 'medals'; update(); };
  btnTeam.onclick = () => { mode = 'team'; update(); };
  swapBtn.onclick = () => { swapped = !swapped; update(); };

  update();
</script>
</body>
</html>

By the Fundamental Counting Principle, there are $5 \times 4 \times 3 = 60$ possible medal outcomes. But what if there are no medals, and we just need 3 runners to represent the team?

A **combination** is a selection of items where the order or arrangement does not matter. Choosing Alex, Ben, and Cara forms the exact same committee regardless of who was named first.

Because order is ignored, permutations count the same group multiple times. For any group of 3 chosen runners, there are $3 \times 2 \times 1 = 6$ ways to arrange them that all represent just **one** single combination.

<!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 defer src="{{VENDOR_CDN}}/katex.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .nav-toggle {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 24px;
      margin-bottom: 8px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 220px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Grid of 6 Permutations */
    .perm-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .perm-card {
      background: #ffffff;
      border-radius: 10px;
      padding: 8px 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    /* Team Bubble for Combination */
    .comb-view {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.92);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .team-box {
      background: #ffffff;
      border: 2px dashed #2563eb;
      border-radius: 16px;
      padding: 18px 28px;
      display: flex;
      align-items: center;
      gap: 12px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
    }

    /* Runner Badges */
    .runner {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12px;
      color: #ffffff;
    }

    .team-box .runner {
      width: 44px;
      height: 44px;
      font-size: 18px;
    }

    .r-a { background: #2563eb; }
    .r-b { background: #059669; }
    .r-c { background: #d97706; }

    /* Podiums Indicators */
    .rank-labels {
      display: flex;
      justify-content: space-around;
      width: 100%;
      max-width: 440px;
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
      margin-bottom: 4px;
      transition: opacity 0.25s ease;
    }

    /* Modes */
    .mode-comb .perm-grid {
      opacity: 0.12;
      transform: scale(0.95);
    }

    .mode-comb .comb-view {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1);
    }

    .mode-comb .rank-labels {
      opacity: 0.2;
    }

    .summary-math {
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 500;
      color: #1e2945;
    }
  </style>
</head>
<body>

  
  <div class="nav-toggle">
    <button class="toggle-btn active" id="btnPerm" onclick="setMode('perm')">Permutations (6)</button>
    <button class="toggle-btn" id="btnComb" onclick="setMode('comb')">Combination (1)</button>
  </div>

  
  <div class="rank-labels" id="rankLabels">
    <span>🥇 1st</span>
    <span>🥈 2nd</span>
    <span>🥉 3rd</span>
  </div>

  
  <div class="stage" id="stage">
    
    
    <div class="perm-grid">
      <div class="perm-card">
        <div class="runner r-a">A</div>
        <div class="runner r-b">B</div>
        <div class="runner r-c">C</div>
      </div>
      <div class="perm-card">
        <div class="runner r-a">A</div>
        <div class="runner r-c">C</div>
        <div class="runner r-b">B</div>
      </div>
      <div class="perm-card">
        <div class="runner r-b">B</div>
        <div class="runner r-a">A</div>
        <div class="runner r-c">C</div>
      </div>
      <div class="perm-card">
        <div class="runner r-b">B</div>
        <div class="runner r-c">C</div>
        <div class="runner r-a">A</div>
      </div>
      <div class="perm-card">
        <div class="runner r-c">C</div>
        <div class="runner r-a">A</div>
        <div class="runner r-b">B</div>
      </div>
      <div class="perm-card">
        <div class="runner r-c">C</div>
        <div class="runner r-b">B</div>
        <div class="runner r-a">A</div>
      </div>
    </div>

    
    <div class="comb-view">
      <div class="team-box">
        <div class="runner r-a">A</div>
        <div class="runner r-b">B</div>
        <div class="runner r-c">C</div>
      </div>
    </div>

  </div>

  
  <div class="summary-math" id="mathOutput"></div>

  <script>
    function renderMath(expr) {
      const el = document.getElementById('mathOutput');
      if (window.katex) {
        katex.render(expr, el, { throwOnError: false });
      } else {
        el.textContent = expr;
      }
    }

    function setMode(mode) {
      const stage = document.getElementById('stage');
      const btnPerm = document.getElementById('btnPerm');
      const btnComb = document.getElementById('btnComb');

      if (mode === 'perm') {
        stage.classList.remove('mode-comb');
        btnPerm.classList.add('active');
        btnComb.classList.remove('active');
        renderMath("3! = 3 \\times 2 \\times 1 = 6");
      } else {
        stage.classList.add('mode-comb');
        btnComb.classList.add('active');
        btnPerm.classList.remove('active');
        renderMath("\\frac{6}{3!} = 1");
      }
    }

    window.addEventListener('DOMContentLoaded', () => {
      renderMath("3! = 3 \\times 2 \\times 1 = 6");
    });
  </script>
</body>
</html>

So while there are $60$ ordered podium finishes, there are only $\frac{60}{6} = 10$ unique 3-person teams. How can you reliably tell which concept applies to any scenario?

To decide between permutations and combinations, perform the **swap test**: pick any two items in your selection and switch their positions. If the switch changes the outcome, it is a permutation; if nothing changes, it is a combination.

A classic real-world trap is the standard 'combination lock'. Because entering the numbers `15-30-05` works while `05-30-15` fails, a combination lock is mathematically a **permutation lock**.

<!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="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    
    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 16px;
      max-width: 680px;
      margin: 0 auto;
    }

    @media (max-width: 500px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 10px;
      }
    }

    .column-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .subtitle {
      font-size: 13px;
      font-weight: 600;
      color: #2563eb;
      margin-bottom: 16px;
    }

    .slots-container {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      min-height: 52px;
      align-items: center;
      justify-content: center;
    }

    .group-circle {
      border: 2px dashed #94a3b8;
      border-radius: 30px;
      padding: 4px 12px;
      background: #f8fafc;
    }

    .slot-item {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
      transition: transform 0.3s ease, background-color 0.3s ease;
      user-select: none;
    }

    .item-a { background: #3b82f6; }
    .item-b { background: #10b981; }
    .item-c { background: #f59e0b; }

    .status-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .status-icon {
      font-size: 22px;
    }

    .status-text {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .math-formula {
      font-size: 15px;
      color: #0f172a;
      margin-top: 4px;
    }

    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      margin-top: auto;
    }

    .action-btn {
      flex: 1;
      padding: 8px 12px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background 0.2s;
    }

    .action-btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
    }

    .btn-primary:active {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <div class="diagram-grid">
    
    <div class="column-card">
      <div class="title">Permutation</div>
      <div class="subtitle">Order Matters</div>
      
      <div class="slots-container" id="perm-slots">
        
      </div>

      <div class="status-box">
        <span class="status-icon" id="perm-icon">🔓</span>
        <span class="status-text" id="perm-status">Code: 1 - 2 - 3</span>
        <div class="math-formula" id="perm-math"></div>
      </div>

      <div class="controls">
        <button class="action-btn btn-primary" id="shuffle-perm">⇄ Swap Order</button>
      </div>
    </div>

    
    <div class="column-card">
      <div class="title">Combination</div>
      <div class="subtitle">Order Ignored</div>
      
      <div class="slots-container group-circle" id="comb-slots">
        
      </div>

      <div class="status-box">
        <span class="status-icon" id="comb-icon">🧺</span>
        <span class="status-text" id="comb-status">Same Group</span>
        <div class="math-formula" id="comb-math"></div>
      </div>

      <div class="controls">
        <button class="action-btn btn-primary" id="shuffle-comb">⇄ Swap Order</button>
      </div>
    </div>
  </div>

  <script>
    const items = [
      { id: '1', class: 'item-a' },
      { id: '2', class: 'item-b' },
      { id: '3', class: 'item-c' }
    ];

    const permutations = [
      [0, 1, 2],
      [0, 2, 1],
      [1, 0, 2],
      [1, 2, 0],
      [2, 0, 1],
      [2, 1, 0]
    ];

    let permIndex = 0;
    let combIndex = 0;

    function renderMath() {
      if (window.katex) {
        katex.render("P(3,3) = 6", document.getElementById('perm-math'));
        katex.render("C(3,3) = 1", document.getElementById('comb-math'));
      }
    }

    function updatePermutation() {
      const order = permutations[permIndex];
      const container = document.getElementById('perm-slots');
      container.innerHTML = order.map(i => `
        <div class="slot-item ${items[i].class}">${items[i].id}</div>
      `).join('');

      const codeStr = order.map(i => items[i].id).join(' - ');
      const isTarget = permIndex === 0;
      
      document.getElementById('perm-icon').textContent = isTarget ? '🔓' : '🔒';
      document.getElementById('perm-status').textContent = isTarget ? `Key: ${codeStr}` : `Different: ${codeStr}`;
    }

    function updateCombination() {
      const order = permutations[combIndex];
      const container = document.getElementById('comb-slots');
      container.innerHTML = order.map(i => `
        <div class="slot-item ${items[i].class}">${items[i].id}</div>
      `).join('');

      document.getElementById('comb-status').textContent = "1 Identical Set";
    }

    document.getElementById('shuffle-perm').addEventListener('click', () => {
      permIndex = (permIndex + 1) % permutations.length;
      updatePermutation();
    });

    document.getElementById('shuffle-comb').addEventListener('click', () => {
      combIndex = (combIndex + 1) % permutations.length;
      updateCombination();
    });

    // Init
    updatePermutation();
    updateCombination();
    window.addEventListener('load', renderMath);
  </script>
</body>
</html>

Whenever you encounter a counting problem, start by identifying the roles: are you assigning distinct titles, or are you simply packing items into a shared group?

math

Introduction to Counting: Permutations vs. Combinations. Distinguish situations where order matters (permutations) from situations where it does not (combinations).

Combination Formula and Permutations vs. Combinations

Combinations and Permutations: Word Problems & Probability Applications

Applied Finite Mathematics: Permutations and Combinations

To develop intuition for distinguishing permutations from combinations, begin with small concrete sets (e.g., choosing 2 letters from {A, B, C}) where students can physically write out all permutations and manually cluster identical groupings to discover the $r!$ overcounting factor. Emphasize role/context analysis rather than keyword hunting (since keywords like 'combination' can be misleading in real-world contexts), and reinforce consistency when setting up ratio-based probabilities for compound events under CCSS HSS.CP.B.9.

Introduction to Counting: Permutations vs. Combinations

Permutations: Order Matters

Combinations: Order Does Not Matter