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 rummaging through an unsorted bag of keys to find the one that unlocks your front door. You grab one key at a time, test it, and keep checking until you either find the right one or run out of keys.

This exact approach is the **linear search** algorithm (also called sequential search) — checking each element of a list one by one in order until a match is found.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      padding: 16px 12px;
      user-select: none;
    }

    .header-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .target-pill {
      background: #ffffff;
      border: 2px solid #2563eb;
      border-radius: 999px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #1e293b;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .target-val {
      color: #2563eb;
      font-weight: 800;
    }

    /* Target Selector buttons */
    .target-selector {
      display: flex;
      gap: 6px;
    }

    .t-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .t-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    /* Main Stage */
    .stage {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      position: relative;
      margin: auto 0;
    }

    /* Comparison Status Callout */
    .compare-status {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      padding: 6px 16px;
      border-radius: 8px;
      transition: all 0.3s ease;
      letter-spacing: 0.5px;
    }

    .status-check {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }

    .status-mismatch {
      background: #f1f5f9;
      color: #64748b;
      border: 1px solid #cbd5e1;
    }

    .status-found {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .status-notfound {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    /* Array Display */
    .array-container {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
      position: relative;
    }

    .cell-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      max-width: 68px;
    }

    .index-label {
      font-size: 12px;
      font-weight: 600;
      color: #94a3b8;
    }

    .cell-box {
      width: 100%;
      aspect-ratio: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #334155;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.3s ease;
      position: relative;
    }

    .cell-box.current {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
      color: #2563eb;
    }

    .cell-box.checked {
      background: #f1f5f9;
      border-color: #cbd5e1;
      color: #94a3b8;
    }

    .cell-box.matched {
      background: #ecfdf5;
      border-color: #10b981;
      color: #059669;
      box-shadow: 0 0 0 3px rgba(16,185,129,0.25);
    }

    /* Pointer Row */
    .pointer-row {
      height: 28px;
      width: 100%;
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .pointer-slot {
      flex: 1;
      max-width: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #2563eb;
      font-weight: 800;
      opacity: 0;
      transform: translateY(4px);
      transition: all 0.3s ease;
    }

    .pointer-slot.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Controls */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

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

    .btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .btn-primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="header-row">
    <div class="target-pill">
      Target: <span id="targetDisplay" class="target-val">42</span>
    </div>
    <div class="target-selector">
      <button class="t-btn active" data-val="42">42</button>
      <button class="t-btn" data-val="12">12</button>
      <button class="t-btn" data-val="7">7</button>
      <button class="t-btn" data-val="99">99</button>
    </div>
  </div>

  
  <div class="stage">
    <div id="statusBadge" class="compare-status status-check">i = 0</div>

    <div class="array-container" id="arrayContainer">
      
    </div>

    <div class="pointer-row" id="pointerRow">
      
    </div>
  </div>

  
  <div class="controls-row">
    <button id="prevBtn" class="btn">◀</button>
    <button id="playBtn" class="btn btn-primary">▶</button>
    <button id="nextBtn" class="btn">▶</button>
    <button id="resetBtn" class="btn">↺</button>
  </div>

  <script>
    const array = [12, 5, 8, 42, 19, 7];
    let target = 42;
    let step = 0;
    let timer = null;

    const arrayContainer = document.getElementById('arrayContainer');
    const pointerRow = document.getElementById('pointerRow');
    const statusBadge = document.getElementById('statusBadge');
    const targetDisplay = document.getElementById('targetDisplay');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playBtn = document.getElementById('playBtn');
    const resetBtn = document.getElementById('resetBtn');
    const targetButtons = document.querySelectorAll('.t-btn');

    // Build Array DOM
    function initArray() {
      arrayContainer.innerHTML = '';
      pointerRow.innerHTML = '';
      array.forEach((val, i) => {
        const col = document.createElement('div');
        col.className = 'cell-col';
        col.innerHTML = `
          <span class="index-label">[${i}]</span>
          <div class="cell-box" id="cell-${i}">${val}</div>
        `;
        arrayContainer.appendChild(col);

        const ptr = document.createElement('div');
        ptr.className = 'pointer-slot';
        ptr.id = `ptr-${i}`;
        ptr.textContent = '▲';
        pointerRow.appendChild(ptr);
      });
    }

    function render() {
      const matchIdx = array.indexOf(target);
      const isFinished = step >= array.length || (matchIdx !== -1 && step > matchIdx);

      // Reset array cells and pointers
      array.forEach((val, i) => {
        const cell = document.getElementById(`cell-${i}`);
        const ptr = document.getElementById(`ptr-${i}`);

        cell.className = 'cell-box';
        ptr.className = 'pointer-slot';

        if (i < step) {
          if (val === target) {
            cell.classList.add('matched');
          } else {
            cell.classList.add('checked');
          }
        } else if (i === step) {
          if (val === target) {
            cell.classList.add('matched');
          } else {
            cell.classList.add('current');
          }
          ptr.classList.add('active');
        }
      });

      // Update comparison banner
      if (step < array.length) {
        const currVal = array[step];
        if (currVal === target) {
          statusBadge.className = 'compare-status status-found';
          statusBadge.textContent = `${currVal} = ${target} ✓`;
          pause();
        } else {
          statusBadge.className = 'compare-status status-mismatch';
          statusBadge.textContent = `${currVal} ≠ ${target}`;
        }
      } else {
        if (matchIdx !== -1) {
          statusBadge.className = 'compare-status status-found';
          statusBadge.textContent = `Found at [${matchIdx}] ✓`;
        } else {
          statusBadge.className = 'compare-status status-notfound';
          statusBadge.textContent = `Not Found ✕`;
        }
        pause();
      }

      prevBtn.disabled = step === 0;
      nextBtn.disabled = (matchIdx !== -1 && step >= matchIdx) || step >= array.length;
    }

    function nextStep() {
      const matchIdx = array.indexOf(target);
      if ((matchIdx !== -1 && step >= matchIdx) || step >= array.length) {
        step = 0;
      } else {
        step++;
      }
      render();
    }

    function prevStep() {
      if (step > 0) {
        step--;
        render();
      }
    }

    function reset() {
      step = 0;
      render();
    }

    function play() {
      if (timer) return;
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        const matchIdx = array.indexOf(target);
        if ((matchIdx !== -1 && step >= matchIdx) || step >= array.length) {
          reset();
        } else {
          nextStep();
        }
      }, 1200);
    }

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

    function togglePlay() {
      if (timer) pause();
      else play();
    }

    // Target Selection
    targetButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        pause();
        targetButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        target = parseInt(btn.getAttribute('data-val'), 10);
        targetDisplay.textContent = target;
        reset();
      });
    });

    // Control Listeners
    nextBtn.addEventListener('click', () => { pause(); nextStep(); });
    prevBtn.addEventListener('click', () => { pause(); prevStep(); });
    resetBtn.addEventListener('click', () => { pause(); reset(); });
    playBtn.addEventListener('click', togglePlay);

    // Initial setup
    initArray();
    render();
  </script>
