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 told a friend an exciting story, but they were staring at the floor and tying their shoe?

Even if they can hear your voice, it feels like they are not paying attention at all.

Hearing just uses your ears, but **active listening** means using your whole body to show the speaker you care about what they are saying.

<!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 Body Language</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

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

    /* Central Character View */
    .avatar-card {
      position: relative;
      width: 100%;
      height: 230px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .listener {
      font-size: 80px;
      transition: transform 0.4s ease;
      display: inline-block;
      position: relative;
    }

    .cue-overlay {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: #ffffff;
      border: 2px solid #22b7ff;
      border-radius: 10px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.2);
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
      white-space: nowrap;
    }

    .cue-overlay.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Positional cue badges */
    #cue-eyes { top: 22px; left: 16px; }
    #cue-ears { top: 22px; right: 16px; }
    #cue-head { bottom: 24px; left: 16px; }
    #cue-body { bottom: 24px; right: 16px; }

    /* Action buttons grid */
    .cue-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .cue-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .cue-btn .icon {
      font-size: 20px;
    }

    .cue-btn.active {
      background: #eef9ff;
      border-color: #22b7ff;
      color: #0077b6;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    /* Focus pulse */
    .pulse-ring {
      position: absolute;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      border: 2px dashed #22b7ff;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: scale(0.9);
      pointer-events: none;
    }

    .pulse-ring.active {
      opacity: 0.6;
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  <div class="main-stage">
    <div class="avatar-card">
      <div class="pulse-ring" id="pulse"></div>
      <div class="listener" id="avatar">🧑</div>

      <div class="cue-overlay" id="cue-eyes">
        <span>👀 Eye Contact</span>
      </div>
      <div class="cue-overlay" id="cue-ears">
        <span>👂 Focus on Voice</span>
      </div>
      <div class="cue-overlay" id="cue-head">
        <span> Nod & Smile</span>
      </div>
      <div class="cue-overlay" id="cue-body">
        <span>👤 Lean In</span>
      </div>
    </div>

    <div class="cue-grid">
      <button class="cue-btn active" data-step="0">
        <span class="icon">👀</span>
        <span>Eyes</span>
      </button>
      <button class="cue-btn" data-step="1">
        <span class="icon">👂</span>
        <span>Ears</span>
      </button>
      <button class="cue-btn" data-step="2">
        <span class="icon"></span>
        <span>Head</span>
      </button>
      <button class="cue-btn" data-step="3">
        <span class="icon">👤</span>
        <span>Body</span>
      </button>
    </div>
  </div>

  <script>
    const cues = [
      { id: 'cue-eyes', transform: 'scale(1.05)' },
      { id: 'cue-ears', transform: 'scale(1.05)' },
      { id: 'cue-head', transform: 'translateY(-6px)' },
      { id: 'cue-body', transform: 'rotate(-6deg) translateY(-2px)' }
    ];

    let current = 0;
    const buttons = document.querySelectorAll('.cue-btn');
    const overlays = document.querySelectorAll('.cue-overlay');
    const avatar = document.getElementById('avatar');
    const pulse = document.getElementById('pulse');

    function showStep(idx) {
      current = idx;
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === idx));
      overlays.forEach((cue, i) => cue.classList.toggle('active', i === idx));
      
      avatar.style.transform = cues[idx].transform;
      pulse.classList.add('active');
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        showStep(i);
        resetAutoPlay();
      });
    });

    let timer = setInterval(nextStep, 3200);

    function nextStep() {
      showStep((current + 1) % cues.length);
    }

    function resetAutoPlay() {
      clearInterval(timer);
      timer = setInterval(nextStep, 4000);
    }

    // Init first state
    showStep(0);
  </script>
</body>
</html>

What physical clues can you give to show someone you are truly locked into their words?

First, point your shoulders and toes toward the person talking so you are **facing the speaker**.

