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

What did you eat for breakfast today? In some parts of the world, kids start the day with warm noodle soup, while others eat sweet fruits or warm flatbread!

Why do families around the world do things in such different and wonderful ways?

**Culture** is the shared way a group of people lives, celebrates, and talks to each other.

Think of culture like a colorful backpack that holds your language, your favorite family meals, and the holidays you look forward to all year.

<!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="1:1">
  <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;
      -webkit-user-select: none;
    }

    .title {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Central Backpack Display */
    .backpack-stage {
      position: relative;
      width: 100%;
      max-width: 340px;
      height: 220px;
      background: #f1f5f9;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px solid #e2e8f0;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .main-emoji {
      font-size: 68px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.08));
      transition: transform 0.3s ease;
    }

    .active-label {
      margin-top: 10px;
      font-size: 17px;
      font-weight: 700;
      color: #0284c7;
      text-align: center;
      height: 24px;
    }

    .examples-row {
      display: flex;
      gap: 12px;
      margin-top: 6px;
      font-size: 26px;
      height: 36px;
      align-items: center;
    }

    /* Interactive Item Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 340px;
    }

    .item-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .item-btn:hover {
      background: #f8fafc;
    }

    .item-btn.active {
      border-color: #0284c7;
      background: #e0f2fe;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }

    .btn-icon {
      font-size: 24px;
      line-height: 1;
    }

    .btn-text {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }

    .item-btn.active .btn-text {
      color: #0369a1;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="title">🎒 Culture Backpack</div>

  <div class="backpack-stage">
    <div id="mainEmoji" class="main-emoji">🎒</div>
    <div id="activeLabel" class="active-label">My Culture</div>
    <div id="examplesRow" class="examples-row">
      <span>🗣️</span>
      <span>🍲</span>
      <span>🎉</span>
      <span>👘</span>
    </div>
  </div>

  <div class="grid">
    <button class="item-btn active" onclick="selectItem(0)" id="btn0">
      <span class="btn-icon">🎒</span>
      <span class="btn-text">All</span>
    </button>
    <button class="item-btn" onclick="selectItem(1)" id="btn1">
      <span class="btn-icon">🗣️</span>
      <span class="btn-text">Language</span>
    </button>
    <button class="item-btn" onclick="selectItem(2)" id="btn2">
      <span class="btn-icon">🍲</span>
      <span class="btn-text">Food</span>
    </button>
    <button class="item-btn" onclick="selectItem(3)" id="btn3">
      <span class="btn-icon">🎉</span>
      <span class="btn-text">Holidays</span>
    </button>
  </div>

  <script>
    const data = [
      {
        emoji: "🎒",
        label: "My Culture",
        items: ["🗣️", "🍲", "🎉", "👘"]
      },
      {
        emoji: "🗣️",
        label: "Words & Language",
        items: ["💬", "📖", "👋", "🗣️"]
      },
      {
        emoji: "🍲",
        label: "Family Meals",
        items: ["🌮", "🥟", "🍛", "🥖"]
      },
      {
        emoji: "🎉",
        label: "Holidays & Joy",
        items: ["🪔", "🎊", "🏮", "🎂"]
      }
    ];

    function selectItem(index) {
      for (let i = 0; i < data.length; i++) {
        const btn = document.getElementById('btn' + i);
        if (i === index) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }

      const info = data[index];
      const mainEl = document.getElementById('mainEmoji');
      const labelEl = document.getElementById('activeLabel');
      const rowEl = document.getElementById('examplesRow');

      mainEl.textContent = info.emoji;
      labelEl.textContent = info.label;

      rowEl.innerHTML = info.items.map(function(item) {
        return '<span>' + item + '</span>';
      }).join('');
    }
  </script>
</body>
</html>

Have you ever wondered why people wear different clothes or eat with different tools?

Daily habits like the clothes we wear and the foods we cook are called **traditions** when families pass them down over time.

For example, in Japan, people take off their shoes at the front door to keep their homes clean and peaceful.

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

    /* Scene Layout */
    .scene-container {
      width: 100%;
      max-width: 480px;
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      position: relative;
    }

    .room-view {
      flex: 1;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }

    /* Inside Home (Top half) */
    .inside-area {
      flex: 1.2;
      background: #faf6ed;
      border-bottom: 6px solid #d4a373;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      transition: background 0.3s ease;
    }

    .tatami-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.15;
      background-image: repeating-linear-gradient(0deg, #b08968, #b08968 2px, transparent 2px, transparent 18px);
    }

    .home-status {
      font-size: 15px;
      font-weight: 700;
      color: #52b788;
      background: #e8f7ee;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 8px;
      z-index: 1;
    }

    .inside-feet {
      font-size: 42px;
      z-index: 1;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }

    /* Entryway / Genkan (Bottom half) */
    .entry-area {
      flex: 1;
      background: #e9ecef;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .entry-label {
      position: absolute;
      left: 12px;
      top: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .shoes-rack {
      display: flex;
      gap: 16px;
      align-items: center;
      justify-content: center;
    }

    .shoe-spot {
      width: 70px;
      height: 70px;
      border-radius: 12px;
      background: #dee2e6;
      border: 2px dashed #ced4da;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      transition: all 0.3s ease;
    }

    .shoe-spot.active {
      background: #ffffff;
      border-color: #48cae4;
      box-shadow: 0 4px 10px rgba(72, 202, 228, 0.25);
    }

    /* Stepper Controls */
    .controls {
      width: 100%;
      max-width: 480px;
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .btn-step {
      flex: 1;
      padding: 10px 6px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      border: 2px solid #e9ecef;
      border-radius: 12px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.2s ease;
    }

    .btn-step.active {
      background: #eef9fd;
      border-color: #48cae4;
      color: #0077b6;
    }

    .btn-step .icon {
      font-size: 18px;
    }
  </style>
</head>
<body>

  <div class="scene-container">
    <div class="room-view">
      
      
      <div class="inside-area" id="insideArea">
        <div class="tatami-pattern"></div>
        <div class="home-status" id="homeStatus">✨ Clean & Peaceful Home</div>
        <div class="inside-feet" id="insideFeet">🧦</div>
      </div>

      
      <div class="entry-area">
        <span class="entry-label">Entrance</span>
        <div class="shoes-rack">
          <div class="shoe-spot active" id="entryLeft">👟</div>
          <div class="shoe-spot" id="entryRight">🩴</div>
        </div>
      </div>

    </div>
  </div>

  
  <div class="controls">
    <button class="btn-step active" id="step1">
      <span class="icon">👟</span>
      <span>1. Outside</span>
    </button>
    <button class="btn-step" id="step2">
      <span class="icon">🚪</span>
      <span>2. Doorstep</span>
    </button>
    <button class="btn-step" id="step3">
      <span class="icon">🧦</span>
      <span>3. Inside</span>
    </button>
  </div>

  <script>
    const steps = [
      {
        status: '🏠 Japanese Home',
        insideFeet: ' ',
        leftShoe: '👟',
        leftActive: true,
        rightShoe: ' ',
        rightActive: false
      },
      {
        status: '🚪 Shoes Stay at Door',
        insideFeet: ' ',
        leftShoe: '👟',
        leftActive: true,
        rightShoe: '🩴',
        rightActive: true
      },
      {
        status: '✨ Clean & Peaceful',
        insideFeet: '🧦',
        leftShoe: '👟',
        leftActive: true,
        rightShoe: ' ',
        rightActive: false
      }
    ];

    let currentStep = 0;
    const btnSteps = [$('#step1'), $('#step2'), $('#step3')];

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

      $('#homeStatus').textContent = data.status;
      $('#insideFeet').textContent = data.insideFeet;
      $('#entryLeft').textContent = data.leftShoe;
      $('#entryRight').textContent = data.rightShoe;

      $('#entryLeft').classList.toggle('active', data.leftActive);
      $('#entryRight').classList.toggle('active', data.rightActive);

      btnSteps.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
    }

    btnSteps.forEach((btn, idx) => {
      onTap(btn, () => renderStep(idx));
    });

    // Auto cycle peacefully
    setInterval(() => {
      renderStep((currentStep + 1) % steps.length);
    }, 3500);
  </script>
</body>
</html>

Living day-to-day is one thing, but what happens when entire towns throw a giant party?

Special **celebrations** bring families together with music, dancing, special outfits, and tasty treats.

During Diwali in India, families light small clay lamps called diyas to fill the dark night with bright, glowing light.

<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #fcfaf7;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .scene-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      height: 250px;
      background: #1a1730;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: background 0.6s ease;
    }

    .scene-container.lit {
      background: radial-gradient(circle at 50% 65%, #3d2b1f 0%, #1a1730 80%);
    }

    .scene-container.glow {
      background: radial-gradient(circle at 50% 60%, #683d16 0%, #2a1b38 75%, #151126 100%);
    }

    /* Ambient stars in dark night */
    .stars {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .star {
      position: absolute;
      background: #ffffff;
      border-radius: 50%;
      opacity: 0.4;
    }

    .star.s1 { top: 18%; left: 20%; width: 3px; height: 3px; }
    .star.s2 { top: 28%; left: 80%; width: 4px; height: 4px; opacity: 0.6; }
    .star.s3 { top: 15%; left: 65%; width: 2px; height: 2px; }
    .star.s4 { top: 40%; left: 12%; width: 3px; height: 3px; }
    .star.s5 { top: 32%; left: 45%; width: 2px; height: 2px; }

    /* Glow Aura */
    .glow-aura {
      position: absolute;
      top: 38%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, rgba(245, 158, 11, 0) 70%);
      opacity: 0;
      transition: opacity 0.6s ease, transform 0.6s ease;
      pointer-events: none;
    }

    .glow .glow-aura {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.3);
    }

    .lit .glow-aura {
      opacity: 0.5;
      transform: translate(-50%, -50%) scale(0.9);
    }

    /* Diya graphic */
    .diya-wrapper {
      position: relative;
      width: 140px;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      z-index: 2;
    }

    /* Flame */
    .flame {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%) scale(0);
      width: 24px;
      height: 38px;
      background: radial-gradient(ellipse at bottom, #fff7ed 15%, #f59e0b 60%, #ef4444 100%);
      border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
      box-shadow: 0 0 20px #f59e0b;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .lit .flame {
      transform: translateX(-50%) scale(0.85);
      opacity: 1;
    }

    .glow .flame {
      transform: translateX(-50%) scale(1.1);
      opacity: 1;
      box-shadow: 0 0 32px #f59e0b, 0 0 60px rgba(245, 158, 11, 0.6);
    }

    /* Clay Lamp Bowl */
    .clay-base {
      position: relative;
      width: 120px;
      height: 50px;
      background: linear-gradient(180deg, #c2612b 0%, #944015 100%);
      border-radius: 0 0 60px 60px / 0 0 50px 50px;
      box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.3), inset 0 -4px 8px rgba(0, 0, 0, 0.4);
    }

    .clay-rim {
      position: absolute;
      top: -6px;
      left: 0;
      width: 120px;
      height: 16px;
      background: #d97736;
      border-radius: 50%;
      box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4);
    }

    .clay-oil {
      position: absolute;
      top: -2px;
      left: 15px;
      width: 90px;
      height: 10px;
      background: #7c2d12;
      border-radius: 50%;
    }

    /* Cultural Rangoli base details */
    .lamp-stand {
      width: 150px;
      height: 6px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      margin-top: 4px;
    }

    /* Step Label */
    .status-text {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      margin-top: 14px;
      z-index: 2;
      text-align: center;
      letter-spacing: 0.3px;
    }

    /* Navigation Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      margin-top: 12px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 10px 8px;
      background: #ffffff;
      border: 2px solid rgba(0, 0, 0, 0);
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .step-btn.active {
      border-color: #f59e0b;
      background: #fffbeb;
      color: #b45309;
    }

    .step-num {
      font-size: 11px;
      font-weight: 800;
      opacity: 0.6;
      text-transform: uppercase;
    }
  </style>
</head>
<body>

  <div id="scene" class="scene-container">
    <div class="stars">
      <div class="star s1"></div>
      <div class="star s2"></div>
      <div class="star s3"></div>
      <div class="star s4"></div>
      <div class="star s5"></div>
    </div>

    <div class="glow-aura"></div>

    <div class="diya-wrapper">
      <div class="flame"></div>
      <div class="clay-rim"></div>
      <div class="clay-oil"></div>
      <div class="clay-base"></div>
      <div class="lamp-stand"></div>
    </div>

    <div id="label" class="status-text">1. Clay Diya</div>
  </div>

  <div class="controls">
    <button class="step-btn active" id="btn0" onclick="setStep(0)">
      <span class="step-num">Step 1</span>
      <span>Clay Diya</span>
    </button>
    <button class="step-btn" id="btn1" onclick="setStep(1)">
      <span class="step-num">Step 2</span>
      <span>Light Flame</span>
    </button>
    <button class="step-btn" id="btn2" onclick="setStep(2)">
      <span class="step-num">Step 3</span>
      <span>Golden Glow</span>
    </button>
  </div>

  <script>
    const scene = document.getElementById('scene');
    const label = document.getElementById('label');
    const buttons = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2')
    ];

    const steps = [
      { cls: '', text: '1. Clay Diya 🪔' },
      { cls: 'lit', text: '2. Light Flame 🔥' },
      { cls: 'lit glow', text: '3. Golden Glow ✨' }
    ];

    let current = 0;
    let timer = null;

    function render() {
      scene.className = 'scene-container ' + steps[current].cls;
      label.textContent = steps[current].text;
      buttons.forEach((btn, idx) => {
        if (idx === current) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }

    function setStep(idx) {
      current = idx;
      render();
      resetAutoPlay();
    }

    function nextStep() {
      current = (current + 1) % steps.length;
      render();
    }

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

    // Initialize
    render();
    resetAutoPlay();
  </script>
</body>
</html>

Celebrations are exciting, but how do we share our thoughts with our friends every single day?

Culture also guides the **languages** we speak and the body gestures we use to say hello.

In Thailand, people greet each other with a warm smile, pressing their hands together in front of their chest with a slight bow called a *wai*.

Think about your own family: what is one special food, greeting, or holiday that makes your culture unique?

languages

What Is Culture?. Understand that culture includes the way people live, celebrate, and communicate

World Cultures Collection: Art, Music, Food, and Languages

Capturing Culture in Your Classroom: Visual Exploration of Cultural Traditions

Personal Development and Mutual Understanding: Celebrations Around the World

When teaching 'What Is Culture?' to 2nd graders, begin with concrete, personal connections (the 'Mirrors and Windows' framework). Start by having students share their own family routines, favorite foods, and celebrations (mirrors). Then, provide rich multimedia 'windows' into how children in selected global regions live, celebrate, and communicate. Use anchor charts organized around the three pillars (Living, Celebrating, Communicating) and provide concrete realia (artifacts, recipes, music clips, and greeting gestures) to make abstract cultural concepts tangible and accessible.

What Is Culture?

The Recipe of You

How People Live

How People Celebrate