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 a frog jumping across lily pads in a pond. Every time it leaps, it adds the exact same number to where it lands!

A line of numbers that follows an order is called a **sequence**. The secret instruction that tells us how to get to the next number is called the **rule**.

<!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;
    min-height: 100%;
    padding: 12px 8px;
    user-select: none;
  }

  .preset-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 460px;
  }

  .preset-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .preset-btn.active {
    background: #2ecc71;
    border-color: #2ecc71;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.3);
  }

  /* Sequence Stage */
  .stage {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 170px;
    margin: 10px 0;
  }

  .jump-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    pointer-events: none;
    overflow: visible;
  }

  .jump-arc {
    fill: none;
    stroke: #2ecc71;
    stroke-width: 2.5;
    stroke-dasharray: 6 3;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .jump-arc.visible {
    opacity: 1;
  }

  .jump-badge {
    position: absolute;
    transform: translate(-50%, -50%);
    background: #2ecc71;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(46, 204, 113, 0.25);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    z-index: 2;
  }
  .jump-badge.visible {
    opacity: 1;
    transform: translate(-50%, -60%);
  }

  .terms-row {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
  }

  .term-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 58px;
  }

  .term-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .term-box {
    width: 54px;
    height: 54px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
  }

  .term-box.revealed {
    border-color: #2ecc71;
    color: #1e2945;
    box-shadow: 0 4px 10px rgba(46, 204, 113, 0.15);
  }

  .term-box.current {
    background: #f0fdf4;
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
  }

  /* Controls */
  .ctrl-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  }

  .btn {
    background: none;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #1e2945;
    background: #f1f5f9;
    transition: background 0.2s ease;
  }
  .btn:hover { background: #e2e8f0; }

  .dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.25s ease;
  }
  .dot.active {
    background: #2ecc71;
    transform: scale(1.25);
  }
</style>
</head>
<body>

  
  <div class="preset-bar">
    <button class="preset-btn active" data-preset="0">+4 (Start 3)</button>
    <button class="preset-btn" data-preset="1">+5 (Start 2)</button>
    <button class="preset-btn" data-preset="2">×2 (Start 1)</button>
    <button class="preset-btn" data-preset="3">−3 (Start 20)</button>
  </div>

  
  <div class="stage" id="stage">
    <svg class="jump-svg" id="svg" viewBox="0 0 480 90">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2ecc71"/>
        </marker>
      </defs>
      <path id="arc-0" class="jump-arc" marker-end="url(#arrow)" />
      <path id="arc-1" class="jump-arc" marker-end="url(#arrow)" />
      <path id="arc-2" class="jump-arc" marker-end="url(#arrow)" />
      <path id="arc-3" class="jump-arc" marker-end="url(#arrow)" />
    </svg>

    <div id="badge-0" class="jump-badge">+4</div>
    <div id="badge-1" class="jump-badge">+4</div>
    <div id="badge-2" class="jump-badge">+4</div>
    <div id="badge-3" class="jump-badge">+4</div>

    <div class="terms-row">
      <div class="term-col">
        <span class="term-label">1st</span>
        <div class="term-box revealed current" id="box-0">3</div>
      </div>
      <div class="term-col">
        <span class="term-label">2nd</span>
        <div class="term-box" id="box-1">?</div>
      </div>
      <div class="term-col">
        <span class="term-label">3rd</span>
        <div class="term-box" id="box-2">?</div>
      </div>
      <div class="term-col">
        <span class="term-label">4th</span>
        <div class="term-box" id="box-3">?</div>
      </div>
      <div class="term-col">
        <span class="term-label">5th</span>
        <div class="term-box" id="box-4">?</div>
      </div>
    </div>
  </div>

  
  <div class="ctrl-bar">
    <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>
    <div class="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
      <div class="dot" data-step="4"></div>
    </div>
  </div>

