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

Imagine running a race with no finish line — you would keep running until you ran out of breath!

Sentences need a finish line too, and that tiny dot at the end is called a **full stop**.

<!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>Full Stop Finish Line</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <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: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
    }

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

    /* Controls / Mode Switch */
    .btn-group {
      display: flex;
      background: #e2e8f0;
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
    }

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

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Track Container */
    .track-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
    }

    /* Sentence Display */
    .sentence-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .word {
      font-size: 22px;
      font-weight: 600;
      color: #1e2945;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      padding: 6px 14px;
      border-radius: 10px;
    }

    .word.start {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
    }

    /* Dot Spot */
    .dot-slot {
      min-width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px dashed #94a3b8;
      background: #f8fafc;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
    }

    .dot-slot.filled {
      border: 2px solid #22b7ff;
      background: #e0f2fe;
    }

    .stop-dot {
      width: 16px;
      height: 16px;
      background: #0284c7;
      border-radius: 50%;
      transform: scale(0);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dot-slot.filled .stop-dot {
      transform: scale(1);
    }

    /* Visual Track / Runner */
    .race-track {
      width: 100%;
      height: 48px;
      background: #f1f5f9;
      border-radius: 24px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .track-line {
      position: absolute;
      left: 16px;
      right: 16px;
      height: 3px;
      background: #cbd5e1;
      border-radius: 2px;
    }

    .runner {
      position: absolute;
      left: 12px;
      font-size: 24px;
      line-height: 1;
      transform: translateY(-2px);
      transition: left 1s ease-in-out;
      z-index: 2;
    }

    .finish-gate {
      position: absolute;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      transition: all 0.3s ease;
      z-index: 1;
    }

    .finish-gate.locked {
      border-color: #0284c7;
      background: #0284c7;
      color: #ffffff;
    }

    /* Status Banner */
    .status-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      margin: 0 auto;
      transition: all 0.3s ease;
    }

    .status-badge.complete {
      background: #dcfce7;
      color: #166534;
    }

    .status-badge.incomplete {
      background: #fef3c7;
      color: #92400e;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    <div class="btn-group">
      <button class="tab-btn" id="btn-no-stop" type="button">
        <span>🏃</span> No Stop
      </button>
      <button class="tab-btn active" id="btn-stop" type="button">
        <span>🏁</span> Full Stop
      </button>
    </div>

    
    <div class="track-card">
      
      <div class="sentence-row">
        <span class="word start">The</span>
        <span class="word">cat</span>
        <span class="word">sleeps</span>
        <div class="dot-slot filled" id="dotSlot" title="Tap to toggle full stop">
          <div class="stop-dot"></div>
        </div>
      </div>

      
      <div class="race-track">
        <div class="track-line"></div>
        <div class="runner" id="runner">🏃</div>
        <div class="finish-gate locked" id="gate">🛑</div>
      </div>

      
      <div class="status-badge complete" id="statusBadge">
        <span>✓</span> Finish Line Reached
      </div>
    </div>
  </div>

  <script>
    const dotSlot = document.getElementById('dotSlot');
    const runner = document.getElementById('runner');
    const gate = document.getElementById('gate');
    const statusBadge = document.getElementById('statusBadge');
    const btnNoStop = document.getElementById('btn-no-stop');
    const btnStop = document.getElementById('btn-stop');

    let hasStop = true;

    function renderState() {
      if (hasStop) {
        dotSlot.classList.add('filled');
        gate.classList.add('locked');
        gate.textContent = '🛑';
        btnStop.classList.add('active');
        btnNoStop.classList.remove('active');

        // Animate runner to finish line and stop cleanly
        runner.textContent = '🏃';
        runner.style.left = 'calc(100% - 54px)';
        statusBadge.className = 'status-badge complete';
        statusBadge.innerHTML = '<span>✓</span> Sentence Finished';
      } else {
        dotSlot.classList.remove('filled');
        gate.classList.remove('locked');
        gate.textContent = '⋯';
        btnNoStop.classList.add('active');
        btnStop.classList.remove('active');

        // Runner keeps going past end
        runner.textContent = '🏃💨';
        runner.style.left = 'calc(100% - 28px)';
        statusBadge.className = 'status-badge incomplete';
        statusBadge.innerHTML = '<span>→</span> Keeps Going...';
      }
    }

    btnNoStop.addEventListener('click', () => {
      hasStop = false;
      renderState();
    });

    btnStop.addEventListener('click', () => {
      hasStop = true;
      renderState();
    });

    dotSlot.addEventListener('click', () => {
      hasStop = !hasStop;
      renderState();
    });

    // Initial trigger
    renderState();
  </script>
</body>
</html>

How do we know which sentences need a full stop? Let's meet the sentence type that uses them most.

A **telling sentence** gives information by sharing a fact, an idea, or telling what someone is doing.

Every complete telling sentence starts with a **capital letter** and finishes with a full stop.

<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 20px;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 999px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .stage {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 20px;
      padding: 32px 20px;
      box-shadow: 0 4px 20px rgba(30, 41, 69, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      position: relative;
    }

    .sentence-display {
      display: flex;
      align-items: baseline;
      justify-content: center;
      font-size: 32px;
      font-weight: 600;
      letter-spacing: -0.5px;
      flex-wrap: nowrap;
      user-select: none;
    }

    @media (max-width: 400px) {
      .sentence-display {
        font-size: 26px;
      }
    }

    .cap-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e0f2fe;
      color: #0284c7;
      border-radius: 8px;
      padding: 2px 6px;
      box-shadow: 0 0 0 2px #38bdf8;
      transition: transform 0.25s ease;
    }

    .word-body {
      padding: 0 2px 0 1px;
      color: #1e2945;
    }

    .stop-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fee2e2;
      color: #ef4444;
      border-radius: 8px;
      padding: 2px 8px;
      box-shadow: 0 0 0 2px #f87171;
      font-weight: 800;
      transition: transform 0.25s ease;
    }

    .indicators {
      display: flex;
      justify-content: space-between;
      width: 100%;
      max-width: 360px;
      padding: 0 8px;
    }

    .indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
    }

    .indicator-start {
      align-items: flex-start;
    }

    .indicator-end {
      align-items: flex-end;
    }

    .pointer-arrow {
      font-size: 16px;
      line-height: 1;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    .badge-cap {
      background: #0284c7;
      color: #ffffff;
    }

    .badge-stop {
      background: #ef4444;
      color: #ffffff;
    }

    .pill-hint {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setSentence(0)">1</button>
    <button class="tab-btn" onclick="setSentence(1)">2</button>
    <button class="tab-btn" onclick="setSentence(2)">3</button>
  </div>

  <div class="stage">
    <div class="sentence-display">
      <span class="cap-box" id="capLetter">T</span>
      <span class="word-body" id="bodyText">he dog runs fast</span>
      <span class="stop-box">.</span>
    </div>

    <div class="indicators">
      <div class="indicator indicator-start">
        <span class="pointer-arrow" style="color: #0284c7;">▲</span>
        <div class="badge badge-cap">Capital Letter</div>
        <span class="pill-hint">Start</span>
      </div>

      <div class="indicator indicator-end">
        <span class="pointer-arrow" style="color: #ef4444;">▲</span>
        <div class="badge badge-stop">Full Stop</div>
        <span class="pill-hint">Finish</span>
      </div>
    </div>
  </div>

  <script>
    const sentences = [
      { cap: 'T', body: 'he dog runs fast' },
      { cap: 'W', body: 'e play outside' },
      { cap: 'S', body: 'un is shining' }
    ];

    function setSentence(index) {
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      const capEl = document.getElementById('capLetter');
      const bodyEl = document.getElementById('bodyText');

      capEl.textContent = sentences[index].cap;
      bodyEl.textContent = sentences[index].body;
    }
  </script>
</body>
</html>

What happens if we forget that little dot at the end?

Look at this group of words: *The sun is warm in the sky*

It shares a complete idea, so we add a full stop right after the word *sky* to show the thought is finished.

<!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>Full Stop Placement</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: #1e2945;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #1e2945;
    text-align: center;
  }

  .stage {
    width: 100%;
    max-width: 520px;
    background: #ffffff;
    border-radius: 12px;
    padding: 24px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .sentence-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 8px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    border-bottom: 3px solid #e2e8f0;
    width: 100%;
  }

  .word {
    font-size: 22px;
    font-weight: 600;
    color: #1e2945;
    user-select: none;
  }

  .target {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed #cbd5e1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 24px;
    line-height: 0;
    color: transparent;
  }

  .target:hover {
    border-color: #22b7ff;
    background: #e0f2fe;
  }

  .target.correct {
    border-color: #0284c7;
    background: #1e2945;
    box-shadow: 0 0 0 4px #bae6fd;
    cursor: default;
  }

  .target.correct::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
  }

  .target.wrong {
    border-color: #f59e0b;
    background: #fef3c7;
    animation: shake 0.3s ease;
  }

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

  .feedback {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .feedback.show-correct {
    opacity: 1;
    background: #e0f2fe;
    color: #0369a1;
  }

  .feedback.show-wrong {
    opacity: 1;
    background: #fef3c7;
    color: #92400e;
  }

  .controls {
    display: flex;
    gap: 8px;
  }

  .btn {
    border: none;
    background: #f1f5f9;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .btn:hover {
    background: #e2e8f0;
  }

  .btn.active {
    background: #22b7ff;
    color: #ffffff;
  }
</style>
</head>
<body>

  <div class="title">Where does the full stop go?</div>

  <div class="stage">
    <div class="sentence-line" id="sentenceBox"></div>

    <div class="feedback" id="feedback"></div>

    <div class="controls">
      <button class="btn active" id="btn1" onclick="loadSentence(0)">Idea 1</button>
      <button class="btn" id="btn2" onclick="loadSentence(1)">Idea 2</button>
    </div>
  </div>

<script>
  const sentences = [
    { words: ["The", "sun", "is", "in", "the", "sky"], stopAt: 5 },
    { words: ["Birds", "fly", "up", "high"], stopAt: 3 }
  ];

  let currentIdx = 0;

  function loadSentence(index) {
    currentIdx = index;
    document.getElementById('btn1').classList.toggle('active', index === 0);
    document.getElementById('btn2').classList.toggle('active', index === 1);

    const data = sentences[index];
    const box = document.getElementById('sentenceBox');
    const fb = document.getElementById('feedback');

    fb.className = 'feedback';
    fb.textContent = '';
    box.innerHTML = '';

    data.words.forEach((w, i) => {
      const wordEl = document.createElement('span');
      wordEl.className = 'word';
      wordEl.textContent = w;
      box.appendChild(wordEl);

      // Offer clickable stop target after specific words
      if (i === 1 || i === data.stopAt) {
        const target = document.createElement('button');
        target.className = 'target';
        target.setAttribute('aria-label', 'Place full stop');
        target.onclick = () => checkTarget(i === data.stopAt, target);
        box.appendChild(target);
      }
    });
  }

  function checkTarget(isCorrect, el) {
    const fb = document.getElementById('feedback');
    const allTargets = document.querySelectorAll('.target');

    allTargets.forEach(t => t.classList.remove('wrong'));

    if (isCorrect) {
      el.classList.add('correct');
      fb.className = 'feedback show-correct';
      fb.textContent = 'Complete idea ✓';
      if (window.answerCorrect) {
        window.answerCorrect({ answer: 'end', explanation: 'Thought is finished.' });
      }
    } else {
      el.classList.add('wrong');
      fb.className = 'feedback show-wrong';
      fb.textContent = 'Not finished yet →';
      if (window.answerIncorrect) {
        window.answerIncorrect({ answer: 'middle', feedback: 'Thought is not finished yet.' });
      }
    }
  }

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

Be careful not to drop your full stop too early — wait until the whole thought is finished before putting your dot down.

Next time you write about your favorite toy or snack, check the end of your sentence to make sure your full stop is standing guard!

Full Stops at the End of Telling Sentences. Use a full stop at the end of a sentence that tells or states something.

Using Capital Letters and Full Stops in Sentences (KS1 English)

Statements and Questions: Recognising Statements and Full Stops

Year 1 English: Identify Statements and Choose the Right End Mark

For Years 1-2 students, multisensory and physical cues are highly effective: encourage 'Kung Fu Punctuation' (e.g., punching forward and saying 'Huh!' for a capital letter, punching the air or clapping a fist into an open hand and saying 'Stop/Dot!' for a full stop). Emphasise reading sentences out loud to hear the natural vocal drop and breath pause where a full stop must be placed, preventing pupils from putting full stops merely at the end of physical notebook lines.

Full Stops at the End of Telling Sentences

Telling Sentences

Adding the Finish Line