Next, make friendly **eye contact** by looking gently toward their eyes so they know your mind is with them.

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

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

    .scene {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 220px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      border: 1px solid #eef2f6;
      display: flex;
      align-items: center;
      justify-content: space-around;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .person {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      width: 100px;
      z-index: 2;
      transition: transform 0.4s ease;
    }

    .avatar {
      font-size: 54px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
      transition: transform 0.4s ease;
    }

    .role-tag {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 8px;
    }

    /* Speaker bubble */
    .speech-bubble {
      position: absolute;
      top: 24px;
      left: 105px;
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      border-radius: 12px;
      padding: 4px 8px;
      font-size: 16px;
      animation: pulseTalk 2.5s infinite ease-in-out;
    }

    @keyframes pulseTalk {
      0%, 100% { transform: scale(0.95); opacity: 0.7; }
      50% { transform: scale(1.05); opacity: 1; }
    }

    /* Visual connection lines / cues */
    .cue-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .gaze-line {
      position: absolute;
      top: 82px;
      left: 120px;
      right: 120px;
      height: 2px;
      border-top: 2px dashed #22b7ff;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .gaze-dot {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #22b7ff;
      border-radius: 50%;
      top: -5px;
      animation: moveDot 1.5s infinite linear;
    }

    @keyframes moveDot {
      0% { left: 0%; opacity: 0; }
      20% { opacity: 1; }
      80% { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }

    /* Listener animation states */
    .state-eye .gaze-line {
      opacity: 1;
    }

    .state-nod #listenerAvatar {
      animation: nodMotion 1.2s infinite ease-in-out;
    }

    .state-lean #listenerPerson {
      transform: translateX(-16px) rotate(-4deg);
    }

    @keyframes nodMotion {
      0%, 100% { transform: translateY(0); }
      40% { transform: translateY(8px); }
      70% { transform: translateY(-2px); }
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cue-btn {
      flex: 1;
      min-width: 110px;
      padding: 10px 8px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .cue-btn:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .cue-btn.active {
      border-color: #22b7ff;
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.2);
    }
  </style>
</head>
<body>

  <div class="scene state-eye" id="scene">
    
    <div class="person">
      <div class="avatar">🗣️</div>
      <div class="role-tag">Speaker</div>
    </div>

    <div class="speech-bubble">💬</div>

    
    <div class="cue-overlay">
      <div class="gaze-line">
        <div class="gaze-dot"></div>
      </div>
    </div>

    
    <div class="person" id="listenerPerson">
      <div class="avatar" id="listenerAvatar">😊</div>
      <div class="role-tag">Listener</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="cue-btn active" id="btnEye">👀 Eye Contact</button>
    <button class="cue-btn" id="btnNod">🤝 Gentle Nod</button>
    <button class="cue-btn" id="btnLean">🪑 Face & Lean</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const scene = document.getElementById('scene');
    const btnEye = document.getElementById('btnEye');
    const btnNod = document.getElementById('btnNod');
    const btnLean = document.getElementById('btnLean');
    const buttons = [btnEye, btnNod, btnLean];

    function setCue(cueState, activeBtn) {
      scene.className = 'scene ' + cueState;
      buttons.forEach(btn => btn.classList.remove('active'));
      activeBtn.classList.add('active');
    }

    btnEye.onclick = () => setCue('state-eye', btnEye);
    btnNod.onclick = () => setCue('state-nod', btnNod);
    btnLean.onclick = () => setCue('state-lean', btnLean);
  </script>
</body>
</html>

How can you tell the speaker you understand them without interrupting their sentence?

A small, gentle **head nod** acts like a silent cheerleader that says, "Yes, I follow what you mean!"

Keeping your hands still and your mouth quiet gives the speaker time to finish their idea.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

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

    /* Central Visual Display */
    .visual-box {
      width: 100%;
      height: 240px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .figure-svg {
      width: 100%;
      height: 100%;
      max-width: 280px;
    }

    /* Highlight Rings & Effects */
    .glow-ring {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 3;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform-origin: center;
    }

    .cue-active .glow-ring {
      opacity: 1;
    }

    .wave-line {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 2.5;
      stroke-linecap: round;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .cue-active .wave-line {
      opacity: 0.9;
    }

    /* Floating Clue Tag inside Visual */
    .cue-badge {
      position: absolute;
      top: 14px;
      background: #f0f9ff;
      border: 1.5px solid #22b7ff;
      color: #0284c7;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }

    /* Control Buttons */
    .buttons-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .cue-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .cue-btn .btn-icon {
      font-size: 20px;
    }

    .cue-btn.active {
      border-color: #22b7ff;
      color: #1e2945;
      box-shadow: 0 0 0 1px #22b7ff, 0 4px 10px rgba(34, 183, 255, 0.15);
      background: #fdfefe;
    }

    @media (max-width: 380px) {
      .cue-btn {
        padding: 8px 2px;
        font-size: 12px;
      }
      .cue-btn .btn-icon {
        font-size: 18px;
      }
      .visual-box {
        height: 210px;
      }
    }
  </style>
</head>
<body>

  <div class="stage">
    
    <div class="visual-box">
      <div id="badge" class="cue-badge">
        <span id="badge-icon">👀</span>
        <span id="badge-text">Eyes Looking</span>
      </div>

      <svg class="figure-svg" viewBox="0 0 240 200">
        
        <path d="M 80 180 C 80 145, 160 145, 160 180 Z" fill="#e2e8f0" />
        <path d="M 92 180 L 92 155 Q 120 162 148 155 L 148 180 Z" fill="#cbd5e1" />

        
        <rect x="110" y="125" width="20" height="20" rx="4" fill="#fed7aa" />

        
        <ellipse cx="120" cy="92" rx="36" ry="42" fill="#ffedd5" />
        
        <path d="M 84 90 C 84 55, 156 55, 156 90 C 146 72, 94 72, 84 90 Z" fill="#475569" />

        
        <g id="cue-ears">
          <ellipse cx="84" cy="94" rx="6" ry="10" fill="#fed7aa" />
          <ellipse cx="156" cy="94" rx="6" ry="10" fill="#fed7aa" />
          
          <path d="M 72 86 A 12 12 0 0 0 72 102" class="wave-line" />
          <path d="M 66 80 A 20 20 0 0 0 66 108" class="wave-line" />
          <path d="M 168 86 A 12 12 0 0 1 168 102" class="wave-line" />
          <path d="M 174 80 A 20 20 0 0 1 174 108" class="wave-line" />
          <circle cx="84" cy="94" r="14" class="glow-ring" />
          <circle cx="156" cy="94" r="14" class="glow-ring" />
        </g>

        
        <g id="cue-eyes">
          <ellipse cx="106" cy="90" rx="4.5" ry="5.5" fill="#1e2945" />
          <ellipse cx="134" cy="90" rx="4.5" ry="5.5" fill="#1e2945" />
          <circle cx="107.5" cy="88" r="1.5" fill="#ffffff" />
          <circle cx="135.5" cy="88" r="1.5" fill="#ffffff" />
          <ellipse cx="120" cy="90" rx="28" ry="14" class="glow-ring" />
        </g>

        
        <g id="cue-mouth">
          <path d="M 112 116 Q 120 120 128 116" fill="none" stroke="#ea580c" stroke-width="2.5" stroke-linecap="round" />
          <circle cx="120" cy="116" r="13" class="glow-ring" />
        </g>

        
        <g id="cue-hands">
          
          <ellipse cx="112" cy="178" rx="14" ry="9" fill="#fed7aa" />
          <ellipse cx="128" cy="178" rx="14" ry="9" fill="#fed7aa" />
          <ellipse cx="120" cy="178" rx="26" ry="15" class="glow-ring" />
        </g>
      </svg>
    </div>

    
    <div class="buttons-grid">
      <button class="cue-btn active" onclick="selectCue(0)">
        <span class="btn-icon">👀</span>
        <span>Eyes</span>
      </button>
      <button class="cue-btn" onclick="selectCue(1)">
        <span class="btn-icon">👂</span>
        <span>Ears</span>
      </button>
      <button class="cue-btn" onclick="selectCue(2)">
        <span class="btn-icon">🤫</span>
        <span>Mouth</span>
      </button>
      <button class="cue-btn" onclick="selectCue(3)">
        <span class="btn-icon">🤲</span>
        <span>Hands</span>
      </button>
    </div>
  </div>

  <script>
    const cues = [
      { id: 'cue-eyes', icon: '👀', label: 'Eyes Looking' },
      { id: 'cue-ears', icon: '👂', label: 'Ears Listening' },
      { id: 'cue-mouth', icon: '🤫', label: 'Mouth Quiet' },
      { id: 'cue-hands', icon: '🤲', label: 'Hands Still' }
    ];

    let currentIndex = 0;
    let autoTimer = null;

    const badgeIcon = document.getElementById('badge-icon');
    const badgeText = document.getElementById('badge-text');
    const buttons = document.querySelectorAll('.cue-btn');

    function updateState(index) {
      cues.forEach((cue, i) => {
        const group = document.getElementById(cue.id);
        if (i === index) {
          group.classList.add('cue-active');
          buttons[i].classList.add('active');
        } else {
          group.classList.remove('cue-active');
          buttons[i].classList.remove('active');
        }
      });

      badgeIcon.textContent = cues[index].icon;
      badgeText.textContent = cues[index].label;
      currentIndex = index;
    }

    function selectCue(index) {
      clearInterval(autoTimer);
      updateState(index);
      startAutoCycle();
    }

    function startAutoCycle() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (currentIndex + 1) % cues.length;
        updateState(next);
      }, 3200);
    }

    // Initialize
    updateState(0);
    startAutoCycle();
  </script>
</body>
</html>

Let's see how these clues work together in real life when a classmate is talking.

Imagine Maya is telling a story about her new puppy during morning circle.

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

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

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

    /* Scene Container */
    .stage {
      width: 100%;
      height: 250px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 10px 20px;
    }

    /* Floor line */
    .floor {
      position: absolute;
      bottom: 24px;
      left: 10%;
      width: 80%;
      height: 4px;
      background: #eef2f6;
      border-radius: 2px;
    }

    /* Characters */
    .character-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      width: 130px;
    }

    .avatar {
      font-size: 54px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
      transition: transform 0.4s ease;
      display: inline-block;
    }

    .char-label {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      background: #f1f5f9;
      padding: 3px 10px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .char-role {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }

    /* Maya's Speech Bubble */
    .bubble {
      position: absolute;
      top: 22px;
      left: 65px;
      background: #22b7ff;
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 16px;
      border-bottom-left-radius: 2px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.25);
      animation: pulse-talk 2s infinite ease-in-out;
      z-index: 5;
    }

    @keyframes pulse-talk {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }

    /* Leo's Interactive Indicators */
    .cue-beam {
      position: absolute;
      top: 75px;
      left: 140px;
      right: 140px;
      height: 2px;
      border-top: 2px dashed #22b7ff;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: 1;
    }

    .cue-beam::after {
      content: '👀';
      position: absolute;
      left: 50%;
      top: -12px;
      transform: translateX(-50%);
      font-size: 14px;
      background: #ffffff;
      padding: 0 4px;
    }

    .nodding {
      animation: nod-anim 1.2s infinite ease-in-out;
    }

    @keyframes nod-anim {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      35% { transform: translateY(6px) rotate(4deg); }
      70% { transform: translateY(1px) rotate(-1deg); }
    }

    .turned-away {
      transform: scaleX(-1);
      filter: grayscale(0.7) opacity(0.7);
    }

    /* Indicator Badge */
    .status-badge {
      position: absolute;
      top: 14px;
      right: 16px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.3s ease;
    }

    .badge-active {
      background: #e0f8ea;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

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

    /* Controls */
    .controls-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .cue-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    }

    .cue-btn .btn-icon {
      font-size: 20px;
    }

    .cue-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      color: #0284c7;
      box-shadow: 0 0 0 1px #22b7ff;
    }

    /* Toggle Mode Bar */
    .mode-bar {
      display: flex;
      width: 100%;
      background: #e2e8f0;
      border-radius: 10px;
      padding: 3px;
      gap: 4px;
    }

    .mode-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 6px 10px;
      border-radius: 7px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .mode-btn.selected {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    }

    .mode-btn.selected.active-mode {
      color: #0284c7;
    }
  </style>
