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 that always jumps $3$ steps forward on a number line.

On jump $1$ it lands on $3$, on jump $2$ it lands on $6$, and on jump $3$ it lands on $9$.

<!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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
      user-select: none;
    }

    /* Jump Selector Buttons */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 540px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 2px solid transparent;
      color: #475569;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .step-btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }

    .step-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
    }

    .step-btn.general-btn.active {
      background: #fef3c7;
      border-color: #d97706;
      color: #b45309;
    }

    /* Number Line Canvas Container */
    .line-container {
      width: 100%;
      max-width: 560px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 12px 10px;
      position: relative;
      overflow: visible;
    }

    svg {
      width: 100%;
      height: 110px;
      display: block;
      overflow: visible;
    }

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 3;
      stroke-linecap: round;
    }

    .tick {
      stroke: #64748b;
      stroke-width: 2;
    }

    .tick-label {
      font-size: 14px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      font-family: inherit;
    }

    .arc-path {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-dasharray: 4 4;
      transition: stroke 0.3s, stroke-width 0.3s, stroke-dasharray 0.3s;
    }

    .arc-path.active {
      stroke: #0284c7;
      stroke-width: 3.5;
      stroke-dasharray: none;
    }

    .arc-label {
      font-size: 12px;
      font-weight: 700;
      fill: #94a3b8;
      text-anchor: middle;
      transition: fill 0.3s;
    }

    .arc-label.active {
      fill: #0284c7;
    }

    .frog-marker {
      font-size: 26px;
      text-anchor: middle;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    }

    /* Math Formula Display */
    .formula-card {
      width: 100%;
      max-width: 540px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 8px;
    }

    .math-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .math-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .math-value {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      min-height: 26px;
      display: flex;
      align-items: center;
    }

    .math-value.highlight {
      color: #0284c7;
    }

    .math-value.rule-highlight {
      color: #b45309;
    }

    .arrow-icon {
      color: #94a3b8;
      font-size: 18px;
      font-weight: 700;
    }

    /* Stepper bottom bar */
    .bottom-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }

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

    .play-btn:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="controls" id="btnGroup">
    <button class="step-btn active" data-step="0">Hop 1</button>
    <button class="step-btn" data-step="1">Hop 2</button>
    <button class="step-btn" data-step="2">Hop 3</button>
    <button class="step-btn" data-step="3">Hop 4</button>
    <button class="step-btn general-btn" data-step="4">Hop <em>n</em></button>
  </div>

  
  <div class="line-container">
    <svg viewBox="0 0 500 110" id="svgCanvas">
      <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 L 8 5 L 0 9 z" fill="#94a3b8" />
        </marker>
      </defs>

      
      <line x1="30" y1="75" x2="480" y2="75" class="axis-line" marker-end="url(#arrow)" />

      
      
      <line x1="50" y1="70" x2="50" y2="80" class="tick" />
      <text x="50" y="98" class="tick-label">0</text>

      
      <line x1="130" y1="70" x2="130" y2="80" class="tick" />
      <text x="130" y="98" class="tick-label" id="lbl-1">3</text>

      
      <line x1="210" y1="70" x2="210" y2="80" class="tick" />
      <text x="210" y="98" class="tick-label" id="lbl-2">6</text>

      
      <line x1="290" y1="70" x2="290" y2="80" class="tick" />
      <text x="290" y="98" class="tick-label" id="lbl-3">9</text>

      
      <line x1="370" y1="70" x2="370" y2="80" class="tick" />
      <text x="370" y="98" class="tick-label" id="lbl-4">12</text>

      
      <line x1="445" y1="70" x2="445" y2="80" class="tick" stroke-dasharray="2 2" />
      <text x="445" y="98" class="tick-label" id="lbl-n" fill="#b45309">3n</text>

      
      
      <path d="M 50 72 Q 90 25 130 72" class="arc-path" id="arc-0" />
      <text x="90" y="38" class="arc-label" id="arclbl-0">+3</text>

      
      <path d="M 130 72 Q 170 25 210 72" class="arc-path" id="arc-1" />
      <text x="170" y="38" class="arc-label" id="arclbl-1">+3</text>

      
      <path d="M 210 72 Q 250 25 290 72" class="arc-path" id="arc-2" />
      <text x="250" y="38" class="arc-label" id="arclbl-2">+3</text>

      
      <path d="M 290 72 Q 330 25 370 72" class="arc-path" id="arc-3" />
      <text x="330" y="38" class="arc-label" id="arclbl-3">+3</text>

      
      <path d="M 370 72 Q 407 25 445 72" class="arc-path" id="arc-4" />
      <text x="407" y="38" class="arc-label" id="arclbl-4">···</text>

      
      <text id="frog" class="frog-marker" x="0" y="0">🐸</text>
    </svg>
  </div>

  
  <div class="formula-card">
    <div class="math-cell">
      <span class="math-title">Hop (<span id="n-symbol">n</span>)</span>
      <span class="math-value" id="val-hop">1</span>
    </div>

    <span class="arrow-icon">× 3 =</span>

    <div class="math-cell">
      <span class="math-title">Calculation</span>
      <span class="math-value highlight" id="val-calc">1 × 3</span>
    </div>

    <span class="arrow-icon">→</span>

    <div class="math-cell">
      <span class="math-title">Position</span>
      <span class="math-value highlight" id="val-pos">3</span>
    </div>
  </div>

  
  <div class="bottom-bar">
    <button class="play-btn" id="playBtn">
      <span id="playIcon">⏸</span>
      <span id="playText">Pause</span>
    </button>
  </div>

  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script>
    const data = [
      { hop: '1', calc: '1 \\times 3', pos: '3', frogX: 130, frogY: 66, arcs: [0] },
      { hop: '2', calc: '2 \\times 3', pos: '6', frogX: 210, frogY: 66, arcs: [0, 1] },
      { hop: '3', calc: '3 \\times 3', pos: '9', frogX: 290, frogY: 66, arcs: [0, 1, 2] },
      { hop: '4', calc: '4 \\times 3', pos: '12', frogX: 370, frogY: 66, arcs: [0, 1, 2, 3] },
      { hop: 'n', calc: 'n \\times 3', pos: '3n', frogX: 445, frogY: 66, arcs: [0, 1, 2, 3, 4], isRule: true }
    ];

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

    const frog = document.getElementById('frog');
    const buttons = document.querySelectorAll('.step-btn');
    const valHop = document.getElementById('val-hop');
    const valCalc = document.getElementById('val-calc');
    const valPos = document.getElementById('val-pos');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');

    function renderMath(element, tex) {
      if (window.katex) {
        try {
          katex.render(tex, element, { throwOnError: false });
          return;
        } catch (e) {}
      }
      element.textContent = tex.replace('\\times', '×');
    }

    function setStep(idx) {
      currentStep = idx;
      const d = data[idx];

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

      // Update arcs
      for (let i = 0; i < 5; i++) {
        const arc = document.getElementById('arc-' + i);
        const lbl = document.getElementById('arclbl-' + i);
        const isActive = d.arcs.includes(i);
        arc.classList.toggle('active', isActive);
        lbl.classList.toggle('active', isActive);
      }

      // Move frog
      frog.setAttribute('transform', `translate(${d.frogX}, ${d.frogY})`);

      // Update math values
      renderMath(valHop, d.hop);
      renderMath(valCalc, d.calc);
      renderMath(valPos, d.pos);

      if (d.isRule) {
        valPos.className = 'math-value rule-highlight';
        valCalc.className = 'math-value rule-highlight';
      } else {
        valPos.className = 'math-value highlight';
        valCalc.className = 'math-value highlight';
      }
    }

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

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
    }

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

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

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

    // Init
    setStep(0);
    startTimer();
  </script>
