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

Put your hand on your chest. You can feel a steady thump-thump-thump, like a little drum.

A steady, repeating tap like that is called a **beat**.

<!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>Steady Beat & Rhythm</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    .main-stage {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: auto 0;
    }

    /* Grid of 4 Beats */
    .beat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
    }

    /* Words Row */
    .word-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 14px;
      padding: 12px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 76px;
      transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    }

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

    .word-card .syllables {
      display: flex;
      gap: 4px;
    }

    .syllable-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      transition: background-color 0.2s ease;
    }

    /* Steady Beat Row */
    .beat-card {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 14px;
      padding: 10px 4px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 70px;
      transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    }

    .beat-num {
      font-size: 22px;
      font-weight: 800;
      color: #64748b;
    }

    .beat-icon {
      font-size: 14px;
      opacity: 0.6;
    }

    /* Active Highlight States */
    .beat-card.active {
      border-color: #ff5722;
      background: #fff5f2;
      box-shadow: 0 4px 14px rgba(255, 87, 34, 0.2);
      transform: translateY(-2px);
    }

    .beat-card.active .beat-num {
      color: #ff5722;
    }

    .word-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.2);
      transform: translateY(-2px);
    }

    .word-card.active .word {
      color: #0284c7;
    }

    .word-card.active .syllable-dot {
      background: #22b7ff;
    }

    /* Row Label */
    .row-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

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

    .btn {
      padding: 10px 20px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #e6e6e6;
      background: #ffffff;
      color: #1e2945;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .btn-primary {
      background: #ff5722;
      border-color: #ff5722;
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(255, 87, 34, 0.25);
    }

    .btn-primary:active {
      background: #e64a19;
    }

    .tempo-pill {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 6px 12px;
      border-radius: 12px;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div style="display:flex; flex-direction:column; gap:6px;">
      <div class="row-header">
        <span>Words (Rhythm)</span>
        <span style="color:#0284c7;">Syllables</span>
      </div>
      <div class="beat-grid" id="words-grid">
        <div class="word-card" id="w-0">
          <span class="word">Rain,</span>
          <div class="syllables"><span class="syllable-dot"></span></div>
        </div>
        <div class="word-card" id="w-1">
          <span class="word">rain,</span>
          <div class="syllables"><span class="syllable-dot"></span></div>
        </div>
        <div class="word-card" id="w-2">
          <span class="word">go a-</span>
          <div class="syllables">
            <span class="syllable-dot"></span>
            <span class="syllable-dot"></span>
          </div>
        </div>
        <div class="word-card" id="w-3">
          <span class="word">-way!</span>
          <div class="syllables"><span class="syllable-dot"></span></div>
        </div>
      </div>
    </div>

    
    <div style="display:flex; flex-direction:column; gap:6px;">
      <div class="row-header">
        <span>Steady Beat</span>
        <span style="color:#ff5722;">1 2 3 4</span>
      </div>
      <div class="beat-grid" id="beats-grid">
        <div class="beat-card" id="b-0">
          <span class="beat-num">1</span>
          <span class="beat-icon">🥁</span>
        </div>
        <div class="beat-card" id="b-1">
          <span class="beat-num">2</span>
          <span class="beat-icon">🥁</span>
        </div>
        <div class="beat-card" id="b-2">
          <span class="beat-num">3</span>
          <span class="beat-icon">🥁</span>
        </div>
        <div class="beat-card" id="b-3">
          <span class="beat-num">4</span>
          <span class="beat-icon">🥁</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn btn-primary" id="play-btn">
      <span id="play-icon">▶</span>
      <span id="play-text">Play Beat</span>
    </button>
    <div class="tempo-pill">Steady Pulse ⏱</div>
  </div>

  <script>
    let isPlaying = false;
    let currentBeat = 0;
    let intervalId = null;
    let audioCtx = null;

    const playBtn = document.getElementById('play-btn');
    const playIcon = document.getElementById('play-icon');
    const playText = document.getElementById('play-text');

    function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
    }

    function playWoodblock(isStrong) {
      if (!audioCtx) return;
      try {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(isStrong ? 600 : 440, audioCtx.currentTime);
        gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.09);
      } catch (e) {}
    }

    function step() {
      for (let i = 0; i < 4; i++) {
        document.getElementById(`b-${i}`).classList.remove('active');
        document.getElementById(`w-${i}`).classList.remove('active');
      }

      document.getElementById(`b-${currentBeat}`).classList.add('active');
      document.getElementById(`w-${currentBeat}`).classList.add('active');

      playWoodblock(currentBeat === 0);

      currentBeat = (currentBeat + 1) % 4;
    }

    function start() {
      initAudio();
      isPlaying = true;
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
      step();
      intervalId = setInterval(step, 800);
    }

    function stop() {
      isPlaying = false;
      playIcon.textContent = '▶';
      playText.textContent = 'Play Beat';
      clearInterval(intervalId);
      intervalId = null;
    }

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

    // Make individual beats tappable for direct student exploration
    for (let i = 0; i < 4; i++) {
      const beatEl = document.getElementById(`b-${i}`);
      const wordEl = document.getElementById(`w-${i}`);

      const tapHandler = () => {
        initAudio();
        stop();
        for (let j = 0; j < 4; j++) {
          document.getElementById(`b-${j}`).classList.remove('active');
          document.getElementById(`w-${j}`).classList.remove('active');
        }
        beatEl.classList.add('active');
        wordEl.classList.add('active');
        currentBeat = (i + 1) % 4;
        playWoodblock(i === 0);
      };

      beatEl.addEventListener('click', tapHandler);
      wordEl.addEventListener('click', tapHandler);
    }

    // Auto-start visual rhythm gently (silent until user interacts with audio)
    step();
  </script>