<script>
  const presets = [
    { rule: "+4", start: 3, values: [3, 7, 11, 15, 19] },
    { rule: "+5", start: 2, values: [2, 7, 12, 17, 22] },
    { rule: "×2", start: 1, values: [1, 2, 4, 8, 16] },
    { rule: "−3", start: 20, values: [20, 17, 14, 11, 8] }
  ];

  let currentPreset = 0;
  let currentStep = 0;
  let timer = null;
  let isPlaying = false;

  const boxes = [0,1,2,3,4].map(i => document.getElementById(`box-${i}`));
  const arcs = [0,1,2,3].map(i => document.getElementById(`arc-${i}`));
  const badges = [0,1,2,3].map(i => document.getElementById(`badge-${i}`));
  const dots = Array.from(document.querySelectorAll('.dot'));
  const presetBtns = Array.from(document.querySelectorAll('.preset-btn'));
  const playBtn = document.getElementById('playBtn');

  function updateSvgPaths() {
    const stage = document.getElementById('stage');
    const stageRect = stage.getBoundingClientRect();
    if (!stageRect.width) return;

    for (let i = 0; i < 4; i++) {
      const b1 = boxes[i].getBoundingClientRect();
      const b2 = boxes[i + 1].getBoundingClientRect();

      const x1 = (b1.left + b1.width / 2) - stageRect.left;
      const x2 = (b2.left + b2.width / 2) - stageRect.left;
      const y = 84; 
      const midX = (x1 + x2) / 2;
      const topY = 24;

      const pathData = `M ${x1} ${y} Q ${midX} ${topY} ${x2 - 4} ${y - 4}`;
      arcs[i].setAttribute('d', pathData);

      badges[i].style.left = midX + 'px';
      badges[i].style.top = (topY + 10) + 'px';
    }
  }

  function render() {
    const p = presets[currentPreset];
    
    // Update jump badges label
    badges.forEach(b => b.textContent = p.rule);

    // Update terms & arcs
    boxes.forEach((box, i) => {
      box.classList.remove('current', 'revealed');
      if (i <= currentStep) {
        box.textContent = p.values[i];
        box.classList.add('revealed');
        if (i === currentStep) box.classList.add('current');
      } else {
        box.textContent = '?';
      }
    });

    arcs.forEach((arc, i) => {
      if (i < currentStep) {
        arc.classList.add('visible');
        badges[i].classList.add('visible');
      } else {
        arc.classList.remove('visible');
        badges[i].classList.remove('visible');
      }
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === currentStep);
    });

    playBtn.textContent = isPlaying ? '⏸' : '▶';
  }

  function setStep(step) {
    currentStep = Math.max(0, Math.min(4, step));
    render();
  }

  function next() {
    if (currentStep < 4) {
      setStep(currentStep + 1);
    } else {
      setStep(0);
    }
  }

  function prev() {
    if (currentStep > 0) {
      setStep(currentStep - 1);
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    if (isPlaying) {
      if (currentStep === 4) setStep(0);
      timer = setInterval(() => {
        if (currentStep < 4) {
          next();
        } else {
          togglePlay();
        }
      }, 1500);
    } else {
      clearInterval(timer);
    }
    render();
  }

  // Preset Selection
  presetBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      presetBtns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      currentPreset = parseInt(btn.dataset.preset, 10);
      currentStep = 0;
      if (isPlaying) togglePlay();
      render();
    });
  });

  // Controls Event Listeners
  document.getElementById('nextBtn').addEventListener('click', () => {
    if (isPlaying) togglePlay();
    next();
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    if (isPlaying) togglePlay();
    prev();
  });

  playBtn.addEventListener('click', togglePlay);

  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      if (isPlaying) togglePlay();
      setStep(parseInt(dot.dataset.step, 10));
    });
  });

  // Initial layout and resize observer for fluid coords
  window.addEventListener('resize', updateSvgPaths);
  window.addEventListener('DOMContentLoaded', () => {
    updateSvgPaths();
    render();
  });
  setTimeout(updateSvgPaths, 50);
</script>
</body>
</html>

What happens if we start at a different number and change our rule?

Let us start at **1** with the rule **add 3**.

We start with 1. Then we add 3 to get $1 + 3 = 4$.

