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

Can you tell when your friend is excited before they even open their mouth to speak?

Your face and hands tell a story before your voice says a single word!

A **facial expression** is the shape your eyes, eyebrows, and mouth make to show what you feel inside.

When you smile and open your eyes wide, your listeners instantly know you are excited about your story.

<!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>Face and Hand Expressions</title>
  <script src="{{VENDOR_CDN}}/gsap.min.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .canvas-card {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 12px;
      gap: 12px;
    }

    /* Tabs */
    .btn-row {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
    }

    .mode-btn {
      background: #f1f5f9;
      border: 1px solid transparent;
      color: #64748b;
      font-size: 14px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .mode-btn:hover {
      background: #e2e8f0;
    }

    .mode-btn.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

    /* Stage Area */
    .stage {
      width: 100%;
      height: 250px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Labels */
    .tag {
      position: absolute;
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 3px 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      pointer-events: none;
      transition: all 0.3s ease;
    }

    #tag-face {
      top: 14px;
      left: 18px;
    }

    #tag-hands {
      bottom: 24px;
      right: 18px;
    }

    .tag-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #22b7ff;
      margin-right: 4px;
      vertical-align: middle;
    }

    /* Animated parts */
    .smooth {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, d 0.4s ease;
      transform-origin: center center;
    }
  </style>
