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 wondered who wrote the song "Twinkle, Twinkle, Little Star"?

Nobody knows for sure! You probably learned it because a family member or teacher sang it to you.

A **community** is a group of people who live, work, or share life together, like a town or a family.

**Folk music** is music made by everyday people in a community instead of one famous pop star.

<!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>What Is Folk Music?</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; }
  body {
    background: #f8f9fa;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    min-height: 100%;
  }

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

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

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

  .stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .view {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .view.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Folk layout: circle */
  .folk-circle {
    position: relative;
    width: 200px;
    height: 200px;
    border: 2px dashed #22b7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .folk-person {
    position: absolute;
    width: 44px;
    height: 44px;
    background: #ffffff;
    border: 1.5px solid #e6e6e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  .p-top    { top: -22px; left: 78px; }
  .p-right  { top: 78px; right: -22px; }
  .p-bottom { bottom: -22px; left: 78px; }
  .p-left   { top: 78px; left: -22px; }

  .center-note {
    font-size: 30px;
    animation: floatNote 2.4s ease-in-out infinite alternate;
  }

  @keyframes floatNote {
    0% { transform: scale(0.9) rotate(-6deg); }
    100% { transform: scale(1.1) rotate(6deg); }
  }

  /* Pop layout: one star to many */
  .pop-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .star-box {
    width: 58px;
    height: 58px;
    background: #ffffff;
    border: 2px solid #22b7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 10px rgba(34, 183, 255, 0.2);
  }

  .arrow-down {
    font-size: 18px;
    color: #22b7ff;
    letter-spacing: 12px;
  }

  .audience {
    display: flex;
    gap: 12px;
  }

  .listener {
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 1.5px solid #e6e6e6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
  }

  .caption {
    font-size: 14px;
    font-weight: 600;
    color: #1e2945;
    margin-top: 8px;
  }

  .sound-btn {
    border: 1.5px solid #e6e6e6;
    background: #ffffff;
    color: #1e2945;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s;
  }

  .sound-btn:active {
    background: #eef2f6;
  }
</style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tab-folk">Folk Music</button>
    <button class="tab-btn" id="tab-pop">Pop Star</button>
  </div>

  
  <div class="stage">
    
    <div class="view active" id="view-folk">
      <div class="folk-circle">
        <div class="folk-person p-top">👩‍🌾</div>
        <div class="folk-person p-right">🪕</div>
        <div class="folk-person p-bottom">👨‍🦳</div>
        <div class="folk-person p-left">👧</div>
        <div class="center-note">🎶</div>
      </div>
      <div class="caption">Shared Community</div>
    </div>

    
    <div class="view" id="view-pop">
      <div class="pop-stage">
        <div class="star-box">🌟</div>
        <div class="arrow-down">↓↓↓</div>
        <div class="audience">
          <div class="listener">🎧</div>
          <div class="listener">🎧</div>
          <div class="listener">🎧</div>
          <div class="listener">🎧</div>
        </div>
      </div>
      <div class="caption">One-Way Broadcast</div>
    </div>
  </div>

  
  <button class="sound-btn" id="sound-btn">
    <span>Play Folk Tune</span> 🪕
  </button>

<script>
  const tabFolk = document.getElementById('tab-folk');
  const tabPop = document.getElementById('tab-pop');
  const viewFolk = document.getElementById('view-folk');
  const viewPop = document.getElementById('view-pop');
  const soundBtn = document.getElementById('sound-btn');

  function showFolk() {
    tabFolk.classList.add('active');
    tabPop.classList.remove('active');
    viewFolk.classList.add('active');
    viewPop.classList.remove('active');
  }

  function showPop() {
    tabPop.classList.add('active');
    tabFolk.classList.remove('active');
    viewPop.classList.add('active');
    viewFolk.classList.remove('active');
  }

  tabFolk.addEventListener('click', showFolk);
  tabPop.addEventListener('click', showPop);

  // Pentatonic folk tune synth (G4 - A4 - B4 - D5 - E5)
  function playFolkTune() {
    const AudioContext = window.AudioContext || window.webkitAudioContext;
    if (!AudioContext) return;
    const ctx = new AudioContext();
    const notes = [392.00, 440.00, 493.88, 587.33, 493.88, 392.00];
    const stepTime = 0.22;

    notes.forEach((freq, i) => {
      const start = ctx.currentTime + (i * stepTime);
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();

      osc.type = 'triangle';
      osc.frequency.setValueAtTime(freq, start);

      gain.gain.setValueAtTime(0.001, start);
      gain.gain.exponentialRampToValueAtTime(0.2, start + 0.04);
      gain.gain.exponentialRampToValueAtTime(0.0001, start + stepTime);

      osc.connect(gain);
      gain.connect(ctx.destination);

      osc.start(start);
      osc.stop(start + stepTime);
    });
  }

  soundBtn.addEventListener('click', () => {
    showFolk();
    playFolkTune();
  });
</script>
</body>
</html>

How do these songs travel across hundreds of years without being forgotten?

Long before computers or radios, people shared songs by **passing them down** through singing and listening.

A grandparent sings a song to a parent, and that parent sings it to you!

<!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>Oral Tradition in Folk Music</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;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

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

    /* Badge Header */
    .concept-tag {
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0284c7;
      background: #e0f2fe;
      padding: 4px 12px;
      border-radius: 999px;
    }

    /* Generations Flow */
    .generations-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      width: 100%;
      gap: 8px;
    }

    .gen-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
    }

    .gen-card.active {
      border-color: #22b7ff;
      box-shadow: 0 6px 16px rgba(34, 183, 255, 0.2);
    }

    .avatar {
      font-size: 42px;
      line-height: 1;
    }

    .gen-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .notes-emitter {
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .gen-card.active .notes-emitter {
      opacity: 1;
      transform: translateY(0);
    }

    /* Connector Arrows */
    .flow-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: #94a3b8;
      font-size: 20px;
      font-weight: bold;
      transition: color 0.3s ease;
    }

    .flow-connector.active {
      color: #22b7ff;
    }

    .flow-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Interactive Stepper & Audio */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .btn {
      appearance: none;
      border: none;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 18px;
      border-radius: 999px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #cbd5e1;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

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

    .btn:active {
      opacity: 0.9;
    }

    /* Step indicator dots */
    .dots-container {
      display: flex;
      gap: 8px;
      align-items: center;
    }

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

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }

    @media (max-width: 420px) {
      .avatar { font-size: 34px; }
      .gen-title { font-size: 13px; }
      .gen-card { padding: 12px 4px; }
      .flow-connector { font-size: 16px; }
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    <div class="concept-tag">Oral Tradition</div>

    <div class="generations-grid">
      
      <div class="gen-card active" id="card-0" onclick="goToStep(0)">
        <div class="avatar">👵</div>
        <div class="gen-title">Grandparent</div>
        <div class="notes-emitter" id="note-0">🎵 🎶</div>
      </div>

      
      <div class="flow-connector" id="flow-0">
        <span>➔</span>
        <span class="flow-label">Sings</span>
      </div>

      
      <div class="gen-card" id="card-1" onclick="goToStep(1)">
        <div class="avatar">👨</div>
        <div class="gen-title">Parent</div>
        <div class="notes-emitter" id="note-1">🎵 🎶</div>
      </div>

      
      <div class="flow-connector" id="flow-1">
        <span>➔</span>
        <span class="flow-label">Sings</span>
      </div>

      
      <div class="gen-card" id="card-2" onclick="goToStep(2)">
        <div class="avatar">🧒</div>
        <div class="gen-title">You</div>
        <div class="notes-emitter" id="note-2">🎵 🎶</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn" id="prevBtn" onclick="prevStep()">← Previous</button>
      <div class="dots-container">
        <button class="dot active" aria-label="Grandparent" onclick="goToStep(0)"></button>
        <button class="dot" aria-label="Parent" onclick="goToStep(1)"></button>
        <button class="dot" aria-label="You" onclick="goToStep(2)"></button>
      </div>
      <button class="btn" id="nextBtn" onclick="nextStep()">Next →</button>
      <button class="btn btn-primary" onclick="playFolkTune()">Sing Song 🔊</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 3;
    let audioCtx = null;

    const notesByStep = [
      [261.63, 329.63, 392.00], // C4, E4, G4 (Grandparent)
      [329.63, 392.00, 523.25], // E4, G4, C5 (Parent)
      [392.00, 523.25, 659.25]  // G4, C5, E5 (You)
    ];

    function updateView() {
      for (let i = 0; i < totalSteps; i++) {
        const card = document.getElementById(`card-${i}`);
        const dot = document.querySelectorAll('.dot')[i];
        if (i === currentStep) {
          card.classList.add('active');
          dot.classList.add('active');
        } else {
          card.classList.remove('active');
          dot.classList.remove('active');
        }
      }

      // Update flow arrows
      document.getElementById('flow-0').classList.toggle('active', currentStep >= 1);
      document.getElementById('flow-1').classList.toggle('active', currentStep >= 2);
    }

    function playTone(freq, startTime, duration = 0.3) {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }

      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.type = 'triangle';
      osc.frequency.setValueAtTime(freq, startTime);

      gain.gain.setValueAtTime(0, startTime);
      gain.gain.linearRampToValueAtTime(0.2, startTime + 0.05);
      gain.gain.exponentialRampToValueAtTime(0.001, startTime + duration);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start(startTime);
      osc.stop(startTime + duration);
    }

    function playFolkTune() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      const now = audioCtx.currentTime;
      const pitches = notesByStep[currentStep];
      pitches.forEach((freq, idx) => {
        playTone(freq, now + idx * 0.22, 0.35);
      });
    }

    function goToStep(step) {
      currentStep = step;
      updateView();
      playFolkTune();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % totalSteps;
      goToStep(currentStep);
    }

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      goToStep(currentStep);
    }

    // Auto-advance peacefully every 4 seconds unless user interacts
    let autoTimer = setInterval(() => {
      currentStep = (currentStep + 1) % totalSteps;
      updateView();
    }, 3800);

    // Pause auto timer on click
    document.body.addEventListener('click', () => {
      if (autoTimer) {
        clearInterval(autoTimer);
        autoTimer = null;
      }
    }, { once: true });
  </script>
