<!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, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }

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

    .table-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .grid-row {
      display: grid;
      grid-template-columns: 50px 50px 1fr;
      align-items: center;
      gap: 8px;
    }

    .header-row {
      font-weight: 700;
      font-size: 15px;
      color: #64748b;
      padding-bottom: 2px;
      border-bottom: 2px solid #e2e8f0;
    }

    .cell {
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      font-weight: 600;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }

    .row-active .cell-x {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }

    .row-active .cell-y {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }

    .callout {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      height: 44px;
      border-radius: 8px;
      background: #f1f5f9;
      border: 1px dashed #cbd5e1;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
      opacity: 0.4;
      transform: translateX(0);
      transition: all 0.3s ease;
    }

    .row-active .callout {
      opacity: 1;
      background: #ecfdf5;
      border: 1px solid #10b981;
      color: #047857;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
    }

    .tag-diff {
      font-weight: 700;
      color: #059669;
      background: #d1fae5;
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: auto;
    }

    .rule-badge {
      width: 100%;
      padding: 12px 14px;
      background: #eff6ff;
      border: 2px solid #3b82f6;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.08);
      font-size: 14px;
      font-weight: 600;
      color: #1e3a8a;
    }

    .rule-formula {
      font-size: 17px;
      font-weight: 800;
      color: #1d4ed8;
      background: #ffffff;
      padding: 4px 12px;
      border-radius: 6px;
      border: 1px solid #bfdbfe;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 8px;
    }

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

    .nav-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="nav-tabs">
      <button class="nav-btn" id="btn0">Row 1</button>
      <button class="nav-btn" id="btn1">Row 2</button>
      <button class="nav-btn" id="btn2">Row 3</button>
      <button class="nav-btn active" id="btnAll">All</button>
    </div>

    <div class="table-container">
      <div class="grid-row header-row">
        <div style="text-align: center;">x</div>
        <div style="text-align: center;">y</div>
        <div style="padding-left: 6px;">Difference (y − x)</div>
      </div>

      <div class="grid-row row-item row-active" id="row0">
        <div class="cell cell-x">2</div>
        <div class="cell cell-y">9</div>
        <div class="callout">
          <span>9 − 2</span>
          <span class="tag-diff">+7</span>
        </div>
      </div>

      <div class="grid-row row-item row-active" id="row1">
        <div class="cell cell-x">5</div>
        <div class="cell cell-y">12</div>
        <div class="callout">
          <span>12 − 5</span>
          <span class="tag-diff">+7</span>
        </div>
      </div>

      <div class="grid-row row-item row-active" id="row2">
        <div class="cell cell-x">9</div>
        <div class="cell cell-y">16</div>
        <div class="callout">
          <span>16 − 9</span>
          <span class="tag-diff">+7</span>
        </div>
      </div>
    </div>

    <div class="rule-badge">
      <span>Constant difference: <strong>+7</strong></span>
      <span class="rule-formula">y = x + 7</span>
    </div>
  </div>

  <script>
    const rows = [document.getElementById('row0'), document.getElementById('row1'), document.getElementById('row2')];
    const btns = [
      { el: document.getElementById('btn0'), mode: 0 },
      { el: document.getElementById('btn1'), mode: 1 },
      { el: document.getElementById('btn2'), mode: 2 },
      { el: document.getElementById('btnAll'), mode: 'all' }
    ];

    function setView(mode) {
      btns.forEach(b => b.el.classList.toggle('active', b.mode === mode));
      rows.forEach((r, idx) => {
        if (mode === 'all' || mode === idx) {
          r.classList.add('row-active');
        } else {
          r.classList.remove('row-active');
        }
      });
    }

    btns.forEach(b => {
      b.el.addEventListener('click', () => setView(b.mode));
    });
  </script>
</body>
</html>

Making Patterns with Adding Rules