</head>
<body>

  <div class="canvas-card">
    
    <div class="btn-row">
      <button class="mode-btn active" data-index="0">✨ Excited</button>
      <button class="mode-btn" data-index="1">📏 Huge</button>
      <button class="mode-btn" data-index="2">🤫 Quiet</button>
      <button class="mode-btn" data-index="3">🤔 Curious</button>
    </div>

    
    <div class="stage">
      <div class="tag" id="tag-face"><span class="tag-dot"></span>Face</div>
      <div class="tag" id="tag-hands"><span class="tag-dot"></span>Hands</div>

      <svg viewBox="0 0 320 250">
        <defs>
          <radialGradient id="bodyGrad" cx="50%" cy="35%" r="65%">
            <stop offset="0%" stop-color="#ffe8d6"/>
            <stop offset="100%" stop-color="#fcd5b5"/>
          </radialGradient>
          <filter id="softGlow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.08"/>
          </filter>
        </defs>

        
        <path d="M 110 230 C 110 185, 130 170, 160 170 C 190 170, 210 185, 210 230 Z" fill="#22b7ff" />
        <path d="M 145 170 L 160 188 L 175 170 Z" fill="#ffffff" opacity="0.9" />

        
        <g id="head-group">
          
          <circle cx="108" cy="115" r="11" fill="#fcd5b5" />
          <circle cx="212" cy="115" r="11" fill="#fcd5b5" />

          
          <circle cx="160" cy="115" r="50" fill="url(#bodyGrad)" filter="url(#softGlow)" />

          
          <ellipse id="blush-l" cx="132" cy="126" rx="8" ry="5" fill="#ff7675" opacity="0.4" />
          <ellipse id="blush-r" cx="188" cy="126" rx="8" ry="5" fill="#ff7675" opacity="0.4" />

          
          <path id="brow-l" d="M 130 92 Q 140 85 148 91" stroke="#4a3e3d" stroke-width="3.5" stroke-linecap="round" fill="none" class="smooth" />
          <path id="brow-r" d="M 172 91 Q 180 85 190 92" stroke="#4a3e3d" stroke-width="3.5" stroke-linecap="round" fill="none" class="smooth" />

          
          <g id="eyes" class="smooth">
            <ellipse id="eye-white-l" cx="138" cy="108" rx="8" ry="9" fill="#ffffff" />
            <ellipse id="eye-white-r" cx="182" cy="108" rx="8" ry="9" fill="#ffffff" />
            <circle id="pupil-l" cx="139" cy="108" r="5" fill="#1e2945" />
            <circle id="pupil-r" cx="181" cy="108" r="5" fill="#1e2945" />
            <circle id="sparkle-l" cx="141" cy="105" r="2" fill="#ffffff" />
            <circle id="sparkle-r" cx="183" cy="105" r="2" fill="#ffffff" />
          </g>

          
          <path id="mouth" d="M 144 130 Q 160 152 176 130 Z" fill="#c0392b" stroke="#4a3e3d" stroke-width="2" class="smooth" />
          
          <ellipse id="tongue" cx="160" cy="138" rx="7" ry="4" fill="#ff7675" class="smooth" />
        </g>

        
        <g id="arm-left" class="smooth" style="transform-origin: 120px 185px;">
          
          <path id="arm-l-path" d="M 120 185 Q 90 150 75 110" stroke="#22b7ff" stroke-width="14" stroke-linecap="round" fill="none" />
          
          <g id="hand-l" transform="translate(75, 110)">
            <circle cx="0" cy="0" r="13" fill="#ffe8d6" />
            <circle cx="-5" cy="-8" r="4" fill="#ffe8d6" />
            <circle cx="0" cy="-11" r="4" fill="#ffe8d6" />
            <circle cx="5" cy="-9" r="4" fill="#ffe8d6" />
          </g>
        </g>

        
        <g id="arm-right" class="smooth" style="transform-origin: 200px 185px;">
          
          <path id="arm-r-path" d="M 200 185 Q 230 150 245 110" stroke="#22b7ff" stroke-width="14" stroke-linecap="round" fill="none" />
          
          <g id="hand-r" transform="translate(245, 110)">
            <circle cx="0" cy="0" r="13" fill="#ffe8d6" />
            <circle cx="-5" cy="-9" r="4" fill="#ffe8d6" />
            <circle cx="0" cy="-11" r="4" fill="#ffe8d6" />
            <circle cx="5" cy="-8" r="4" fill="#ffe8d6" />
          </g>
        </g>

        
        <g id="accents" class="smooth">
          <path d="M 60 70 L 68 70 M 64 66 L 64 74" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
          <path d="M 256 70 L 264 70 M 260 66 L 260 74" stroke="#f59e0b" stroke-width="3" stroke-linecap="round" />
        </g>
      </svg>
    </div>
  </div>

  <script>
    const states = [
      {
        // 0: Excited (Hands up & open, big wide eyes, happy open smile)
        browL: "M 130 90 Q 139 80 149 88",
        browR: "M 171 88 Q 181 80 190 90",
        eyeScale: 1.15,
        pupilL: { cx: 139, cy: 108, r: 5 },
        pupilR: { cx: 181, cy: 108, r: 5 },
        mouthD: "M 142 128 Q 160 155 178 128 Z",
        mouthFill: "#c0392b",
        tongueOpacity: 1,
        armL: "M 120 185 Q 85 145 68 95",
        armR: "M 200 185 Q 235 145 252 95",
        handL: { x: 68, y: 95, rot: 15 },
        handR: { x: 252, y: 95, rot: -15 },
        accentsOpacity: 1
      },
      {
        // 1: Huge (Arms spread wide horizontal, big eyes, 'O' mouth)
        browL: "M 130 88 Q 140 82 148 88",
        browR: "M 172 88 Q 180 82 190 88",
        eyeScale: 1.25,
        pupilL: { cx: 138, cy: 108, r: 4.5 },
        pupilR: { cx: 182, cy: 108, r: 4.5 },
        mouthD: "M 152 135 A 8 10 0 1 0 168 135 A 8 10 0 1 0 152 135 Z",
        mouthFill: "#1e2945",
        tongueOpacity: 0,
        armL: "M 120 195 Q 75 190 32 175",
        armR: "M 200 195 Q 245 190 288 175",
        handL: { x: 32, y: 175, rot: 75 },
        handR: { x: 288, y: 175, rot: -75 },
        accentsOpacity: 0
      },
      {
        // 2: Quiet (One finger over mouth, gentle closed eyes/smile)
        browL: "M 130 94 Q 140 92 148 94",
        browR: "M 172 94 Q 180 92 190 94",
        eyeScale: 0.85,
        pupilL: { cx: 138, cy: 110, r: 4 },
        pupilR: { cx: 182, cy: 110, r: 4 },
        mouthD: "M 148 134 Q 160 140 172 134",
        mouthFill: "none",
        tongueOpacity: 0,
        armL: "M 120 195 Q 110 210 100 220",
        armR: "M 200 185 Q 185 160 162 140",
        handL: { x: 100, y: 220, rot: -20 },
        handR: { x: 162, y: 140, rot: 10 },
        accentsOpacity: 0
      },
      {
        // 3: Curious (One eyebrow raised, hand tapping chin)
        browL: "M 130 84 Q 139 74 148 83",
        browR: "M 172 95 Q 180 94 190 97",
        eyeScale: 1.0,
        pupilL: { cx: 140, cy: 106, r: 5 },
        pupilR: { cx: 180, cy: 109, r: 4.5 },
        mouthD: "M 148 135 Q 158 132 170 137",
        mouthFill: "none",
        tongueOpacity: 0,
        armL: "M 120 195 Q 95 195 80 200",
        armR: "M 200 185 Q 185 165 174 148",
        handL: { x: 80, y: 200, rot: -10 },
        handR: { x: 174, y: 148, rot: 25 },
        accentsOpacity: 0
      }
    ];

    let currentIndex = 0;
    let autoInterval = null;

    function applyState(idx) {
      currentIndex = idx;
      const s = states[idx];

      // Update buttons
      document.querySelectorAll('.mode-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      // Animate SVG elements
      if (window.gsap) {
        gsap.to('#brow-l', { attr: { d: s.browL }, duration: 0.35, ease: 'power2.out' });
        gsap.to('#brow-r', { attr: { d: s.browR }, duration: 0.35, ease: 'power2.out' });
        gsap.to('#eyes', { scale: s.eyeScale, transformOrigin: '160px 108px', duration: 0.35, ease: 'back.out(1.5)' });
        gsap.to('#mouth', { attr: { d: s.mouthD, fill: s.mouthFill }, duration: 0.35, ease: 'power2.out' });
        gsap.to('#tongue', { opacity: s.tongueOpacity, duration: 0.2 });

        gsap.to('#arm-l-path', { attr: { d: s.armL }, duration: 0.45, ease: 'power2.out' });
        gsap.to('#arm-r-path', { attr: { d: s.armR }, duration: 0.45, ease: 'power2.out' });
        gsap.to('#hand-l', { attr: { transform: `translate(${s.handL.x}, ${s.handL.y}) rotate(${s.handL.rot})` }, duration: 0.45, ease: 'power2.out' });
        gsap.to('#hand-r', { attr: { transform: `translate(${s.handR.x}, ${s.handR.y}) rotate(${s.handR.rot})` }, duration: 0.45, ease: 'power2.out' });
        gsap.to('#accents', { opacity: s.accentsOpacity, scale: s.accentsOpacity ? 1 : 0.5, transformOrigin: '160px 70px', duration: 0.3 });
      } else {
        // Fallback without gsap
        document.getElementById('brow-l').setAttribute('d', s.browL);
        document.getElementById('brow-r').setAttribute('d', s.browR);
        document.getElementById('mouth').setAttribute('d', s.mouthD);
        document.getElementById('mouth').setAttribute('fill', s.mouthFill);
        document.getElementById('arm-l-path').setAttribute('d', s.armL);
        document.getElementById('arm-r-path').setAttribute('d', s.armR);
        document.getElementById('hand-l').setAttribute('transform', `translate(${s.handL.x}, ${s.handL.y}) rotate(${s.handL.rot})`);
        document.getElementById('hand-r').setAttribute('transform', `translate(${s.handR.x}, ${s.handR.y}) rotate(${s.handR.rot})`);
        document.getElementById('tongue').style.opacity = s.tongueOpacity;
        document.getElementById('accents').style.opacity = s.accentsOpacity;
      }
    }

    // Interactive button clicks
    document.querySelectorAll('.mode-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        clearInterval(autoInterval);
        const idx = parseInt(btn.getAttribute('data-index'), 10);
        applyState(idx);
        startAutoPlay();
      });
    });

    function startAutoPlay() {
      clearInterval(autoInterval);
      autoInterval = setInterval(() => {
        const next = (currentIndex + 1) % states.length;
        applyState(next);
      }, 3600);
    }

    // Initial render & loop
    applyState(0);
    startAutoPlay();
  </script>