</body>
</html>

Why do people in communities make these songs in the first place?

People create folk songs for daily life: to make work fun, to celebrate holidays, or to gently put babies to sleep.

Children also share playful **singing games** and dances passed down through generations.

Communities also create lively **singing games** and musical traditions that reflect their history, environment, and daily lives.

Exploring these songs connects music with **Social Studies**, helping us discover how different cultures live around the world.

These unique **traditions** reflect a community's history, environment, and daily life.

Because these songs teach us about people and cultures, exploring folk music connects music directly with **Social Studies**!

Every culture around the world has its own special folk songs, and now you are ready to explore them!

arts

What Is Folk Music?. Learn that folk music is songs passed down from people in a community.

Tools for Teaching: World and Community Folk Music Traditions

Music in World Cultures: Traditional Songs and Community Singing

Key Stage 1 Music: What is Traditional and Folk Music?

To achieve mastery with 1st-grade learners under TEKS 117.106(b)(5)(A) & (C), combine Kodály and Orff active music-making strategies: 1) Teach folk songs through rote call-and-response singing and movement/circle games before discussing formal terms. 2) Emphasize interdisciplinary connections to Social Studies by showing simple world maps and asking students: 'Where do people sing this?' and 'Who taught this song to you at home?'. 3) Reinforce the core concept that folk music belongs to everyone by having students participate in folk games from at least two different cultural traditions.

What Is Folk Music?

Songs from a Community

Passing Songs Down

Why We Sing Folk Songs