<!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: 100%;
      padding: 12px;
      gap: 12px;
    }

    .rule-badge {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 999px;
      padding: 4px 14px;
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      letter-spacing: 0.5px;
    }

    .panels-container {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 520px;
    }

    .panel-card {
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: box-shadow 0.2s ease;
    }

    /* Forward (Blue) */
    .forward-panel {
      background: #f0f7ff;
      border: 1.5px solid #bfdbfe;
    }
    .forward-panel .badge-tag {
      color: #1d4ed8;
      background: #dbeafe;
    }
    .forward-panel .op-box {
      background: #2563eb;
      color: #ffffff;
    }
    .forward-panel .val-box.target {
      border-color: #3b82f6;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
    }

    /* Backward (Amber) */
    .backward-panel {
      background: #fffbeb;
      border: 1.5px solid #fde68a;
    }
    .backward-panel .badge-tag {
      color: #b45309;
      background: #fef3c7;
    }
    .backward-panel .op-box {
      background: #d97706;
      color: #ffffff;
    }
    .backward-panel .val-box.target {
      border-color: #f59e0b;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(217, 119, 6, 0.15);
    }

    .panel-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .badge-tag {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #475569;
    }

    .flow-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      position: relative;
    }

    .val-box {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .val-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
    }

    .val-math {
      font-size: 18px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.1;
    }

    .flow-arrow-group {
      display: flex;
      align-items: center;
      gap: 3px;
      flex-shrink: 0;
    }

    .arrow-line {
      width: 14px;
      height: 2px;
      background: #94a3b8;
    }

    .op-box {
      padding: 5px 9px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .arrow-head {
      width: 0;
      height: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 6px solid #94a3b8;
    }

    /* Interactive Stepper / Preset Buttons */
    .controls {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
    }

    .btn-step {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease, border-color 0.15s ease;
    }

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

    .btn-step.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="rule-badge">Rule: y = x + 12</div>

  <div class="panels-container">
    
    <div class="panel-card forward-panel">
      <div class="panel-top">
        <span class="badge-tag">Forward</span>
        <span class="panel-title">Find Output</span>
      </div>
      <div class="flow-row">
        <div class="val-box">
          <span class="val-label">Input x</span>
          <span class="val-math" id="fwd-in">50</span>
        </div>
        <div class="flow-arrow-group">
          <div class="arrow-line"></div>
          <div class="op-box">+ 12</div>
          <div class="arrow-head"></div>
        </div>
        <div class="val-box target">
          <span class="val-label">Output y</span>
          <span class="val-math" id="fwd-out">62</span>
        </div>
      </div>
    </div>

    
    <div class="panel-card backward-panel">
      <div class="panel-top">
        <span class="badge-tag">Backward</span>
        <span class="panel-title">Find Input</span>
      </div>
      <div class="flow-row">
        <div class="val-box">
          <span class="val-label">Output y</span>
          <span class="val-math" id="bwd-in">90</span>
        </div>
        <div class="flow-arrow-group">
          <div class="arrow-line"></div>
          <div class="op-box">− 12</div>
          <div class="arrow-head"></div>
        </div>
        <div class="val-box target">
          <span class="val-label">Input x</span>
          <span class="val-math" id="bwd-out">78</span>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-step active" onclick="setPreset(0)">Example 1</button>
    <button class="btn-step" onclick="setPreset(1)">Example 2</button>
    <button class="btn-step" onclick="setPreset(2)">Example 3</button>
  </div>

  <script>
    const presets = [
      { fwdIn: 50, fwdOut: 62, bwdIn: 90, bwdOut: 78 },
      { fwdIn: 18, fwdOut: 30, bwdIn: 40, bwdOut: 28 },
      { fwdIn: 100, fwdOut: 112, bwdIn: 120, bwdOut: 108 }
    ];

    function setPreset(idx) {
      const p = presets[idx];
      document.getElementById('fwd-in').textContent = p.fwdIn;
      document.getElementById('fwd-out').textContent = p.fwdOut;
      document.getElementById('bwd-in').textContent = p.bwdIn;
      document.getElementById('bwd-out').textContent = p.bwdOut;

      const btns = document.querySelectorAll('.btn-step');
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });
    }
  </script>
