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 you spent three whole days drawing an incredible comic book about a superhero cat.

Then someone takes a photo of your comic, posts it online, and tells everyone *they* drew it. That would feel unfair!

How does the law stop people from doing that to your hard work?

A **creator** is anyone who makes something original, like a painting, a song, a video, or a story.

**Copyright** is a legal rule that automatically gives creators the right to decide how their work is used or copied.

<!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, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .type-switcher {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 20px;
    }
    .type-btn {
      background: transparent;
      border: none;
      padding: 6px 14px;
      border-radius: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .type-btn.active {
      background: #ffffff;
      color: #2563eb;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

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

    .work-card {
      position: absolute;
      width: 130px;
      height: 150px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
      z-index: 2;
    }

    .work-icon {
      font-size: 52px;
      transition: transform 0.3s ease;
    }

    .shield-badge {
      position: absolute;
      top: -16px;
      right: -16px;
      width: 44px;
      height: 44px;
      background: #2563eb;
      color: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 800;
      box-shadow: 0 4px 12px rgba(37,99,235,0.4);
      transform: scale(0);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 3;
    }

    .step-2 .shield-badge,
    .step-3 .shield-badge {
      transform: scale(1);
      opacity: 1;
    }

    .step-2 .work-card,
    .step-3 .work-card {
      border-color: #2563eb;
      box-shadow: 0 10px 25px rgba(37,99,235,0.15);
    }

    /* Rights bubbles for step 3 */
    .rights-group {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .right-chip {
      position: absolute;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      padding: 6px 10px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      opacity: 0;
      transform: scale(0.6);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .step-3 .right-chip {
      opacity: 1;
      transform: scale(1);
    }

    .chip-left { left: 4%; top: 50%; transform: translateY(-50%) scale(0.6); }
    .step-3 .chip-left { transform: translateY(-50%) scale(1); }

    .chip-top { top: 6%; left: 50%; transform: translateX(-50%) scale(0.6); }
    .step-3 .chip-top { transform: translateX(-50%) scale(1); }

    .chip-right { right: 4%; top: 50%; transform: translateY(-50%) scale(0.6); }
    .step-3 .chip-right { transform: translateY(-50%) scale(1); }

    /* Stepper Controls */
    .stepper-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 360px;
      justify-content: center;
    }

    .step-tab {
      flex: 1;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .step-tab.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(37,99,235,0.25);
    }
  </style>
</head>
<body>

  
  <div class="type-switcher">
    <button class="type-btn active" data-icon="🎨">Art</button>
    <button class="type-btn" data-icon="🎵">Music</button>
    <button class="type-btn" data-icon="📝">Story</button>
  </div>

  
  <div class="stage-container step-1" id="stage">
    <div class="rights-group">
      <div class="right-chip chip-left">📋 Copy</div>
      <div class="right-chip chip-top">📢 Share</div>
      <div class="right-chip chip-right">💰 Sell</div>
    </div>

    <div class="work-card">
      <div class="shield-badge">©</div>
      <div class="work-icon" id="workIcon">🎨</div>
    </div>
  </div>

  
  <div class="stepper-nav">
    <button class="step-tab active" data-step="1">1. Create</button>
    <button class="step-tab" data-step="2">2. Protect</button>
    <button class="step-tab" data-step="3">3. Control</button>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const workIcon = document.getElementById('workIcon');
    const typeBtns = document.querySelectorAll('.type-btn');
    const stepTabs = document.querySelectorAll('.step-tab');

    let currentStep = 1;
    let autoTimer = null;

    function setStep(step) {
      currentStep = step;
      stage.className = 'stage-container step-' + step;
      stepTabs.forEach(tab => {
        tab.classList.toggle('active', parseInt(tab.dataset.step) === step);
      });
    }

    function setType(icon, btn) {
      workIcon.textContent = icon;
      typeBtns.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
    }

    typeBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        setType(btn.dataset.icon, btn);
        resetAutoLoop();
      });
    });

    stepTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        setStep(parseInt(tab.dataset.step));
        resetAutoLoop();
      });
    });

    function startAutoLoop() {
      autoTimer = setInterval(() => {
        const next = (currentStep % 3) + 1;
        setStep(next);
      }, 3200);
    }

    function resetAutoLoop() {
      clearInterval(autoTimer);
      startAutoLoop();
    }

    startAutoLoop();
  </script>
</body>
</html>

You do not even have to fill out paperwork — the moment you create your original work, copyright protects it instantly.

Over 300 years ago in 1710, lawmakers created the first official copyright law to stop printers from selling authors' books without paying them.

What kinds of things that we make on tablets and computers are protected today?