</head>
<body>

<div class="main-wrap">

  
  <div class="stage">
    <div class="floor"></div>

    
    <div id="statusBadge" class="status-badge badge-active">
      <span>✓</span> Active Listener
    </div>

    
    <div class="character-box">
      <div class="bubble">🐶 My puppy!</div>
      <div class="avatar">👧</div>
      <div class="char-label">Maya</div>
      <div class="char-role">Speaker</div>
    </div>

    
    <div id="cueBeam" class="cue-beam"></div>

    
    <div class="character-box">
      <div id="leoAvatar" class="avatar nodding">👦</div>
      <div class="char-label">Leo</div>
      <div id="leoRole" class="char-role">Listening</div>
    </div>
  </div>

  
  <div class="mode-bar">
    <button id="btnModeActive" class="mode-btn selected active-mode">
      ✓ Active
    </button>
    <button id="btnModeDistracted" class="mode-btn">
      ✕ Distracted
    </button>
  </div>

  
  <div class="controls-grid">
    <button id="btnEyes" class="cue-btn active">
      <span class="btn-icon">👀</span>
      <span>1. Eyes Watch</span>
    </button>
    <button id="btnBody" class="cue-btn active">
      <span class="btn-icon">🔄</span>
      <span>2. Body Faces</span>
    </button>
    <button id="btnNod" class="cue-btn active">
      <span class="btn-icon">👤</span>
      <span>3. Gentle Nod</span>
    </button>
  </div>