</body>
</html>

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

    /* Selector Pills */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-weight: 700;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .ctrl-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    }

    /* Main Machine Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 250px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }

    /* Coins */
    .coin {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 16px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
      z-index: 2;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }
    .coin.input-coin {
      background: linear-gradient(145deg, #fef08a, #facc15);
      border: 3px solid #eab308;
      color: #713f12;
    }
    .coin.output-coin {
      background: linear-gradient(145deg, #bbf7d0, #4ade80);
      border: 3px solid #16a34a;
      color: #14532d;
    }

    /* Arrows */
    .flow-arrow {
      font-size: 18px;
      color: #94a3b8;
      line-height: 1;
    }

    /* Function Machine Body */
    .machine {
      position: relative;
      width: 180px;
      height: 90px;
      background: linear-gradient(180deg, #38bdf8, #0284c7);
      border: 3px solid #0369a1;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25);
    }
    /* Funnels */
    .machine::before {
      content: '';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 12px;
      background: #0284c7;
      border: 3px solid #0369a1;
      border-bottom: none;
      border-radius: 6px 6px 0 0;
    }
    .machine::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 44px;
      height: 12px;
      background: #0284c7;
      border: 3px solid #0369a1;
      border-top: none;
      border-radius: 0 0 6px 6px;
    }

    .machine-title {
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      opacity: 0.9;
      font-weight: 700;
    }
    .machine-rule {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.5px;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    /* Equation Result Pill */
    .equation-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 18px;
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .eq-var-y { color: #16a34a; }
    .eq-var-x { color: #d97706; }
    .eq-op { color: #0284c7; }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="ctrl-btn" data-val="1">x = 1</button>
    <button class="ctrl-btn" data-val="2">x = 2</button>
    <button class="ctrl-btn active" data-val="3">x = 3</button>
    <button class="ctrl-btn" data-val="4">x = 4</button>
  </div>

  
  <div class="stage">
    
    <div class="coin input-coin" id="coinIn">x = 3</div>
    
    <div class="flow-arrow">▼</div>

    
    <div class="machine">
      <span class="machine-title">Function</span>
      <span class="machine-rule">+ 5</span>
    </div>

    <div class="flow-arrow">▼</div>

    
    <div class="coin output-coin" id="coinOut">y = 8</div>
  </div>

  
  <div class="equation-card">
    <span class="eq-var-y" id="eqY">y</span>
    <span>=</span>
    <span class="eq-var-x" id="eqX">x</span>
    <span class="eq-op">+ 5</span>
    <span style="color:#94a3b8; margin: 0 4px;">→</span>
    <span id="eqCalc" style="font-weight:800; color:#1e2945;">3 + 5 = 8</span>
  </div>

  <script>
    const buttons = document.querySelectorAll('.ctrl-btn');
    const coinIn = document.getElementById('coinIn');
    const coinOut = document.getElementById('coinOut');
    const eqCalc = document.getElementById('eqCalc');

    function update(x) {
      const y = x + 5;
      
      // Animate coins
      coinIn.style.opacity = '0';
      coinIn.style.transform = 'translateY(-8px) scale(0.9)';
      coinOut.style.opacity = '0';
      coinOut.style.transform = 'translateY(8px) scale(0.9)';

      setTimeout(() => {
        coinIn.textContent = `x = ${x}`;
        coinOut.textContent = `y = ${y}`;
        eqCalc.textContent = `${x} + 5 = ${y}`;

        coinIn.style.opacity = '1';
        coinIn.style.transform = 'translateY(0) scale(1)';
        coinOut.style.opacity = '1';
        coinOut.style.transform = 'translateY(0) scale(1)';
      }, 150);
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        update(parseInt(btn.getAttribute('data-val'), 10));
      });
    });
  </script>
</body>
</html>

<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram-content {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .rule-chip {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 15px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      letter-spacing: 0.5px;
    }

    .table-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .table-headers {
      display: grid;
      grid-template-columns: 1fr 90px 1fr;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 0 4px;
    }

    .row-item {
      display: grid;
      grid-template-columns: 1fr 90px 1fr;
      align-items: center;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 12px;
      cursor: pointer;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
      user-select: none;
    }

    .row-item.active {
      background: #f0fdf4;
      border-color: #22c55e;
      box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
    }

    .cell {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .val-badge {
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      font-size: 18px;
      font-weight: 700;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .val-x {
      background: #e0f2fe;
      color: #0369a1;
    }

    .row-item.active .val-x {
      background: #0284c7;
      color: #ffffff;
    }

    .val-y {
      background: #dcfce7;
      color: #15803d;
    }

    .row-item.active .val-y {
      background: #16a34a;
      color: #ffffff;
    }

    .op-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .rule-tag {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }

    .row-item.active .rule-tag {
      background: #22c55e;
      border-color: #16a34a;
      color: #ffffff;
    }

    .arrow {
      color: #94a3b8;
      font-size: 14px;
      transition: color 0.3s ease;
    }

    .row-item.active .arrow {
      color: #16a34a;
    }

    .sequence-banner {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
    }

    .seq-label {
      font-weight: 600;
      color: #64748b;
    }

    .seq-values {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 16px;
      color: #1e2945;
    }

    .seq-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      transition: all 0.3s ease;
    }

    .seq-num.active {
      background: #16a34a;
      border-color: #16a34a;
      color: #ffffff;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

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

    .ctrl-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <div class="diagram-content">
    <div class="header">
      <div class="rule-chip">Rule: y = x + 4</div>
      <div class="controls">
        <button id="playBtn" class="ctrl-btn" aria-label="Toggle auto-play">
          <span id="playIcon">⏸</span> Auto
        </button>
      </div>
    </div>

    <div class="table-container">
      <div class="table-headers">
        <div>Input (x)</div>
        <div>Rule</div>
        <div>Output (y)</div>
      </div>

      <div class="step row-item active" data-index="0">
        <div class="cell"><div class="val-badge val-x">1</div></div>
        <div class="op-cell">
          <span class="rule-tag">+ 4</span>
          <span class="arrow">→</span>
        </div>
        <div class="cell"><div class="val-badge val-y">5</div></div>
      </div>

      <div class="step row-item" data-index="1">
        <div class="cell"><div class="val-badge val-x">2</div></div>
        <div class="op-cell">
          <span class="rule-tag">+ 4</span>
          <span class="arrow">→</span>
        </div>
        <div class="cell"><div class="val-badge val-y">6</div></div>
      </div>

      <div class="step row-item" data-index="2">
        <div class="cell"><div class="val-badge val-x">3</div></div>
        <div class="op-cell">
          <span class="rule-tag">+ 4</span>
          <span class="arrow">→</span>
        </div>
        <div class="cell"><div class="val-badge val-y">7</div></div>
      </div>

      <div class="step row-item" data-index="3">
        <div class="cell"><div class="val-badge val-x">4</div></div>
        <div class="op-cell">
          <span class="rule-tag">+ 4</span>
          <span class="arrow">→</span>
        </div>
        <div class="cell"><div class="val-badge val-y">8</div></div>
      </div>
    </div>

    <div class="sequence-banner">
      <span class="seq-label">Output Sequence:</span>
      <div class="seq-values">
        <span class="seq-num active" id="seq0">5</span>,
        <span class="seq-num" id="seq1">6</span>,
        <span class="seq-num" id="seq2">7</span>,
        <span class="seq-num" id="seq3">8</span>
        <span style="color: #94a3b8; margin-left: 2px;">...</span>
      </div>
    </div>
  </div>

  <script>
    const seqNums = [$('#seq0'), $('#seq1'), $('#seq2'), $('#seq3')];

    const player = new StepPlayer('.step', {
      interval: 3200,
      onChange: (index) => {
        seqNums.forEach((el, i) => {
          if (i === index) {
            el.classList.add('active');
          } else {
            el.classList.remove('active');
          }
        });
      }
    });

    $$('.row-item').forEach((row, i) => {
      onTap(row, () => {
        player.pause();
        $('#playIcon').textContent = '▶';
        player.goTo(i);
      });
    });

    onTap($('#playBtn'), () => {
      player.toggle();
      $('#playIcon').textContent = player.playing ? '⏸' : '▶';
    });

    player.start();
  </script>
</body>
</html>

Generating Number Patterns from a Given Rule

Using Numerical Expressions to Generate Patterns

Graphing Numerical Patterns on a Coordinate Plane

Distinguishing Additive and Multiplicative Patterns

math

Patterns, Relationships, and Graphing

Making Patterns with Multiplying Rules

Identifying Relationships Between Corresponding Terms in Two Patterns

Comparing Adding and Multiplying Patterns in Tables

Writing Algebraic Rules for Input-Output Tables Using Variables

Representing Situations with Tables

Representing Situations with Graphs

Comparing Graphs of Adding and Multiplying Patterns

Patterns, Relationships, Tables, and Graphs

Generating Number Patterns From Rules

Identifying Relationships Between Corresponding Terms

Creating Ordered Pairs From Two Patterns

Introduction to the Coordinate Plane

Graphing Ordered Pairs on the Coordinate Plane

Graphing Pattern Relationships on the Coordinate Plane

Generating and Graphing Number Patterns

Finding the Rule From a Pattern

Comparing Two Patterns Graphically

Coordinate Plane Word Problems

Patterns With Addition Rules

Patterns With Multiplication Rules

Explaining Pattern Relationships Informally

Multi-Step Pattern Word Problems with Equations

Analyzing Patterns and Coordinate Plane Applications

Making Line Plots With Fractional Measurements

Interpreting Line Plots With Fractions

Introduction to Volume: Counting Unit Cubes

Finding Volume Using Multiplication

Classifying Two-Dimensional Figures by Properties

Understanding Hierarchies of Shapes

Line Plots, Volume, and Geometry

Understanding Numerical Patterns: y = ax

Understanding Numerical Patterns: y = x + a

Generating Patterns from Multiplicative Rules

Generating Patterns from Additive Rules

Building Input-Output Tables for Patterns

Graphing Numerical Patterns on the Coordinate Plane

Comparing Additive and Multiplicative Patterns

Finding the Rule from a Pattern Table

Generating and Graphing Numerical Patterns

Patterns in Number Lines and Hundred Charts

Extending Patterns to Find Unknown Terms

Graphing Two Patterns on the Same Coordinate Plane

Real-World Pattern Problems

Analyzing Pattern Relationships Graphically

Creating Your Own Number Patterns

Patterns with Fractions and Decimals

Pattern Review and Assessment

Analyzing and Applying Numerical Patterns

Identifying Additive Patterns from Tables

Identifying Multiplicative Patterns from Tables

Comparing Additive and Multiplicative Patterns in Tables

Identifying Pattern Types from Graphs

Distinguishing Patterns Using Tables and Graphs Together

Additive and Multiplicative Patterns in Real-World Situations

Understanding Perpendicular Axes

Understanding the Origin and Ordered Pairs

x-Axis and y-Axis Conventions

Plotting Points in the First Quadrant

Identifying Coordinates of Points

Coordinate Plane Fundamentals

Graphing Real-World Problems on the Coordinate Plane

Interpreting Coordinate Values in Context

Finding Distance Between Points on the Coordinate Plane

Coordinate Plane Mapping Problems

Coordinate Grid Patterns and Shapes

Coordinate Plane Applications

Properties of Polygons: Review

Categories of Quadrilaterals

Attributes of Rectangles and Squares

Classifying Triangles by Angles

Classifying Triangles by Sides

Understanding That Subcategories Share Attributes

Properties and Classification of Two-Dimensional Figures

The Hierarchy of Quadrilaterals

The Hierarchy of Triangles

Classifying Polygons in a Hierarchy

Drawing and Classifying Shapes From Properties

Sorting Shapes Into Venn Diagrams

Real-World Shape Classification Problems

Shape Classification Mixed Practice

Hierarchies and Applications of Two-Dimensional Figures

Patrones aditivos crecientes y decrecientes en secuencias numéricas

Patrones multiplicativos y duplicación en secuencias numéricas

Patrones geométricos de crecimiento: figuras y arreglos espaciales

Organización de patrones en tablas de entrada y salida

Formulación de reglas verbales para el término general de una secuencia

Predicción de términos lejanos en secuencias sin dibujar todos los pasos

Descripción e interpretación de variaciones en gráficos de líneas

Comparación de ritmos de crecimiento en gráficas: rápido vs. lento

Asociación entre historias reales, tablas y gráficos de cambio

Resolución de acertijos y desafíos con patrones complejos

Patrones, secuencias y variación

Concepto de igualdad como equilibrio en la balanza

Construcción de igualdades numéricas con operaciones combinadas

Resolución de ecuaciones con incógnitas en cuadros o letras

Construcción e interpretación de desigualdades: mayor y menor que

Resolución de desafíos de desigualdades y rangos admisibles

Relaciones de dependencia entre cantidades: variable dependiente e independiente

Dependencia temporal en fenómenos económicos: ahorro y presupuesto

Dependencia temporal en ciencias naturales: crecimiento de plantas y temperatura

OGM.6.OA.4

Aligned learning resources

Related diagrams