Copyright protects creative work that is saved or recorded so others can see, hear, or read it.

<!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>Copyright: Idea vs. Fixed Work</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
  }

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

  .tabs {
    display: flex;
    gap: 8px;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 10px;
    width: 100%;
    max-width: 380px;
  }

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

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

  .stage-area {
    width: 100%;
    max-width: 480px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
  }

  .card-box {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    min-height: 220px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .card-box.protected {
    border-color: #2563eb;
    box-shadow: 0 6px 18px rgba(37,99,235,0.12);
  }

  .icon-display {
    font-size: 54px;
    line-height: 1;
    margin-bottom: 12px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .shield-badge {
    position: absolute;
    top: -8px;
    right: -14px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
  }

  .label-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e2945;
    margin-bottom: 8px;
  }

  .status-tag {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .tag-no {
    background: #f1f5f9;
    color: #64748b;
  }

  .tag-yes {
    background: #dbeafe;
    color: #1d4ed8;
  }

  .action-hint {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
  }
</style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" id="tabArt">🎨 Art</button>
    <button class="tab-btn" id="tabMusic">🎵 Music</button>
    <button class="tab-btn" id="tabCode">💻 Code</button>
  </div>

  <div class="stage-area">
    
    <div class="card-box">
      <div class="icon-display" id="ideaIcon">💭</div>
      <div class="label-title" id="ideaLabel">Idea</div>
      <div class="status-tag tag-no">✕ No Shield</div>
    </div>

    
    <div class="card-box protected">
      <div class="icon-display">
        <span id="savedIcon">🖼️</span>
        <div class="shield-badge">©</div>
      </div>
      <div class="label-title" id="savedLabel">Saved Work</div>
      <div class="status-tag tag-yes">✓ Protected</div>
    </div>
  </div>

  <div class="action-hint">Tap a category to compare</div>

  <script>
    const data = {
      tabArt: {
        idea: '💭',
        ideaText: 'Idea in Mind',
        saved: '🎨',
        savedText: 'Drawn Picture'
      },
      tabMusic: {
        idea: '💭',
        ideaText: 'Melody in Head',
        saved: '🎙️',
        savedText: 'Recorded Audio'
      },
      tabCode: {
        idea: '💭',
        ideaText: 'App Plan',
        saved: '💾',
        savedText: 'Saved Code'
      }
    };

    const buttons = document.querySelectorAll('.tab-btn');
    const ideaIcon = document.getElementById('ideaIcon');
    const ideaLabel = document.getElementById('ideaLabel');
    const savedIcon = document.getElementById('savedIcon');
    const savedLabel = document.getElementById('savedLabel');

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        const cur = data[btn.id];
        ideaIcon.textContent = cur.idea;
        ideaLabel.textContent = cur.ideaText;
        savedIcon.textContent = cur.saved;
        savedLabel.textContent = cur.savedText;
      });
    });
  </script>
</body>
</html>

It protects the exact way you created your project, like your specific drawing of a robot dog, rather than just the general idea of robot dogs.

Why is this protection so important for artists, musicians, and game makers?

Making digital content takes time, energy, and lots of practice. Copyright protects creators in three powerful ways.

