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 tiny green frog hopping across numbered lily pads in a pond.

The pads are numbered 2, 4, 6, and 8. How does the frog know how far to jump each time?

A **number sequence** is a line of numbers that follows a secret math pattern.

Each number in a sequence is called a **term**.

To find the rule, count jumps on a number track to find the difference between the **Current Term** and the **Next Term**:

$$\text{Rule} = \text{Next Term} - \text{Current Term}$$

Finding the rule requires calculating the difference between two consecutive numbers by counting jumps on a number line: $\text{Rule} = \text{Next Term} - \text{Current Term}$.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <link rel="stylesheet" href="{{VENDOR_CDN}}/katex.min.css">
  <script src="{{VENDOR_CDN}}/katex.min.js"></script>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -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: 100%;
      padding: 12px;
      user-select: none;
    }

    .seq-wrapper {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Main sequence track */
    .sequence-track {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 48px 12px 16px;
    }

    /* SVG overlay for jump arcs */
    .arcs-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
    }

    .arc-path {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 0.4s ease, opacity 0.3s ease;
      opacity: 0.15;
    }

    .arc-path.active {
      stroke-dashoffset: 0;
      opacity: 1;
    }

    .arc-path.all {
      stroke-dashoffset: 0;
      opacity: 0.85;
    }

    /* Jump labels */
    .jump-tag {
      position: absolute;
      transform: translate(-50%, -100%);
      background: #e0f2fe;
      color: #0284c7;
      font-weight: 700;
      font-size: 14px;
      padding: 2px 8px;
      border-radius: 12px;
      border: 1.5px solid #bae6fd;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      top: 14px;
    }

    .jump-tag.active {
      opacity: 1;
      transform: translate(-50%, -110%);
    }

    /* Number tiles */
    .term-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
    }

    .term-box {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 700;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .term-box.highlight {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }

    .term-idx {
      font-size: 11px;
      color: #94a3b8;
      font-weight: 600;
      margin-top: 6px;
    }

    /* Formula calculation card */
    .calc-card {
      width: 100%;
      height: 64px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      position: relative;
    }

    .rule-banner {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 17px;
      font-weight: 700;
      color: #0284c7;
      background: #f0f9ff;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid #bae6fd;
    }

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

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

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

    .btn-step.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .btn-nav {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;
    }

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

  <div class="seq-wrapper">
    
    <div class="sequence-track" id="track">
      <svg class="arcs-svg" id="arcsSvg" viewBox="0 0 500 120" preserveAspectRatio="none">
        <path id="arc0" class="arc-path" d="M 50 50 Q 112 0 175 50" />
        <path id="arc1" class="arc-path" d="M 175 50 Q 237 0 300 50" />
        <path id="arc2" class="arc-path" d="M 300 50 Q 362 0 425 50" />
      </svg>

      <div class="jump-tag" id="tag0" style="left: 23.5%;">+2</div>
      <div class="jump-tag" id="tag1" style="left: 50.0%;">+2</div>
      <div class="jump-tag" id="tag2" style="left: 76.5%;">+2</div>

      <div class="term-node">
        <div class="term-box" id="term0">2</div>
        <div class="term-idx">1st</div>
      </div>
      <div class="term-node">
        <div class="term-box" id="term1">4</div>
        <div class="term-idx">2nd</div>
      </div>
      <div class="term-node">
        <div class="term-box" id="term2">6</div>
        <div class="term-idx">3rd</div>
      </div>
      <div class="term-node">
        <div class="term-box" id="term3">8</div>
        <div class="term-idx">4th</div>
      </div>
    </div>

    
    <div class="calc-card" id="calcCard">
      <span id="mathContent"></span>
    </div>

    
    <div class="controls">
      <button class="btn-nav" id="prevBtn" title="Previous">◀</button>
      <button class="btn-step" id="tab0">Jump 1</button>
      <button class="btn-step" id="tab1">Jump 2</button>
      <button class="btn-step" id="tab2">Jump 3</button>
      <button class="btn-step" id="tab3">Rule</button>
      <button class="btn-nav" id="nextBtn" title="Next">▶</button>
      <button class="btn-nav" id="playBtn" title="Play / Pause">⏸</button>
    </div>
  </div>

  <script>
    const steps = [
      {
        terms: [0, 1],
        arc: 0,
        tags: [0],
        math: "4 - 2 = +2"
      },
      {
        terms: [1, 2],
        arc: 1,
        tags: [1],
        math: "6 - 4 = +2"
      },
      {
        terms: [2, 3],
        arc: 2,
        tags: [2],
        math: "8 - 6 = +2"
      },
      {
        terms: [0, 1, 2, 3],
        arc: 'all',
        tags: [0, 1, 2],
        rule: true
      }
    ];

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

    function renderStep(idx) {
      currentStep = idx;
      const step = steps[idx];

      // Update Tabs
      for (let i = 0; i < 4; i++) {
        document.getElementById('tab' + i).classList.toggle('active', i === idx);
      }

      // Update Node Highlights
      for (let i = 0; i < 4; i++) {
        const isActive = step.terms.includes(i);
        document.getElementById('term' + i).classList.toggle('highlight', isActive);
      }

      // Update Arcs
      for (let i = 0; i < 3; i++) {
        const arcEl = document.getElementById('arc' + i);
        arcEl.classList.remove('active', 'all');
        if (step.arc === 'all') {
          arcEl.classList.add('all');
        } else if (step.arc === i) {
          arcEl.classList.add('active');
        }
      }

      // Update Tags
      for (let i = 0; i < 3; i++) {
        const tagEl = document.getElementById('tag' + i);
        tagEl.classList.toggle('active', step.tags.includes(i));
      }

      // Update Math Display
      const mathEl = document.getElementById('mathContent');
      if (step.rule) {
        mathEl.innerHTML = `<span class="rule-banner">✦ Rule: +2</span>`;
      } else {
        if (window.katex) {
          katex.render(step.math, mathEl, { throwOnError: false });
        } else {
          mathEl.textContent = step.math;
        }
      }
    }

    function nextStep() {
      renderStep((currentStep + 1) % steps.length);
    }

    function prevStep() {
      renderStep((currentStep - 1 + steps.length) % steps.length);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸';
      timer = setInterval(nextStep, 3200);
    }

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

    function togglePlay() {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    }

    // Attach listeners
    for (let i = 0; i < 4; i++) {
      document.getElementById('tab' + i).addEventListener('click', () => {
        stopAutoPlay();
        renderStep(i);
      });
    }

    document.getElementById('nextBtn').addEventListener('click', () => {
      stopAutoPlay();
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      stopAutoPlay();
      prevStep();
    });

    document.getElementById('playBtn').addEventListener('click', togglePlay);

    // Initial render & auto-play
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

From 2 to 4 is a jump of 2, and from 4 to 6 is also 2. That means our secret rule is **add 2**.

What happens if the numbers get smaller instead of bigger?

When numbers go down like a rocket countdown, the rule is taking something away.

<!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: #fffaf0;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .diagram {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }
    .track {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 36px 8px 10px;
    }
    .node-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
    }
    .node {
      width: 58px;
      height: 58px;
      border-radius: 12px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: #1e2945;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }
    .node.active {
      border-color: #ff8800;
      box-shadow: 0 0 0 3px rgba(255, 136, 0, 0.25);
      background: #fff6eb;
    }
    .jump-arc {
      position: absolute;
      top: 0;
      height: 38px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      z-index: 1;
      opacity: 0.25;
      transition: opacity 0.3s ease;
    }
    .jump-arc.active {
      opacity: 1;
    }
    .jump-tag {
      background: #ff8800;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      box-shadow: 0 2px 4px rgba(255,136,0,0.2);
    }
    .jump-arrow {
      width: 100%;
      height: 14px;
      border-top: 2px dashed #ff8800;
      border-radius: 50% 50% 0 0 / 100% 100% 0 0;
      margin-top: 2px;
    }
    .rule-banner {
      width: 100%;
      background: #ffffff;
      border: 2px solid #ffe1b3;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 18px;
      font-weight: 700;
      color: #b35900;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }
    .rule-tag {
      background: #ff8800;
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 8px;
    }
    .controls {
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .step-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .step-btn.active {
      background: #ff8800;
      color: #ffffff;
      border-color: #ff8800;
    }
    .rocket {
      font-size: 20px;
      margin-right: 4px;
    }
  </style>
</head>
<body>
  <div class="diagram">
    <div class="track" id="track">
      <div class="node-wrap">
        <div class="node active" id="n0">10</div>
      </div>

      <div class="jump-arc active" id="j0" style="left: 15%; width: 23%;">
        <span class="jump-tag">−1</span>
        <div class="jump-arrow"></div>
      </div>

      <div class="node-wrap">
        <div class="node active" id="n1">9</div>
      </div>

      <div class="jump-arc" id="j1" style="left: 39%; width: 23%;">
        <span class="jump-tag">−1</span>
        <div class="jump-arrow"></div>
      </div>

      <div class="node-wrap">
        <div class="node" id="n2">8</div>
      </div>

      <div class="jump-arc" id="j2" style="left: 62%; width: 23%;">
        <span class="jump-tag">−1</span>
        <div class="jump-arrow"></div>
      </div>

      <div class="node-wrap">
        <div class="node" id="n3">7</div>
      </div>
    </div>

    <div class="rule-banner">
      <span class="rocket">🚀</span>
      <span id="math-eq">10 − 1 = 9</span>
      <span class="rule-tag" id="rule-label">Rule: −1</span>
    </div>

    <div class="controls">
      <button class="step-btn active" id="btn0">Jump 1</button>
      <button class="step-btn" id="btn1">Jump 2</button>
      <button class="step-btn" id="btn2">Jump 3</button>
      <button class="step-btn" id="btnAll">All</button>
    </div>
  </div>

  <script>
    const steps = [
      { nodes: [0, 1], jumps: [0], text: '10 − 1 = 9' },
      { nodes: [1, 2], jumps: [1], text: '9 − 1 = 8' },
      { nodes: [2, 3], jumps: [2], text: '8 − 1 = 7' },
      { nodes: [0, 1, 2, 3], jumps: [0, 1, 2], text: 'Subtract 1 each step' }
    ];

    const nodes = [document.getElementById('n0'), document.getElementById('n1'), document.getElementById('n2'), document.getElementById('n3')];
    const jumps = [document.getElementById('j0'), document.getElementById('j1'), document.getElementById('j2')];
    const btns = [document.getElementById('btn0'), document.getElementById('btn1'), document.getElementById('btn2'), document.getElementById('btnAll')];
    const eqLabel = document.getElementById('math-eq');

    let current = 0;
    let timer = null;

    function renderStep(idx) {
      current = idx;
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      const s = steps[idx];
      nodes.forEach((n, i) => n.classList.toggle('active', s.nodes.includes(i)));
      jumps.forEach((j, i) => j.classList.toggle('active', s.jumps.includes(i)));
      eqLabel.textContent = s.text;
    }

    function autoPlay() {
      timer = setInterval(() => {
        const next = (current + 1) % steps.length;
        renderStep(next);
      }, 3200);
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
        renderStep(idx);
        autoPlay();
      });
    });

    renderStep(0);
    autoPlay();
  </script>
