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

Place your hand flat against the center of your chest right now. Can you feel that gentle, steady tap inside?

Your heart is a hard-working muscle that acts like a pump, pushing blood filled with **oxygen**—the fresh gas from the air you breathe—to every part of your body.

<!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>Heart Rate: Rest vs Exercise</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: space-between;
      min-height: 100%;
      padding: 16px 12px;
      gap: 12px;
      user-select: none;
    }

    /* Mode Selector Buttons */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
    }
    .btn-mode {
      flex: 1;
      padding: 10px 14px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .btn-mode.active {
      background: #4dabf7;
      color: #ffffff;
      border-color: #339af0;
      box-shadow: 0 4px 12px rgba(77, 171, 247, 0.35);
    }
    .btn-mode.active.exercise {
      background: #ff6b6b;
      border-color: #fa5252;
      box-shadow: 0 4px 12px rgba(255, 107, 107, 0.35);
    }

    /* Main Visual Stage */
    .stage {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e9ecef;
      padding: 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Anatomy Pipeline */
    .pipeline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 2;
      width: 80px;
    }
    .node-icon {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #f8f9fa;
      border: 2px solid #e9ecef;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      position: relative;
    }
    .node-label {
      font-size: 13px;
      font-weight: 700;
      color: #495057;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Pulsing Heart Animation */
    .heart-pulse {
      animation: beat 1.2s infinite ease-in-out;
      transform-origin: center;
    }
    .exercise-mode .heart-pulse {
      animation: beat 0.45s infinite cubic-bezier(0.25, 1, 0.5, 1);
    }

    @keyframes beat {
      0%, 100% { transform: scale(1); }
      15% { transform: scale(1.22); }
      30% { transform: scale(1.02); }
      45% { transform: scale(1.18); }
    }

    /* Flow Channel */
    .vessel {
      flex: 1;
      height: 28px;
      background: #f1f3f5;
      border-radius: 14px;
      position: relative;
      overflow: hidden;
      margin: 0 -4px;
      z-index: 1;
      border: 1px solid #dee2e6;
      display: flex;
      align-items: center;
    }

    .flow-stream {
      position: absolute;
      top: 0;
      left: 0;
      width: 200%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      animation: streamFlow 4s linear infinite;
    }
    .exercise-mode .flow-stream {
      animation: streamFlow 1.1s linear infinite;
    }

    .o2-bubble {
      background: #ff6b6b;
      color: #ffffff;
      font-size: 10px;
      font-weight: 800;
      padding: 2px 5px;
      border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    @keyframes streamFlow {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* BPM Gauge */
    .meter-bar-container {
      background: #f8f9fa;
      border-radius: 12px;
      padding: 10px 14px;
      border: 1px solid #e9ecef;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .meter-info {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }
    .bpm-value {
      font-size: 26px;
      font-weight: 800;
      color: #4dabf7;
      transition: color 0.3s ease;
    }
    .exercise-mode .bpm-value {
      color: #ff6b6b;
    }
    .bpm-unit {
      font-size: 13px;
      font-weight: 700;
      color: #868e96;
    }
    .speed-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      background: #e7f5ff;
      color: #1971c2;
    }
    .exercise-mode .speed-tag {
      background: #ffe3e3;
      color: #c92a2a;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="btn-mode active" id="btnRest">
      <span>📖</span> Rest
    </button>
    <button class="btn-mode" id="btnExercise">
      <span>🏃</span> Exercise
    </button>
  </div>

  
  <div class="stage" id="stage">
    
    
    <div class="pipeline">
      
      <div class="node">
        <div class="node-icon">
          <span class="heart-pulse">❤️</span>
        </div>
        <span class="node-label">Heart</span>
      </div>

      
      <div class="vessel">
        <div class="flow-stream">
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
          <span class="o2-bubble">O₂</span>
        </div>
      </div>

      
      <div class="node">
        <div class="node-icon" id="targetIcon">
          <span>🧘</span>
        </div>
        <span class="node-label">Muscles</span>
      </div>
    </div>

    
    <div class="meter-bar-container">
      <div class="meter-info">
        <span class="bpm-value" id="bpmVal">70</span>
        <span class="bpm-unit">BPM</span>
      </div>
      <div class="speed-tag" id="statusTag">Calm Flow</div>
    </div>

  </div>

  <script>
    const btnRest = document.getElementById('btnRest');
    const btnExercise = document.getElementById('btnExercise');
    const stage = document.getElementById('stage');
    const bpmVal = document.getElementById('bpmVal');
    const statusTag = document.getElementById('statusTag');
    const targetIcon = document.getElementById('targetIcon');

    function setMode(isExercise) {
      if (isExercise) {
        btnRest.classList.remove('active');
        btnExercise.classList.add('active', 'exercise');
        stage.classList.add('exercise-mode');
        bpmVal.textContent = '150';
        statusTag.textContent = 'Rapid Flow';
        targetIcon.innerHTML = '<span>⚡</span>';
      } else {
        btnExercise.classList.remove('active', 'exercise');
        btnRest.classList.add('active');
        stage.classList.remove('exercise-mode');
        bpmVal.textContent = '70';
        statusTag.textContent = 'Calm Flow';
        targetIcon.innerHTML = '<span>🧘</span>';
      }
    }

    btnRest.addEventListener('click', () => setMode(false));
    btnExercise.addEventListener('click', () => setMode(true));
  </script>
</body>
</html>

When you are reading a book, your heart beats calmly. But what happens the moment you sprint across the playground in a game of tag?

When you run, jump, or dance, your moving muscles work much harder than when you sit still.

Hard-working muscles burn up energy fast, so they urgently need extra **nutrients** and oxygen to keep moving.

<!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">
<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: 100%;
    padding: 16px;
    user-select: none;
  }

  .controls {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
  }

  .btn {
    border: none;
    outline: none;
    padding: 8px 18px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    background: #ffffff;
    color: #6b7280;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .btn:hover {
    filter: brightness(0.96);
  }

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

  .stage {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  .bpm-display {
    font-size: 28px;
    font-weight: 800;
    color: #1e2945;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .bpm-unit {
    font-size: 14px;
    font-weight: 600;
    color: #ff922b;
  }

  .flow-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    gap: 8px;
  }

  .node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 80px;
  }

  .node-icon {
    font-size: 42px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .node-label {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-align: center;
  }

  .heart {
    transform-origin: center center;
    animation: heartbeat 0.85s ease-in-out infinite;
  }

  .vessel {
    flex: 1;
    height: 24px;
    background: #f1f5f9;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 2px solid #e2e8f0;
  }

  .cell {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff4d4f;
    box-shadow: 0 0 4px rgba(255, 77, 79, 0.4);
    animation: flow 2.4s linear infinite;
  }

  .cell:nth-child(1) { animation-delay: 0s; }
  .cell:nth-child(2) { animation-delay: -0.6s; }
  .cell:nth-child(3) { animation-delay: -1.2s; }
  .cell:nth-child(4) { animation-delay: -1.8s; }

  /* Exercise state modifications */
  .state-exercise .heart {
    animation-duration: 0.42s;
  }

  .state-exercise .cell {
    animation-duration: 0.9s;
    background: #ff2a2a;
  }

  .state-exercise .bpm-unit {
    color: #ff4d4f;
  }

  @keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.18); }
    30% { transform: scale(1); }
    45% { transform: scale(1.12); }
    60% { transform: scale(1); }
  }

  @keyframes flow {
    0% {
      left: -15px;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }
</style>
</head>
<body>

<div class="controls">
  <button id="btnRest" class="btn active" onclick="setMode('rest')">Rest 🧘</button>
  <button id="btnExercise" class="btn" onclick="setMode('exercise')">Exercise 🏃</button>
</div>

<div id="sim" class="stage state-rest">
  <div class="bpm-display">
    <span id="bpmValue">70</span>
    <span class="bpm-unit">BPM</span>
  </div>

  <div class="flow-container">
    <div class="node">
      <div class="node-icon heart">❤️</div>
      <div class="node-label">Heart</div>
    </div>

    <div class="vessel">
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
      <div class="cell"></div>
    </div>

    <div class="node">
      <div class="node-icon">💪</div>
      <div class="node-label">Muscle</div>
    </div>
  </div>
</div>

<script>
  function setMode(mode) {
    const sim = document.getElementById('sim');
    const bpm = document.getElementById('bpmValue');
    const btnRest = document.getElementById('btnRest');
    const btnExercise = document.getElementById('btnExercise');

    if (mode === 'exercise') {
      sim.className = 'stage state-exercise';
      bpm.textContent = '140';
      btnExercise.classList.add('active');
      btnRest.classList.remove('active');
    } else {
      sim.className = 'stage state-rest';
      bpm.textContent = '70';
      btnRest.classList.add('active');
      btnExercise.classList.remove('active');
    }
  }
</script>

</body>
</html>

How does your body speed up delivery so your legs and arms do not run out of fuel?

Your brain sends a signal to increase your **heart rate**, which is the number of times your heart beats in one minute.

At the same time, your heart squeezes with more force on every beat, rushing blood to your muscles like a super-fast delivery truck.

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

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

    .main-stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      flex: 1;
      justify-content: center;
    }

    /* Mode Selector Buttons */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 400px;
      justify-content: center;
    }

    .btn-mode {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px 8px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .btn-mode.active {
      color: #fa5252;
      border-color: #fa5252;
      box-shadow: 0 0 0 1px #fa5252;
      background: #fff5f5;
    }

    /* Display Card */
    .visual-panel {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e5e7eb;
      width: 100%;
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    /* Heart Graphic Area */
    .heart-box {
      width: 100px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .heart-svg {
      width: 76px;
      height: 76px;
      fill: #fa5252;
      transform-origin: center center;
      animation: beat var(--beat-speed, 0.85s) ease-in-out infinite;
      filter: drop-shadow(0 4px 10px rgba(250, 82, 82, 0.3));
    }

    @keyframes beat {
      0%, 100% {
        transform: scale(1);
      }
      18% {
        transform: scale(1.18);
      }
      32% {
        transform: scale(1.02);
      }
      46% {
        transform: scale(1.14);
      }
      65% {
        transform: scale(0.98);
      }
    }

    /* Pulse Rate Stats */
    .bpm-display {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .bpm-number {
      font-size: 40px;
      font-weight: 800;
      color: #fa5252;
      line-height: 1;
    }

    .bpm-label {
      font-size: 15px;
      font-weight: 700;
      color: #6b7280;
      letter-spacing: 0.5px;
    }

    /* Blood Flow Tracker Track */
    .flow-container {
      width: 100%;
      background: #f8fafc;
      border-radius: 12px;
      padding: 10px 14px;
      border: 1px solid #edf2f7;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .flow-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
    }

    .flow-track {
      position: relative;
      height: 12px;
      background: #fee2e2;
      border-radius: 6px;
      overflow: hidden;
    }

    .flow-stream {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        90deg,
        #fa5252 0px,
        #fa5252 14px,
        rgba(0, 0, 0, 0) 14px,
        rgba(0, 0, 0, 0) 24px
      );
      animation: streamFlow var(--flow-speed, 1.8s) linear infinite;
    }

    @keyframes streamFlow {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(24px);
      }
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="controls">
      <button class="btn-mode active" id="btn-rest" onclick="setMode('rest')">
        <span>🛋️</span>
        <span>Rest</span>
      </button>
      <button class="btn-mode" id="btn-walk" onclick="setMode('walk')">
        <span>🚶</span>
        <span>Walk</span>
      </button>
      <button class="btn-mode" id="btn-run" onclick="setMode('run')">
        <span>🏃</span>
        <span>Run</span>
      </button>
    </div>

    
    <div class="visual-panel">
      <div class="heart-box">
        <svg class="heart-svg" id="heart-graphic" viewBox="0 0 24 24">
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
      </div>

      <div class="bpm-display">
        <span class="bpm-number" id="bpm-val">70</span>
        <span class="bpm-label">BPM</span>
      </div>

      
      <div class="flow-container">
        <div class="flow-header">
          <span>❤️ Heart</span>
          <span>⚡ Blood Flow</span>
          <span>💪 Muscles</span>
        </div>
        <div class="flow-track">
          <div class="flow-stream" id="flow-stream"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const modes = {
      rest: { bpm: 70, beatSpeed: '0.86s', flowSpeed: '1.8s' },
      walk: { bpm: 110, beatSpeed: '0.55s', flowSpeed: '0.9s' },
      run:  { bpm: 160, beatSpeed: '0.37s', flowSpeed: '0.4s' }
    };

    let currentMode = 'rest';
    let countInterval = null;

    function setMode(modeKey) {
      if (!modes[modeKey]) return;
      currentMode = modeKey;

      // Update button styles
      document.querySelectorAll('.btn-mode').forEach(btn => btn.classList.remove('active'));
      const activeBtn = document.getElementById('btn-' + modeKey);
      if (activeBtn) activeBtn.classList.add('active');

      const data = modes[modeKey];
      const heart = document.getElementById('heart-graphic');
      const flow = document.getElementById('flow-stream');

      // Update animation rates
      heart.style.setProperty('--beat-speed', data.beatSpeed);
      flow.style.setProperty('--flow-speed', data.flowSpeed);

      // Smoothly animate BPM number transition
      animateBpm(data.bpm);
    }

    function animateBpm(targetBpm) {
      const bpmEl = document.getElementById('bpm-val');
      let startVal = parseInt(bpmEl.textContent, 10) || 70;
      if (countInterval) clearInterval(countInterval);

      const step = targetBpm > startVal ? 1 : -1;
      countInterval = setInterval(() => {
        if (startVal === targetBpm) {
          clearInterval(countInterval);
          return;
        }
        startVal += step;
        bpmEl.textContent = startVal;
      }, 15);
    }

    // Set initial resting state
    setMode('rest');
  </script>
</body>
</html>

Some people worry that beating this fast wears the heart out, but the heart is a muscle that actually becomes stronger and healthier every time you exercise it.

Try doing 15 jumping jacks right now, and touch your chest to feel your built-in pump powering your body in real time!

- The heart is a strong muscle about the size of a fist that acts like a pump to move blood throughout the body.

- Blood carries oxygen from the lungs and energy (nutrients) to muscles so they can move and work.

- When a person starts exercising or being physically active, their muscles need more oxygen and energy to keep moving.

- To deliver extra oxygen quickly, the heart beats faster and pumps harder, which increases the pulse or heart rate.

- Breathing speeds up alongside the heart rate to bring fresh oxygen into the lungs and blood while removing carbon dioxide.

other

How Your Heart Works During Exercise. Explain what happens to the heart when you start being physically active.

Project Heart: Elementary Health and Physical Activity Curriculum (TEKS-Aligned)

Teacher's Guide: Cardiovascular System (Grades K to 2)

Arthur & Friends: Keeping Your Heart Healthy and Strong Through Exercise

For 2nd grade learners, abstract concepts such as cardiac output and circulatory transport should be taught through kinesthetic and sensory experiences. Effective teaching practices include having students place hands over their chests before and after 30 seconds of dance or jumping to feel immediate tactile feedback of an accelerating heart rate. Incorporating kinesthetic role-play (e.g., students acting as 'oxygen delivery trucks' running between the lungs, heart station, and muscle groups) anchors the biological cause-and-effect relationship required by Texas TEKS Health and PE standards.

How Your Heart Works During Exercise

Your Muscles Get Hungry

Beating Faster and Squeezing Harder