</body>
</html>

What happens when we say words along with that steady beat?

When words bounce and flow with a steady beat, they make a **rhythm**.

Listen to how each clap matches the words in this chant: **Rain, rain, go a-way!**

<!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, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .rhythm-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 580px;
      margin-bottom: 16px;
    }

    .beat-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
      min-height: 150px;
    }

    .beat-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.35);
      transform: translateY(-4px);
    }

    .beat-num {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      border-radius: 20px;
      padding: 2px 10px;
    }

    .beat-card.active .beat-num {
      color: #0284c7;
      background: #e0f2fe;
    }

    .word {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.5px;
      text-align: center;
    }

    .syllables {
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: center;
      width: 100%;
    }

    .syl-pill {
      background: #e0f2fe;
      color: #0369a1;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 6px;
      display: inline-block;
    }

    .clap-visual {
      font-size: 24px;
      line-height: 1;
      display: flex;
      gap: 4px;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease;
    }

    .beat-card.active .clap-visual {
      transform: scale(1.2);
    }

    .clap-badge {
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 400px;
    }

    .btn-play {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 24px;
      padding: 10px 24px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
      transition: opacity 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-play:active {
      opacity: 0.9;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }

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

    @media (max-width: 420px) {
      .rhythm-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .beat-card {
        min-height: 120px;
        padding: 10px 4px;
      }
      .word {
        font-size: 18px;
      }
    }
  </style>
</head>
<body>

  <div class="rhythm-grid" id="beatsContainer">
    <div class="beat-card active" data-step="0">
      <span class="beat-num">Beat 1</span>
      <div class="word">Rain,</div>
      <div class="clap-visual">👏</div>
      <span class="clap-badge">1 beat</span>
    </div>

    <div class="beat-card" data-step="1">
      <span class="beat-num">Beat 2</span>
      <div class="word">rain,</div>
      <div class="clap-visual">👏</div>
      <span class="clap-badge">1 beat</span>
    </div>

    <div class="beat-card" data-step="2">
      <span class="beat-num">Beat 3</span>
      <div class="word">go</div>
      <div class="clap-visual">👏</div>
      <span class="clap-badge">1 beat</span>
    </div>

    <div class="beat-card" data-step="3">
      <span class="beat-num">Beat 4</span>
      <div class="word">a-way!</div>
      <div class="clap-visual">👏 👏</div>
      <span class="clap-badge">2 quick</span>
    </div>
  </div>

  <div class="controls">
    <button class="nav-btn" id="prevBtn" aria-label="Previous beat">←</button>
    <button class="btn-play" id="playBtn">
      <span id="playIcon">▶</span>
      <span id="playText">Play Rhythm</span>
    </button>
    <button class="nav-btn" id="nextBtn" aria-label="Next beat">→</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let audioCtx = null;

    function playClapSound(isDouble = false) {
      try {
        if (!audioCtx) {
          audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        }
        if (audioCtx.state === 'suspended') {
          audioCtx.resume();
        }
        
        const triggerPop = (timeOffset = 0, pitch = 380) => {
          const osc = audioCtx.createOscillator();
          const gain = audioCtx.createGain();
          
          osc.type = 'sine';
          osc.frequency.setValueAtTime(pitch, audioCtx.currentTime + timeOffset);
          osc.frequency.exponentialRampToValueAtTime(80, audioCtx.currentTime + timeOffset + 0.08);

          gain.gain.setValueAtTime(0.3, audioCtx.currentTime + timeOffset);
          gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + timeOffset + 0.08);

          osc.connect(gain);
          gain.connect(audioCtx.destination);

          osc.start(audioCtx.currentTime + timeOffset);
          osc.stop(audioCtx.currentTime + timeOffset + 0.09);
        };

        if (isDouble) {
          triggerPop(0, 420);
          triggerPop(0.2, 480);
        } else {
          triggerPop(0, 400);
        }
      } catch (e) {}
    }

    const cards = $$('.beat-card');
    let currentIndex = 0;
    let timer = null;

    function setBeat(idx, playAudio = true) {
      currentIndex = (idx + cards.length) % cards.length;
      cards.forEach((c, i) => {
        c.classList.toggle('active', i === currentIndex);
      });
      if (playAudio) {
        playClapSound(currentIndex === 3);
      }
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        $('#playIcon').textContent = '▶';
        $('#playText').textContent = 'Play Rhythm';
      } else {
        setBeat(currentIndex, true);
        $('#playIcon').textContent = '⏸';
        $('#playText').textContent = 'Pause';
        timer = setInterval(() => {
          setBeat(currentIndex + 1, true);
        }, 1000);
      }
    }

    cards.forEach((card, idx) => {
      onTap(card, () => {
        if (timer) {
          clearInterval(timer);
          timer = null;
          $('#playIcon').textContent = '▶';
          $('#playText').textContent = 'Play Rhythm';
        }
        setBeat(idx, true);
      });
    });

    onTap($('#playBtn'), togglePlay);
    
    onTap($('#prevBtn'), () => {
      if (timer) {
        clearInterval(timer);
        timer = null;
        $('#playIcon').textContent = '▶';
        $('#playText').textContent = 'Play Rhythm';
      }
      setBeat(currentIndex - 1, true);
    });

    onTap($('#nextBtn'), () => {
      if (timer) {
        clearInterval(timer);
        timer = null;
        $('#playIcon').textContent = '▶';
        $('#playText').textContent = 'Play Rhythm';
      }
      setBeat(currentIndex + 1, true);
    });
  </script>
</body>
</html>

Some words take one long beat, while other words share a beat with quick little steps. Try clapping your hands once for every beat as you say your name out loud!

What Is Rhythm in Poems and Songs?. Recognise the beat and flow (rhythm) of words in poems and songs.

Listening for Rhythm with Author Tony Wilson and Nursery Rhymes (Stage 1 English)

How to Understand Rhythm and Rhyme in Poetry and Songs (KS1 English)

Nursery Rhymes and Chants: Exploring Beat, Rhythm, and Performance in Poetry (Year 1/2)

To master AC9E1LA04 in Years 1-2, instruction should follow an 'I Do, We Do, You Do' multimodal sequence. Begin with call-and-response nursery rhymes and action chants using whole-body percussion (clapping, stomping, swaying) to build physical awareness of beat. Use visual scaffolds like clapping icons and drum markers before asking students to identify meter or cohesion. Explicitly demonstrate the difference between the steady heartbeat (pulse) and the syllable pattern (rhythm) using contrasting examples.

What Is Rhythm in Poems and Songs?

Words Have a Beat

Key takeaways