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

What if you wanted to see a baby panda playing in the snow right this second?

You do not need to visit a zoo far away — you can find it right on a computer screen!

A **search engine** is a special website that helps you look up pictures, videos, and facts.

You type what you want to find inside a special box called the **search bar**.

<!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>Search Bar</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

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

    .search-app {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Keyword selector buttons */
    .topics {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .topic-btn {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 500;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
      outline: none;
    }

    .topic-btn:hover {
      background: #f1f5f9;
    }

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

    /* Search Bar Component */
    .search-box {
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 24px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 3px 10px rgba(34, 183, 255, 0.15);
      height: 48px;
    }

    .search-icon {
      font-size: 18px;
      color: #64748b;
      user-select: none;
    }

    .query-text {
      flex: 1;
      font-size: 16px;
      font-weight: 500;
      color: #1e2945;
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
    }

    .cursor {
      display: inline-block;
      width: 2px;
      height: 18px;
      background: #22b7ff;
      margin-left: 2px;
      animation: blink 1s infinite;
    }

    @keyframes blink {
      0%, 49% { opacity: 1; }
      50%, 100% { opacity: 0; }
    }

    .go-btn {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 16px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }

    .go-btn:hover {
      background: #0099e6;
    }

    /* Results Area */
    .results-container {
      position: relative;
      height: 190px;
      overflow: hidden;
    }

    .result-group {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .result-group.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .result-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

    .result-emoji {
      font-size: 34px;
      line-height: 1;
    }

    .result-title {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    .result-tag {
      font-size: 11px;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 8px;
      border-radius: 8px;
    }
  </style>
</head>
<body>

  <div class="search-app">
    
    <div class="topics">
      <button class="topic-btn active" onclick="searchTopic(0)">🐼 Pandas</button>
      <button class="topic-btn" onclick="searchTopic(1)">🏰 Castles</button>
      <button class="topic-btn" onclick="searchTopic(2)">🚀 Space</button>
    </div>

    
    <div class="search-box">
      <span class="search-icon">🔍</span>
      <div class="query-text">
        <span id="queryDisplay">Pandas</span>
        <span class="cursor"></span>
      </div>
      <button class="go-btn" onclick="nextTopic()">Search</button>
    </div>

    
    <div class="results-container">
      
      <div class="result-group active" id="results-0">
        <div class="result-card">
          <span class="result-emoji">🐼</span>
          <span class="result-title">Giant Panda</span>
          <span class="result-tag">Animals</span>
        </div>
        <div class="result-card">
          <span class="result-emoji">🎋</span>
          <span class="result-title">Bamboo Diet</span>
          <span class="result-tag">Nature</span>
        </div>
      </div>

      
      <div class="result-group" id="results-1">
        <div class="result-card">
          <span class="result-emoji">🏰</span>
          <span class="result-title">Old Castles</span>
          <span class="result-tag">History</span>
        </div>
        <div class="result-card">
          <span class="result-emoji">🛡️</span>
          <span class="result-title">Knights & Armor</span>
          <span class="result-tag">History</span>
        </div>
      </div>

      
      <div class="result-group" id="results-2">
        <div class="result-card">
          <span class="result-emoji">🚀</span>
          <span class="result-title">Rockets</span>
          <span class="result-tag">Science</span>
        </div>
        <div class="result-card">
          <span class="result-emoji">🪐</span>
          <span class="result-title">Planets</span>
          <span class="result-tag">Space</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const queries = ["Pandas", "Castles", "Space"];
    let currentIndex = 0;

    function searchTopic(index) {
      currentIndex = index;
      document.getElementById('queryDisplay').textContent = queries[index];
      
      const buttons = document.querySelectorAll('.topic-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === index);
      });

      for (let i = 0; i < queries.length; i++) {
        const group = document.getElementById('results-' + i);
        if (group) {
          group.classList.toggle('active', i === index);
        }
      }
    }

    function nextTopic() {
      const nextIndex = (currentIndex + 1) % queries.length;
      searchTopic(nextIndex);
    }
  </script>
</body>
</html>

How do you tell the computer exactly what you want to see?

Computers do not need long stories. They only need the most important naming words, called **keywords**.

<!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>Keywords in Search</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

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

    .topic-nav {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .topic-btn {
      background: #ffffff;
      border: 2px solid transparent;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .topic-btn.active {
      color: #0284c7;
      background: #e0f2fe;
      box-shadow: 0 0 0 2px #22b7ff;
    }

    .sentence-box {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 72px;
    }

    .word-chip {
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;
      background: #f1f5f9;
      color: #94a3b8;
      text-decoration: line-through;
    }

    .word-chip.keyword {
      background: #22b7ff;
      color: #ffffff;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.3);
      transform: translateY(-2px);
    }

    .flow-arrow {
      text-align: center;
      color: #22b7ff;
      font-size: 18px;
      line-height: 1;
      user-select: none;
    }

    .search-bar {
      background: #ffffff;
      border-radius: 24px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid #e2e8f0;
    }

    .search-icon {
      font-size: 16px;
      color: #6b7280;
    }

    .search-input-tags {
      display: flex;
      gap: 6px;
      flex-grow: 1;
      flex-wrap: wrap;
    }

    .tag-badge {
      background: #e0f2fe;
      color: #0369a1;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid #bae6fd;
    }

    .search-go-btn {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 16px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .result-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      border-left: 4px solid #22b7ff;
    }

    .result-emoji {
      font-size: 32px;
      line-height: 1;
    }

    .result-info {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .result-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .result-desc {
      font-size: 12px;
      color: #64748b;
    }
  </style>
</head>
<body>
  <div class="diagram-content">
    <div class="topic-nav" role="tablist">
      <button class="topic-btn active" onclick="showTopic(0)">🐧 Penguin</button>
      <button class="topic-btn" onclick="showTopic(1)">🐆 Cheetah</button>
      <button class="topic-btn" onclick="showTopic(2)">🏰 Castle</button>
    </div>

    <div class="sentence-box" id="sentenceBox"></div>

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

    <div class="search-bar">
      <span class="search-icon">🔍</span>
      <div class="search-input-tags" id="searchTags"></div>
      <button class="search-go-btn">Search</button>
    </div>

    <div class="result-card">
      <div class="result-emoji" id="resEmoji">🐧</div>
      <div class="result-info">
        <div class="result-title" id="resTitle">Penguin Diet Facts</div>
        <div class="result-desc" id="resDesc">Krill, fish & squid</div>
      </div>
    </div>
  </div>

  <script>
    const data = [
      {
        btn: "🐧 Penguin",
        words: [
          { text: "What", isKey: false },
          { text: "do", isKey: false },
          { text: "wild", isKey: false },
          { text: "penguins", isKey: true },
          { text: "like", isKey: false },
          { text: "to", isKey: false },
          { text: "eat?", isKey: true, keyText: "food" }
        ],
        keys: ["penguin", "food"],
        emoji: "🐧",
        title: "Penguin Diet & Food",
        desc: "Krill, fish, and squid in cold oceans."
      },
      {
        btn: "🐆 Cheetah",
        words: [
          { text: "Can", isKey: false },
          { text: "you", isKey: false },
          { text: "tell", isKey: false },
          { text: "how", isKey: false },
          { text: "fast", isKey: true, keyText: "speed" },
          { text: "cheetahs", isKey: true },
          { text: "run?", isKey: false }
        ],
        keys: ["cheetah", "speed"],
        emoji: "🐆",
        title: "Cheetah Running Speed",
        desc: "Up to 70 miles per hour."
      },
      {
        btn: "🏰 Castle",
        words: [
          { text: "Where", isKey: false },
          { text: "are", isKey: false },
          { text: "old", isKey: false },
          { text: "castles", isKey: true },
          { text: "in", isKey: false },
          { text: "Scotland?", isKey: true, keyText: "Scotland" }
        ],
        keys: ["castle", "Scotland"],
        emoji: "🏰",
        title: "Castles of Scotland",
        desc: "Historic fortresses and royal landmarks."
      }
    ];

    let currentIndex = 0;

    function showTopic(index) {
      currentIndex = index;
      
      const buttons = document.querySelectorAll('.topic-btn');
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const current = data[index];
      
      const box = document.getElementById('sentenceBox');
      box.innerHTML = '';
      current.words.forEach(w => {
        const chip = document.createElement('span');
        chip.className = 'word-chip' + (w.isKey ? ' keyword' : '');
        chip.textContent = w.text;
        box.appendChild(chip);
      });

      const tagContainer = document.getElementById('searchTags');
      tagContainer.innerHTML = '';
      current.keys.forEach(k => {
        const tag = document.createElement('span');
        tag.className = 'tag-badge';
        tag.textContent = k;
        tagContainer.appendChild(tag);
      });

      document.getElementById('resEmoji').textContent = current.emoji;
      document.getElementById('resTitle').textContent = current.title;
      document.getElementById('resDesc').textContent = current.desc;
    }

    showTopic(0);
  </script>
</body>
</html>

What happens on your screen after you press the search button?

The computer shows a big list of answers called **search results**.

You can click on the **Images tab** to see rows of photos, or click a website link to read cool animal facts.

<!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>Search Tabs: All vs Images</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .browser {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Browser top bar */
    .search-bar-wrap {
      padding: 12px 14px 8px;
      background: #ffffff;
      border-bottom: 1px solid #eef0f3;
    }
    .search-input {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f1f5f9;
      border-radius: 20px;
      padding: 8px 14px;
      font-size: 15px;
      font-weight: 500;
      color: #1e2945;
    }
    /* Search tabs */
    .tabs-row {
      display: flex;
      gap: 8px;
      padding: 8px 14px;
      border-bottom: 2px solid #f1f5f9;
      background: #ffffff;
    }
    .tab-btn {
      appearance: none;
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }
    .tab-btn.active {
      color: #0284c7;
      background: #e0f2fe;
    }
    .tab-btn:focus-visible {
      outline: 2px solid #22b7ff;
    }

    /* Content Area */
    .content-viewport {
      position: relative;
      min-height: 230px;
      padding: 14px;
      background: #fcfdfe;
    }
    .view-panel {
      position: absolute;
      top: 14px;
      left: 14px;
      right: 14px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .view-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Web links list */
    .link-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      margin-bottom: 10px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }
    .link-title {
      font-size: 14px;
      font-weight: 600;
      color: #1d4ed8;
      margin-bottom: 3px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .link-desc {
      font-size: 12px;
      color: #64748b;
      line-height: 1.3;
    }

    /* Image grid */
    .image-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .photo-tile {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }
    .photo-tile .emoji {
      font-size: 32px;
      line-height: 1;
    }
    .photo-tile .caption {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }

    /* Hint text */
    .prompt-hint {
      margin-top: 10px;
      font-size: 13px;
      color: #64748b;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="browser">
    
    <div class="search-bar-wrap">
      <div class="search-input">
        <span>🔍</span>
        <span>Otters</span>
      </div>
    </div>

    
    <div class="tabs-row" role="tablist">
      <button id="tabAll" class="tab-btn active" role="tab" aria-selected="true">
        <span>🌐</span> All Links
      </button>
      <button id="tabImages" class="tab-btn" role="tab" aria-selected="false">
        <span>🖼️</span> Images
      </button>
    </div>

    
    <div class="content-viewport">
      
      <div id="viewAll" class="view-panel active">
        <div class="link-card">
          <div class="link-title">🔗 Scottish Otters Guide</div>
          <div class="link-desc">Facts &amp; river habitats</div>
        </div>
        <div class="link-card">
          <div class="link-title">🔗 Sea Otter Life</div>
          <div class="link-desc">Diet &amp; sea shell tools</div>
        </div>
      </div>

      
      <div id="viewImages" class="view-panel">
        <div class="image-grid">
          <div class="photo-tile">
            <span class="emoji">🦦</span>
            <span class="caption">Swimming</span>
          </div>
          <div class="photo-tile">
            <span class="emoji">🌊</span>
            <span class="caption">River Home</span>
          </div>
          <div class="photo-tile">
            <span class="emoji">🐚</span>
            <span class="caption">Finding Food</span>
          </div>
          <div class="photo-tile">
            <span class="emoji">🐾</span>
            <span class="caption">Pup Family</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="prompt-hint">Tap tabs to switch results</div>

  <script>
    const tabAll = document.getElementById('tabAll');
    const tabImages = document.getElementById('tabImages');
    const viewAll = document.getElementById('viewAll');
    const viewImages = document.getElementById('viewImages');

    function showTab(type) {
      if (type === 'all') {
        tabAll.classList.add('active');
        tabAll.setAttribute('aria-selected', 'true');
        tabImages.classList.remove('active');
        tabImages.setAttribute('aria-selected', 'false');

        viewAll.classList.add('active');
        viewImages.classList.remove('active');
      } else {
        tabImages.classList.add('active');
        tabImages.setAttribute('aria-selected', 'true');
        tabAll.classList.remove('active');
        tabAll.setAttribute('aria-selected', 'false');

        viewImages.classList.add('active');
        viewAll.classList.remove('active');
      }
    }

    tabAll.addEventListener('click', () => showTab('all'));
    tabImages.addEventListener('click', () => showTab('images'));

    // Optional subtle auto-tour if untouched
    let userInteracted = false;
    [tabAll, tabImages].forEach(el => {
      el.addEventListener('pointerdown', () => { userInteracted = true; });
    });

    let current = 'all';
    setInterval(() => {
      if (userInteracted) return;
      current = current === 'all' ? 'images' : 'all';
      showTab(current);
    }, 3800);
  </script>
</body>
</html>

Always ask a teacher or grown-up to help you search so you can explore the web safely!

technology

Searching for Information on a Computer. Learners will use a search tool or website to find simple information such as pictures of animals or facts about a topic.

Digital Literacy & Exploring the Web (Early Level / KS1 Computing)

Early Years Online Exploration & Selecting Search

Searching Safely & Finding Information Online (Grades K–2)

Teaching search skills to Early Level (P1 / age 4–5) learners requires concrete, multisensory pedagogical strategies. Because emergent readers are still developing keyboard familiarity and spelling confidence, provide tactile word cards containing target keywords (e.g., 'owl', 'badger', 'frog') that learners can copy letter-by-letter. Utilize the 'I Do, We Do, You Do' gradual release model: demonstrate keyword input on the interactive whiteboard, guide paired learners through guided discovery, and establish a firm 'Stop, Close, Tell an Adult' routine for cyber resilience and responsible online use (aligning with TCH 0-02a and TCH 1-02a).

Work through this lesson with your tutor.

Searching for Information on a Computer

The Search Bar

Using Keywords

Exploring Your Results