</body>
</html>

Since $10 - 1 = 9$ and $9 - 1 = 8$, the rule is **subtract 1**.

Could a sequence trick you if you only look at the first jump?

A good math detective always checks every jump to make sure the same rule works the whole way.

<!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>Finding the Rule in Number Sequences</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: 100%;
      padding: 16px 8px;
    }

    .seq-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      background: #e5e7eb;
      padding: 4px;
      border-radius: 20px;
    }

    .seq-tab {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #4b5563;
      border-radius: 16px;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
    }

    .seq-tab.active {
      background: #ffffff;
      color: #10b981;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .board {
      width: 100%;
      max-width: 500px;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      position: relative;
    }

    .sequence-row {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 40px 0 16px;
      padding: 0 4px;
    }

    .num-node {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: #f3f4f6;
      border: 2px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      z-index: 2;
      transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    }

    .num-node.active {
      border-color: #10b981;
      background: #ecfdf5;
      color: #065f46;
    }

    .arcs-layer {
      position: absolute;
      top: -36px;
      left: 0;
      width: 100%;
      height: 60px;
      pointer-events: none;
    }

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

    .arc-path.active {
      stroke: #10b981;
      stroke-dasharray: none;
    }

    .jump-labels {
      position: absolute;
      top: -38px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 24px;
      pointer-events: none;
    }

    .jump-badge {
      font-size: 13px;
      font-weight: 700;
      color: #9ca3af;
      background: #f9fafb;
      border: 1px solid #e5e7eb;
      padding: 2px 8px;
      border-radius: 10px;
      opacity: 0.3;
      transform: translateY(4px);
      transition: opacity 0.3s, color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s;
    }

    .jump-badge.active {
      opacity: 1;
      color: #047857;
      background: #d1fae5;
      border-color: #10b981;
      transform: translateY(0);
    }

    .rule-banner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      padding: 10px;
      border-radius: 10px;
      background: #f9fafb;
      font-size: 15px;
      font-weight: 700;
      color: #4b5563;
      transition: background 0.3s, color 0.3s;
    }

    .rule-banner.revealed {
      background: #ecfdf5;
      color: #065f46;
    }

    .rule-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #374151;
      transition: background 0.3s, color 0.3s;
    }

    .rule-banner.revealed .rule-badge {
      background: #10b981;
      color: #ffffff;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 18px;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #d1d5db;
      color: #374151;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }

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

    .btn-step {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="seq-tabs">
    <button class="seq-tab active" data-preset="0">+3 Sequence</button>
    <button class="seq-tab" data-preset="1">+5 Sequence</button>
    <button class="seq-tab" data-preset="2">−4 Sequence</button>
  </div>

  <div class="board">
    <div class="sequence-row">
      <svg class="arcs-layer" viewBox="0 0 460 60" preserveAspectRatio="none">
        <path id="arc0" class="arc-path" d="M 24,52 Q 77,5 130,52" />
        <path id="arc1" class="arc-path" d="M 134,52 Q 187,5 240,52" />
        <path id="arc2" class="arc-path" d="M 244,52 Q 297,5 350,52" />
        <path id="arc3" class="arc-path" d="M 354,52 Q 407,5 460,52" />
      </svg>

      <div class="jump-labels">
        <span id="badge0" class="jump-badge">+3</span>
        <span id="badge1" class="jump-badge">+3</span>
        <span id="badge2" class="jump-badge">+3</span>
        <span id="badge3" class="jump-badge">+3</span>
      </div>

      <div class="num-node" id="node0">3</div>
      <div class="num-node" id="node1">6</div>
      <div class="num-node" id="node2">9</div>
      <div class="num-node" id="node3">12</div>
      <div class="num-node" id="node4">15</div>
    </div>

    <div class="rule-banner" id="ruleBanner">
      <span>Rule:</span>
      <span class="rule-badge" id="ruleBadge">?</span>
    </div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" id="playBtn">▶ Auto</button>
    <button class="btn-ctrl btn-step" id="nextBtn">Next Jump →</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const presets = [
      { nums: [3, 6, 9, 12, 15], jump: "+3", rule: "+3" },
      { nums: [5, 10, 15, 20, 25], jump: "+5", rule: "+5" },
      { nums: [24, 20, 16, 12, 8], jump: "−4", rule: "−4" }
    ];

    let currentPreset = 0;
    let step = 0; // 0 to 4 jumps
    let timer = null;

    function renderPreset() {
      const data = presets[currentPreset];
      for (let i = 0; i < 5; i++) {
        $(`node${i}`).textContent = data.nums[i];
      }
      for (let i = 0; i < 4; i++) {
        $(`badge${i}`).textContent = data.jump;
      }
      renderStep();
    }

    function renderStep() {
      for (let i = 0; i < 5; i++) {
        const node = $(`node${i}`);
        if (i <= step) {
          node.classList.add('active');
        } else {
          node.classList.remove('active');
        }
      }

      for (let i = 0; i < 4; i++) {
        const arc = $(`arc${i}`);
        const badge = $(`badge${i}`);
        if (i < step) {
          arc.classList.add('active');
          badge.classList.add('active');
        } else {
          arc.classList.remove('active');
          badge.classList.remove('active');
        }
      }

      const banner = $('ruleBanner');
      const badge = $('ruleBadge');
      if (step === 4) {
        banner.classList.add('revealed');
        badge.textContent = presets[currentPreset].rule + ' ✓';
      } else {
        banner.classList.remove('revealed');
        badge.textContent = '?';
      }
    }

    function nextStep() {
      step = (step + 1) % 5;
      renderStep();
    }

    function setPreset(idx) {
      currentPreset = idx;
      step = 0;
      $$('.seq-tab').forEach((tab, i) => {
        if (i === idx) tab.classList.add('active');
        else tab.classList.remove('active');
      });
      renderPreset();
    }

    $$('.seq-tab').forEach((tab, idx) => {
      onTap(tab, () => {
        stopAuto();
        setPreset(idx);
      });
    });

    onTap($('nextBtn'), () => {
      stopAuto();
      nextStep();
    });

    function toggleAuto() {
      if (timer) {
        stopAuto();
      } else {
        $('playBtn').textContent = '⏸ Pause';
        timer = setInterval(() => {
          nextStep();
        }, 1200);
      }
    }

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

    onTap($('playBtn'), toggleAuto);

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

Look at these numbers: 5, 10, 15, 20. Count the jump from 5 to 10 to name the secret rule!

math

Finding the Rule in Number Sequences. Analyze adjacent terms in a sequence to identify the operational rule (such as 'add 2' or 'subtract 1').

Number Patterns and Sequences - Early and First Level Maths

Identify and Extend Number Patterns (Primary 1 / Early Level)

Patterns and Sequences: Early Years and Lower Primary

For P1 / Early Level learners (ages 4–6), transition from concrete physical manipulatives (Unifix cubes, bead strings) to visual models (number tracks with frog/counter jumps) before introducing pure abstract notation. Focus on oral mathematical reasoning: encourage pupils to chant sequences rhythmically, identify 'getting bigger' vs. 'getting smaller', and articulate complete verbal rules ('The rule is add 2') rather than single numbers.

Finding the Rule in Number Sequences

Hopping Forward

Stepping Backward