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

Have you ever counted the petals on a flower and noticed they follow a secret math pattern?

Flowers, pinecones, and even seashells love to use a special list of numbers that grows in a very fun way.

What is the secret rule that makes these numbers grow?

A **sequence** is an ordered list of numbers that follows a special pattern rule.

To make this list, we start with $0$ and $1$, and we always find the next number by **adding the last two numbers** together.

<!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>Fibonacci Sequence Rule</title>
<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: center;
    min-height: 100vh;
    padding: 12px;
  }

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

  /* Equation display */
  .calc-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    width: 100%;
  }

  .num-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border-radius: 10px;
    transition: all 0.3s ease;
  }

  .box-a { background: #e0f2fe; color: #0284c7; }
  .box-b { background: #dcfce7; color: #16a34a; }
  .box-sum { background: #fef3c7; color: #d97706; }
  .symbol { color: #94a3b8; font-weight: 600; font-size: 24px; }

  /* Sequence Row */
  .seq-container {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    padding: 24px 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  /* Arc visualization SVG */
  .arc-svg {
    width: 100%;
    height: 48px;
    overflow: visible;
  }

  .arc-path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    transition: all 0.4s ease;
  }

  .arc-a { stroke: #0284c7; }
  .arc-b { stroke: #16a34a; }

  .tiles-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 460px;
    gap: 6px;
    margin-top: 4px;
  }

  .tile {
    flex: 1;
    max-width: 58px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    background: #f1f5f9;
    color: #94a3b8;
    border: 2px solid transparent;
    transition: all 0.35s ease;
    user-select: none;
  }

  .tile.highlight-a {
    background: #e0f2fe;
    color: #0284c7;
    border-color: #38bdf8;
    box-shadow: 0 4px 12px rgba(2,132,199,0.2);
  }

  .tile.highlight-b {
    background: #dcfce7;
    color: #16a34a;
    border-color: #4ade80;
    box-shadow: 0 4px 12px rgba(22,163,74,0.2);
  }

  .tile.highlight-sum {
    background: #fef3c7;
    color: #d97706;
    border-color: #fbbf24;
    box-shadow: 0 4px 12px rgba(217,119,6,0.25);
  }

  .tile.dim {
    opacity: 0.35;
  }

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

  .btn {
    border: none;
    background: #ffffff;
    color: #1e2945;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background 0.2s, box-shadow 0.2s;
  }

  .btn:hover {
    background: #f1f5f9;
  }

  .btn.active {
    background: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(34,183,255,0.3);
  }

  .btn-play {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  @media (max-width: 400px) {
    .calc-card { font-size: 22px; padding: 12px 16px; gap: 8px; }
    .num-box { min-width: 36px; height: 36px; }
    .tile { font-size: 17px; border-radius: 8px; }
    .btn { padding: 6px 10px; font-size: 13px; }
  }
</style>
</head>
<body>

<div class="main-wrap">
  
  <div class="calc-card">
    <div class="num-box box-a" id="eqA">0</div>
    <span class="symbol">+</span>
    <div class="num-box box-b" id="eqB">1</div>
    <span class="symbol">=</span>
    <div class="num-box box-sum" id="eqSum">1</div>
  </div>

  
  <div class="seq-container" id="trackContainer">
    <svg class="arc-svg" id="arcSvg" viewBox="0 0 460 48" preserveAspectRatio="none">
      <path id="pathA" class="arc-path arc-a" d="M 33 46 Q 99 -10 165 46" />
      <path id="pathB" class="arc-path arc-b" d="M 99 46 Q 132 10 165 46" />
    </svg>
    <div class="tiles-row" id="tilesRow">
      <div class="tile" id="tile0">0</div>
      <div class="tile" id="tile1">1</div>
      <div class="tile" id="tile2">1</div>
      <div class="tile" id="tile3">2</div>
      <div class="tile" id="tile4">3</div>
      <div class="tile" id="tile5">5</div>
      <div class="tile" id="tile6">8</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn btn-play" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="btn active" data-step="0">0 + 1</button>
    <button class="btn" data-step="1">1 + 1</button>
    <button class="btn" data-step="2">1 + 2</button>
    <button class="btn" data-step="3">2 + 3</button>
    <button class="btn" data-step="4">3 + 5</button>
  </div>
</div>

<script>
  const STEPS = [
    { aIdx: 0, bIdx: 1, sumIdx: 2, a: 0, b: 1, sum: 1 },
    { aIdx: 1, bIdx: 2, sumIdx: 3, a: 1, b: 1, sum: 2 },
    { aIdx: 2, bIdx: 3, sumIdx: 4, a: 1, b: 2, sum: 3 },
    { aIdx: 3, bIdx: 4, sumIdx: 5, a: 2, b: 3, sum: 5 },
    { aIdx: 4, bIdx: 5, sumIdx: 6, a: 3, b: 5, sum: 8 }
  ];

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

  const eqA = document.getElementById('eqA');
  const eqB = document.getElementById('eqB');
  const eqSum = document.getElementById('eqSum');
  const tiles = Array.from({ length: 7 }, (_, i) => document.getElementById('tile' + i));
  const stepBtns = document.querySelectorAll('[data-step]');
  const playBtn = document.getElementById('playBtn');
  const pathA = document.getElementById('pathA');
  const pathB = document.getElementById('pathB');
  const tilesRow = document.getElementById('tilesRow');

  function updateArcs(aIdx, bIdx, sumIdx) {
    const rowRect = tilesRow.getBoundingClientRect();
    if (rowRect.width === 0) return;

    const tA = tiles[aIdx].getBoundingClientRect();
    const tB = tiles[bIdx].getBoundingClientRect();
    const tSum = tiles[sumIdx].getBoundingClientRect();

    const scale = 460 / rowRect.width;
    const xA = (tA.left + tA.width / 2 - rowRect.left) * scale;
    const xB = (tB.left + tB.width / 2 - rowRect.left) * scale;
    const xSum = (tSum.left + tSum.width / 2 - rowRect.left) * scale;

    const midA = (xA + xSum) / 2;
    const midB = (xB + xSum) / 2;

    pathA.setAttribute('d', `M ${xA} 46 Q ${midA} -6 ${xSum} 46`);
    pathB.setAttribute('d', `M ${xB} 46 Q ${midB} 10 ${xSum} 46`);
  }

  function setStep(idx) {
    currentStep = idx;
    const s = STEPS[idx];

    // Update Equation Card
    eqA.textContent = s.a;
    eqB.textContent = s.b;
    eqSum.textContent = s.sum;

    // Update Tiles Highlighting
    tiles.forEach((t, i) => {
      t.className = 'tile';
      if (i === s.aIdx) {
        t.classList.add('highlight-a');
      } else if (i === s.bIdx) {
        t.classList.add('highlight-b');
      } else if (i === s.sumIdx) {
        t.classList.add('highlight-sum');
      } else if (i > s.sumIdx) {
        t.classList.add('dim');
      }
    });

    // Update Buttons
    stepBtns.forEach((btn, i) => {
      btn.classList.toggle('active', i === idx);
    });

    // Update Arcs
    updateArcs(s.aIdx, s.bIdx, s.sumIdx);
  }

  function nextStep() {
    setStep((currentStep + 1) % STEPS.length);
  }

  function startLoop() {
    clearInterval(timer);
    timer = setInterval(nextStep, 3200);
    isPlaying = true;
    playBtn.textContent = '⏸';
  }

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

  stepBtns.forEach((btn, i) => {
    btn.addEventListener('click', () => {
      setStep(i);
      pauseLoop();
    });
  });

  playBtn.addEventListener('click', () => {
    if (isPlaying) {
      pauseLoop();
    } else {
      nextStep();
      startLoop();
    }
  });

  window.addEventListener('resize', () => {
    const s = STEPS[currentStep];
    updateArcs(s.aIdx, s.bIdx, s.sumIdx);
  });

  // Initial render
  setStep(0);
  startLoop();
</script>
</body>
</html>

Let's test the rule! When we add our first two numbers, $0 + 1 = 1$, we get our next number: **1**.

Then we add the two newest numbers, $1 + 1 = 2$, which gives us **2**.

What happens if we take $1$ and $2$ and add them together?

Over 800 years ago, a mathematician named **Leonardo Fibonacci** noticed this pattern while counting how baby rabbits grow into families.

Let's keep building the line of **Fibonacci numbers** by adding the two neighbors before each step:

<!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>Fibonacci Sequence Builder</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background-color: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .diagram-content {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    /* Sequence Strip */
    .sequence-strip {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 6px 0;
    }

    .num-node {
      flex: 1;
      max-width: 64px;
      height: 60px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      color: #94a3b8;
      transition: all 0.35s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      position: relative;
    }

    .num-node .tag {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      position: absolute;
      top: 3px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .num-node.active-a {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
    }
    .num-node.active-a .tag { opacity: 1; color: #2563eb; }

    .num-node.active-b {
      background: #ecfdf5;
      border-color: #10b981;
      color: #047857;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }
    .num-node.active-b .tag { opacity: 1; color: #059669; }

    .num-node.active-sum {
      background: #faf5ff;
      border-color: #8b5cf6;
      color: #6d28d9;
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
    }
    .num-node.active-sum .tag { opacity: 1; color: #7c3aed; }

    .num-node.revealed {
      color: #1e2945;
      border-color: #cbd5e1;
    }

    .num-node.hidden-node {
      border-style: dashed;
      color: transparent;
      background: #f1f5f9;
    }

    /* Equation Display Card */
    .calc-card {
      width: 100%;
      background: #ffffff;
      border-radius: 14px;
      border: 1px solid #e2e8f0;
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 28px;
      font-weight: 800;
    }

    .pill {
      min-width: 48px;
      height: 48px;
      padding: 0 14px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .pill-a { background: #eff6ff; color: #1d4ed8; border: 2px solid #3b82f6; }
    .pill-b { background: #ecfdf5; color: #047857; border: 2px solid #10b981; }
    .pill-sum { background: #faf5ff; color: #6d28d9; border: 2px solid #8b5cf6; }
    .operator { color: #64748b; font-size: 24px; font-weight: 700; }

    /* Visual Bars */
    .bars-container {
      width: 100%;
      height: 28px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border-radius: 8px;
      padding: 4px;
      border: 1px solid #e2e8f0;
    }

    .bar-group {
      display: flex;
      height: 100%;
      flex-grow: 1;
      gap: 3px;
    }

    .bar {
      height: 100%;
      border-radius: 4px;
      transition: width 0.4s ease;
    }

    .bar-a { background: #3b82f6; }
    .bar-b { background: #10b981; }

    .bar-divider {
      width: 2px;
      height: 100%;
      background: #cbd5e1;
    }

    .bar-sum-wrap {
      flex-grow: 1;
      height: 100%;
    }

    .bar-sum {
      height: 100%;
      border-radius: 4px;
      background: #8b5cf6;
      transition: width 0.4s ease;
    }

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

    .btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn:active { background: #f1f5f9; }

    .btn-step {
      font-family: monospace;
      font-size: 13px;
      padding: 6px 10px;
    }
    .btn-step.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    @media (max-width: 420px) {
      .num-node { height: 50px; font-size: 18px; }
      .num-node .tag { font-size: 8px; }
      .pill { min-width: 38px; height: 38px; font-size: 20px; }
      .equation-row { font-size: 20px; gap: 8px; }
      .btn-step { padding: 4px 8px; font-size: 11px; }
    }
  </style>
</head>
<body>

  <div class="diagram-content">
    
    <div class="sequence-strip" id="strip">
      <div class="num-node" id="n0"><span class="tag">prev</span>0</div>
      <div class="num-node" id="n1"><span class="tag">prev</span>1</div>
      <div class="num-node" id="n2"><span class="tag">prev</span>1</div>
      <div class="num-node" id="n3"><span class="tag">prev</span>2</div>
      <div class="num-node" id="n4"><span class="tag">prev</span>3</div>
      <div class="num-node" id="n5"><span class="tag">prev</span>5</div>
      <div class="num-node hidden-node" id="n6"><span class="tag">new</span>8</div>
    </div>

    
    <div class="calc-card">
      <div class="equation-row">
        <div class="pill pill-a" id="pillA">0</div>
        <span class="operator">+</span>
        <div class="pill pill-b" id="pillB">1</div>
        <span class="operator">=</span>
        <div class="pill pill-sum" id="pillSum">1</div>
      </div>

      
      <div class="bars-container">
        <div class="bar-group">
          <div class="bar bar-a" id="barA"></div>
          <div class="bar bar-b" id="barB"></div>
        </div>
        <div class="bar-divider"></div>
        <div class="bar-sum-wrap">
          <div class="bar bar-sum" id="barSum"></div>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" aria-label="Previous">◀</button>
      <button class="btn" id="playBtn" aria-label="Play/Pause">⏸</button>
      <button class="btn" id="nextBtn" aria-label="Next">▶</button>
      <button class="btn btn-step" data-step="0">0+1</button>
      <button class="btn btn-step" data-step="1">1+1</button>
      <button class="btn btn-step" data-step="2">1+2</button>
      <button class="btn btn-step" data-step="3">2+3</button>
      <button class="btn btn-step" data-step="4">3+5</button>
    </div>
  </div>

  <script>
    const sequence = [0, 1, 1, 2, 3, 5, 8];
    const steps = [
      { a: 0, b: 1, sum: 2, valA: 0, valB: 1, valSum: 1 },
      { a: 1, b: 2, sum: 3, valA: 1, valB: 1, valSum: 2 },
      { a: 2, b: 3, sum: 4, valA: 1, valB: 2, valSum: 3 },
      { a: 3, b: 4, sum: 5, valA: 2, valB: 3, valSum: 5 },
      { a: 4, b: 5, sum: 6, valA: 3, valB: 5, valSum: 8 }
    ];

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

    const pillA = document.getElementById('pillA');
    const pillB = document.getElementById('pillB');
    const pillSum = document.getElementById('pillSum');
    const barA = document.getElementById('barA');
    const barB = document.getElementById('barB');
    const barSum = document.getElementById('barSum');
    const playBtn = document.getElementById('playBtn');
    const stepBtns = document.querySelectorAll('.btn-step');

    function render() {
      const s = steps[currentStep];

      // Update tiles
      for (let i = 0; i < sequence.length; i++) {
        const node = document.getElementById('n' + i);
        node.className = 'num-node';
        const tag = node.querySelector('.tag');

        if (i < s.sum) {
          node.classList.add('revealed');
        } else if (i === s.sum) {
          node.classList.remove('hidden-node');
        } else {
          node.classList.add('hidden-node');
        }

        if (i === s.a) {
          node.classList.add('active-a');
          if (tag) tag.textContent = 'add';
        } else if (i === s.b) {
          node.classList.add('active-b');
          if (tag) tag.textContent = 'add';
        } else if (i === s.sum) {
          node.classList.add('active-sum');
          if (tag) tag.textContent = '=';
        }
      }

      // Update Equation
      pillA.textContent = s.valA;
      pillB.textContent = s.valB;
      pillSum.textContent = s.valSum;

      // Update Bar lengths (max sum in view is 8)
      const maxVal = 8;
      const pctA = (Math.max(s.valA, 0.2) / maxVal) * 100;
      const pctB = (s.valB / maxVal) * 100;
      const pctSum = (s.valSum / maxVal) * 100;

      barA.style.width = pctA + '%';
      barB.style.width = pctB + '%';
      barSum.style.width = pctSum + '%';

      // Update step pills
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });
    }

    function setStep(idx) {
      currentStep = (idx + steps.length) % steps.length;
      render();
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3200);
    }

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

    // Event Listeners
    document.getElementById('prevBtn').addEventListener('click', () => {
      stopAutoPlay();
      setStep(currentStep - 1);
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      stopAutoPlay();
      setStep(currentStep + 1);
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) stopAutoPlay();
      else startAutoPlay();
    });

    stepBtns.forEach((btn) => {
      btn.addEventListener('click', (e) => {
        stopAutoPlay();
        const stepIdx = parseInt(e.target.getAttribute('data-step'), 10);
        setStep(stepIdx);
      });
    });

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

To find the number after $5$, we add our last two numbers: $3 + 5 = 8$.

A common mistake is just adding $1$ every time like normal counting. Remember, we always add the **two numbers before**!

Where can we spot these exact numbers hiding outside in the real world?

Plant petals often match our sequence: calla lilies have $1$ petal, buttercups have $5$, and daisies often have $13$ or $21$.

<!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>Fibonacci Sequence in Nature</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f8fafc;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }

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

  /* Sequence Row */
  .sequence-container {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    position: relative;
  }

  .tiles-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .tile {
    width: 10.5%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 0 0 2px transparent;
  }

  .tile.add-a {
    background: #e0f2fe;
    color: #0284c7;
    box-shadow: 0 0 0 2px #38bdf8;
    transform: translateY(-2px);
  }

  .tile.add-b {
    background: #dcfce7;
    color: #16a34a;
    box-shadow: 0 0 0 2px #4ade80;
    transform: translateY(-2px);
  }

  .tile.target {
    background: #fef08a;
    color: #ca8a04;
    box-shadow: 0 0 0 2px #facc15;
    transform: translateY(-4px) scale(1.08);
    font-size: 17px;
  }

  /* Interactive Formula & Graphic Area */
  .display-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
  }

  .equation-box {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 800;
  }

  .num-pill {
    padding: 4px 12px;
    border-radius: 10px;
    min-width: 42px;
    text-align: center;
    display: inline-block;
    transition: all 0.3s ease;
  }

  .pill-a { background: #e0f2fe; color: #0284c7; }
  .pill-b { background: #dcfce7; color: #16a34a; }
  .pill-res { background: #fef08a; color: #ca8a04; }
  .op { color: #94a3b8; font-size: 20px; }

  /* Flower Canvas / SVG visualizer */
  .flower-visual {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .flower-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
    transition: transform 0.4s ease;
  }

  .petal {
    fill: #fde047;
    stroke: #eab308;
    stroke-width: 1.5;
    transition: all 0.3s ease;
  }

  .center-disk {
    fill: #f97316;
    stroke: #ea580c;
    stroke-width: 2;
  }

  /* Controls */
  .controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 580px;
    margin-top: 4px;
  }

  .btn-ctrl {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    color: #334155;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 38px;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .btn-ctrl:active {
    background: #f1f5f9;
  }

  .btn-play {
    background: #2563eb;
    color: #ffffff;
    border-color: #1d4ed8;
    padding: 8px 20px;
  }

  .btn-play:active {
    background: #1d4ed8;
  }

  .step-dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .step-dot.active {
    background: #2563eb;
    transform: scale(1.25);
  }

  @media (max-width: 420px) {
    .equation-box { font-size: 18px; gap: 6px; }
    .num-pill { padding: 3px 8px; min-width: 32px; }
    .flower-visual { width: 95px; height: 95px; }
    .tile { font-size: 13px; }
    .tile.target { font-size: 15px; }
  }
</style>
</head>
<body>

<div class="main-stage">
  
  <div class="sequence-container">
    <div class="tiles-row" id="tilesRow">
      <div class="tile" data-idx="0">1</div>
      <div class="tile" data-idx="1">1</div>
      <div class="tile" data-idx="2">2</div>
      <div class="tile" data-idx="3">3</div>
      <div class="tile" data-idx="4">5</div>
      <div class="tile" data-idx="5">8</div>
      <div class="tile" data-idx="6">13</div>
      <div class="tile" data-idx="7">21</div>
    </div>
  </div>

  
  <div class="display-card">
    <div class="equation-box">
      <span class="num-pill pill-a" id="valA">1</span>
      <span class="op">+</span>
      <span class="num-pill pill-b" id="valB">1</span>
      <span class="op">=</span>
      <span class="num-pill pill-res" id="valTarget">2</span>
    </div>

    <div class="flower-visual">
      <svg class="flower-svg" id="flowerSvg" viewBox="0 0 100 100"></svg>
    </div>
  </div>
</div>


<div class="controls-row">
  <button class="btn-ctrl" id="prevBtn" aria-label="Previous">◀</button>
  <button class="btn-ctrl btn-play" id="playBtn" aria-label="Play/Pause">⏸</button>
  <button class="btn-ctrl" id="nextBtn" aria-label="Next">▶</button>
  <div class="step-dots" id="dotsGroup">
    <div class="step-dot active"></div>
    <div class="step-dot"></div>
    <div class="step-dot"></div>
    <div class="step-dot"></div>
    <div class="step-dot"></div>
    <div class="step-dot"></div>
  </div>
</div>

<script>
  const fib = [1, 1, 2, 3, 5, 8, 13, 21];
  const stepsCount = 6; // step 0 (1+1=2) to step 5 (8+13=21)
  let currentStep = 0;
  let isPlaying = true;
  let timer = null;

  const tiles = document.querySelectorAll('.tile');
  const dots = document.querySelectorAll('.step-dot');
  const valA = document.getElementById('valA');
  const valB = document.getElementById('valB');
  const valTarget = document.getElementById('valTarget');
  const flowerSvg = document.getElementById('flowerSvg');
  const playBtn = document.getElementById('playBtn');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

  function drawFlower(petalsCount) {
    let petalsSvg = '';
    const cx = 50, cy = 50;
    const rPetal = petalsCount > 8 ? 24 : 20;
    const rx = petalsCount > 13 ? 6 : petalsCount > 5 ? 8 : 11;
    const ry = petalsCount > 8 ? 20 : 16;
    const centerRadius = petalsCount > 8 ? 14 : 12;

    for (let i = 0; i < petalsCount; i++) {
      const angle = (i * 360 / petalsCount);
      const rad = (angle * Math.PI) / 180;
      const px = cx + Math.sin(rad) * (rPetal * 0.7);
      const py = cy - Math.cos(rad) * (rPetal * 0.7);
      petalsSvg += `<ellipse cx="${px}" cy="${py}" rx="${rx}" ry="${ry}" transform="rotate(${angle} ${px} ${py})" class="petal"/>`;
    }

    petalsSvg += `<circle cx="${cx}" cy="${cy}" r="${centerRadius}" class="center-disk"/>`;
    flowerSvg.innerHTML = petalsSvg;
  }

  function updateStage(step) {
    currentStep = step;
    const idxA = step;
    const idxB = step + 1;
    const idxTarget = step + 2;

    tiles.forEach((t, i) => {
      t.className = 'tile';
      if (i === idxA) t.classList.add('add-a');
      else if (i === idxB) t.classList.add('add-b');
      else if (i === idxTarget) t.classList.add('target');
    });

    valA.textContent = fib[idxA];
    valB.textContent = fib[idxB];
    valTarget.textContent = fib[idxTarget];

    dots.forEach((d, i) => d.classList.toggle('active', i === step));

    drawFlower(fib[idxTarget]);
  }

  function next() {
    updateStage((currentStep + 1) % stepsCount);
  }

  function prev() {
    updateStage((currentStep - 1 + stepsCount) % stepsCount);
  }

  function startTimer() {
    stopTimer();
    timer = setInterval(next, 3200);
    isPlaying = true;
    playBtn.textContent = '⏸';
  }

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

  function togglePlay() {
    if (isPlaying) stopTimer();
    else {
      next();
      startTimer();
    }
  }

  // Event Listeners
  playBtn.addEventListener('click', togglePlay);
  prevBtn.addEventListener('click', () => { stopTimer(); prev(); });
  nextBtn.addEventListener('click', () => { stopTimer(); next(); });

  dots.forEach((d, i) => {
    d.addEventListener('click', () => {
      stopTimer();
      updateStage(i);
    });
  });

  tiles.forEach((t, i) => {
    t.addEventListener('click', () => {
      stopTimer();
      const targetStep = Math.min(Math.max(i - 2, 0), stepsCount - 1);
      updateStage(targetStep);
    });
  });

  // Init
  updateStage(0);
  startTimer();
</script>

</body>
</html>

Now you have the secret key: whenever you want the next number in the Fibonacci line, just add the **two numbers right before it** ($8 + 13 = 21$)!

math

Discovering the Fibonacci Sequence and Nature Patterns. Generate terms of the Fibonacci sequence (0, 1, 1, 2, 3, 5, 8, 13...) by adding the two preceding terms.

Fibonacci Surprises & Starting Fibonacci

Discovering Patterns in Nature and the Fibonacci Sequence

What is the Fibonacci Sequence and How Does It Appear in Nature?

For Early Level (P1) learners exploring this advanced sequence pattern (CfE MTH 2-13a concept progression), instruction should be heavily grounded in concrete manipulatives and multisensory outdoor learning. Begin with physical building blocks (combining two towers to build the next), progress to counting natural items (pinecones, flowers, leaves), and use the 'two-hand touch' pedagogical strategy (placing left and right index fingers on the two previous numbers, saying them aloud, and pushing them together to find the next number).

Discovering the Fibonacci Sequence and Nature Patterns

The Secret Adding Rule

Building the Sequence