<!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;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    .table-header {
      display: grid;
      grid-template-columns: 70px 1fr 1.3fr;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      padding: 0 10px;
      text-align: center;
    }

    .row-card {
      display: grid;
      grid-template-columns: 70px 1fr 1.3fr;
      gap: 8px;
      align-items: center;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 10px;
      position: relative;
      transition: border-color 0.25s ease, background-color 0.25s ease;
      cursor: pointer;
    }

    .row-card.active {
      border-color: #0284c7;
      background: #f0f9ff;
    }

    .row-card.general {
      background: #faf5ff;
      border-color: #cbd5e1;
    }
    .row-card.general.active {
      border-color: #9333ea;
      background: #f3e8ff;
    }

    .step-col {
      font-weight: 700;
      font-size: 16px;
      text-align: center;
      color: #334155;
    }

    .visual-col {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .tile-grid {
      display: grid;
      gap: 2px;
      align-items: center;
      justify-content: center;
    }

    .tile {
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
    .tile-fixed {
      background: #eab308;
    }
    .tile-growth {
      background: #0284c7;
    }

    .tile-total {
      font-weight: 800;
      font-size: 17px;
      min-width: 28px;
      text-align: right;
    }

    .breakdown-col {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 15px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      white-space: nowrap;
    }

    .c-blue {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 5px;
      border-radius: 4px;
    }
    .c-step {
      color: #334155;
      padding: 2px 2px;
    }
    .c-yellow {
      color: #a16207;
      background: #fef08a;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .c-op {
      color: #64748b;
      margin: 0 1px;
    }

    /* Difference arrow badge */
    .diff-badge {
      align-self: center;
      margin: -4px auto -4px 34px;
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 3px;
      z-index: 2;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }

    .legend {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-box {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }

    @media (max-width: 420px) {
      .table-header {
        grid-template-columns: 50px 1fr 1.2fr;
        font-size: 11px;
      }
      .row-card {
        grid-template-columns: 50px 1fr 1.2fr;
        padding: 6px 6px;
      }
      .step-col { font-size: 14px; }
      .tile-total { font-size: 15px; }
      .breakdown-col { font-size: 13px; }
      .diff-badge { margin-left: 20px; font-size: 10px; }
      .tile { width: 8px; height: 8px; }
    }
  </style>
</head>
<body>

  <div class="table-container">
    <div class="table-header">
      <div>Step</div>
      <div>Visual Count</div>
      <div>Rule Breakdown</div>
    </div>

    
    <div class="row-card active" onclick="selectRow(0)">
      <div class="step-col">n = 1</div>
      <div class="visual-col">
        <div class="tile-grid" style="grid-template-columns: repeat(3, auto);">
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-fixed"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
        </div>
        <div class="tile-total">5</div>
      </div>
      <div class="breakdown-col">
        <span class="c-blue">4</span><span class="c-step">(1)</span>
        <span class="c-op">+</span>
        <span class="c-yellow">1</span>
        <span class="c-op">=</span>
        <span>5</span>
      </div>
    </div>

    <div class="diff-badge">↓ +4</div>

    
    <div class="row-card" onclick="selectRow(1)">
      <div class="step-col">n = 2</div>
      <div class="visual-col">
        <div class="tile-grid" style="grid-template-columns: repeat(5, auto);">
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>

          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>

          <div class="tile tile-growth"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-fixed"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-growth"></div>

          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>

          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
        </div>
        <div class="tile-total">9</div>
      </div>
      <div class="breakdown-col">
        <span class="c-blue">4</span><span class="c-step">(2)</span>
        <span class="c-op">+</span>
        <span class="c-yellow">1</span>
        <span class="c-op">=</span>
        <span>9</span>
      </div>
    </div>

    <div class="diff-badge">↓ +4</div>

    
    <div class="row-card" onclick="selectRow(2)">
      <div class="step-col">n = 3</div>
      <div class="visual-col">
        <div class="tile-grid" style="grid-template-columns: repeat(7, auto);">
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>

          <div class="tile tile-growth"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-fixed"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-growth"></div>
          <div class="tile tile-growth"></div>

          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile tile-growth"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
          <div class="tile" style="visibility:hidden"></div>
        </div>
        <div class="tile-total">13</div>
      </div>
      <div class="breakdown-col">
        <span class="c-blue">4</span><span class="c-step">(3)</span>
        <span class="c-op">+</span>
        <span class="c-yellow">1</span>
        <span class="c-op">=</span>
        <span>13</span>
      </div>
    </div>

    
    <div class="row-card general" onclick="selectRow(3)">
      <div class="step-col">n</div>
      <div class="visual-col">
        <div style="font-size: 13px; font-weight: 700; color: #64748b;">Step n</div>
        <div class="tile-total">?</div>
      </div>
      <div class="breakdown-col">
        <span class="c-blue">4</span><span class="c-step">n</span>
        <span class="c-op">+</span>
        <span class="c-yellow">1</span>
      </div>
    </div>
  </div>

  <div class="legend">
    <div class="legend-item">
      <div class="legend-box" style="background:#0284c7;"></div>
      <span>Growth (+4 per step)</span>
    </div>
    <div class="legend-item">
      <div class="legend-box" style="background:#eab308;"></div>
      <span>Starting Tile (+1)</span>
    </div>
  </div>

  <script>
    const rows = document.querySelectorAll('.row-card');
    let currentIndex = 0;
    let autoPlayTimer;

    function selectRow(index) {
      rows.forEach(r => r.classList.remove('active'));
      rows[index].classList.add('active');
      currentIndex = index;
      resetAutoPlay();
    }

    function resetAutoPlay() {
      clearInterval(autoPlayTimer);
      autoPlayTimer = setInterval(() => {
        currentIndex = (currentIndex + 1) % rows.length;
        rows.forEach(r => r.classList.remove('active'));
        rows[currentIndex].classList.add('active');
      }, 3500);
    }

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

Analyzing Visual Growing Patterns and Spatial Arrays

<!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 {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
    }

    .legend {
      display: flex;
      gap: 16px;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 6px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .legend-box {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }

    .legend-box.core {
      background: #0d9488;
    }

    .legend-box.added {
      background: #f43f5e;
    }

    .figures-container {
      display: flex;
      width: 100%;
      max-width: 600px;
      justify-content: space-around;
      align-items: flex-end;
      gap: 8px;
      flex: 1;
      padding-bottom: 8px;
    }

    .figure-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      max-width: 180px;
    }

    .h-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5px;
      align-items: center;
      justify-items: center;
      margin-bottom: 8px;
    }

    .tile {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 3px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .tile.core {
      background: #0d9488;
      box-shadow: 0 1px 2px rgba(13, 148, 136, 0.3);
    }

    .tile.added {
      background: #f43f5e;
      box-shadow: 0 1px 2px rgba(244, 63, 94, 0.3);
    }

    .tile.empty {
      visibility: hidden;
    }

    .label-step {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }

    .label-math {
      font-size: 13px;
      font-weight: 600;
      color: #0d9488;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
      border: 1px solid #e2e8f0;
    }

    .label-math span {
      color: #f43f5e;
    }

    .total-badge {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
      font-weight: 600;
    }

    /* Column Width Proportions */
    #grid-step-1 { width: 54px; }
    #grid-step-2 { width: 66px; }
    #grid-step-3 { width: 78px; }

    @media (max-width: 400px) {
      #grid-step-1 { width: 44px; }
      #grid-step-2 { width: 54px; }
      #grid-step-3 { width: 64px; }
      .legend { font-size: 12px; }
      .label-step { font-size: 12px; }
      .label-math { font-size: 11px; padding: 2px 6px; }
      .total-badge { font-size: 10px; }
    }
  </style>
</head>
<body>

  
  <div class="legend">
    <div class="legend-item">
      <div class="legend-box core"></div>
      <span>Fixed Core (3)</span>
    </div>
    <div class="legend-item">
      <div class="legend-box added"></div>
      <span>+4 per Step</span>
    </div>
  </div>

  
  <div class="figures-container">

    
    <div class="figure-card">
      <div id="grid-step-1" class="h-grid" style="grid-template-rows: repeat(3, 1fr);">
        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile core"></div>
        <div class="tile core"></div>
        <div class="tile core"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>
      </div>
      <div class="label-step">Step 1</div>
      <div class="label-math">3 + <span>4(1)</span></div>
      <div class="total-badge">= 7 tiles</div>
    </div>

    
    <div class="figure-card">
      <div id="grid-step-2" class="h-grid" style="grid-template-rows: repeat(5, 1fr);">
        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile core"></div>
        <div class="tile core"></div>
        <div class="tile core"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>
      </div>
      <div class="label-step">Step 2</div>
      <div class="label-math">3 + <span>4(2)</span></div>
      <div class="total-badge">= 11 tiles</div>
    </div>

    
    <div class="figure-card">
      <div id="grid-step-3" class="h-grid" style="grid-template-rows: repeat(7, 1fr);">
        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile core"></div>
        <div class="tile core"></div>
        <div class="tile core"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>

        
        <div class="tile added"></div>
        <div class="tile empty"></div>
        <div class="tile added"></div>
      </div>
      <div class="label-step">Step 3</div>
      <div class="label-math">3 + <span>4(3)</span></div>
      <div class="total-badge">= 15 tiles</div>
    </div>

  </div>

</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">
  <title>Growing Plus Pattern</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background: #f8f9fa;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .legend {
      display: flex;
      gap: 16px;
      margin-bottom: 14px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      padding: 4px 10px;
      border-radius: 20px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .legend-item:active {
      transform: scale(0.98);
    }
    .legend-item.dimmed {
      opacity: 0.45;
    }
    .swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }
    .swatch-base {
      background: #f59e0b;
      border: 1.5px solid #d97706;
    }
    .swatch-arm {
      background: #0284c7;
      border: 1.5px solid #0369a1;
    }

    .cards-row {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 580px;
      justify-content: center;
      align-items: stretch;
    }
    .step-card {
      flex: 1;
      min-width: 100px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    }
    .step-header {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
    }
    .grid-container {
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }
    .pattern-grid {
      display: grid;
      gap: 2px;
    }
    .grid-1 {
      grid-template-columns: repeat(3, 12px);
      grid-template-rows: repeat(3, 12px);
    }
    .grid-2 {
      grid-template-columns: repeat(5, 12px);
      grid-template-rows: repeat(5, 12px);
    }
    .grid-3 {
      grid-template-columns: repeat(7, 12px);
      grid-template-rows: repeat(7, 12px);
    }

    .tile {
      width: 12px;
      height: 12px;
      border-radius: 2.5px;
      transition: opacity 0.25s ease, filter 0.25s ease;
    }
    .tile.base {
      background: #fbbf24;
      border: 1.5px solid #d97706;
    }
    .tile.arm {
      background: #38bdf8;
      border: 1.5px solid #0284c7;
    }
    .tile.empty {
      background: transparent;
      border: 1.5px solid transparent;
    }

    .tile.dimmed {
      opacity: 0.18;
      filter: grayscale(40%);
    }

    .step-footer {
      text-align: center;
      width: 100%;
    }
    .formula {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 2px;
    }
    .total-count {
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="legend">
    <div class="legend-item" id="btnBase" onclick="toggleFocus('base')">
      <span class="swatch swatch-base"></span>
      <span>Fixed Base (+1)</span>
    </div>
    <div class="legend-item" id="btnArm" onclick="toggleFocus('arm')">
      <span class="swatch swatch-arm"></span>
      <span>Growing Arms (+4 each step)</span>
    </div>
  </div>

  <div class="cards-row">
    
    <div class="step-card">
      <div class="step-header">Step 1</div>
      <div class="grid-container">
        <div class="pattern-grid grid-1">
          <div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div>
          <div class="tile arm"></div><div class="tile base"></div><div class="tile arm"></div>
          <div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div>
        </div>
      </div>
      <div class="step-footer">
        <div class="formula">1 + 4(1)</div>
        <div class="total-count">5 tiles</div>
      </div>
    </div>

    
    <div class="step-card">
      <div class="step-header">Step 2</div>
      <div class="grid-container">
        <div class="pattern-grid grid-2">
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile arm"></div><div class="tile arm"></div><div class="tile base"></div><div class="tile arm"></div><div class="tile arm"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div>
        </div>
      </div>
      <div class="step-footer">
        <div class="formula">1 + 4(2)</div>
        <div class="total-count">9 tiles</div>
      </div>
    </div>

    
    <div class="step-card">
      <div class="step-header">Step 3</div>
      <div class="grid-container">
        <div class="pattern-grid grid-3">
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile arm"></div><div class="tile arm"></div><div class="tile arm"></div><div class="tile base"></div><div class="tile arm"></div><div class="tile arm"></div><div class="tile arm"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div>
          <div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile arm"></div><div class="tile empty"></div><div class="tile empty"></div><div class="tile empty"></div>
        </div>
      </div>
      <div class="step-footer">
        <div class="formula">1 + 4(3)</div>
        <div class="total-count">13 tiles</div>
      </div>
    </div>
  </div>

  <script>
    let activeFilter = 'all';

    function toggleFocus(type) {
      if (activeFilter === type) {
        activeFilter = 'all';
      } else {
        activeFilter = type;
      }

      const btnBase = document.getElementById('btnBase');
      const btnArm = document.getElementById('btnArm');
      const baseTiles = document.querySelectorAll('.tile.base');
      const armTiles = document.querySelectorAll('.tile.arm');

      if (activeFilter === 'base') {
        btnBase.classList.remove('dimmed');
        btnArm.classList.add('dimmed');
        baseTiles.forEach(t => t.classList.remove('dimmed'));
        armTiles.forEach(t => t.classList.add('dimmed'));
      } else if (activeFilter === 'arm') {
        btnBase.classList.add('dimmed');
        btnArm.classList.remove('dimmed');
        baseTiles.forEach(t => t.classList.add('dimmed'));
        armTiles.forEach(t => t.classList.remove('dimmed'));
      } else {
        btnBase.classList.remove('dimmed');
        btnArm.classList.remove('dimmed');
        baseTiles.forEach(t => t.classList.remove('dimmed'));
        armTiles.forEach(t => t.classList.remove('dimmed'));
      }
    }
  </script>
</body>
</html>

O que é um algoritmo? Passos para resolver problemas

Escrevendo algoritmos em linguagem natural

Fluxogramas: símbolos e convenções básicas

Construindo fluxograma: um número é par?

Fluxograma: verificando se é múltiplo de 3

Algoritmo para construção de dobraduras

Algoritmo de deslocamento usando pontos de referência

Algoritmo para construção de um polígono

Fluxograma para resolver um problema matemático

Algoritmos em contextos do cotidiano

math

Algoritmos e fluxogramas: lógica passo a passo

体育运动中的数学现象与课题确立

400米标准跑道的结构剖析与周长计算

探究不同跑道起跑线的前申差计算公式

200米与400米赛跑起跑线设定的实地模拟

单循环赛制场次计算与对阵轮次编排

单淘汰赛制场次计算与晋级树状图编排

球类比赛积分表计算与排名积分模型

体育中的数学：赛道几何与赛制编排

篮球投篮命中率与罚球命中率统计分析

运动员多维技术指标雷达图的绘制与解读

裁判打分规则剖析：截尾平均数与极值剔除原理

运动心率区间测算与科学锻炼强度评估

体育竞技数据的趋势预测与排兵布阵策略

校园体育节赛程规划与成绩统计综合设计

“体育中的数学”课题答辩、成果分享与心得交流

体育中的数学：竞技数据与运动表现分析

Identifying Term-to-Term Rules in Linear Sequences

Generating Sequences Given a Start Number and Rule

Finding Missing Terms Within Linear Sequences

Linear Sequences Crossing Zero into Negative Numbers

Linear Sequences with Decimals and Fractions

Describing Visual Spatial Patterns with Numbers

Exploring Term-to-Term Linear Sequences

Using Function Machines and Input-Output Tables

Finding the Position-to-Term Rule for Multiples

Finding Two-Step Position-to-Term Rules

Calculating Any Term in a Sequence Like the 100th Term

Testing Whether a Number Is a Member of a Sequence

Word Problems Involving Linear Growth and Decay

Sequence Investigations and Reasoning Challenges

Position-to-Term Rules and Algebraic Sequences

Finding the Rule for Linear Number Sequences

Distinguishing Recursive and Explicit Sequence Rules

Finding Position-to-Term Algebraic Formulas for Sequences

Using General Rules to Predict Far Terms in Patterns

Writing Algebraic Rules for Input-Output Tables Using Variables

Modeling Algebraic Rules Using Flowcharts and Function Machines

Visual Growing Patterns, Numerical Sequences, and Function Machines

Recognising Growing Visual Patterns

Describing Patterns Using Rules

Number Patterns with Fractions

Number Patterns with Decimals

Connecting Position Numbers to Values in a Sequence

Finding the Next Term in a Pattern

Finding the nth Term in a Growing Pattern

Growing Patterns and Sequences

Creating Algorithms to Generate Number Sets

Following Step-by-Step Number Generation Rules

Identifying Patterns in Generated Number Sets

Explaining Emerging Patterns from Algorithms

Algorithms and Number Generation

Identificación de variables dependientes e independientes

Conjunto de valores posibles en cantidades variables ligadas

Patrones en secuencias numéricas y figurales: regla de formación

Representación de la variación: tablas, diagramas y lenguaje cotidiano

Gráficas cartesianas de puntos y su interpretación en contexto

Gráficas continuas y formadas por segmentos: interpretación de historias

Correlación positiva y negativa en tablas y gráficas

Proporcionalidad directa: constante de proporcionalidad y gráfica lineal

Proporcionalidad inversa: producto constante y curva hiperbólica

Variaciones lineales no proporcionales: desplazamiento inicial

Aplicaciones geométricas de la variación: perímetro, área y escala

Variación, patrones y relaciones de proporcionalidad

El concepto de igualdad y equilibrio en la balanza

Traducción entre lenguaje común y expresiones algebraicas

Solución de ecuaciones aditivas por complementación y descomposición

Método de ensayo y error sistemático en la solución de ecuaciones

Método de operaciones inversas: hacia atrás o deshacer pasos

Solución de ecuaciones multiplicativas y mixtas ax + b = c

Planteamiento y resolución de problemas verbales con ecuaciones lineales

Ecuaciones lineales y métodos informales de solución

Introduction to Algebraic Expressions

Writing Expressions with Variables

Translating Words to Expressions: One Operation

Translating Words to Expressions: Two Operations

Writing Expressions from Real-World Situations

Reading Algebraic Expressions Aloud

Naming Parts of Algebraic Expressions

Identifying Variables, Coefficients, and Constants

Writing and Reading Algebraic Expressions

Evaluating Expressions by Substituting Values

Evaluating Expressions with Exponents and Variables

Evaluating Expressions with Multiple Steps

Evaluating Expressions with Fraction Values

Evaluating Expressions with Decimal Values

Evaluating Algebraic Expressions

Co to jest równanie

Rozwiązanie równania – pojęcie

Sprawdzanie, czy dana liczba jest rozwiązaniem równania

Równania pierwszego, drugiego i trzeciego stopnia

Sprawdzanie rozwiązań w równaniach wyższych stopni

Znajdowanie rozwiązań całkowitych w zadanym przedziale

Wstęp do równań – pojęcia i sprawdzanie rozwiązań

Matching Expressions to Word Situations

Using Variables to Represent Unknown Quantities

Writing Equations from Word Problems: p(x + q) = r

Writing and Solving Equations from Real-World Scenarios

Algebraic Expressions Review

Applying Algebraic Expressions and Equations

Ile rozwiązań ma równanie

Równania bez rozwiązań i równania tożsamościowe

Zadania tekstowe – układanie prostych równań

Zadania tekstowe – liczby i ich właściwości

Zadania tekstowe – wiek

Zadania tekstowe – geometria

Zadania tekstowe – ruch i prędkość

Zadania tekstowe – zakupy i ceny

Zadania tekstowe – procenty jako równania

Sprawdzenie umiejętności – równania

Rodzaje rozwiązań i zadania tekstowe z równaniami

Identifying Independent and Dependent Quantities from Tables

Identifying Independent and Dependent Quantities from Graphs

Distinguishing Independent and Dependent Quantities in Real-World Contexts

Writing Equations from Tables of Related Quantities

Identifying Independent and Dependent Quantities

Representing Situations with Verbal Descriptions

Representing Situations with Tables

Representing Situations with Graphs

Representing Situations with Equations (y = kx)

Representing Situations with Equations (y = x + b)

Matching Multiple Representations of Algebraic Relationships

Real-World Applications of Algebraic Relationships

Representing Relationships Between Quantities

Variável vs incógnita: o que diferencia cada uma

A letra como variável: expressando relações entre grandezas

A letra como incógnita: o valor a descobrir

Diferenciando variável e incógnita na prática

Sequências recursivas: cada termo depende do anterior

Sequências não recursivas: a regra não depende do termo anterior

Recursão nas artes e na literatura

Simbologia algébrica para expressar regularidades

Expressando o padrão de uma sequência com álgebra

Expressões algébricas equivalentes para a mesma sequência

Verificando a equivalência de expressões algébricas

Introdução à álgebra: variáveis e sequências

Sequências não recursivas: identificando a regularidade

Construindo um fluxograma para sequência não recursiva

Prevendo termos distantes em sequências não recursivas

Sequências recursivas: identificando a regra

Construindo um fluxograma para sequência recursiva

Aplicando algoritmos recursivos a novas sequências

Sequências e algoritmos: regularidades e fluxogramas

OGM.7.EE.6

OGM.7.EE.6

Aligned learning resources

Related diagrams