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

Have you ever tried to tell an exciting story, but someone shouted right over you? It feels confusing, and your story gets lost!

When we listen carefully to our friends and teachers, everyone gets to share their ideas.

**Active listening** means using your eyes, your ears, and your quiet mouth to pay close attention.

<!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>Active Listening Diagram</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: #fefae0;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

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

    /* Tri-card Grid */
    .senses-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
    }

    .sense-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 3px solid rgba(0, 0, 0, 0);
      transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .sense-card.active {
      border-color: #2ec4b6;
      box-shadow: 0 8px 20px rgba(46, 196, 182, 0.25);
    }

    .sense-card.active.mouth-card {
      border-color: #ff9f1c;
      box-shadow: 0 8px 20px rgba(255, 159, 28, 0.25);
    }

    .icon-wrap {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: #f8f9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      transition: background-color 0.3s ease;
      position: relative;
    }

    .sense-card.active .icon-wrap {
      background: #e8f9f7;
    }

    .sense-card.active.mouth-card .icon-wrap {
      background: #fff5e6;
    }

    /* Wave / Beam visual indicator inside icon */
    .indicator-wave {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 2px solid transparent;
      pointer-events: none;
      transition: all 0.3s ease;
    }

    .sense-card.active .indicator-wave {
      border-color: #2ec4b6;
      animation: pulse 1.8s infinite ease-out;
    }

    .sense-card.active.mouth-card .indicator-wave {
      border-color: #ff9f1c;
      animation: none;
    }

    @keyframes pulse {
      0% {
        transform: scale(0.95);
        opacity: 0.9;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .label-part {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
    }

    .label-action {
      font-size: 17px;
      font-weight: 800;
      color: #1e2945;
    }

    .sense-card.active .label-action {
      color: #2ec4b6;
    }

    .sense-card.active.mouth-card .label-action {
      color: #ff9f1c;
    }

    .badge-status {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      background: #eef2f6;
      color: #6b7280;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
    }

    .sense-card.active .badge-status {
      background: #2ec4b6;
      color: #ffffff;
    }

    .sense-card.active.mouth-card .badge-status {
      background: #ff9f1c;
      color: #ffffff;
    }

    /* Navigation / Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      color: #1e2945;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

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

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

    .dot-btn {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: none;
      background: #d1d5db;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .dot-btn.active {
      background: #2ec4b6;
      transform: scale(1.25);
    }

    @media (max-width: 380px) {
      .sense-card {
        padding: 12px 4px;
      }
      .icon-wrap {
        width: 52px;
        height: 52px;
        font-size: 26px;
      }
      .label-action {
        font-size: 15px;
      }
    }
  </style>
</head>
<body>

  <div class="diagram-root">
    <div class="senses-grid">
      
      <div class="sense-card active" data-step="0">
        <div class="icon-wrap">
          <div class="indicator-wave"></div>
          👁️
        </div>
        <span class="label-part">Eyes</span>
        <span class="label-action">Look</span>
        <span class="badge-status">Focus</span>
      </div>

      
      <div class="sense-card" data-step="1">
        <div class="icon-wrap">
          <div class="indicator-wave"></div>
          👂
        </div>
        <span class="label-part">Ears</span>
        <span class="label-action">Listen</span>
        <span class="badge-status">Tune In</span>
      </div>

      
      <div class="mouth-card sense-card" data-step="2">
        <div class="icon-wrap">
          <div class="indicator-wave"></div>
          🤫
        </div>
        <span class="label-part">Mouth</span>
        <span class="label-action">Quiet</span>
        <span class="badge-status">Paused</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="ctrl-btn" id="playBtn" type="button" aria-label="Play or Pause">
        <span id="playIcon">⏸</span>
      </button>

      <div class="dots-nav">
        <button class="dot-btn active" data-step="0" aria-label="Step 1"></button>
        <button class="dot-btn" data-step="1" aria-label="Step 2"></button>
        <button class="dot-btn" data-step="2" aria-label="Step 3"></button>
      </div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    (function () {
      const cards = $$('.sense-card');
      const dots = $$('.dot-btn');
      const playBtn = $('#playBtn');
      const playIcon = $('#playIcon');

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

      function updateUI(index) {
        currentStep = index;
        cards.forEach((c, i) => {
          c.classList.toggle('active', i === index);
        });
        dots.forEach((d, i) => {
          d.classList.toggle('active', i === index);
        });
      }

      function nextStep() {
        const next = (currentStep + 1) % cards.length;
        updateUI(next);
      }

      function startTimer() {
        stopTimer();
        timer = setInterval(nextStep, 3000);
        isPlaying = true;
        if (playIcon) playIcon.textContent = '⏸';
      }

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

      function togglePlay() {
        if (isPlaying) {
          stopTimer();
        } else {
          startTimer();
        }
      }

      // Card tap interactions
      cards.forEach((card, idx) => {
        onTap(card, () => {
          updateUI(idx);
          stopTimer();
        });
      });

      // Dot tap interactions
      dots.forEach((dot, idx) => {
        onTap(dot, () => {
          updateUI(idx);
          stopTimer();
        });
      });

      // Play/Pause button
      if (playBtn) {
        onTap(playBtn, togglePlay);
      }

      // Start auto-cycle
      startTimer();
    })();
  </script>
</body>
</html>

Your eyes look at the person speaking, your ears tune into their words, and your voice stays on pause.

What should you do if an amazing idea pops into your head while someone else is still talking?

Talking with friends is just like playing catch with a ball — only one person can hold the ball at a time.

<!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>Taking Turns in Conversation</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

    .scene-card {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 16px;
      padding: 18px 16px 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .stage {
      width: 100%;
      height: 200px;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
    }

    /* Trajectory curve */
    .arc-svg {
      position: absolute;
      top: 24px;
      left: 15%;
      width: 70%;
      height: 70px;
      pointer-events: none;
      overflow: visible;
    }

    .arc-path {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-dasharray: 6 6;
    }

    /* Person Column */
    .person {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 110px;
      z-index: 2;
      transition: transform 0.3s ease;
    }

    .avatar-wrapper {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      position: relative;
      border: 3px solid transparent;
      transition: all 0.3s ease;
    }

    .person.active-speaker .avatar-wrapper {
      border-color: #3a86ff;
      background: #e0edff;
      box-shadow: 0 0 0 4px rgba(58, 134, 255, 0.2);
    }

    .person.active-listener .avatar-wrapper {
      border-color: #10b981;
      background: #e6f9f0;
    }

    .role-tag {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: all 0.3s ease;
      white-space: nowrap;
    }

    .tag-speaking {
      background: #3a86ff;
      color: #ffffff;
    }

    .tag-listening {
      background: #10b981;
      color: #ffffff;
    }

    /* Floating Ball / Turn Token */
    .turn-ball {
      position: absolute;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffd166, #ffbe0b);
      box-shadow: 0 6px 14px rgba(255, 190, 11, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      z-index: 10;
      top: 42px;
      left: 18%;
      transform: translate(-50%, -50%);
      transition: left 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), top 0.6s ease;
    }

    .turn-ball.at-right {
      left: 82%;
    }

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

    .action-btn {
      background: #3a86ff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 3px 8px rgba(58, 134, 255, 0.3);
      transition: background 0.2s, box-shadow 0.2s;
    }

    .action-btn:active {
      background: #2563eb;
      box-shadow: none;
    }

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

    .step-btn {
      border: none;
      background: #e2e8f0;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      padding: 8px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="scene-card">
    <div class="stage">
      <svg class="arc-svg" viewBox="0 0 200 60" preserveAspectRatio="none">
        <path class="arc-path" d="M 10,50 Q 100,-15 190,50" />
      </svg>

      <div class="turn-ball" id="ball">
        💬
      </div>

      
      <div class="person active-speaker" id="personA">
        <div class="avatar-wrapper">
          <span>👧</span>
        </div>
        <div class="role-tag tag-speaking" id="tagA">
          <span>🗣️</span> Speaking
        </div>
      </div>

      
      <div class="person active-listener" id="personB">
        <div class="avatar-wrapper">
          <span>👦</span>
        </div>
        <div class="role-tag tag-listening" id="tagB">
          <span>👂</span> Listening
        </div>
      </div>
    </div>

    
    <div class="controls">
      <div class="stepper">
        <button class="step-btn active" id="btn1" onclick="setTurn(0)">1. Left Speaks</button>
        <button class="step-btn" id="btn2" onclick="setTurn(1)">2. Right Speaks</button>
      </div>
      <button class="action-btn" id="passBtn" onclick="toggleTurn()">
        <span>Pass Turn ⇄</span>
      </button>
    </div>
  </div>

  <script>
    let currentTurn = 0; // 0 = A speaking, 1 = B speaking

    const ball = document.getElementById('ball');
    const personA = document.getElementById('personA');
    const personB = document.getElementById('personB');
    const tagA = document.getElementById('tagA');
    const tagB = document.getElementById('tagB');
    const btn1 = document.getElementById('btn1');
    const btn2 = document.getElementById('btn2');

    function updateVisuals() {
      if (currentTurn === 0) {
        ball.classList.remove('at-right');
        
        personA.className = 'person active-speaker';
        tagA.className = 'role-tag tag-speaking';
        tagA.innerHTML = '<span>🗣️</span> Speaking';

        personB.className = 'person active-listener';
        tagB.className = 'role-tag tag-listening';
        tagB.innerHTML = '<span>👂</span> Listening';

        btn1.classList.add('active');
        btn2.classList.remove('active');
      } else {
        ball.classList.add('at-right');

        personA.className = 'person active-listener';
        tagA.className = 'role-tag tag-listening';
        tagA.innerHTML = '<span>👂</span> Listening';

        personB.className = 'person active-speaker';
        tagB.className = 'role-tag tag-speaking';
        tagB.innerHTML = '<span>🗣️</span> Speaking';

        btn2.classList.add('active');
        btn1.classList.remove('active');
      }
    }

    function setTurn(index) {
      currentTurn = index;
      updateVisuals();
    }

    function toggleTurn() {
      currentTurn = currentTurn === 0 ? 1 : 0;
      updateVisuals();
    }

    // Gentle auto-cycle with pedagogical pacing (4s)
    let autoInterval = setInterval(toggleTurn, 4000);

    // Pause auto-cycle on user interaction
    [btn1, btn2, document.getElementById('passBtn')].forEach(el => {
      el.addEventListener('click', () => {
        clearInterval(autoInterval);
      });
    });
  </script>
</body>
</html>

We wait for our friend to finish their words before we take our **turn** to speak.

If you have something great to say, keep it safe in your brain or raise a quiet hand until it is your turn!

We also adjust how loudly we speak by matching our **Voice Level** to what our class is doing.

**Voice Level $0$** means total silence for listening, **Level $1$** is a soft partner whisper, and **Level $2$** is a clear speaking voice for group sharing.

Being a great listener and speaker also means choosing the right **Voice Level** for what you are doing.

Use **Voice Level 0** for quiet listening, **Voice Level 1** for a partner whisper, and **Voice Level 2** for group speaking.

Listening Carefully When Others Speak. Show active listening by paying attention to the speaker and not talking over them.

Speaking and Listening Skills - Early Years & KS1 English

Australian Curriculum Foundation English: Interacting with Others (AC9EFLY02)

Interacting with Others: Listening While Others Speak (AC9EFLY02)

Teaching active listening to Foundation students requires explicit modelling, physicalised cues, and multi-sensory reinforcement. Best-practice pedagogical strategies include using concrete physical props (e.g., a 'talking stick' or 'microphone') during circle time to make turn-taking tangible. Teachers should pair verbal listening expectations with non-verbal gesture checks (e.g., touching ears for listening, finger to lips for quiet). Maintain inclusive, neurodiversity-affirming approaches that acknowledge listening can look different for different learners (e.g., allowing quiet fidget tools or alternative gaze options while ensuring the core goal of not interrupting others is upheld).

Listening Carefully When Others Speak

Whole Body Listening

Taking Turns

Choosing Your Voice Level