<!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;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    body {
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

    /* Tab switcher */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }
    .tab-btn {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.25s ease;
    }
    .tab-btn span.icon {
      font-size: 18px;
    }
    .tab-btn.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    /* Stage arena */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 230px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      overflow: hidden;
    }

    .node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      z-index: 2;
      width: 80px;
    }
    .avatar {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .node-label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-align: center;
    }

    /* Center work & shield */
    .center-pod {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 3;
    }
    .work-card {
      width: 84px;
      height: 94px;
      background: #eff6ff;
      border: 2px solid #3b82f6;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
      transition: all 0.3s ease;
      position: relative;
    }
    .work-icon {
      font-size: 32px;
    }
    .shield-badge {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #2563eb;
      color: white;
      font-size: 12px;
      font-weight: bold;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    /* Status indicator */
    .action-display {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }
    .status-block {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
    .status-permit {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }
    .status-credit {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    /* Dynamic interaction zone */
    .target-box {
      width: 64px;
      height: 64px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      transition: all 0.3s ease;
    }
    .target-blocked {
      background: #fef2f2;
      border: 2px dashed #ef4444;
      opacity: 0.8;
    }
    .target-allowed {
      background: #f0fdf4;
      border: 2px solid #22c55e;
    }
    .target-credit {
      background: #fffbeb;
      border: 2px solid #f59e0b;
    }

    /* Beam / path line */
    .flow-line {
      position: absolute;
      top: 45%;
      left: 22%;
      right: 22%;
      height: 2px;
      background: #e2e8f0;
      z-index: 1;
    }

    /* Auto/manual indicator dots */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tab0" onclick="setProtection(0)">
      <span class="icon">📋</span>
      <span>1. Copy</span>
    </button>
    <button class="tab-btn" id="tab1" onclick="setProtection(1)">
      <span class="icon">🚀</span>
      <span>2. Share</span>
    </button>
    <button class="tab-btn" id="tab2" onclick="setProtection(2)">
      <span class="icon">🏷️</span>
      <span>3. Credit</span>
    </button>
  </div>

  
  <div class="stage">
    <div class="flow-line"></div>

    
    <div class="node">
      <div class="avatar">👩‍🎨</div>
      <div class="node-label">Creator</div>
    </div>

    
    <div class="center-pod">
      <div class="work-card">
        <div class="shield-badge">©</div>
        <div class="work-icon" id="workIcon">🎮</div>
      </div>
      <div class="node-label" style="margin-top:6px;">Original Work</div>
    </div>

    
    <div class="node">
      <div class="target-box target-blocked" id="targetBox">🚫</div>
      <div class="node-label" id="targetLabel">Blocked</div>
    </div>

    
    <div class="action-display status-block" id="statusPill">
      <span id="statusIcon">🛡️</span>
      <span id="statusText">No Copying</span>
    </div>
  </div>

  
  <div class="controls">
    <div class="dot active" onclick="setProtection(0)"></div>
    <div class="dot" onclick="setProtection(1)"></div>
    <div class="dot" onclick="setProtection(2)"></div>
  </div>

  <script>
    const modes = [
      {
        icon: '🎮',
        targetBoxClass: 'target-blocked',
        targetIcon: '🚫',
        targetLabel: 'Blocked',
        pillClass: 'status-block',
        pillIcon: '🛡️',
        pillText: 'No Copying'
      },
      {
        icon: '🎵',
        targetBoxClass: 'target-allowed',
        targetIcon: '🤝',
        targetLabel: 'Permission',
        pillClass: 'status-permit',
        pillIcon: '✓',
        pillText: 'Allowed to Sell'
      },
      {
        icon: '🎨',
        targetBoxClass: 'target-credit',
        targetIcon: '⭐',
        targetLabel: 'By Creator',
        pillClass: 'status-credit',
        pillIcon: '🏷️',
        pillText: 'Credit Required'
      }
    ];

    let current = 0;
    let timer = null;

    function setProtection(index) {
      current = index;
      const data = modes[current];

      // Update tabs
      for (let i = 0; i < 3; i++) {
        document.getElementById(`tab${i}`).classList.toggle('active', i === current);
        document.querySelectorAll('.dot')[i].classList.toggle('active', i === current);
      }

      // Update work icon
      document.getElementById('workIcon').textContent = data.icon;

      // Update target
      const targetBox = document.getElementById('targetBox');
      targetBox.className = 'target-box ' + data.targetBoxClass;
      targetBox.textContent = data.targetIcon;
      document.getElementById('targetLabel').textContent = data.targetLabel;

      // Update status pill
      const pill = document.getElementById('statusPill');
      pill.className = 'action-display ' + data.pillClass;
      document.getElementById('statusIcon').textContent = data.pillIcon;
      document.getElementById('statusText').textContent = data.pillText;

      resetTimer();
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setProtection((current + 1) % 3);
      }, 3600);
    }

    resetTimer();
  </script>
</body>
</html>

When creators know their hard work is safe from being stolen, they feel excited to keep making new games, videos, and music for the world to enjoy.

What should you do when you want to use a cool picture you found online for a class slide?

A common mistake is thinking, *'If a photo is on Google or a video is on YouTube, anyone can use it however they want.'*

Even if something is easy to find online, someone still owns it. Always check if the creator allows sharing, or ask for their permission first!

technology

Copyright: Protecting Creators' Work. Learner will explain in simple terms what copyright means and how it protects the people who create digital content.

Grade 2: Creativity & Sharing Fairly (Elementary Copyright Curriculum)

K–2 Digital Citizenship: Creative Work, Ownership, and Giving Credit

Digital Citizenship & Respecting Online Work

At the 2nd-grade level (TEKS 126.3.b.8.B), the most effective pedagogical entry point is anchoring digital ownership in concrete classroom routines (e.g., asking before borrowing markers, putting names on artwork). Teachers should empower students to see themselves first as 'Creators,' establishing that their digital art, typing, and recordings have intrinsic value. This positive framing shifts copyright from punitive 'rules' to a system of mutual respect, fairness, and safety in a connected community.

Copyright: Protecting Creators' Work

What Is Copyright?

What Does Copyright Protect?