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

If you see a fluffy puppy jump high into the air, how can you share that fun moment with your friends?

In **Shared Writing**, we work together as a team while the teacher models writing and invites us to 'share the pen'.

What is the very first thing we do before we pick up a pencil?

We begin with **Oral Sentence Rehearsal**: saying, clapping, and repeating the idea aloud to hold the whole sentence in our memory.

Next, we hold up our fingers and count each word: *The — dog — can — jump.* That makes **4 words** to write!

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

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

    .words-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      width: 100%;
    }

    .word-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

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

    .word-card.counted {
      border-color: #38bdf8;
      background-color: #f8fafc;
    }

    .finger-icon {
      font-size: 26px;
      line-height: 1;
      filter: grayscale(100%);
      opacity: 0.35;
      transition: filter 0.25s ease, opacity 0.25s ease;
    }

    .word-card.active .finger-icon,
    .word-card.counted .finger-icon {
      filter: grayscale(0%);
      opacity: 1;
    }

    .word-text {
      font-size: 19px;
      font-weight: 700;
      color: #94a3b8;
      transition: color 0.25s ease;
    }

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

    .word-card.counted .word-text {
      color: #1e2945;
    }

    .num-pill {
      font-size: 12px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #64748b;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .word-card.active .num-pill {
      background: #22b7ff;
      color: #ffffff;
    }

    .word-card.counted .num-pill {
      background: #e0f2fe;
      color: #0369a1;
    }

    /* Summary Bar */
    .summary-card {
      width: 100%;
      background: #fefce8;
      border: 2px dashed #fde047;
      border-radius: 16px;
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .summary-left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #713f12;
    }

    .count-badge {
      font-size: 20px;
      font-weight: 800;
      color: #0284c7;
      background: #ffffff;
      border: 2px solid #bae6fd;
      border-radius: 12px;
      padding: 4px 14px;
      min-width: 48px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      user-select: none;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .dots-nav {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .nav-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: none;
      padding: 0;
      transition: background-color 0.2s ease;
    }

    .nav-dot.active {
      background: #22b7ff;
    }

    @media (max-width: 380px) {
      .word-text {
        font-size: 16px;
      }
      .finger-icon {
        font-size: 22px;
      }
      .word-card {
        padding: 10px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="canvas">
    
    <div class="words-grid">
      <div class="word-card" data-step="0" role="button" aria-label="Word 1: The">
        <span class="finger-icon">☝️</span>
        <span class="word-text">The</span>
        <span class="num-pill">1</span>
      </div>

      <div class="word-card" data-step="1" role="button" aria-label="Word 2: dog">
        <span class="finger-icon">✌️</span>
        <span class="word-text">dog</span>
        <span class="num-pill">2</span>
      </div>

      <div class="word-card" data-step="2" role="button" aria-label="Word 3: can">
        <span class="finger-icon">🤟</span>
        <span class="word-text">can</span>
        <span class="num-pill">3</span>
      </div>

      <div class="word-card" data-step="3" role="button" aria-label="Word 4: jump">
        <span class="finger-icon">🖐️</span>
        <span class="word-text">jump</span>
        <span class="num-pill">4</span>
      </div>
    </div>

    
    <div class="summary-card">
      <div class="summary-left">
        <span>Total:</span>
      </div>
      <div class="count-badge" id="countDisplay">1 / 4</div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" aria-label="Previous word">←</button>
      <button class="btn" id="playBtn" aria-label="Auto count">▶ Auto</button>
      <button class="btn" id="nextBtn" aria-label="Next word">→</button>

      <div class="dots-nav">
        <button class="nav-dot active" data-step="0" aria-label="Go to word 1"></button>
        <button class="nav-dot" data-step="1" aria-label="Go to word 2"></button>
        <button class="nav-dot" data-step="2" aria-label="Go to word 3"></button>
        <button class="nav-dot" data-step="3" aria-label="Go to word 4"></button>
      </div>
    </div>
  </div>

  <script>
    const cards = Array.from(document.querySelectorAll('.word-card'));
    const dots = Array.from(document.querySelectorAll('.nav-dot'));
    const countDisplay = document.getElementById('countDisplay');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentStep = 0;
    const totalSteps = 4;
    let timer = null;
    let isPlaying = false;

    function render(step) {
      currentStep = step;
      cards.forEach((card, idx) => {
        card.classList.toggle('active', idx === currentStep);
        card.classList.toggle('counted', idx < currentStep);
      });

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

      if (currentStep === totalSteps - 1) {
        countDisplay.textContent = '4 words!';
      } else {
        countDisplay.textContent = (currentStep + 1) + ' / 4';
      }
    }

    function goTo(step) {
      render((step + totalSteps) % totalSteps);
    }

    function startAuto() {
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        goTo(currentStep + 1);
      }, 3000);
    }

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

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

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

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

    cards.forEach((card, i) => {
      card.addEventListener('click', () => {
        stopAuto();
        goTo(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopAuto();
        goTo(i);
      });
    });

    // Start in active initial state
    render(0);
  </script>
</body>
</html>

Now that we know our four words, how do we put them onto the paper?

We use **Sentence Boundary Punctuation** to frame our sentence, starting our first word with an uppercase **capital letter**.

When spelling regular CVC words like *dog* or *can*, we use **Phonemic Segmentation** to break the word into individual sounds (/d/ - /o/ - /g/) and write matching letters.

To spell regular CVC words like *dog*, we use **Phonemic Segmentation** to stretch out each sound (/d/ - /o/ - /g/) and write the matching letter.

To show clear **Word Boundaries**, we leave **Finger Spaces** between separate words so they never bump together.

<!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>Finger Spaces and Word Boundaries</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

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

    /* Toggle bar */
    .toggle-bar {
      display: flex;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 999px;
      gap: 4px;
    }

    .toggle-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Paper ruled lines container */
    .paper-canvas {
      position: relative;
      width: 100%;
      height: 200px;
      background: #f8fafc;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Handwriting guide lines */
    .guideline {
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
    }

    .line-top {
      top: 28%;
      border-top: 2px dashed #cbd5e1;
    }

    .line-mid {
      top: 50%;
      border-top: 2px dotted #94a3b8;
    }

    .line-base {
      top: 72%;
      border-top: 2px solid #38bdf8;
    }

    /* Sentence row */
    .sentence-track {
      position: relative;
      display: flex;
      align-items: baseline;
      justify-content: center;
      z-index: 2;
      transition: all 0.4s ease;
    }

    .word-card {
      font-size: 38px;
      font-weight: 700;
      letter-spacing: -0.5px;
      color: #0f172a;
      padding: 2px 4px;
      border-radius: 8px;
      background: transparent;
      transition: color 0.3s ease, background 0.3s ease;
      white-space: nowrap;
    }

    /* Finger space gap */
    .space-gap {
      width: 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow: visible;
      position: relative;
      transition: width 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
    }

    .finger-indicator {
      position: absolute;
      top: -46px;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transform: translateY(-8px) scale(0.7);
      transition: all 0.35s cubic-bezier(0.34, 1.3, 0.64, 1);
      pointer-events: none;
    }

    .finger-icon {
      font-size: 26px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
    }

    .space-marker {
      width: 32px;
      height: 70px;
      border: 2px dashed #38bdf8;
      background: rgba(56, 189, 248, 0.12);
      border-radius: 6px;
      margin-top: 2px;
    }

    /* Mode: With Finger Space */
    .mode-spaced .space-gap {
      width: 44px;
    }

    .mode-spaced .finger-indicator {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* Mode: Without Space (Collision state) */
    .mode-cramped .word-card {
      color: #dc2626;
    }

    .mode-cramped .sentence-track {
      animation: nudge 0.4s ease;
    }

    @keyframes nudge {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-3px); }
      75% { transform: translateX(3px); }
    }

    /* Visual status badge */
    .status-badge {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

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

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

    @media (max-width: 420px) {
      .word-card {
        font-size: 28px;
      }
      .mode-spaced .space-gap {
        width: 32px;
      }
      .space-marker {
        width: 24px;
        height: 55px;
      }
      .finger-icon {
        font-size: 20px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="toggle-bar">
      <button class="toggle-btn" id="btn-bad" onclick="setMode('cramped')">
        <span>❌</span> No Space
      </button>
      <button class="toggle-btn active" id="btn-good" onclick="setMode('spaced')">
        <span>☝️</span> Finger Space
      </button>
    </div>

    
    <div class="paper-canvas">
      <div class="guideline line-top"></div>
      <div class="guideline line-mid"></div>
      <div class="guideline line-base"></div>

      <div class="sentence-track mode-spaced" id="sentenceTrack">
        <span class="word-card">The</span>
        
        <div class="space-gap">
          <div class="finger-indicator">
            <span class="finger-icon">☝️</span>
            <div class="space-marker"></div>
          </div>
        </div>

        <span class="word-card">cat</span>

        <div class="space-gap">
          <div class="finger-indicator">
            <span class="finger-icon">☝️</span>
            <div class="space-marker"></div>
          </div>
        </div>

        <span class="word-card">is</span>

        <div class="space-gap">
          <div class="finger-indicator">
            <span class="finger-icon">☝️</span>
            <div class="space-marker"></div>
          </div>
        </div>

        <span class="word-card">big.</span>
      </div>
    </div>

    
    <div id="statusBadge" class="status-badge badge-good">
      <span>✓</span> Clear Word Boundaries
    </div>
  </div>

  <script>
    function setMode(mode) {
      const track = document.getElementById('sentenceTrack');
      const btnGood = document.getElementById('btn-good');
      const btnBad = document.getElementById('btn-bad');
      const badge = document.getElementById('statusBadge');

      if (mode === 'spaced') {
        track.className = 'sentence-track mode-spaced';
        btnGood.classList.add('active');
        btnBad.classList.remove('active');
        badge.className = 'status-badge badge-good';
        badge.innerHTML = '<span>✓</span> Clear Word Boundaries';
      } else {
        track.className = 'sentence-track mode-cramped';
        btnBad.classList.add('active');
        btnGood.classList.remove('active');
        badge.className = 'status-badge badge-bad';
        badge.innerHTML = '<span>❌</span> Words Bump Together';
      }
    }
  </script>
</body>
</html>

What happens if we forget to put spaces between our words?

If we forget spaces, words squish together into *Thedogcanjump*, which is super hard to read!

At the end, we add terminal punctuation like a **period** to show that our thought is complete.

Finally, we do a **Shared Rereading**, tracking from left to right to check our words, spelling, spacing, and punctuation: **The dog can jump.**

Shared Writing: Writing a Sentence Together. Participate in shared writing of a short text to record an idea.

Explicit Instruction and Shared Writing in Early Literacy

Shared Writing: Making the Composing Process Visible

What is a Sentence? KS1 English Primary Literacy

Instruction for Foundation AC9EFLY06 follows the Gradual Release of Responsibility ('I do, We do, You do') model, centering on the 'We do' phase through joint construction. The teacher reduces cognitive load by scribing while explicitly modeling metacognitive think-alouds for handwriting, spacing, and punctuation, allowing Foundation students to focus their working memory on oral language formulation, phonemic segmentation of CVC words, and applying basic sentence boundaries (capital letter and full stop).

Shared Writing: Writing a Sentence Together

Step 1: Think and Count

Step 2: Build the Sentence