</body>
</html>

How do we write down this sequential logic clearly before translating it into code?

We start an index pointer at 0 and compare the item at that position to our target value. An **iteration** is one complete pass through a loop.

If the current element matches the target, we return the index immediately. If the loop completes without a match, we return `-1` to indicate the element is absent.

<!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>Linear Search Visualizer</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    
    body {
      background: #f8fafc;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

    /* Target Selector */
    .target-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    .target-label {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }
    .target-btn {
      border: 1px solid #cbd5e1;
      background: #f1f5f9;
      color: #1e2945;
      padding: 4px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .target-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    /* Array Display */
    .array-container {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }
    .cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      max-width: 68px;
    }
    .cell-idx {
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 4px;
    }
    .cell-box {
      width: 100%;
      aspect-ratio: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      transition: all 0.3s ease;
    }
    .cell.active .cell-box {
      border-color: #2563eb;
      background: #eff6ff;
      color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }
    .cell.matched .cell-box {
      border-color: #16a34a;
      background: #dcfce7;
      color: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    }
    .cell.checked .cell-box {
      border-color: #cbd5e1;
      background: #f8fafc;
      color: #94a3b8;
    }

    /* Pointer / Scan Area */
    .pointer-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
      height: 24px;
    }
    .pointer-slot {
      flex: 1;
      max-width: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      color: #2563eb;
      opacity: 0;
      transform: translateY(-4px);
      transition: all 0.2s ease;
    }
    .pointer-slot.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Status / Output Panel */
    .status-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 58px;
    }
    .status-expr {
      font-size: 15px;
      font-weight: 600;
      color: #334155;
    }
    .status-result {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
    }
    .res-scan { background: #eff6ff; color: #2563eb; }
    .res-match { background: #dcfce7; color: #16a34a; }
    .res-none { background: #fee2e2; color: #dc2626; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease;
    }
    .btn:active { background: #f1f5f9; }
    .btn-primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .btn-primary:active { background: #1d4ed8; }
  </style>
</head>
<body>

  <div class="main">
    
    <div class="target-bar">
      <span class="target-label">Target:</span>
      <button class="target-btn active" id="btnT7" onclick="setTarget(7)">7</button>
      <button class="target-btn" id="btnT9" onclick="setTarget(9)">9</button>
    </div>

    
    <div class="array-container" id="arrayCells">
      
    </div>

    
    <div class="pointer-row" id="pointerRow">
      
    </div>

    
    <div class="status-card">
      <div class="status-expr" id="statusExpr">i = 0</div>
      <div class="status-result res-scan" id="statusBadge">Checking...</div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" onclick="prevStep()">‹</button>
      <button class="btn btn-primary" id="playBtn" onclick="togglePlay()">⏸</button>
      <button class="btn" id="nextBtn" onclick="nextStep()">›</button>
      <button class="btn" onclick="resetSearch()">↺</button>
    </div>
  </div>

  <script>
    const arr = [12, 4, 30, 7, 18];
    let target = 7;
    let step = 0;
    let timer = null;
    let isPlaying = true;

    const arrayCells = document.getElementById('arrayCells');
    const pointerRow = document.getElementById('pointerRow');
    const statusExpr = document.getElementById('statusExpr');
    const statusBadge = document.getElementById('statusBadge');
    const playBtn = document.getElementById('playBtn');

    function renderDOM() {
      arrayCells.innerHTML = '';
      pointerRow.innerHTML = '';
      arr.forEach((val, idx) => {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.id = `cell-${idx}`;
        cell.innerHTML = `
          <div class="cell-idx">[${idx}]</div>
          <div class="cell-box">${val}</div>
        `;
        arrayCells.appendChild(cell);

        const ptr = document.createElement('div');
        ptr.className = 'pointer-slot';
        ptr.id = `ptr-${idx}`;
        ptr.innerHTML = `▲ i=${idx}`;
        pointerRow.appendChild(ptr);
      });
    }

    function getMaxSteps() {
      const matchIdx = arr.indexOf(target);
      return matchIdx !== -1 ? matchIdx : arr.length;
    }

    function updateView() {
      const maxSteps = getMaxSteps();
      const matchIdx = arr.indexOf(target);

      arr.forEach((val, idx) => {
        const cell = document.getElementById(`cell-${idx}`);
        const ptr = document.getElementById(`ptr-${idx}`);

        cell.className = 'cell';
        ptr.className = 'pointer-slot';

        if (step < maxSteps) {
          if (idx < step) cell.classList.add('checked');
          if (idx === step) {
            cell.classList.add('active');
            ptr.classList.add('active');
          }
        } else {
          // Finished state
          if (matchIdx !== -1) {
            if (idx < matchIdx) cell.classList.add('checked');
            if (idx === matchIdx) {
              cell.classList.add('matched');
              ptr.classList.add('active');
            }
          } else {
            cell.classList.add('checked');
          }
        }
      });

      // Update Evaluation Card
      if (step < arr.length) {
        const currentVal = arr[step];
        if (currentVal === target) {
          statusExpr.innerHTML = `arr[${step}] == ${target} <span style="color:#16a34a;">(Match!)</span>`;
          statusBadge.className = 'status-result res-match';
          statusBadge.textContent = `return ${step}`;
        } else {
          statusExpr.innerHTML = `arr[${step}] (${currentVal}) ≠ ${target}`;
          statusBadge.className = 'status-result res-scan';
          statusBadge.textContent = `i++ → Next`;
        }
      } else {
        statusExpr.innerHTML = `End of array reached`;
        statusBadge.className = 'status-result res-none';
        statusBadge.textContent = `return -1`;
      }
    }

    function nextStep() {
      const maxSteps = getMaxSteps();
      if (step < maxSteps) {
        step++;
      } else {
        step = 0;
      }
      updateView();
    }

    function prevStep() {
      if (step > 0) {
        step--;
      } else {
        step = getMaxSteps();
      }
      updateView();
    }

    function setTarget(t) {
      target = t;
      document.getElementById('btnT7').classList.toggle('active', t === 7);
      document.getElementById('btnT9').classList.toggle('active', t === 9);
      step = 0;
      updateView();
    }

    function resetSearch() {
      step = 0;
      updateView();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) startTimer();
      else clearInterval(timer);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 2500);
    }

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

Now, how does this logic look when implemented in standard JavaScript?

In JavaScript, a standard `for` loop traverses the array by index, returning as soon as a match is detected.

<!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>Linear Search Algorithm</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 480px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #334155;
    }

    .badge-target {
      background: #e0f2fe;
      border-color: #bae6fd;
      color: #0369a1;
    }

    .status-badge {
      transition: all 0.25s ease;
      font-family: ui-monospace, monospace;
    }
    .status-badge.match {
      background: #dcfce7;
      border-color: #86efac;
      color: #15803d;
    }
    .status-badge.mismatch {
      background: #fee2e2;
      border-color: #fca5a5;
      color: #b91c1c;
    }

    /* Array visual */
    .array-container {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      position: relative;
      padding: 24px 0 8px 0;
    }

    .array-slot {
      flex: 1;
      max-width: 64px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .slot-index {
      font-size: 11px;
      color: #94a3b8;
      font-family: ui-monospace, monospace;
      margin-bottom: 4px;
    }

    .slot-cell {
      width: 100%;
      aspect-ratio: 1;
      max-height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      font-size: 17px;
      font-weight: 700;
      color: #334155;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .array-slot.active .slot-cell {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }

    .array-slot.matched .slot-cell {
      border-color: #22c55e;
      background: #f0fdf4;
      color: #16a34a;
      box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    }

    .array-slot.checked .slot-cell {
      opacity: 0.45;
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    /* Pointer arrow */
    .pointer-arrow {
      position: absolute;
      top: 0px;
      transform: translateX(-50%);
      font-size: 14px;
      font-weight: 700;
      color: #0284c7;
      transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1;
    }

    .pointer-label {
      font-size: 11px;
      font-family: ui-monospace, monospace;
      font-weight: 700;
      margin-bottom: 2px;
    }

    /* Code trace box */
    .code-box {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 13px;
      line-height: 1.6;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }

    .code-line {
      display: flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 4px;
      transition: background 0.2s ease;
      color: #64748b;
    }

    .code-line.active {
      background: #eff6ff;
      color: #1e293b;
      font-weight: 600;
    }

    .code-line.active .kw { color: #2563eb; font-weight: 700; }
    .code-line.active .num { color: #d97706; }
    .code-line.active .ret { color: #16a34a; font-weight: 700; }

    .kw { color: #475569; }
    .num { color: #475569; }
    .ret { color: #475569; }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 34px;
      user-select: none;
      transition: background 0.15s, border-color 0.15s;
    }

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

    .btn-play {
      background: #22b7ff;
      border-color: #0ea5e9;
      color: #ffffff;
      min-width: 76px;
    }

    .btn-play:hover {
      background: #0284c7;
      border-color: #0369a1;
    }

    .step-pills {
      display: flex;
      gap: 4px;
    }

    .step-pill {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .step-pill.active {
      background: #22b7ff;
      border-color: #0ea5e9;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div class="badge badge-target">Target: <strong>42</strong></div>
    <div id="statusBadge" class="badge status-badge">arr[0] == 42 ?</div>
  </div>

  <div class="array-container" id="arrayContainer">
    <div class="pointer-arrow" id="pointer">
      <span class="pointer-label" id="pointerLabel">i=0</span>
      <span>▼</span>
    </div>

    <div class="array-slot" data-index="0">
      <span class="slot-index">[0]</span>
      <div class="slot-cell">14</div>
    </div>
    <div class="array-slot" data-index="1">
      <span class="slot-index">[1]</span>
      <div class="slot-cell">7</div>
    </div>
    <div class="array-slot" data-index="2">
      <span class="slot-index">[2]</span>
      <div class="slot-cell">29</div>
    </div>
    <div class="array-slot" data-index="3">
      <span class="slot-index">[3]</span>
      <div class="slot-cell">42</div>
    </div>
    <div class="array-slot" data-index="4">
      <span class="slot-index">[4]</span>
      <div class="slot-cell">51</div>
    </div>
    <div class="array-slot" data-index="5">
      <span class="slot-index">[5]</span>
      <div class="slot-cell">88</div>
    </div>
  </div>

  <div class="code-box">
    <div class="code-line" id="line1"><span class="kw">for</span> (let i = <span class="num" id="varI">0</span>; i &lt; 6; i++) {</div>
    <div class="code-line" id="line2">&nbsp;&nbsp;<span class="kw">if</span> (arr[i] === <span class="num">42</span>) <span class="ret">return i;</span></div>
    <div class="code-line" id="line3">}</div>
  </div>

  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous">◀</button>
    <button class="btn btn-play" id="playBtn">⏸</button>
    <button class="btn" id="nextBtn" aria-label="Next">▶</button>
    <div class="step-pills" id="pills">
      <button class="step-pill" data-step="0">0</button>
      <button class="step-pill" data-step="1">1</button>
      <button class="step-pill" data-step="2">2</button>
      <button class="step-pill" data-step="3">3</button>
    </div>
  </div>

  <script>
    const items = [14, 7, 29, 42, 51, 88];
    const target = 42;
    const targetIdx = 3;
    let currentStep = 0;
    const totalSteps = 4; // steps 0, 1, 2, 3

    const slots = document.querySelectorAll('.array-slot');
    const pointer = document.getElementById('pointer');
    const pointerLabel = document.getElementById('pointerLabel');
    const statusBadge = document.getElementById('statusBadge');
    const line1 = document.getElementById('line1');
    const line2 = document.getElementById('line2');
    const varI = document.getElementById('varI');
    const playBtn = document.getElementById('playBtn');
    const pills = document.querySelectorAll('.step-pill');

    function updatePointerPos(idx) {
      const activeSlot = slots[idx];
      const leftPos = activeSlot.offsetLeft + (activeSlot.offsetWidth / 2);
      pointer.style.left = leftPos + 'px';
    }

    function render(step) {
      currentStep = step;
      varI.textContent = step;

      slots.forEach((slot, i) => {
        slot.classList.remove('active', 'matched', 'checked');
        if (i < step) {
          slot.classList.add('checked');
        } else if (i === step) {
          if (items[i] === target) {
            slot.classList.add('matched');
          } else {
            slot.classList.add('active');
          }
        }
      });

      pills.forEach((p, i) => {
        p.classList.toggle('active', i === step);
      });

      updatePointerPos(step);
      pointerLabel.textContent = 'i=' + step;

      statusBadge.classList.remove('match', 'mismatch');
      if (items[step] === target) {
        statusBadge.textContent = `${items[step]} == ${target} ✓ Return ${step}`;
        statusBadge.classList.add('match');
        line1.classList.remove('active');
        line2.classList.add('active');
      } else {
        statusBadge.textContent = `${items[step]} ≠ ${target}`;
        statusBadge.classList.add('mismatch');
        line1.classList.add('active');
        line2.classList.remove('active');
      }
    }

    // Pacing: 3.2s per step
    let timer = null;
    let isPlaying = true;

    function nextStep() {
      render((currentStep + 1) % totalSteps);
    }

    function prevStep() {
      render((currentStep - 1 + totalSteps) % totalSteps);
    }

    function startAuto() {
      if (timer) clearInterval(timer);
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(nextStep, 3200);
    }

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

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

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

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

    pills.forEach((pill, idx) => {
      pill.addEventListener('click', () => {
        pauseAuto();
        render(idx);
      });
    });

    window.addEventListener('resize', () => {
      updatePointerPos(currentStep);
    });

    // Initialize
    window.addEventListener('load', () => {
      render(0);
      startAuto();
    });
  </script>
</body>
</html>

If our list grows from ten items to ten million items, how much longer will the search take?

**Time complexity** measures how an algorithm's running time scales as the input size $n$ increases, expressed using **Big-O notation** ($O$).

In the **best-case scenario**, the target item is at index 0. The algorithm stops after exactly 1 comparison, giving a complexity of $O(1)$ (constant time).

In the **worst-case scenario**, the target is at the very last index ($n-1$) or not in the array at all. The algorithm must make $n$ comparisons, giving a complexity of $O(n)$ (linear time).

For the **average-case scenario**, assuming a uniform distribution where the target is equally likely at any position $1 \le i \le n$, the expected comparisons are: $$\frac{1}{n} \sum_{i=1}^{n} i = \frac{n(n+1)}{2n} = \frac{n+1}{2}$$

Since Big-O notation ignores constant coefficients and lower-order terms as $n \to \infty$, $\frac{n+1}{2}$ simplifies directly to $O(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">
  <title>Linear Search Algorithm</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background-color: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

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

    /* Target & Case Selector */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 8px;
    }

    .target-badge {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .target-val {
      color: #2563eb;
      font-weight: 700;
    }

    .case-pills {
      display: flex;
      gap: 6px;
    }

    .pill-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #64748b;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .pill-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Array Display Area */
    .array-container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      position: relative;
      padding-top: 24px;
    }

    .array-cell {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      height: 56px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: background 0.25s, box-shadow 0.25s;
    }

    .cell-idx {
      position: absolute;
      top: -20px;
      font-size: 11px;
      font-weight: 600;
      color: #94a3b8;
    }

    .cell-val {
      font-size: 17px;
      font-weight: 700;
      color: #1e2945;
    }

    /* States */
    .array-cell.checked-fail {
      background: #f1f5f9;
      opacity: 0.55;
    }

    .array-cell.checking {
      background: #eff6ff;
      box-shadow: 0 0 0 2px #3b82f6;
    }

    .array-cell.checking .cell-val {
      color: #2563eb;
    }

    .array-cell.found {
      background: #ecfdf5;
      box-shadow: 0 0 0 2px #10b981;
    }

    .array-cell.found .cell-val {
      color: #059669;
    }

    /* Status Bar */
    .status-panel {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      height: 48px;
    }

    .status-msg {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .status-comp {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .comp-count {
      color: #1e2945;
      font-weight: 700;
    }

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

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      color: #1e2945;
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      transition: background 0.2s;
    }

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

    .ctrl-btn.primary {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .ctrl-btn.primary:active {
      background: #1d4ed8;
    }

    .tag-match { color: #059669; }
    .tag-diff { color: #dc2626; }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="top-bar">
      <div class="target-badge">
        <span>Target:</span>
        <span class="target-val" id="targetVal">38</span>
      </div>
      <div class="case-pills">
        <button class="pill-btn" onclick="setPreset(0)">O(1)</button>
        <button class="pill-btn active" onclick="setPreset(3)">O(n/2)</button>
        <button class="pill-btn" onclick="setPreset(5)">O(n)</button>
      </div>
    </div>

    
    <div class="array-container" id="arrayGrid">
      
    </div>

    
    <div class="status-panel">
      <div class="status-msg" id="statusMsg">i = 0</div>
      <div class="status-comp">
        Steps: <span class="comp-count" id="compCount">0 / 6</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" onclick="stepPrev()" title="Previous">←</button>
      <button class="ctrl-btn primary" id="playBtn" onclick="togglePlay()">▶</button>
      <button class="ctrl-btn" onclick="stepNext()" title="Next">→</button>
      <button class="ctrl-btn" onclick="resetSearch()" title="Reset">↺</button>
    </div>
  </div>

  <script>
    const data = [7, 14, 21, 38, 55, 92];
    let targetIndex = 3;
    let targetValue = data[targetIndex];
    let currentIndex = 0;
    let isPlaying = false;
    let timer = null;

    const grid = document.getElementById('arrayGrid');
    const targetValEl = document.getElementById('targetVal');
    const statusMsg = document.getElementById('statusMsg');
    const compCount = document.getElementById('compCount');
    const playBtn = document.getElementById('playBtn');
    const pills = document.querySelectorAll('.pill-btn');

    function init() {
      grid.innerHTML = '';
      data.forEach((val, idx) => {
        const cell = document.createElement('div');
        cell.className = 'array-cell';
        cell.id = `cell-${idx}`;
        cell.innerHTML = `
          <span class="cell-idx">[${idx}]</span>
          <span class="cell-val">${val}</span>
        `;
        grid.appendChild(cell);
      });
      render();
    }

    function render() {
      targetValEl.textContent = targetValue;
      compCount.textContent = `${currentIndex + 1} / ${data.length}`;

      data.forEach((val, idx) => {
        const cell = document.getElementById(`cell-${idx}`);
        cell.className = 'array-cell';
        if (idx < currentIndex) {
          cell.classList.add('checked-fail');
        } else if (idx === currentIndex) {
          if (val === targetValue) {
            cell.classList.add('found');
          } else {
            cell.classList.add('checking');
          }
        }
      });

      const currentVal = data[currentIndex];
      if (currentVal === targetValue) {
        statusMsg.innerHTML = `<span class="tag-match">${currentVal} = ${targetValue} ✓</span>`;
        if (isPlaying) pause();
      } else {
        statusMsg.innerHTML = `<span class="tag-diff">${currentVal} ≠ ${targetValue}</span>`;
      }
    }

    function setPreset(idx) {
      pause();
      targetIndex = idx;
      targetValue = data[idx];
      currentIndex = 0;

      pills.forEach((p, i) => {
        const pIdx = i === 0 ? 0 : i === 1 ? 3 : 5;
        p.classList.toggle('active', pIdx === idx);
      });

      render();
    }

    function stepNext() {
      if (data[currentIndex] === targetValue) {
        currentIndex = 0;
      } else if (currentIndex < data.length - 1) {
        currentIndex++;
      } else {
        currentIndex = 0;
      }
      render();
    }

    function stepPrev() {
      if (currentIndex > 0) {
        currentIndex--;
        render();
      }
    }

    function resetSearch() {
      pause();
      currentIndex = 0;
      render();
    }

    function togglePlay() {
      if (isPlaying) {
        pause();
      } else {
        play();
      }
    }

    function play() {
      if (data[currentIndex] === targetValue) {
        currentIndex = 0;
        render();
      }
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(() => {
        if (data[currentIndex] === targetValue) {
          pause();
        } else {
          stepNext();
        }
      }, 1000);
    }

    function pause() {
      isPlaying = false;
      playBtn.textContent = '▶';
      if (timer) clearInterval(timer);
    }

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

If linear search requires $O(n)$ time on average, why would we ever choose it over faster algorithms like binary search?

Linear search's greatest advantage is that it works on **unsorted data** and requires no extra memory ($O(1)$ space complexity).

A common mistake on exams is writing the average time complexity as $O(n/2)$ or $O(0.5n)$ — remember to always drop constant multipliers and write strictly $O(n)$.

computer-science

Linear Search Algorithm. Implement linear search and analyse its time complexity for best, worst, and average cases

Linear Search - Complexity & Algorithms (A-Level CS)

Algorithms: Searching & Linear Search Analysis

OCR & CIE A-Level Computer Science: Linear Search Implementation & Complexity

When teaching Year 13 (A2 Level) students, emphasize the formal mathematical derivation of average-case complexity using probability theory and arithmetic progression series. Transition students from merely writing procedural loops to evaluating asymptotic performance, contrasting linear search's $\mathcal{O}(n)$ performance against $\mathcal{O}(\log n)$ binary search, and explicitly demonstrating why unsorted datasets necessitate exhaustive linear scanning.

Linear Search Algorithm

Algorithm Logic and Pseudocode

JavaScript Implementation