</body>
</html>

How can we know where the frog lands on hop $100$ without counting every hop?

The amount added between each number is called the **common difference**.

Since every hop adds $3$, these numbers are just the **3 times table**: $3, 6, 9, 12$.

<!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>Nth Term Rule for Multiples</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      user-select: none;
    }

    /* Selector tabs */
    .hop-selector {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .hop-btn {
      background: #ffffff;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .hop-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* Sequence table container */
    .table-container {
      width: 100%;
      max-width: 540px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }

    .seq-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      text-align: center;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }
    .seq-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.3);
    }
    .seq-card.nth-card {
      background: #faf5ff;
      border-color: #d8b4fe;
    }
    .seq-card.nth-card.active {
      border-color: #a855f7;
      background: #f3e8ff;
      box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
    }

    .pos-label {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }
    .arrow-op {
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 6px;
    }
    .nth-card .arrow-op {
      color: #7e22ce;
      background: #f3e8ff;
    }
    .val-label {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
    }

    /* Rule Display Box */
    .rule-box {
      width: 100%;
      max-width: 540px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .rule-part {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }
    .rule-tag {
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
    }
    .rule-math {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }
    .rule-divider {
      font-size: 18px;
      color: #9ca3af;
    }
    .highlight-blue {
      color: #0284c7;
      font-weight: 800;
    }
    .highlight-purple {
      color: #7e22ce;
      font-weight: 800;
    }
  </style>
</head>
<body>

  
  <div class="hop-selector">
    <button class="hop-btn" data-step="2">Multiples of 2</button>
    <button class="hop-btn active" data-step="3">Multiples of 3</button>
    <button class="hop-btn" data-step="4">Multiples of 4</button>
    <button class="hop-btn" data-step="5">Multiples of 5</button>
  </div>

  
  <div class="table-container" id="grid"></div>

  
  <div class="rule-box">
    <div class="rule-part">
      <span class="rule-tag">Position</span>
      <span class="rule-math" id="dyn-n">n = 1</span>
    </div>
    <span class="rule-divider">→</span>
    <div class="rule-part">
      <span class="rule-tag">Calculation</span>
      <span class="rule-math highlight-blue" id="dyn-calc">3 × 1</span>
    </div>
    <span class="rule-divider">=</span>
    <div class="rule-part">
      <span class="rule-tag">Rule</span>
      <span class="rule-math highlight-purple" id="dyn-rule">3n</span>
    </div>
  </div>

  <script>
    let step = 3;
    let selectedIndex = 0; // 0, 1, 2, 3 (n=1..4), 4 (general n)
    const positions = [1, 2, 3, 4, 'n'];

    function renderGrid() {
      const grid = document.getElementById('grid');
      grid.innerHTML = '';

      positions.forEach((pos, idx) => {
        const card = document.createElement('div');
        const isNth = pos === 'n';
        card.className = `seq-card ${isNth ? 'nth-card' : ''} ${idx === selectedIndex ? 'active' : ''}`;

        const posText = isNth ? 'n' : `n = ${pos}`;
        const opText = `× ${step}`;
        const valText = isNth ? `${step}n` : `${pos * step}`;

        card.innerHTML = `
          <span class="pos-label">${posText}</span>
          <span class="arrow-op">${opText}</span>
          <span class="val-label">${valText}</span>
        `;

        card.addEventListener('click', () => {
          selectedIndex = idx;
          updateView();
        });

        grid.appendChild(card);
      });
    }

    function updateSummary() {
      const pos = positions[selectedIndex];
      const dynN = document.getElementById('dyn-n');
      const dynCalc = document.getElementById('dyn-calc');
      const dynRule = document.getElementById('dyn-rule');

      if (pos === 'n') {
        dynN.textContent = 'n';
        dynCalc.textContent = `${step} × n`;
        dynRule.textContent = `${step}n`;
      } else {
        dynN.textContent = `n = ${pos}`;
        dynCalc.textContent = `${step} × ${pos}`;
        dynRule.textContent = `${step * pos}`;
      }
    }

    function updateView() {
      renderGrid();
      updateSummary();
    }

    // Tab buttons
    document.querySelectorAll('.hop-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        document.querySelectorAll('.hop-btn').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        step = parseInt(btn.dataset.step, 10);
        updateView();
      });
    });

    // Auto cycle through steps softly if student doesn't interact immediately
    let autoTimer = setInterval(() => {
      selectedIndex = (selectedIndex + 1) % positions.length;
      updateView();
    }, 3200);

    // Stop auto-timer on interaction
    document.body.addEventListener('click', () => {
      clearInterval(autoTimer);
    }, { once: true });

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