</div>

<script src="https://assets.classace.io/vendor/classace-diagram.js"></script>
<script>
  let state = {
    eyes: true,
    body: true,
    nod: true
  };

  const leoAvatar = document.getElementById('leoAvatar');
  const cueBeam = document.getElementById('cueBeam');
  const statusBadge = document.getElementById('statusBadge');
  const leoRole = document.getElementById('leoRole');

  const btnEyes = document.getElementById('btnEyes');
  const btnBody = document.getElementById('btnBody');
  const btnNod = document.getElementById('btnNod');

  const btnModeActive = document.getElementById('btnModeActive');
  const btnModeDistracted = document.getElementById('btnModeDistracted');

  function updateVisuals() {
    // Eye beam
    cueBeam.style.opacity = (state.eyes && state.body) ? '1' : '0';

    // Body facing
    if (state.body) {
      leoAvatar.classList.remove('turned-away');
    } else {
      leoAvatar.classList.add('turned-away');
    }

    // Nodding
    if (state.nod && state.body) {
      leoAvatar.classList.add('nodding');
    } else {
      leoAvatar.classList.remove('nodding');
    }

    // Update Cue Buttons state
    btnEyes.classList.toggle('active', state.eyes);
    btnBody.classList.toggle('active', state.body);
    btnNod.classList.toggle('active', state.nod);

    // Overall Status
    const isActive = state.eyes && state.body && state.nod;
    if (isActive) {
      statusBadge.className = 'status-badge badge-active';
      statusBadge.innerHTML = '<span>✓</span> Active Listener';
      leoRole.textContent = 'Listening';
      leoRole.style.color = '#0284c7';
      btnModeActive.classList.add('selected', 'active-mode');
      btnModeDistracted.classList.remove('selected');
    } else {
      statusBadge.className = 'status-badge badge-distracted';
      statusBadge.innerHTML = '<span>✕</span> Distracted';
      leoRole.textContent = 'Not focused';
      leoRole.style.color = '#dc2626';
      btnModeDistracted.classList.add('selected');
      btnModeActive.classList.remove('selected', 'active-mode');
    }
  }

  // Button Toggles
  btnEyes.onclick = () => {
    state.eyes = !state.eyes;
    updateVisuals();
  };

  btnBody.onclick = () => {
    state.body = !state.body;
    updateVisuals();
  };

  btnNod.onclick = () => {
    state.nod = !state.nod;
    updateVisuals();
  };

  // Preset Mode Buttons
  btnModeActive.onclick = () => {
    state.eyes = true;
    state.body = true;
    state.nod = true;
    updateVisuals();
  };

  btnModeDistracted.onclick = () => {
    state.eyes = false;
    state.body = false;
    state.nod = false;
    updateVisuals();
  };

  // Initial render
  updateVisuals();
</script>
</body>
</html>

Leo is the active listener because his body is turned to Maya, his eyes are watching her, and his nod shows he understands.

Good eye contact does not mean staring without blinking like a statue — a relaxed, natural look with normal blinking is all you need.

Try the three-step check the next time someone talks to you: turn your body, look at their face, and give a friendly nod!

What Does Active Listening Look Like?. Identify and demonstrate active listening behaviours such as eye contact, facing the speaker, and nodding.

Listening and following instructions – BBC Bitesize Foundation & KS1 Literacy

Developing Listening Skills and Active Listening in Young Learners

Speaking and Listening Interactions: Developing Active Listening Behaviours (AC9E2LY02)

Pedagogical strategies for Year 2: Use explicit modelling ('fishbowl' demonstrations where the teacher models non-listening vs. active listening), followed by a shared anchor chart. Implement low-stakes structured peer routines such as 'Think-Pair-Share' with concrete listening roles, where students give thumbs-up feedback to partners demonstrating eye contact, facing forward, and nodding. Scaffold neurodiverse learners by teaching that looking 'towards' the speaker's shoulder, bridge of nose, or working materials counts as attentive looking.

What Does Active Listening Look Like?

Whole Body Listening

The Body and Eyes

The Power of the Nod