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 at a street sign or a storybook cover. The very first letter in a person's name is almost always a tall, proud **upper-case** letter!

An **upper-case letter** is the big version of a letter, and we use it to start special words like your name or the first word in a sentence.

Let's meet the first three letters of the alphabet!

Upper-case **A** looks like a tall camping tent with a belt across the middle. Upper-case **B** has a straight back with two round bumps in front.

Upper-case **C** is one big, smooth curve that opens up on the right side, just like a hungry mouth ready for a snack.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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;
    user-select: none;
  }
  .diagram-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }
  /* Selector Tabs */
  .letter-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .nav-btn {
    flex: 1;
    max-width: 64px;
    height: 48px;
    font-size: 22px;
    font-weight: 800;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .nav-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
  }

  /* Display Area */
  .stage-box {
    position: relative;
    width: 100%;
    height: 250px;
    background: #ffffff;
    border-radius: 16px;
    border: 2px solid #f1f5f9;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    overflow: hidden;
  }

  .slide {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 16px 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .slide.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Lined handwriting view */
  .letter-view {
    flex: 1.1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
  }
  .guideline {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1.5px dashed #cbd5e1;
  }
  .guide-top { top: 22%; border-top-style: solid; border-top-color: #94a3b8; }
  .guide-mid { top: 50%; }
  .guide-bot { top: 78%; border-top-style: solid; border-top-color: #ef4444; }

  .big-letter {
    position: relative;
    z-index: 2;
    font-size: 110px;
    line-height: 1;
    font-weight: 900;
    color: #1e2945;
    font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  }

  /* Info column */
  .info-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 16px;
  }
  .object-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0fdf4;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #bbf7d0;
  }
  .object-emoji {
    font-size: 40px;
    line-height: 1.1;
  }
  .object-label {
    font-size: 15px;
    font-weight: 700;
    color: #166534;
  }
  .strokes-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .strokes-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
  }
  .strokes-desc {
    font-size: 14px;
    font-weight: 700;
    color: #1e2945;
  }

  /* Controls */
  .control-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .ctrl-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
    transition: background-color 0.2s;
  }
  .ctrl-btn:active {
    background: #f1f5f9;
  }
  .order-indicator {
    font-size: 14px;
    font-weight: 800;
    color: #3b82f6;
    background: #eff6ff;
    padding: 6px 14px;
    border-radius: 20px;
  }
</style>
</head>
<body>

<div class="diagram-root">
  
  <div class="letter-nav" role="tablist">
    <button class="nav-btn active" data-index="0" aria-label="Letter A">A</button>
    <button class="nav-btn" data-index="1" aria-label="Letter B">B</button>
    <button class="nav-btn" data-index="2" aria-label="Letter C">C</button>
    <button class="nav-btn" data-index="3" aria-label="Letter D">D</button>
    <button class="nav-btn" data-index="4" aria-label="Letter E">E</button>
    <button class="nav-btn" data-index="5" aria-label="Letter F">F</button>
  </div>

  
  <div class="stage-box">
    
    <div class="slide active">
      <div class="letter-view">
        <div class="guideline guide-top"></div>
        <div class="guideline guide-mid"></div>
        <div class="guideline guide-bot"></div>
        <span class="big-letter">A</span>
      </div>
      <div class="info-view">
        <div class="object-card">
          <div class="object-emoji">🍎</div>
          <div class="object-label">Apple</div>
        </div>
        <div class="strokes-card">
          <div class="strokes-title">Shape</div>
          <div class="strokes-desc">2 Slants + Crossbar</div>
        </div>
      </div>
    </div>

    
    <div class="slide">
      <div class="letter-view">
        <div class="guideline guide-top"></div>
        <div class="guideline guide-mid"></div>
        <div class="guideline guide-bot"></div>
        <span class="big-letter">B</span>
      </div>
      <div class="info-view">
        <div class="object-card">
          <div class="object-emoji">🐻</div>
          <div class="object-label">Bear</div>
        </div>
        <div class="strokes-card">
          <div class="strokes-title">Shape</div>
          <div class="strokes-desc">Straight Line + 2 Loops</div>
        </div>
      </div>
    </div>

    
    <div class="slide">
      <div class="letter-view">
        <div class="guideline guide-top"></div>
        <div class="guideline guide-mid"></div>
        <div class="guideline guide-bot"></div>
        <span class="big-letter">C</span>
      </div>
      <div class="info-view">
        <div class="object-card">
          <div class="object-emoji">🐱</div>
          <div class="object-label">Cat</div>
        </div>
        <div class="strokes-card">
          <div class="strokes-title">Shape</div>
          <div class="strokes-desc">1 Big Curve</div>
        </div>
      </div>
    </div>

    
    <div class="slide">
      <div class="letter-view">
        <div class="guideline guide-top"></div>
        <div class="guideline guide-mid"></div>
        <div class="guideline guide-bot"></div>
        <span class="big-letter">D</span>
      </div>
      <div class="info-view">
        <div class="object-card">
          <div class="object-emoji">🐶</div>
          <div class="object-label">Dog</div>
        </div>
        <div class="strokes-card">
          <div class="strokes-title">Shape</div>
          <div class="strokes-desc">Straight Line + 1 Curve</div>
        </div>
      </div>
    </div>

    
    <div class="slide">
      <div class="letter-view">
        <div class="guideline guide-top"></div>
        <div class="guideline guide-mid"></div>
        <div class="guideline guide-bot"></div>
        <span class="big-letter">E</span>
      </div>
      <div class="info-view">
        <div class="object-card">
          <div class="object-emoji">🐘</div>
          <div class="object-label">Elephant</div>
        </div>
        <div class="strokes-card">
          <div class="strokes-title">Shape</div>
          <div class="strokes-desc">Straight Line + 3 Bars</div>
        </div>
      </div>
    </div>

    
    <div class="slide">
      <div class="letter-view">
        <div class="guideline guide-top"></div>
        <div class="guideline guide-mid"></div>
        <div class="guideline guide-bot"></div>
        <span class="big-letter">F</span>
      </div>
      <div class="info-view">
        <div class="object-card">
          <div class="object-emoji">🐟</div>
          <div class="object-label">Fish</div>
        </div>
        <div class="strokes-card">
          <div class="strokes-title">Shape</div>
          <div class="strokes-desc">Straight Line + 2 Bars</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="control-bar">
    <button class="ctrl-btn" id="prevBtn">← Back</button>
    <div class="order-indicator" id="orderTxt">Letter 1 of 6</div>
    <button class="ctrl-btn" id="nextBtn">Next →</button>
  </div>
