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

Look around your room — letters are hiding in shapes everywhere!

Let's explore six exciting **upper-case** letters: **G, H, I, J, K,** and **L**.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .tabs {
      display: flex;
      gap: 8px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
      margin-bottom: 14px;
    }
    .tab-btn {
      flex: 1;
      min-width: 44px;
      height: 48px;
      font-size: 22px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      border-radius: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      user-select: none;
    }
    .tab-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.18);
    }
    .display-card {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      min-height: 190px;
    }
    .letter-display {
      font-size: 88px;
      font-weight: 800;
      line-height: 1;
      color: #0284c7;
      min-width: 90px;
      text-align: center;
      user-select: none;
    }
    .divider {
      width: 2px;
      height: 110px;
      background: #f1f5f9;
    }
    .example-display {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 110px;
    }
    .example-emoji {
      font-size: 58px;
      line-height: 1;
      user-select: none;
    }
    .example-word {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: 0.5px;
    }
    .example-word span {
      color: #0284c7;
      text-decoration: underline;
    }
    .controls {
      display: flex;
      gap: 12px;
      margin-top: 14px;
      align-items: center;
    }
    .nav-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      font-size: 16px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .nav-btn:hover {
      background: #f1f5f9;
    }
    .play-btn {
      padding: 0 16px;
      height: 40px;
      border-radius: 20px;
      border: none;
      background: #0284c7;
      color: #ffffff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="tabs" id="tabs">
    <button class="tab-btn active" data-index="0">G</button>
    <button class="tab-btn" data-index="1">H</button>
    <button class="tab-btn" data-index="2">I</button>
    <button class="tab-btn" data-index="3">J</button>
    <button class="tab-btn" data-index="4">K</button>
    <button class="tab-btn" data-index="5">L</button>
  </div>

  <div class="display-card">
    <div class="letter-display" id="bigLetter">G</div>
    <div class="divider"></div>
    <div class="example-display">
      <div class="example-emoji" id="emoji">🍇</div>
      <div class="example-word" id="word"><span>G</span>rapes</div>
    </div>
  </div>

  <div class="controls">
    <button class="nav-btn" id="prevBtn" aria-label="Previous">◀</button>
    <button class="play-btn" id="playBtn">⏸ Auto</button>
    <button class="nav-btn" id="nextBtn" aria-label="Next">▶</button>
  </div>

  <script>
    const data = [
      { letter: 'G', emoji: '🍇', word: '<span>G</span>rapes' },
      { letter: 'H', emoji: '🏠', word: '<span>H</span>ouse' },
      { letter: 'I', emoji: '🍦', word: '<span>I</span>ce' },
      { letter: 'J', emoji: '🧃', word: '<span>J</span>uice' },
      { letter: 'K', emoji: '🪁', word: '<span>K</span>ite' },
      { letter: 'L', emoji: '🦁', word: '<span>L</span>ion' }
    ];

    let current = 0;
    let playing = true;
    let timer = null;

    const tabs = document.querySelectorAll('.tab-btn');
    const bigLetter = document.getElementById('bigLetter');
    const emoji = document.getElementById('emoji');
    const word = document.getElementById('word');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function showLetter(idx) {
      current = (idx + data.length) % data.length;
      tabs.forEach((t, i) => t.classList.toggle('active', i === current));
      bigLetter.textContent = data[current].letter;
      emoji.textContent = data[current].emoji;
      word.innerHTML = data[current].word;
    }

    function startAuto() {
      playing = true;
      playBtn.textContent = '⏸ Auto';
      clearInterval(timer);
      timer = setInterval(() => {
        showLetter(current + 1);
      }, 3000);
    }

    function stopAuto() {
      playing = false;
      playBtn.textContent = '▶ Play';
      clearInterval(timer);
    }

    tabs.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        stopAuto();
        showLetter(idx);
      });
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      showLetter(current - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      showLetter(current + 1);
    });

    playBtn.addEventListener('click', () => {
      if (playing) stopAuto();
      else startAuto();
    });

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

What happens when a round circle opens its mouth and steps inside?

Big **G** curves around like a big open circle, then steps inside with a little flat shelf.

Big **H** looks like a tall ladder with two straight posts and a bridge across the middle!

