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 walking into a big auditorium where the lights dim and the musicians step onto the stage with their instruments.

You are part of the **audience**, which means the group of people who gather to listen and watch a live show.

How can you use your whole body to be the best audience member in the room?

Great audience members practice **whole-body listening** by keeping their bodies calm and ready.

<!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>Audience Behavior</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }

    .main-box {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Step Navigation */
    .nav-row {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
    }

    /* Concert Hall Container */
    .hall {
      background: #ffffff;
      border-radius: 12px;
      padding: 16px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }

    /* Stage Area */
    .stage-section {
      background: #f1f5f9;
      border-radius: 8px;
      padding: 16px 12px;
      text-align: center;
      position: relative;
      transition: background 0.4s ease;
    }

    .stage-section.spotlight {
      background: #fef9c3;
    }

    .stage-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
      margin-bottom: 6px;
      font-weight: 700;
    }

    .performer-icon {
      font-size: 34px;
      line-height: 1;
      display: inline-block;
      transition: transform 0.3s ease;
    }

    .stage-note {
      font-size: 20px;
      margin-left: 4px;
      opacity: 0;
      display: inline-block;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .stage-section.playing .stage-note {
      opacity: 1;
    }

    /* Divider */
    .divider {
      height: 1px;
      background: #e2e8f0;
      margin: 0 8px;
    }

    /* Audience Area */
    .audience-section {
      text-align: center;
      padding: 4px 8px;
    }

    .audience-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .audience-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      font-size: 26px;
      line-height: 1;
    }

    /* Rule Badges */
    .rules-row {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: 10px;
      min-height: 32px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      background: #f1f5f9;
      color: #475569;
      transition: all 0.3s ease;
    }

    .badge.highlight-green {
      background: #dcfce7;
      color: #15803d;
    }

    .badge.highlight-blue {
      background: #e0f2fe;
      color: #0369a1;
    }

    /* Play/Pause controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .play-btn {
      background: none;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 13px;
      color: #475569;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="main-box">
    
    <div class="nav-row">
      <button class="step-btn active" id="btn-0" onclick="setStep(0)">1. Enter</button>
      <button class="step-btn" id="btn-1" onclick="setStep(1)">2. Music</button>
      <button class="step-btn" id="btn-2" onclick="setStep(2)">3. End</button>
    </div>

    
    <div class="hall">
      
      <div class="stage-section" id="stage">
        <div class="stage-title">Stage</div>
        <span class="performer-icon" id="performer">🚶🎻</span>
        <span class="stage-note" id="music-notes">🎶</span>
      </div>

      <div class="divider"></div>

      
      <div class="audience-section">
        <div class="audience-title">Audience</div>
        <div class="audience-row" id="audience-icons">
          <span>👤🪑</span>
          <span>👤🪑</span>
          <span>👤🪑</span>
        </div>

        <div class="rules-row" id="rules">
          <span class="badge" id="b1">🪑 Find Seat</span>
          <span class="badge" id="b2">📵 Silent Phone</span>
        </div>
      </div>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="playBtn" onclick="toggleAuto()">⏸ Pause</button>
    </div>
  </div>

  <script>
    const steps = [
      {
        stageClass: '',
        performer: '🚶🎻',
        showMusic: false,
        audience: ['👤🪑', '👤🪑', '👤🪑'],
        b1: '🪑 Find Seat',
        b1Class: 'badge',
        b2: '📵 Silent Phone',
        b2Class: 'badge highlight-blue'
      },
      {
        stageClass: 'spotlight playing',
        performer: '🎻',
        showMusic: true,
        audience: ['🤫', '🤫', '🤫'],
        b1: '🤫 Quiet & Listen',
        b1Class: 'badge highlight-green',
        b2: '👀 Eyes on Stage',
        b2Class: 'badge highlight-blue'
      },
      {
        stageClass: 'spotlight',
        performer: '🙇🎻',
        showMusic: false,
        audience: ['👏', '👏', '👏'],
        b1: '👏 Applaud',
        b1Class: 'badge highlight-green',
        b2: '✨ Celebrate',
        b2Class: 'badge highlight-blue'
      }
    ];

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

    function renderStep(index) {
      currentStep = index;
      const data = steps[index];

      // Update Nav Buttons
      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('btn-' + i);
        if (btn) {
          if (i === index) {
            btn.classList.add('active');
          } else {
            btn.classList.remove('active');
          }
        }
      }

      // Update Stage
      const stage = document.getElementById('stage');
      stage.className = 'stage-section ' + data.stageClass;
      document.getElementById('performer').textContent = data.performer;
      document.getElementById('music-notes').style.opacity = data.showMusic ? '1' : '0';

      // Update Audience Icons
      const audRow = document.getElementById('audience-icons');
      audRow.innerHTML = data.audience.map(icon => '<span>' + icon + '</span>').join('');

      // Update Badges
      const b1 = document.getElementById('b1');
      const b2 = document.getElementById('b2');
      b1.textContent = data.b1;
      b1.className = data.b1Class;
      b2.textContent = data.b2;
      b2.className = data.b2Class;
    }

    function setStep(index) {
      renderStep(index);
    }

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

    function startAuto() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3200);
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸ Pause';
    }

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

    function toggleAuto() {
      if (isPlaying) {
        stopAuto();
      } else {
        startAuto();
      }
    }

    // Initialize
    renderStep(0);
    startAuto();
  </script>
</body>
</html>

When your mouth is quiet and your feet are still, the musicians can concentrate on playing beautiful music.

Sitting still helps the people next to you hear every single quiet note, too.

Now, what is the best way to show the performers that you loved their music?

We show **respect** and say 'thank you' to musicians by clapping our hands with a warm smile.

<!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>When to Applaud</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, sans-serif;
    }

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

    .main {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Step Selector Tabs */
    .tabs {
      display: flex;
      gap: 8px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 10px;
    }

    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    /* Scene Container */
    .stage-box {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      position: relative;
      overflow: hidden;
    }

    /* Stage Area */
    .performer-zone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .stage-floor {
      width: 180px;
      height: 6px;
      background: #cbd5e1;
      border-radius: 3px;
    }

    .performer-icon {
      font-size: 52px;
      line-height: 1;
      transition: transform 0.3s ease;
    }

    /* Audience Reaction Badge */
    .reaction-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 700;
      transition: all 0.3s ease;
    }

    .listen-state {
      background: #f8fafc;
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    .clap-state {
      background: #f0fdf4;
      color: #166534;
      border: 1px solid #86efac;
    }

    .status-icon {
      font-size: 24px;
    }

    /* Sound indicator waves */
    .sound-pulse {
      display: inline-flex;
      gap: 3px;
      align-items: center;
      height: 14px;
    }

    .bar {
      width: 3px;
      background: #22b7ff;
      border-radius: 2px;
      animation: pulse 1s infinite alternate ease-in-out;
    }

    .bar:nth-child(2) { height: 14px; animation-delay: 0.2s; }
    .bar:nth-child(1), .bar:nth-child(3) { height: 8px; }

    @keyframes pulse {
      0% { transform: scaleY(0.4); }
      100% { transform: scaleY(1.2); }
    }

    .hidden {
      display: none !important;
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="tabs">
      <button class="tab-btn active" id="tab-play" onclick="setMode('play')">1. Music Playing</button>
      <button class="tab-btn" id="tab-bow" onclick="setMode('bow')">2. Performer Bows</button>
    </div>

    <div class="stage-box">
      
      <div class="performer-zone">
        <div id="notes" class="sound-pulse">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
        <div class="performer-icon" id="perf-icon">🎻</div>
        <div class="stage-floor"></div>
      </div>

      
      <div id="reaction" class="reaction-card listen-state">
        <span class="status-icon" id="react-icon">🤫</span>
        <span id="react-label">Listen Quietly</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const tabPlay = document.getElementById('tab-play');
      const tabBow = document.getElementById('tab-bow');
      const perfIcon = document.getElementById('perf-icon');
      const notes = document.getElementById('notes');
      const reaction = document.getElementById('reaction');
      const reactIcon = document.getElementById('react-icon');
      const reactLabel = document.getElementById('react-label');

      if (mode === 'play') {
        tabPlay.classList.add('active');
        tabBow.classList.remove('active');
        perfIcon.textContent = '🎻';
        notes.classList.remove('hidden');
        reaction.className = 'reaction-card listen-state';
        reactIcon.textContent = '🤫';
        reactLabel.textContent = 'Listen Quietly';
      } else {
        tabBow.classList.add('active');
        tabPlay.classList.remove('active');
        perfIcon.textContent = '🙇';
        notes.classList.add('hidden');
        reaction.className = 'reaction-card clap-state';
        reactIcon.textContent = '👏';
        reactLabel.textContent = 'Applaud & Smile';
      }
    }
  </script>
</body>
</html>

A common mistake is clapping right when the music gets quiet, but the song might not be finished yet!

Wait until the performers lower their instruments and **bow** before you start clapping.

The next time you watch a music concert, try sitting like a statue during the song and giving your biggest clap when the music completely stops!

arts

Appropriate Audience Behavior During a Live Performance. Identify how to sit quietly, watch attentively, and show respect during a live music performance.

Artsville: Audience Etiquette (Do's and Don'ts of Live Performances)

Concert Manners and Audience Etiquette for Elementary Learners

Audience Etiquette Toolkit: Live Performance Expectations

For 1st-grade learners (TEKS 117.106(b)(6)(A)), the most effective pedagogical approach involves explicit modeling, role-playing, and kinesthetic rehearsal. Teachers should guide students to practice 'rehearsal audiences' in the classroom—having small groups perform a simple song or rhythmic clap while the rest of the class practices 'whole-body listening' and proper bowing/applause timing before attending live school assemblies or concerts.

Appropriate Audience Behavior During a Live Performance

Whole-Body Listening

When to Clap