</div>

<script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
<script>
  const slides = $$('.slide');
  const navBtns = $$('.nav-btn');
  const orderTxt = $('#orderTxt');
  let currentIdx = 0;

  function updateView(index) {
    currentIdx = (index + slides.length) % slides.length;
    
    slides.forEach((s, i) => {
      s.classList.toggle('active', i === currentIdx);
    });
    
    navBtns.forEach((b, i) => {
      b.classList.toggle('active', i === currentIdx);
    });
    
    orderTxt.textContent = `Letter ${currentIdx + 1} of 6`;
  }

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

  onTap($('#prevBtn'), () => updateView(currentIdx - 1));
  onTap($('#nextBtn'), () => updateView(currentIdx + 1));
</script>
</body>
</html>

What comes after C? Three more letter friends are waiting in line!

Upper-case **D** has a straight back and one giant belly. Upper-case **E** has a straight spine with **three horizontal arms** sticking out to the right.

Upper-case **F** looks almost like E, but it only has **two horizontal arms**—the bottom arm is missing!

<!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, sans-serif;
    background: transparent;
    color: #1e2945;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }
  .app-container {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .nav-bar {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
  }
  .letter-btn {
    appearance: none;
    border: 2px solid transparent;
    background: #ffffff;
    padding: 8px 0;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    text-align: center;
  }
  .letter-btn:active {
    opacity: 0.8;
  }
  .letter-btn.active {
    color: #ffffff;
    background: #22b7ff;
    box-shadow: 0 3px 8px rgba(34, 183, 255, 0.35);
  }
  .display-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
  }
  .main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
  }
  .letter-box {
    width: 110px;
    height: 120px;
    border-radius: 16px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    color: #1e2945;
    border: 2px dashed #cbd5e1;
    transition: color 0.3s ease;
  }
  .picture-box {
    width: 110px;
    height: 120px;
    border-radius: 16px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .picture-icon {
    font-size: 48px;
    line-height: 1;
  }
  .picture-word {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: 0.5px;
  }
  .badge-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }
  .stroke-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
  }
  .stroke-badge.accent-arm {
    background: #fef3c7;
    color: #b45309;
  }
  .stroke-badge.accent-curve {
    background: #ede9fe;
    color: #6d28d9;
  }
  .stroke-badge.accent-line {
    background: #ccfbf1;
    color: #0f766e;
  }
  .controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
  }
  .btn-ctrl {
    appearance: none;
    border: none;
    background: #ffffff;
    color: #1e2945;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .dot.active {
    background: #22b7ff;
    width: 18px;
    border-radius: 4px;
  }