</body>
</html>

What can your hands do while your face is sharing those feelings?

Hand and arm movements that help explain your words are called **gestures**.

You can stretch your arms wide to show something huge, or pinch two fingers close together to show something tiny.

<!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>Using Face and Hands to Talk</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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px;
      min-height: 100%;
    }
    .main-view {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .toggle-bar {
      display: flex;
      gap: 8px;
      background: #eef2f6;
      padding: 4px;
      border-radius: 999px;
      width: 100%;
      max-width: 280px;
    }
    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 600;
      color: #6b7280;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .toggle-btn.active {
      background: #ffffff;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .stage {
      width: 100%;
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      min-height: 240px;
      justify-content: center;
    }
    .expression-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 20px;
      transition: transform 0.3s ease;
    }
    .gesture-icon {
      font-size: 44px;
      transition: transform 0.3s ease;
      line-height: 1;
    }
    .face-icon {
      font-size: 64px;
      line-height: 1;
      transition: transform 0.3s ease;
    }
    .scale-box-container {
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .scale-box {
      border-radius: 10px;
      background: rgba(34, 183, 255, 0.15);
      border: 2px dashed #22b7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #0284c7;
      transition: width 0.35s ease, height 0.35s ease, font-size 0.35s ease;
    }
    /* State: Huge */
    .state-huge .left-hand {
      transform: translateX(-16px);
    }
    .state-huge .right-hand {
      transform: translateX(16px);
    }
    .state-huge .scale-box {
      width: 85%;
      height: 70px;
      font-size: 18px;
    }
    /* State: Tiny */
    .state-tiny .left-hand {
      transform: translateX(12px) scale(0.85);
    }
    .state-tiny .right-hand {
      transform: translateX(-12px) scale(0.85);
    }
    .state-tiny .scale-box {
      width: 32px;
      height: 32px;
      font-size: 11px;
    }
    .cue-label {
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      margin-top: 8px;
    }
  </style>
</head>
<body>

  <div class="main-view">
    <div class="toggle-bar" role="tablist">
      <button class="toggle-btn active" id="btnHuge" role="tab" aria-selected="true">
        <span>👐</span> Huge
      </button>
      <button class="toggle-btn" id="btnTiny" role="tab" aria-selected="false">
        <span>🤏</span> Tiny
      </button>
    </div>

    <div class="stage state-huge" id="stage">
      <div class="expression-display">
        <span class="gesture-icon left-hand" id="leftIcon">🫲</span>
        <span class="face-icon" id="faceIcon">😃</span>
        <span class="gesture-icon right-hand" id="rightIcon">🫱</span>
      </div>

      <div class="scale-box-container">
        <div class="scale-box" id="scaleBox">HUGE</div>
      </div>

      <div class="cue-label" id="cueLabel">Wide arms & open face</div>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const stage = document.getElementById('stage');
    const btnHuge = document.getElementById('btnHuge');
    const btnTiny = document.getElementById('btnTiny');
    const faceIcon = document.getElementById('faceIcon');
    const leftIcon = document.getElementById('leftIcon');
    const rightIcon = document.getElementById('rightIcon');
    const scaleBox = document.getElementById('scaleBox');
    const cueLabel = document.getElementById('cueLabel');

    function setMode(mode) {
      if (mode === 'huge') {
        stage.className = 'stage state-huge';
        btnHuge.classList.add('active');
        btnTiny.classList.remove('active');
        btnHuge.setAttribute('aria-selected', 'true');
        btnTiny.setAttribute('aria-selected', 'false');

        faceIcon.textContent = '😃';
        leftIcon.textContent = '🫲';
        rightIcon.textContent = '🫱';
        scaleBox.textContent = 'HUGE';
        cueLabel.textContent = 'Wide arms & open face';
      } else {
        stage.className = 'stage state-tiny';
        btnTiny.classList.add('active');
        btnHuge.classList.remove('active');
        btnTiny.setAttribute('aria-selected', 'true');
        btnHuge.setAttribute('aria-selected', 'false');

        faceIcon.textContent = '🧐';
        leftIcon.textContent = '🤏';
        rightIcon.textContent = '🤏';
        scaleBox.textContent = '•';
        cueLabel.textContent = 'Pinched fingers & focused eyes';
      }
    }

    if (typeof onTap === 'function') {
      onTap(btnHuge, () => setMode('huge'));
      onTap(btnTiny, () => setMode('tiny'));
    } else {
      btnHuge.addEventListener('click', () => setMode('huge'));
      btnTiny.addEventListener('click', () => setMode('tiny'));
    }
  </script>
</body>
</html>

What happens when your words, face, and hands all work together as a team?

When your face and hands **match** your words, your message is super clear and fun to listen to.

If you say "I love this game!" with a frown and crossed arms, your listener will get confused because your face says the opposite.

Stand up and try saying "I saw an enormous dinosaur!" while widening your eyes, smiling, and stretching your arms as wide as you can.

Using Your Face and Hands to Talk. Use facial expressions and gestures to help communicate your message when speaking.

Everyday Spoken Interaction and Non-Verbal Language (AC9E1LA01)

Using Facial Expressions and Body Language to Communicate Meaning and Emotion

Speaking and Listening: Using Body Language and Face Movements

At the Year 1-2 stage, learning is most effective when multi-sensory and dramatic. Use games like 'Silent Charades' (guessing the meaning using only face and hands), 'Mismatched Robot' (identifying why a sad face with happy words feels confusing), and pair role-plays practicing the four key communicative functions (asking questions, giving polite commands, making offers, and exclaiming). Explicit modeling followed by mirror practice builds kinesthetic and social awareness.

Using Your Face and Hands to Talk

Faces Show Feelings

Talking With Your Hands

Matching Everything Together