To find the next number, we take 4 and add 3 again: $4 + 3 = 7$. Then $7 + 3 = 10$!

<!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;
    min-height: 100vh;
    padding: 12px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .rule-pill {
    background: #f3e8ff;
    color: #8e44ad;
    font-weight: 700;
    font-size: 16px;
    padding: 6px 18px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(142, 68, 173, 0.12);
  }
  .stage {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 10px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    position: relative;
  }
  svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
  .term-box {
    fill: #ffffff;
    stroke: #e2e8f0;
    stroke-width: 2.5;
    rx: 12;
    transition: stroke 0.3s ease, fill 0.3s ease, filter 0.3s ease;
  }
  .term-box.active {
    stroke: #8e44ad;
    fill: #faf5ff;
    filter: drop-shadow(0 4px 10px rgba(142, 68, 173, 0.25));
  }
  .term-val {
    font-size: 20px;
    font-weight: 800;
    fill: #1e2945;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.3s ease, opacity 0.3s ease;
  }
  .term-val.future {
    opacity: 0.2;
  }
  .term-pos {
    font-size: 11px;
    font-weight: 600;
    fill: #94a3b8;
    text-anchor: middle;
  }
  .jump-path {
    fill: none;
    stroke: #cbd5e1;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 4 4;
    transition: stroke 0.3s ease, stroke-width 0.3s ease, stroke-dasharray 0.3s ease;
  }
  .jump-path.active {
    stroke: #8e44ad;
    stroke-width: 3.5;
    stroke-dasharray: none;
    filter: drop-shadow(0 2px 6px rgba(142, 68, 173, 0.3));
  }
  .jump-label-bg {
    fill: #ffffff;
    stroke: #e2e8f0;
    stroke-width: 1.5;
    rx: 8;
    transition: all 0.3s ease;
  }
  .jump-label-bg.active {
    fill: #8e44ad;
    stroke: #8e44ad;
  }
  .jump-label-txt {
    font-size: 12px;
    font-weight: 700;
    fill: #94a3b8;
    text-anchor: middle;
    dominant-baseline: central;
    transition: fill 0.3s ease;
  }
  .jump-label-txt.active {
    fill: #ffffff;
  }
  .controls {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .btn:active {
    background: #f1f5f9;
  }
  .btn-primary {
    background: #8e44ad;
    border-color: #8e44ad;
    color: #ffffff;
  }
  .btn-primary:active {
    background: #732d91;
  }
  .step-dots {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .dot.active {
    background: #8e44ad;
    transform: scale(1.3);
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="rule-pill">Rule: +3</div>

  <div class="stage">
    <svg viewBox="0 0 460 140" aria-label="Sequence step diagram">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#8e44ad" />
        </marker>
        <marker id="arrow-muted" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
          <path d="M 0 2 L 7 5 L 0 8 z" fill="#cbd5e1" />
        </marker>
      </defs>

      
      
      <g id="jump-0">
        <path class="jump-path" d="M 52,65 Q 96,15 140,65" marker-end="url(#arrow-muted)"/>
        <rect class="jump-label-bg" x="80" y="18" width="32" height="18"/>
        <text class="jump-label-txt" x="96" y="27">+3</text>
      </g>
      
      <g id="jump-1">
        <path class="jump-path" d="M 144,65 Q 188,15 232,65" marker-end="url(#arrow-muted)"/>
        <rect class="jump-label-bg" x="172" y="18" width="32" height="18"/>
        <text class="jump-label-txt" x="188" y="27">+3</text>
      </g>
      
      <g id="jump-2">
        <path class="jump-path" d="M 236,65 Q 280,15 324,65" marker-end="url(#arrow-muted)"/>
        <rect class="jump-label-bg" x="264" y="18" width="32" height="18"/>
        <text class="jump-label-txt" x="280" y="27">+3</text>
      </g>
      
      <g id="jump-3">
        <path class="jump-path" d="M 328,65 Q 372,15 416,65" marker-end="url(#arrow-muted)"/>
        <rect class="jump-label-bg" x="356" y="18" width="32" height="18"/>
        <text class="jump-label-txt" x="372" y="27">+3</text>
      </g>

      
      
      <g id="term-0" transform="translate(10, 68)">
        <rect class="term-box active" width="60" height="46"/>
        <text class="term-val" x="30" y="23">1</text>
        <text class="term-pos" x="30" y="60">1st</text>
      </g>

      
      <g id="term-1" transform="translate(102, 68)">
        <rect class="term-box" width="60" height="46"/>
        <text class="term-val future" x="30" y="23">4</text>
        <text class="term-pos" x="30" y="60">2nd</text>
      </g>

      
      <g id="term-2" transform="translate(194, 68)">
        <rect class="term-box" width="60" height="46"/>
        <text class="term-val future" x="30" y="23">7</text>
        <text class="term-pos" x="30" y="60">3rd</text>
      </g>

      
      <g id="term-3" transform="translate(286, 68)">
        <rect class="term-box" width="60" height="46"/>
        <text class="term-val future" x="30" y="23">10</text>
        <text class="term-pos" x="30" y="60">4th</text>
      </g>

      
      <g id="term-4" transform="translate(378, 68)">
        <rect class="term-box" width="60" height="46"/>
        <text class="term-val future" x="30" y="23">13</text>
        <text class="term-pos" x="30" y="60">5th</text>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous step">◀</button>
    <div class="step-dots" id="dotsContainer">
      <span class="dot active" data-step="0"></span>
      <span class="dot" data-step="1"></span>
      <span class="dot" data-step="2"></span>
      <span class="dot" data-step="3"></span>
      <span class="dot" data-step="4"></span>
    </div>
    <button class="btn btn-primary" id="nextBtn" aria-label="Next step">▶</button>
    <button class="btn" id="playBtn">Auto ▶</button>
  </div>
</div>

<script>
  const totalSteps = 5;
  let currentStep = 0;
  let timer = null;

  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');
  const playBtn = document.getElementById('playBtn');
  const dots = document.querySelectorAll('.dot');

  function render(step) {
    currentStep = step;

    for (let i = 0; i < totalSteps; i++) {
      const termGroup = document.getElementById(`term-${i}`);
      const box = termGroup.querySelector('.term-box');
      const val = termGroup.querySelector('.term-val');

      if (i <= step) {
        val.classList.remove('future');
      } else {
        val.classList.add('future');
      }

      if (i === step) {
        box.classList.add('active');
      } else {
        box.classList.remove('active');
      }

      dots[i].classList.toggle('active', i === step);
    }

    for (let j = 0; j < totalSteps - 1; j++) {
      const jumpGroup = document.getElementById(`jump-${j}`);
      const path = jumpGroup.querySelector('.jump-path');
      const bg = jumpGroup.querySelector('.jump-label-bg');
      const txt = jumpGroup.querySelector('.jump-label-txt');

      if (j === step - 1) {
        path.classList.add('active');
        path.setAttribute('marker-end', 'url(#arrow)');
        bg.classList.add('active');
        txt.classList.add('active');
      } else {
        path.classList.remove('active');
        path.setAttribute('marker-end', 'url(#arrow-muted)');
        bg.classList.remove('active');
        txt.classList.remove('active');
      }
    }
  }

  function setStep(s) {
    render((s + totalSteps) % totalSteps);
  }

  prevBtn.addEventListener('click', () => {
    stopAuto();
    setStep(currentStep - 1);
  });

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

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

  for (let i = 0; i < totalSteps; i++) {
    document.getElementById(`term-${i}`).style.cursor = 'pointer';
    document.getElementById(`term-${i}`).addEventListener('click', () => {
      stopAuto();
      setStep(i);
    });
  }

  function stopAuto() {
    if (timer) {
      clearInterval(timer);
      timer = null;
      playBtn.textContent = 'Auto ▶';
    }
  }

  function startAuto() {
    playBtn.textContent = 'Pause ⏸';
    timer = setInterval(() => {
      setStep((currentStep + 1) % totalSteps);
    }, 2800);
  }

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

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

Can a rule also make our numbers get smaller?

Yes! A rule can also tell us to subtract the same number at each step.

Let us start at 10 with the rule **subtract 2**.

First hop: $10 - 2 = 8$. Next hop: $8 - 2 = 6$. Next hop: $6 - 2 = 4$.

<!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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

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

    /* Rule Pill */
    .rule-pill {
      background: #ffffff;
      border: 2px solid #e67e22;
      color: #e67e22;
      font-weight: 700;
      font-size: 16px;
      padding: 6px 18px;
      border-radius: 20px;
      box-shadow: 0 2px 6px rgba(230, 126, 34, 0.15);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Sequence Chain Visual */
    .sequence-board {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 30px 4px 10px 4px;
    }

    .term-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      flex: 1;
    }

    .term-box {
      width: 48px;
      height: 48px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #94a3b8;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease;
    }

    .term-col.active .term-box {
      border-color: #e67e22;
      color: #1e2945;
      box-shadow: 0 0 0 4px rgba(230, 126, 34, 0.2), 0 4px 12px rgba(230, 126, 34, 0.15);
      transform: translateY(-2px);
    }

    .term-col.revealed:not(.active) .term-box {
      border-color: #cbd5e1;
      color: #1e2945;
    }

    .term-label {
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
      margin-top: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .term-col.active .term-label {
      color: #e67e22;
    }

    /* Hop connector overlay */
    .hop-connector {
      position: absolute;
      top: -2px;
      height: 36px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      z-index: 1;
      pointer-events: none;
      transition: opacity 0.3s ease;
      opacity: 0.2;
    }

    .hop-connector.active {
      opacity: 1;
    }

    .hop-arc {
      width: 100%;
      height: 20px;
      border-top: 2.5px dashed #e67e22;
      border-radius: 50% 50% 0 0;
    }

    .hop-tag {
      position: absolute;
      top: -12px;
      background: #e67e22;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 8px;
    }

    /* Step Calculation Card */
    .calc-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .calc-expr {
      font-size: 19px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.5px;
    }

    .calc-expr .diff {
      color: #e67e22;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .btn-primary {
      background: #e67e22;
      border-color: #e67e22;
      color: #ffffff;
    }

    .btn-primary:hover {
      background: #d35400;
      border-color: #d35400;
    }

    .dots-nav {
      display: flex;
      gap: 8px;
    }

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

    .dot.active {
      background: #e67e22;
      transform: scale(1.2);
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    
    <div class="rule-pill">
      <span>Rule:</span>
      <span>− 2</span>
    </div>

    
    <div class="sequence-board" id="sequenceBoard">
      
      
      <div class="hop-connector" id="hop0" style="left: 10%; width: 20%;">
        <div class="hop-tag">−2</div>
        <div class="hop-arc"></div>
      </div>
      <div class="hop-connector" id="hop1" style="left: 30%; width: 20%;">
        <div class="hop-tag">−2</div>
        <div class="hop-arc"></div>
      </div>
      <div class="hop-connector" id="hop2" style="left: 50%; width: 20%;">
        <div class="hop-tag">−2</div>
        <div class="hop-arc"></div>
      </div>
      <div class="hop-connector" id="hop3" style="left: 70%; width: 20%;">
        <div class="hop-tag">−2</div>
        <div class="hop-arc"></div>
      </div>

      
      <div class="term-col active revealed" id="term0">
        <div class="term-box">10</div>
        <div class="term-label">Start</div>
      </div>
      
      <div class="term-col" id="term1">
        <div class="term-box">8</div>
        <div class="term-label">Hop 1</div>
      </div>

      <div class="term-col" id="term2">
        <div class="term-box">6</div>
        <div class="term-label">Hop 2</div>
      </div>

      <div class="term-col" id="term3">
        <div class="term-box">4</div>
        <div class="term-label">Hop 3</div>
      </div>

      <div class="term-col" id="term4">
        <div class="term-box">2</div>
        <div class="term-label">Hop 4</div>
      </div>

    </div>

    
    <div class="calc-card">
      <div class="calc-expr" id="calcExpr">Start: 10</div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" aria-label="Previous">←</button>
      <div class="dots-nav">
        <div class="dot active" data-idx="0"></div>
        <div class="dot" data-idx="1"></div>
        <div class="dot" data-idx="2"></div>
        <div class="dot" data-idx="3"></div>
        <div class="dot" data-idx="4"></div>
      </div>
      <button class="btn" id="nextBtn" aria-label="Next">→</button>
      <button class="btn btn-primary" id="playBtn" style="min-width: 70px;">▶ Auto</button>
    </div>

  </div>

  <script>
    const steps = [
      { text: "Start: 10", activeIndex: 0 },
      { text: "10 <span class='diff'>− 2</span> = 8", activeIndex: 1 },
      { text: "8 <span class='diff'>− 2</span> = 6", activeIndex: 2 },
      { text: "6 <span class='diff'>− 2</span> = 4", activeIndex: 3 },
      { text: "4 <span class='diff'>− 2</span> = 2", activeIndex: 4 }
    ];

    let currentStep = 0;
    let autoTimer = null;

    const calcExpr = document.getElementById('calcExpr');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const dots = document.querySelectorAll('.dot');
    const terms = [0, 1, 2, 3, 4].map(i => document.getElementById('term' + i));
    const hops = [0, 1, 2, 3].map(i => document.getElementById('hop' + i));

    function setStep(idx) {
      currentStep = idx;

      // Update expression
      calcExpr.innerHTML = steps[idx].text;

      // Update terms
      terms.forEach((term, i) => {
        if (i === idx) {
          term.classList.add('active');
          term.classList.add('revealed');
        } else if (i < idx) {
          term.classList.remove('active');
          term.classList.add('revealed');
        } else {
          term.classList.remove('active');
          term.classList.remove('revealed');
        }
      });

      // Update hops
      hops.forEach((hop, i) => {
        if (i === idx - 1) {
          hop.classList.add('active');
        } else {
          hop.classList.remove('active');
        }
      });

      // Update dots
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === idx);
      });
    }

    function next() {
      const nextIdx = (currentStep + 1) % steps.length;
      setStep(nextIdx);
    }

    function prev() {
      const prevIdx = (currentStep - 1 + steps.length) % steps.length;
      setStep(prevIdx);
    }

    function toggleAuto() {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
        playBtn.textContent = "▶ Auto";
      } else {
        next();
        autoTimer = setInterval(next, 3000);
        playBtn.textContent = "⏸ Pause";
      }
    }

    prevBtn.addEventListener('click', () => {
      if (autoTimer) toggleAuto();
      prev();
    });

    nextBtn.addEventListener('click', () => {
      if (autoTimer) toggleAuto();
      next();
    });

    playBtn.addEventListener('click', toggleAuto);

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        if (autoTimer) toggleAuto();
        setStep(idx);
      });
    });

    terms.forEach((term, idx) => {
      term.style.cursor = 'pointer';
      term.addEventListener('click', () => {
        if (autoTimer) toggleAuto();
        setStep(idx);
      });
    });
  </script>
</body>
</html>

Remember: always use the exact same rule for every single step in the sequence — never change the number you add or subtract midway!

If you start at 5 and your rule is **add 5**, what are the next three numbers you land on?

math

Generating Sequences from Term-to-Term Rules. Generate subsequent numbers in a sequence given a starting value and an arithmetic operation rule.

Generating a Sequence Using a Term-to-Term Rule

Sequences and Term-to-Term Rules - CfE / KS3 Maths

Patterns and Sequences: Building Rules

Instruction should progress following the Concrete-Pictorial-Abstract (CPA) pedagogical framework. Begin with physical manipulatives (counters, Cuisenaire rods) to establish the additive constant, transition to pictorial number-line jumps and function machines, and finally solidify standard recursive notation ($T_{n+1} = T_n + d$). Emphasize precise mathematical communication by having students explicitly vocalize the starting term and operation.

Generating Sequences from Term-to-Term Rules

Adding Each Step

Hopping Backward with Subtraction