</style>
</head>
<body>
<div class="app-container">
  <div class="nav-bar" id="navBar">
    <button class="letter-btn active" data-index="0">A</button>
    <button class="letter-btn" data-index="1">B</button>
    <button class="letter-btn" data-index="2">C</button>
    <button class="letter-btn" data-index="3">D</button>
    <button class="letter-btn" data-index="4">E</button>
    <button class="letter-btn" data-index="5">F</button>
  </div>

  <div class="display-card">
    <div class="main-row">
      <div class="letter-box" id="bigLetter">A</div>
      <div class="picture-box">
        <div class="picture-icon" id="picIcon">🍎</div>
        <div class="picture-word" id="picWord">Apple</div>
      </div>
    </div>
    <div class="badge-row" id="badgeRow">
      
    </div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" id="prevBtn">← Back</button>
    <div class="dots" id="dotsContainer">
      <div class="dot active" data-index="0"></div>
      <div class="dot" data-index="1"></div>
      <div class="dot" data-index="2"></div>
      <div class="dot" data-index="3"></div>
      <div class="dot" data-index="4"></div>
      <div class="dot" data-index="5"></div>
    </div>
    <button class="btn-ctrl" id="nextBtn">Next →</button>
  </div>
</div>

<script>
  const letters = [
    {
      letter: 'A',
      emoji: '🍎',
      word: 'Apple',
      color: '#ef4444',
      badges: [
        { text: '2 Slanted Lines / \\', class: 'accent-line' },
        { text: '1 Crossbar —', class: 'accent-arm' }
      ]
    },
    {
      letter: 'B',
      emoji: '🐻',
      word: 'Bear',
      color: '#f97316',
      badges: [
        { text: '1 Straight Line |', class: 'accent-line' },
        { text: '2 Round Curves ↄ', class: 'accent-curve' }
      ]
    },
    {
      letter: 'C',
      emoji: '🐱',
      word: 'Cat',
      color: '#8b5cf6',
      badges: [
        { text: '1 Open Curve ◯', class: 'accent-curve' }
      ]
    },
    {
      letter: 'D',
      emoji: '🐶',
      word: 'Dog',
      color: '#14b8a6',
      badges: [
        { text: '1 Straight Line |', class: 'accent-line' },
        { text: '1 Big Curve ↄ', class: 'accent-curve' }
      ]
    },
    {
      letter: 'E',
      emoji: '🐘',
      word: 'Elephant',
      color: '#3b82f6',
      badges: [
        { text: '1 Straight Line |', class: 'accent-line' },
        { text: '3 Horizontal Arms', class: 'accent-arm' }
      ]
    },
    {
      letter: 'F',
      emoji: '🐟',
      word: 'Fish',
      color: '#06b6d4',
      badges: [
        { text: '1 Straight Line |', class: 'accent-line' },
        { text: '2 Horizontal Arms', class: 'accent-arm' }
      ]
    }
  ];

  let currentIndex = 0;

  const letterBtns = document.querySelectorAll('.letter-btn');
  const dots = document.querySelectorAll('.dot');
  const bigLetter = document.getElementById('bigLetter');
  const picIcon = document.getElementById('picIcon');
  const picWord = document.getElementById('picWord');
  const badgeRow = document.getElementById('badgeRow');
  const prevBtn = document.getElementById('prevBtn');
  const nextBtn = document.getElementById('nextBtn');

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

    letterBtns.forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });

    dots.forEach((dot, i) => {
      dot.classList.toggle('active', i === index);
    });

    bigLetter.textContent = item.letter;
    bigLetter.style.color = item.color;
    picIcon.textContent = item.emoji;
    picWord.textContent = item.word;

    badgeRow.innerHTML = '';
    item.badges.forEach(b => {
      const badge = document.createElement('span');
      badge.className = `stroke-badge ${b.class}`;
      badge.textContent = b.text;
      badgeRow.appendChild(badge);
    });
  }

  letterBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      render(parseInt(btn.getAttribute('data-index'), 10));
    });
  });

  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      render(parseInt(dot.getAttribute('data-index'), 10));
    });
  });

  prevBtn.addEventListener('click', () => {
    const nextIdx = (currentIndex - 1 + letters.length) % letters.length;
    render(nextIdx);
  });

  nextBtn.addEventListener('click', () => {
    const nextIdx = (currentIndex + 1) % letters.length;
    render(nextIdx);
  });

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