<!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>Upper-Case Letters G to L</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 360px;
    }

    /* Letter Selector Bar */
    .nav-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 440px;
    }

    .letter-btn {
      flex: 1;
      height: 44px;
      font-size: 20px;
      font-weight: 700;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .letter-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
    }

    /* Main Showcase Stage */
    .stage {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }

    /* Letter Display Box */
    .letter-view {
      width: 160px;
      height: 160px;
      background: #f8fafc;
      border-radius: 14px;
      border: 2px dashed #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .letter-svg {
      width: 130px;
      height: 130px;
    }

    /* Stroke styling */
    .stroke-main {
      stroke-width: 16;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
    }

    .stroke-primary {
      stroke: #22b7ff;
    }

    .stroke-accent {
      stroke: #f59e0b;
    }

    .stroke-secondary {
      stroke: #10b981;
    }

    /* Shape Breakdown Elements */
    .info-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      width: 100%;
    }

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

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .dot-blue { background: #22b7ff; }
    .dot-amber { background: #f59e0b; }
    .dot-green { background: #10b981; }

    /* Visual Clue Badge */
    .clue-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      background: #e0f2fe;
      border-radius: 8px;
      color: #0369a1;
      font-size: 14px;
      font-weight: 600;
    }

    .clue-icon {
      font-size: 18px;
    }

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

    .nav-arrow {
      height: 38px;
      padding: 0 16px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      color: #475569;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .nav-arrow:active {
      background: #f1f5f9;
    }

    .counter {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  
  <div class="nav-bar">
    <button class="letter-btn" onclick="selectLetter(0)">G</button>
    <button class="letter-btn active" onclick="selectLetter(1)">H</button>
    <button class="letter-btn" onclick="selectLetter(2)">I</button>
    <button class="letter-btn" onclick="selectLetter(3)">J</button>
    <button class="letter-btn" onclick="selectLetter(4)">K</button>
    <button class="letter-btn" onclick="selectLetter(5)">L</button>
  </div>

  
  <div class="stage">
    
    <div class="clue-badge" id="clueBadge">
      <span class="clue-icon" id="clueIcon">🪜</span>
      <span id="clueText">Ladder Shape</span>
    </div>

    
    <div class="letter-view">
      <svg class="letter-svg" viewBox="0 0 120 120" id="letterSvg">
        
      </svg>
    </div>

    
    <div class="info-row" id="chipsRow">
      
    </div>
  </div>

  
  <div class="controls">
    <button class="nav-arrow" onclick="prevLetter()">← Prev</button>
    <span class="counter" id="stepCounter">Letter 2 of 6</span>
    <button class="nav-arrow" onclick="nextLetter()">Next →</button>
  </div>

  <script>
    const letterData = [
      {
        char: 'G',
        icon: '🔄',
        cue: 'Round Curve + Shelf',
        chips: [
          { text: 'Big Curve', dot: 'dot-blue' },
          { text: 'Inner Shelf', dot: 'dot-amber' }
        ],
        svg: `
          <path d="M 95 38 C 85 20, 30 20, 25 60 C 20 100, 85 102, 95 82 L 95 62" class="stroke-main stroke-primary" />
          <path d="M 65 62 L 95 62" class="stroke-main stroke-accent" />
        `
      },
      {
        char: 'H',
        icon: '🪜',
        cue: '2 Tall Posts + Bridge',
        chips: [
          { text: 'Post 1', dot: 'dot-blue' },
          { text: 'Post 2', dot: 'dot-blue' },
          { text: 'Bridge', dot: 'dot-amber' }
        ],
        svg: `
          <line x1="28" y1="20" x2="28" y2="100" class="stroke-main stroke-primary" />
          <line x1="92" y1="20" x2="92" y2="100" class="stroke-main stroke-primary" />
          <line x1="28" y1="60" x2="92" y2="60" class="stroke-main stroke-accent" />
        `
      },
      {
        char: 'I',
        icon: '🪵',
        cue: 'Straight Tall Pole',
        chips: [
          { text: 'Tall Pole', dot: 'dot-blue' },
          { text: 'Top & Base Bars', dot: 'dot-amber' }
        ],
        svg: `
          <line x1="60" y1="22" x2="60" y2="98" class="stroke-main stroke-primary" />
          <line x1="34" y1="22" x2="86" y2="22" class="stroke-main stroke-accent" />
          <line x1="34" y1="98" x2="86" y2="98" class="stroke-main stroke-accent" />
        `
      },
      {
        char: 'J',
        icon: '🪝',
        cue: 'Tall Pole + Hook',
        chips: [
          { text: 'Straight Stem', dot: 'dot-blue' },
          { text: 'Bottom Hook', dot: 'dot-amber' }
        ],
        svg: `
          <line x1="35" y1="22" x2="85" y2="22" class="stroke-main stroke-secondary" />
          <line x1="72" y1="22" x2="72" y2="72" class="stroke-main stroke-primary" />
          <path d="M 72 72 C 72 100, 30 100, 30 78" class="stroke-main stroke-amber" style="stroke:#f59e0b" />
        `
      },
      {
        char: 'K',
        icon: '🥢',
        cue: 'Pole + 2 Slant Arms',
        chips: [
          { text: 'Tall Pole', dot: 'dot-blue' },
          { text: 'Top Slant', dot: 'dot-amber' },
          { text: 'Bottom Slant', dot: 'dot-green' }
        ],
        svg: `
          <line x1="30" y1="20" x2="30" y2="100" class="stroke-main stroke-primary" />
          <line x1="88" y1="22" x2="34" y2="60" class="stroke-main stroke-accent" />
          <line x1="42" y1="52" x2="90" y2="98" class="stroke-main stroke-secondary" />
        `
      },
      {
        char: 'L',
        icon: '📐',
        cue: 'Tall Pole + Flat Floor',
        chips: [
          { text: 'Tall Pole', dot: 'dot-blue' },
          { text: 'Flat Floor', dot: 'dot-amber' }
        ],
        svg: `
          <line x1="35" y1="20" x2="35" y2="100" class="stroke-main stroke-primary" />
          <line x1="35" y1="98" x2="95" y2="98" class="stroke-main stroke-accent" />
        `
      }
    ];

    let currentIndex = 1; // Start on 'H' as contextual focus

    function render() {
      const item = letterData[currentIndex];

      // Update Nav Buttons
      const buttons = document.querySelectorAll('.letter-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentIndex);
      });

      // Update Clue Badge
      document.getElementById('clueIcon').textContent = item.icon;
      document.getElementById('clueText').textContent = item.cue;

      // Update Letter SVG
      document.getElementById('letterSvg').innerHTML = item.svg;

      // Update Breakdown Chips
      const chipsContainer = document.getElementById('chipsRow');
      chipsContainer.innerHTML = item.chips.map(chip => `
        <div class="part-chip">
          <span class="dot ${chip.dot}"></span>
          ${chip.text}
        </div>
      `).join('');

      // Update Counter
      document.getElementById('stepCounter').textContent = `Letter ${currentIndex + 1} of ${letterData.length}`;
    }

    function selectLetter(index) {
      currentIndex = index;
      render();
    }

    function nextLetter() {
      currentIndex = (currentIndex + 1) % letterData.length;
      render();
    }

    function prevLetter() {
      currentIndex = (currentIndex - 1 + letterData.length) % letterData.length;
      render();
    }

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

What letters stand straight and tall like poles?

Big **I** stands straight and tall, with a small flat top and a small flat bottom.

Big **J** slides straight down and curls up at the bottom just like an umbrella handle!

<!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>Upper-Case Letters G to L</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;
      min-height: 100%;
    }

    /* Letter selector tabs */
    .tab-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 420px;
    }
    .tab-btn {
      flex: 1;
      min-width: 44px;
      height: 44px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      background: #ffffff;
      color: #1e2945;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Main Display Area */
    .display-stage {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-panel {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      padding: 12px;
    }
    .card-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

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

    .letter-glyph {
      font-size: 88px;
      font-weight: 800;
      line-height: 1;
      color: #1e2945;
      letter-spacing: -2px;
    }
    .arrow-icon {
      font-size: 28px;
      color: #22b7ff;
      opacity: 0.8;
    }
    .mnemonic-icon {
      font-size: 72px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shape-label {
      margin-top: 14px;
      font-size: 16px;
      font-weight: 700;
      color: #22b7ff;
      background: rgba(34, 183, 255, 0.1);
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
    }

    /* Playback controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .ctrl-btn {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="tab-bar">
    <button class="tab-btn active" data-index="0">G</button>
    <button class="tab-btn" data-index="1">H</button>
    <button class="tab-btn" data-index="2">I</button>
    <button class="tab-btn" data-index="3">J</button>
    <button class="tab-btn" data-index="4">K</button>
    <button class="tab-btn" data-index="5">L</button>
  </div>

  
  <div class="display-stage">
    
    <div class="card-panel active">
      <div class="visual-row">
        <div class="letter-glyph">G</div>
        <div class="arrow-icon">→</div>
        <div class="mnemonic-icon">🌀</div>
      </div>
      <div class="shape-label">Round &amp; In</div>
    </div>

    
    <div class="card-panel">
      <div class="visual-row">
        <div class="letter-glyph">H</div>
        <div class="arrow-icon">→</div>
        <div class="mnemonic-icon">🪜</div>
      </div>
      <div class="shape-label">Two Posts, Bridge</div>
    </div>

    
    <div class="card-panel">
      <div class="visual-row">
        <div class="letter-glyph">I</div>
        <div class="arrow-icon">→</div>
        <div class="mnemonic-icon">🕯️</div>
      </div>
      <div class="shape-label">Straight Pillar</div>
    </div>

    
    <div class="card-panel">
      <div class="visual-row">
        <div class="letter-glyph">J</div>
        <div class="arrow-icon">→</div>
        <div class="mnemonic-icon">☂️</div>
      </div>
      <div class="shape-label">Umbrella Handle</div>
    </div>

    
    <div class="card-panel">
      <div class="visual-row">
        <div class="letter-glyph">K</div>
        <div class="arrow-icon">→</div>
        <div class="mnemonic-icon">🦵</div>
      </div>
      <div class="shape-label">Kicking Legs</div>
    </div>

    
    <div class="card-panel">
      <div class="visual-row">
        <div class="letter-glyph">L</div>
        <div class="arrow-icon">→</div>
        <div class="mnemonic-icon">👢</div>
      </div>
      <div class="shape-label">Marching Foot</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">◀</button>
    <button class="ctrl-btn" id="playBtn"><span id="playIcon">⏸</span> Auto</button>
    <button class="ctrl-btn" id="nextBtn">▶</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const tabs = document.querySelectorAll('.tab-btn');
    const panels = document.querySelectorAll('.card-panel');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentIndex = 0;
    let autoTimer = null;
    let isPlaying = true;

    function showIndex(idx) {
      currentIndex = (idx + panels.length) % panels.length;
      tabs.forEach((tab, i) => {
        tab.classList.toggle('active', i === currentIndex);
      });
      panels.forEach((panel, i) => {
        panel.classList.toggle('active', i === currentIndex);
      });
    }

    function startAuto() {
      stopAuto();
      isPlaying = true;
      playIcon.textContent = '⏸';
      autoTimer = setInterval(() => {
        showIndex(currentIndex + 1);
      }, 3000);
    }

    function stopAuto() {
      isPlaying = false;
      playIcon.textContent = '▶';
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
    }

    tabs.forEach((tab) => {
      tab.addEventListener('click', () => {
        stopAuto();
        showIndex(parseInt(tab.dataset.index, 10));
      });
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      showIndex(currentIndex - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      showIndex(currentIndex + 1);
    });

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

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

Which letters look like kicking legs and marching feet?

Big **K** has one tall straight line with two arms kicking out to the side.

Big **L** drops straight down from the sky and slides right across the floor.

<!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>Upper-Case Letters G to L</title>
<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    padding: 16px 12px;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Letter selector tabs */
  .letter-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
  }
  .nav-btn {
    flex: 1;
    height: 44px;
    font-size: 20px;
    font-weight: 700;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .nav-btn.active {
    background: #22b7ff;
    border-color: #22b7ff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
  }

  /* Display card viewport */
  .stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 240px;
    margin: 12px 0;
  }
  .letter-panel {
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .letter-panel.active {
    opacity: 1;
    pointer-events: auto;
  }

  .char-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .big-letter {
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    color: #1e2945;
  }
  .big-icon {
    font-size: 68px;
    line-height: 1;
  }
  .label-tag {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    padding: 4px 16px;
    border-radius: 20px;
    letter-spacing: 0.5px;
  }

  /* Playback controls */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
  }
  .ctrl-btn {
    height: 40px;
    min-width: 44px;
    padding: 0 14px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
  }
  .ctrl-btn:active {
    background: #f1f5f9;
  }
  .play-toggle {
    min-width: 90px;
    color: #0284c7;
    border-color: #bae6fd;
    background: #f0f9ff;
  }
</style>
</head>
<body>

  
  <div class="letter-nav">
    <button class="nav-btn step active" type="button">G</button>
    <button class="nav-btn step" type="button">H</button>
    <button class="nav-btn step" type="button">I</button>
    <button class="nav-btn step" type="button">J</button>
    <button class="nav-btn step" type="button">K</button>
    <button class="nav-btn step" type="button">L</button>
  </div>

  
  <div class="stage">
    <div class="letter-panel active">
      <div class="char-row">
        <span class="big-letter">G</span>
        <span class="big-icon">🎁</span>
      </div>
      <div class="label-tag">G &middot; Gift</div>
    </div>

    <div class="letter-panel">
      <div class="char-row">
        <span class="big-letter">H</span>
        <span class="big-icon">🎩</span>
      </div>
      <div class="label-tag">H &middot; Hat</div>
    </div>

    <div class="letter-panel">
      <div class="char-row">
        <span class="big-letter">I</span>
        <span class="big-icon">🍦</span>
      </div>
      <div class="label-tag">I &middot; Ice Cream</div>
    </div>

    <div class="letter-panel">
      <div class="char-row">
        <span class="big-letter">J</span>
        <span class="big-icon">🧃</span>
      </div>
      <div class="label-tag">J &middot; Juice</div>
    </div>

    <div class="letter-panel">
      <div class="char-row">
        <span class="big-letter">K</span>
        <span class="big-icon">🪁</span>
      </div>
      <div class="label-tag">K &middot; Kite</div>
    </div>

    <div class="letter-panel">
      <div class="char-row">
        <span class="big-letter">L</span>
        <span class="big-icon">🦁</span>
      </div>
      <div class="label-tag">L &middot; Lion</div>
    </div>
  </div>

  
  <div class="controls">
    <button id="prevBtn" class="ctrl-btn" type="button" aria-label="Previous">◀</button>
    <button id="playBtn" class="ctrl-btn play-toggle" type="button">⏸ Pause</button>
    <button id="nextBtn" class="ctrl-btn" type="button" aria-label="Next">▶</button>
  </div>

<script>
  const panels = $$('.letter-panel');
  const navBtns = $$('.nav-btn');
  const playBtn = $('#playBtn');

  function updateActive(index) {
    panels.forEach((p, i) => {
      if (i === index) {
        p.classList.add('active');
      } else {
        p.classList.remove('active');
      }
    });
    navBtns.forEach((b, i) => {
      if (i === index) {
        b.classList.add('active');
      } else {
        b.classList.remove('active');
      }
    });
  }

  const player = new StepPlayer('.step', {
    interval: 3200,
    onChange: (idx) => updateActive(idx)
  });

  navBtns.forEach((btn, idx) => {
    onTap(btn, () => {
      player.goTo(idx);
    });
  });

  onTap($('#prevBtn'), () => player.prev());
  onTap($('#nextBtn'), () => player.next());

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

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

Can you spot every letter when we put them all in a row?

Touch each letter from left to right and say its name out loud: **G, H, I, J, K, L**!

<!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>Upper-Case Letters G to L</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }
    .strip {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 480px;
    }
    .tab {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 0;
      font-size: 20px;
      font-weight: 700;
      color: #6b7280;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
    .tab.active {
      background: #ffffff;
      border-color: #22b7ff;
      color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
    }
    .tab:hover {
      border-color: #22b7ff;
    }
    .display-area {
      width: 100%;
      max-width: 480px;
      height: 240px;
      position: relative;
      margin: 8px 0;
    }
    .letter-card {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .letter-card.active {
      opacity: 1;
      pointer-events: auto;
    }
    .big-letter {
      font-size: 80px;
      font-weight: 800;
      line-height: 1;
      color: #1e2945;
    }
    .big-letter span {
      color: #22b7ff;
    }
    .association {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 22px;
      font-weight: 600;
      color: #4b5563;
    }
    .association .emoji {
      font-size: 32px;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 480px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .btn:hover {
      border-color: #22b7ff;
      background: #f0f9ff;
    }
    .btn-sound {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }
    .btn-sound:hover {
      background: #0ea5e9;
      border-color: #0ea5e9;
    }
  </style>
</head>
<body>

  <div class="strip">
    <button class="tab active" data-idx="0">G</button>
    <button class="tab" data-idx="1">H</button>
    <button class="tab" data-idx="2">I</button>
    <button class="tab" data-idx="3">J</button>
    <button class="tab" data-idx="4">K</button>
    <button class="tab" data-idx="5">L</button>
  </div>

  <div class="display-area">
    <div class="letter-card active" data-letter="G" data-word="Grape">
      <div class="big-letter">G</div>
      <div class="association"><span class="emoji">🍇</span> <span><span>G</span>rape</span></div>
    </div>
    <div class="letter-card" data-letter="H" data-word="House">
      <div class="big-letter">H</div>
      <div class="association"><span class="emoji">🏠</span> <span><span>H</span>ouse</span></div>
    </div>
    <div class="letter-card" data-letter="I" data-word="Ice">
      <div class="big-letter">I</div>
      <div class="association"><span class="emoji">🍦</span> <span><span>I</span>ce</span></div>
    </div>
    <div class="letter-card" data-letter="J" data-word="Juice">
      <div class="big-letter">J</div>
      <div class="association"><span class="emoji">🧃</span> <span><span>J</span>uice</span></div>
    </div>
    <div class="letter-card" data-letter="K" data-word="Kite">
      <div class="big-letter">K</div>
      <div class="association"><span class="emoji">🪁</span> <span><span>K</span>ite</span></div>
    </div>
    <div class="letter-card" data-letter="L" data-word="Lion">
      <div class="big-letter">L</div>
      <div class="association"><span class="emoji">🦁</span> <span><span>L</span>ion</span></div>
    </div>
  </div>

  <div class="controls">
    <button class="btn" id="prevBtn">←</button>
    <button class="btn btn-sound" id="speakBtn">🔊 Letter</button>
    <button class="btn" id="playBtn">▶ Auto</button>
    <button class="btn" id="nextBtn">→</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js" onerror=""></script>
  <script>
    const tabs = document.querySelectorAll('.tab');
    const cards = document.querySelectorAll('.letter-card');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playBtn = document.getElementById('playBtn');
    const speakBtn = document.getElementById('speakBtn');

    let current = 0;
    let autoTimer = null;

    function showLetter(idx, speak = false) {
      current = (idx + tabs.length) % tabs.length;
      tabs.forEach((tab, i) => tab.classList.toggle('active', i === current));
      cards.forEach((card, i) => card.classList.toggle('active', i === current));

      if (speak) {
        speakCurrent();
      }
    }

    function speakCurrent() {
      if ('speechSynthesis' in window) {
        window.speechSynthesis.cancel();
        const letter = cards[current].dataset.letter;
        const word = cards[current].dataset.word;
        const utterance = new SpeechSynthesisUtterance(`${letter}. ${word}`);
        utterance.rate = 0.9;
        window.speechSynthesis.speak(utterance);
      }
    }

    function toggleAuto() {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
        playBtn.textContent = '▶ Auto';
      } else {
        playBtn.textContent = '⏸ Pause';
        autoTimer = setInterval(() => {
          showLetter(current + 1);
        }, 3000);
      }
    }

    tabs.forEach((tab, i) => {
      tab.addEventListener('click', () => {
        if (autoTimer) toggleAuto();
        showLetter(i, true);
      });
    });

    prevBtn.addEventListener('click', () => {
      if (autoTimer) toggleAuto();
      showLetter(current - 1, true);
    });

    nextBtn.addEventListener('click', () => {
      if (autoTimer) toggleAuto();
      showLetter(current + 1, true);
    });

    speakBtn.addEventListener('click', () => {
      speakCurrent();
    });

    playBtn.addEventListener('click', toggleAuto);
  </script>
</body>
</html>

Recognising Upper-Case Letters G to L. Name and recognise the upper-case letters G, H, I, J, K and L.

Find the Letter in the Alphabet: Uppercase (Foundation English)

Recognising and Forming Capital Letters - Primary English

Early Childhood Alphabet and Letter Recognition Series

Pedagogical strategy focuses on explicit multisensory instruction (visual discrimination, air-tracing, and tactile formation with playdough/sand). Introduce letters in structured contrasting pairs (e.g., distinguishing G from C, and J from L) to build robust visual-spatial mental models before reinforcing letter naming and rapid visual recognition.

Recognising Upper-Case Letters G to L

Letters G and H

Letters I and J