What if we want a magic math rule that works for any jump number?

In math, we use the letter **$n$** to stand for the **position number** of any step.

Writing **$3n$** means '$3$ times $n$', which gives the value at position $n$.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      padding: 12px;
      color: #1e2945;
      background: transparent;
      user-select: none;
    }

    .diagram {
      display: flex;
      flex-direction: column;
      gap: 14px;
      max-width: 520px;
      margin: 0 auto;
    }

    /* Position selector tabs */
    .tabs {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tab-btn {
      flex: 1;
      min-width: 44px;
      max-width: 68px;
      padding: 8px 4px;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }

    /* Formula & Visualization Box */
    .display-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      min-height: 190px;
    }

    .formula-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 20px;
      font-weight: 700;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 18px;
    }

    .badge-n {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
      min-width: 38px;
    }

    .badge-op {
      color: #64748b;
      font-size: 18px;
    }

    .badge-rule {
      background: #fef3c7;
      color: #d97706;
      border: 1px solid #fde68a;
    }

    .badge-val {
      background: #dcfce7;
      color: #16a34a;
      border: 1px solid #bbf7d0;
      min-width: 44px;
    }

    /* Visual groups of 3 */
    .groups-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-height: 90px;
      padding: 6px;
    }

    .dot-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 6px 8px;
      animation: fadeIn 0.25s ease;
    }

    .dot-row {
      display: flex;
      gap: 4px;
    }

    .dot {
      width: 13px;
      height: 13px;
      background: #22b7ff;
      border-radius: 50%;
    }

    .group-label {
      font-size: 11px;
      color: #64748b;
      font-weight: 600;
    }

    .dots-n-symbolic {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 24px;
      color: #0284c7;
      font-weight: bold;
      padding: 12px;
    }

    /* Table overview */
    .table-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      overflow: hidden;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      font-size: 14px;
    }

    th, td {
      padding: 8px 4px;
      border-bottom: 1px solid #f1f5f9;
    }

    th:first-child, td:first-child {
      background: #f8fafc;
      font-weight: 600;
      color: #64748b;
      width: 25%;
      border-right: 1px solid #e2e8f0;
      text-align: left;
      padding-left: 12px;
    }

    .col-highlight {
      background: #f0f9ff;
      color: #0284c7;
      font-weight: 700;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
  <div class="diagram">
    
    <div class="tabs" id="tabGroup">
      <button class="tab-btn active" data-n="1">n = 1</button>
      <button class="tab-btn" data-n="2">n = 2</button>
      <button class="tab-btn" data-n="3">n = 3</button>
      <button class="tab-btn" data-n="4">n = 4</button>
      <button class="tab-btn" data-n="5">n = 5</button>
      <button class="tab-btn" data-n="n">n</button>
    </div>

    
    <div class="display-card">
      <div class="formula-row">
        <span class="badge badge-n" id="nVal">1</span>
        <span class="badge-op">×</span>
        <span class="badge badge-rule">3</span>
        <span class="badge-op">=</span>
        <span class="badge badge-val" id="termVal">3</span>
      </div>

      <div class="groups-container" id="visualContainer">
        
      </div>
    </div>

    
    <div class="table-card">
      <table>
        <tr>
          <th>Position (n)</th>
          <td id="t-n-1">1</td>
          <td id="t-n-2">2</td>
          <td id="t-n-3">3</td>
          <td id="t-n-4">4</td>
          <td id="t-n-5">5</td>
          <td id="t-n-n">n</td>
        </tr>
        <tr>
          <th>Value (3n)</th>
          <td id="t-v-1">3</td>
          <td id="t-v-2">6</td>
          <td id="t-v-3">9</td>
          <td id="t-v-4">12</td>
          <td id="t-v-5">15</td>
          <td id="t-v-n">3n</td>
        </tr>
      </table>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.tab-btn');
    const nValEl = document.getElementById('nVal');
    const termValEl = document.getElementById('termVal');
    const visualContainer = document.getElementById('visualContainer');

    function updateState(n) {
      // Update active button
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.n === String(n));
      });

      // Clear previous table highlights
      ['1', '2', '3', '4', '5', 'n'].forEach(k => {
        document.getElementById(`t-n-${k}`).className = '';
        document.getElementById(`t-v-${k}`).className = '';
      });

      // Highlight active column in table
      const tn = document.getElementById(`t-n-${n}`);
      const tv = document.getElementById(`t-v-${n}`);
      if (tn) tn.className = 'col-highlight';
      if (tv) tv.className = 'col-highlight';

      // Update Formula & Visuals
      if (n === 'n') {
        nValEl.textContent = 'n';
        termValEl.textContent = '3n';
        visualContainer.innerHTML = `
          <div class="dots-n-symbolic">
            <div class="dot-group">
              <div class="dot-row"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
              <span class="group-label">1</span>
            </div>
            <span>+</span>
            <div class="dot-group">
              <div class="dot-row"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
              <span class="group-label">2</span>
            </div>
            <span>...</span>
            <div class="dot-group">
              <div class="dot-row"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>
              <span class="group-label">n</span>
            </div>
          </div>
        `;
      } else {
        const num = parseInt(n, 10);
        nValEl.textContent = num;
        termValEl.textContent = num * 3;

        let groupsHtml = '';
        for (let i = 1; i <= num; i++) {
          groupsHtml += `
            <div class="dot-group">
              <div class="dot-row">
                <div class="dot"></div>
                <div class="dot"></div>
                <div class="dot"></div>
              </div>
              <span class="group-label">Group ${i}</span>
            </div>
          `;
        }
        visualContainer.innerHTML = groupsHtml;
      }
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        updateState(btn.dataset.n);
      });
    });

    // Initialize
    updateState('1');
  </script>
</body>
</html>

Let's see how this rule works with a brand new pattern.

Find the **nth term rule** for this sequence: $5, 10, 15, 20, \dots$

First, check the jump: $10 - 5 = 5$, so the difference is $5$ each time.

Because the jumps are $5$, our rule is **$5n$**.

To find the $6\text{th}$ term, replace $n$ with $6$: $5 \times 6 = 30$.

Be careful: the position $n$ is just the step number, while $5n$ is the actual number in the pattern!

math

Finding the Nth Term Rule for Multiples of N. Connect times tables and common differences to the basic algebraic expression an.

Sequences and Nth Term - CfE Third Level Mathematics

Finding and Applying Position-to-Term Rules for Multiples

Introduction to Linear and Arithmetic Sequences

Pedagogical focus should emphasize bridging concrete multiplication tables (e.g., the 4 times table) directly to algebraic notation ($4n$). Utilizing dual representations—showing the horizontal addition step alongside the vertical multiplication from position index $n$—helps learners avoid the common error of confusing '+a' with 'n + a'. Concrete arrays and position-to-term tables solidify understanding before advancing to non-zero intercept linear sequences ($an + b$).

Finding the Nth Term Rule for Multiples of N

The Jumping Rule

Using the Letter n