Can you put all six letters together in order from start to finish?

Here is the whole team standing in alphabetical order: **A, B, C, D, E, and F**.

<!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 A to F</title>
<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: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
  }

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

  /* Direction Indicator Banner */
  .order-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .order-guide .arrow {
    color: #3b82f6;
    font-size: 16px;
    font-weight: 900;
  }

  /* Main Stage / Big Letter Spotlight */
  .spotlight-card {
    width: 100%;
    height: 150px;
    background: #f8fafc;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #e2e8f0;
  }

  .big-letter {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    transition: transform 0.3s ease, color 0.3s ease;
    will-change: transform;
  }

  .position-badge {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    background: #e2e8f0;
    padding: 3px 10px;
    border-radius: 12px;
    transition: background 0.3s ease, color 0.3s ease;
  }

  /* Letter Train Track */
  .track-container {
    width: 100%;
    position: relative;
    padding-bottom: 8px;
  }

  .track-rail {
    position: absolute;
    bottom: 22px;
    left: 4%;
    right: 4%;
    height: 6px;
    background: #cbd5e1;
    border-radius: 3px;
    z-index: 1;
  }

  .track-rail::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, #94a3b8 0 8px, transparent 8px 24px);
  }

  .train-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    gap: 6px;
  }

  /* Train Letter Cars */
  .train-car {
    flex: 1;
    max-width: 80px;
    height: 84px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 6px 4px 8px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), inset 0 0 0 2px rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
  }

  .train-car:active {
    transform: translateY(2px);
  }

  .car-letter {
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    color: #1e293b;
  }

  .car-order {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
  }

  .car-wheels {
    display: flex;
    gap: 16px;
    position: absolute;
    bottom: -6px;
  }

  .wheel {
    width: 12px;
    height: 12px;
    background: #475569;
    border: 2px solid #ffffff;
    border-radius: 50%;
  }

  /* Letter Palette Themes */
  .car-0.active { box-shadow: 0 0 0 3px #3b82f6, 0 8px 16px rgba(59, 130, 246, 0.25); background: #eff6ff; }
  .car-1.active { box-shadow: 0 0 0 3px #ec4899, 0 8px 16px rgba(236, 72, 153, 0.25); background: #fdf2f8; }
  .car-2.active { box-shadow: 0 0 0 3px #10b981, 0 8px 16px rgba(16, 185, 129, 0.25); background: #ecfdf5; }
  .car-3.active { box-shadow: 0 0 0 3px #f59e0b, 0 8px 16px rgba(245, 158, 11, 0.25); background: #fffbeb; }
  .car-4.active { box-shadow: 0 0 0 3px #8b5cf6, 0 8px 16px rgba(139, 92, 246, 0.25); background: #f5f3ff; }
  .car-5.active { box-shadow: 0 0 0 3px #06b6d4, 0 8px 16px rgba(6, 182, 212, 0.25); background: #ecfeff; }

  /* Controls Bar */
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 2px;
  }

  .btn {
    border: none;
    background: #f1f5f9;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .btn:active {
    background: #e2e8f0;
  }

  .btn-primary {
    background: #3b82f6;
    color: #ffffff;
  }

  .btn-primary:active {
    background: #2563eb;
  }

  @media (max-width: 400px) {
    .big-letter { font-size: 60px; }
    .spotlight-card { height: 130px; }
    .car-letter { font-size: 24px; }
    .train-car { height: 76px; }
    .car-wheels { gap: 10px; }
    .wheel { width: 10px; height: 10px; }
  }
</style>
</head>
<body>

<div class="diagram-content">
  
  <div class="order-guide">
    <span>Left to Right</span>
    <span class="arrow">→</span>
    <span>Alphabetical Order</span>
  </div>

  
  <div class="spotlight-card" id="spotlight">
    <div class="big-letter" id="letterDisplay">A</div>
    <div class="position-badge" id="orderBadge">Letter 1</div>
  </div>

  
  <div class="track-container">
    <div class="track-rail"></div>
    <div class="train-row">
      <div class="train-car car-0 active" onclick="selectLetter(0)">
        <span class="car-letter" style="color: #3b82f6;">A</span>
        <span class="car-order">1st</span>
        <div class="car-wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="train-car car-1" onclick="selectLetter(1)">
        <span class="car-letter" style="color: #ec4899;">B</span>
        <span class="car-order">2nd</span>
        <div class="car-wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="train-car car-2" onclick="selectLetter(2)">
        <span class="car-letter" style="color: #10b981;">C</span>
        <span class="car-order">3rd</span>
        <div class="car-wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="train-car car-3" onclick="selectLetter(3)">
        <span class="car-letter" style="color: #f59e0b;">D</span>
        <span class="car-order">4th</span>
        <div class="car-wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="train-car car-4" onclick="selectLetter(4)">
        <span class="car-letter" style="color: #8b5cf6;">E</span>
        <span class="car-order">5th</span>
        <div class="car-wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
      <div class="train-car car-5" onclick="selectLetter(5)">
        <span class="car-letter" style="color: #06b6d4;">F</span>
        <span class="car-order">6th</span>
        <div class="car-wheels"><div class="wheel"></div><div class="wheel"></div></div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" onclick="step(-1)">←</button>
    <button class="btn btn-primary" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span>
      <span id="playText">Pause</span>
    </button>
    <button class="btn" id="nextBtn" onclick="step(1)">→</button>
  </div>
</div>

<script>
  const letters = [
    { char: 'A', order: 'Letter 1', color: '#3b82f6', bg: '#eff6ff' },
    { char: 'B', order: 'Letter 2', color: '#ec4899', bg: '#fdf2f8' },
    { char: 'C', order: 'Letter 3', color: '#10b981', bg: '#ecfdf5' },
    { char: 'D', order: 'Letter 4', color: '#f59e0b', bg: '#fffbeb' },
    { char: 'E', order: 'Letter 5', color: '#8b5cf6', bg: '#f5f3ff' },
    { char: 'F', order: 'Letter 6', color: '#06b6d4', bg: '#ecfeff' }
  ];

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

  const letterDisplay = document.getElementById('letterDisplay');
  const orderBadge = document.getElementById('orderBadge');
  const spotlight = document.getElementById('spotlight');
  const cars = document.querySelectorAll('.train-car');
  const playIcon = document.getElementById('playIcon');
  const playText = document.getElementById('playText');

  function updateView() {
    const item = letters[currentIndex];
    
    // Update active car
    cars.forEach((car, idx) => {
      car.classList.toggle('active', idx === currentIndex);
    });

    // Animate stage
    letterDisplay.textContent = item.char;
    letterDisplay.style.color = item.color;
    orderBadge.textContent = item.order;
    spotlight.style.backgroundColor = item.bg;
  }

  function selectLetter(index) {
    currentIndex = index;
    updateView();
    speakLetter(letters[currentIndex].char);
  }

  function step(delta) {
    currentIndex = (currentIndex + delta + letters.length) % letters.length;
    updateView();
  }

  function speakLetter(char) {
    if ('speechSynthesis' in window) {
      window.speechSynthesis.cancel();
      const utterance = new SpeechSynthesisUtterance(char);
      utterance.rate = 0.85;
      utterance.pitch = 1.1;
      window.speechSynthesis.speak(utterance);
    }
  }

  function tick() {
    currentIndex = (currentIndex + 1) % letters.length;
    updateView();
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    if (isPlaying) {
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
      timer = setInterval(tick, 3000);
    } else {
      playIcon.textContent = '▶';
      playText.textContent = 'Play';
      clearInterval(timer);
    }
  }

  // Start auto-cycle with calm pedagogical pacing (3s)
  timer = setInterval(tick, 3000);
  updateView();
</script>

</body>
</html>

Point to each letter from left to right and say its name out loud: **A**, **B**, **C**, **D**, **E**, **F**!

Recognising Upper-Case Letters A to F. Name and recognise the upper-case letters A, B, C, D, E and F.

Identify Upper-Case Letters: A to F (Australian Curriculum Foundation AC9EFLY11)

Recognising Letters of the Alphabet and Upper-Case Forms

Upper-Case Letter Recognition and Formation: Letters A–F (AC9EFLY11)

Instruction for Foundation students should follow explicit, multimodal approaches: (1) Visual Discrimination: Teach explicit feature analysis (straight lines vs. curved loops) to preempt common mirror/confusion errors like B/D and E/F. (2) Multisensory Tracing: Use sky-writing, sensory sand trays, and play dough tracing to reinforce the physical strokes of each upper-case letter. (3) Consistent Naming: Explicitly distinguish letter name ('This letter is called B') from its phoneme sound ('It makes the /b/ sound'). (4) Retrieval Practice: Use rapid-naming flashcards and playful sorting games to build automaticity within the A to F cluster.

Recognising Upper-Case Letters A to F

Letters A, B, and C

Letters D, E, and F