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

If a friend asks you, "What is your favorite animal?" you might shout, "Dogs!" But what happens when they ask you, **"Why?"**

To tell your friend *why*, you need to share a **reason**.

A **reason** is the explanation that tells why you feel a certain way. We connect our favorite thing to our reason using the special word **because**.

<!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: 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: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .topic-nav {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .topic-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .topic-btn.active {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0369a1;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.15);
    }

    .formula-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 580px;
      margin-bottom: 16px;
    }

    .part-card {
      flex: 1;
      background: #ffffff;
      border-radius: 12px;
      padding: 14px 10px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      min-width: 100px;
      transition: border-color 0.2s ease;
    }

    .part-card.opinion {
      border-color: #bae6fd;
      background: #f0f9ff;
    }

    .part-card.reason {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }

    .tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      margin-bottom: 6px;
    }

    .tag-opinion {
      background: #0284c7;
      color: #ffffff;
    }

    .tag-reason {
      background: #16a34a;
      color: #ffffff;
    }

    .icon {
      font-size: 26px;
      margin-bottom: 4px;
    }

    .phrase {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .bridge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      flex-shrink: 0;
    }

    .bridge-pill {
      background: #8b5cf6;
      color: #ffffff;
      font-weight: 800;
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 16px;
      box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
      position: relative;
    }

    .bridge-arrow {
      color: #8b5cf6;
      font-size: 14px;
      margin-top: 2px;
      font-weight: bold;
    }

    .sentence-bar {
      width: 100%;
      max-width: 580px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 1px solid #e2e8f0;
      text-align: center;
      font-size: 16px;
      line-height: 1.4;
    }

    .w-op {
      color: #0369a1;
      font-weight: 700;
    }

    .w-br {
      color: #7c3aed;
      font-weight: 800;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .w-re {
      color: #15803d;
      font-weight: 700;
    }

    @media (max-width: 440px) {
      .formula-container {
        flex-direction: column;
        gap: 6px;
      }
      .part-card {
        width: 100%;
        padding: 8px;
      }
      .bridge {
        flex-direction: row;
        gap: 6px;
        margin: 2px 0;
      }
      .bridge-arrow {
        margin-top: 0;
        transform: rotate(90deg);
      }
      .sentence-bar {
        font-size: 14px;
        padding: 10px;
      }
    }
  </style>
</head>
<body>

  <div class="topic-nav">
    <button class="topic-btn active" data-idx="0">🐶 Dogs</button>
    <button class="topic-btn" data-idx="1">🎨 Painting</button>
    <button class="topic-btn" data-idx="2">📚 Books</button>
  </div>

  <div class="formula-container">
    <div class="part-card opinion">
      <div class="tag tag-opinion">Opinion</div>
      <div class="icon" id="op-icon">🐶</div>
      <div class="phrase" id="op-text">I like dogs</div>
    </div>

    <div class="bridge">
      <div class="bridge-pill">because</div>
      <div class="bridge-arrow">→</div>
    </div>

    <div class="part-card reason">
      <div class="tag tag-reason">Reason</div>
      <div class="icon" id="re-icon">🎾</div>
      <div class="phrase" id="re-text">they are playful</div>
    </div>
  </div>

  <div class="sentence-bar" id="sentence">
    "<span class="w-op" id="s-op">I like dogs</span> <span class="w-br">because</span> <span class="w-re" id="s-re">they are playful</span>."
  </div>

  <script>
    const examples = [
      {
        opIcon: '🐶',
        opText: 'I like dogs',
        reIcon: '🎾',
        reText: 'they are playful'
      },
      {
        opIcon: '🎨',
        opText: 'I love painting',
        reIcon: '✨',
        reText: 'colors are fun'
      },
      {
        opIcon: '📚',
        opText: 'I enjoy books',
        reIcon: '🚀',
        reText: 'stories are exciting'
      }
    ];

    const btns = document.querySelectorAll('.topic-btn');
    const opIcon = document.getElementById('op-icon');
    const opText = document.getElementById('op-text');
    const reIcon = document.getElementById('re-icon');
    const reText = document.getElementById('re-text');
    const sOp = document.getElementById('s-op');
    const sRe = document.getElementById('s-re');

    function showExample(idx) {
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });
      const data = examples[idx];
      opIcon.textContent = data.opIcon;
      opText.textContent = data.opText;
      reIcon.textContent = data.reIcon;
      reText.textContent = data.reText;
      sOp.textContent = data.opText;
      sRe.textContent = data.reText;
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => showExample(idx));
    });
  </script>
</body>
</html>

You can find reasons by thinking about how things **taste**, **feel**, or **what you do** with them.

<!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>Explaining Why You Like Something</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

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

    .wrapper {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .btn-tab {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 6px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.25s ease;
      outline: none;
    }

    .btn-tab:hover {
      border-color: #22b7ff;
    }

    .btn-tab.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

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

    .tab-label {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .display-area {
      background: #ffffff;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 180px;
      text-align: center;
      position: relative;
    }

    .stage {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      animation: fadeIn 0.3s ease;
    }

    .stage.active {
      display: flex;
    }

    .item-row {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 40px;
    }

    .arrow {
      font-size: 20px;
      color: #22b7ff;
      font-weight: bold;
    }

    .tag-bubble {
      background: #22b7ff;
      color: #ffffff;
      font-size: 16px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      letter-spacing: 0.5px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="options" role="tablist">
      <button class="btn-tab active" id="tab-0" onclick="showCategory(0)">
        <span class="tab-icon">👅</span>
        <span class="tab-label">Taste</span>
      </button>
      <button class="btn-tab" id="tab-1" onclick="showCategory(1)">
        <span class="tab-icon">✋</span>
        <span class="tab-label">Feel</span>
      </button>
      <button class="btn-tab" id="tab-2" onclick="showCategory(2)">
        <span class="tab-icon">🏃</span>
        <span class="tab-label">Do</span>
      </button>
    </div>

    <div class="display-area">
      
      <div class="stage active" id="stage-0">
        <div class="item-row">
          <span>🍓</span>
          <span class="arrow">➔</span>
          <span>😋</span>
        </div>
        <div class="tag-bubble">Sweet & Juicy</div>
      </div>

      
      <div class="stage" id="stage-1">
        <div class="item-row">
          <span>🧸</span>
          <span class="arrow">➔</span>
          <span>🤗</span>
        </div>
        <div class="tag-bubble">Soft & Warm</div>
      </div>

      
      <div class="stage" id="stage-2">
        <div class="item-row">
          <span>🚲</span>
          <span class="arrow">➔</span>
          <span>💨</span>
        </div>
        <div class="tag-bubble">Fast & Fun</div>
      </div>
    </div>
  </div>

  <script>
    function showCategory(idx) {
      for (let i = 0; i < 3; i++) {
        const tab = document.getElementById('tab-' + i);
        const stage = document.getElementById('stage-' + i);
        if (i === idx) {
          tab.classList.add('active');
          stage.classList.add('active');
        } else {
          tab.classList.remove('active');
          stage.classList.remove('active');
        }
      }
    }
  </script>
</body>
</html>

What if you just want to say something is "good"?

Saying "I like pizza because it is good" does not tell your listener very much. Try to name the **detail** that makes it special!

Instead, say: "I like pizza **because** the warm cheese is stretchy and delicious."

Now look around your room and pick one object you love. Try speaking out loud: **"I like ___ because ___!"**

Explaining Why You Like Something. Use language to give reasons for why you like something.

Spoken Language: Giving a Reason to Explain an Opinion

Using 'because' to Join Ideas and Give Reasons (KS1 English)

Language for Interacting with Others: Expressing Likes and Dislikes (AC9E1LA02)

In Years 1-2 (ages 6-8), students transition from simple one-word or non-verbal expressions of preference to structured oral justifications. Pedagogical success relies heavily on oral rehearsal ('Think-Pair-Share'), physical gesture cues (e.g., stepping across an imaginary line when saying 'because'), and providing visual word banks of sensory adjectives to discourage repetitive phrases like 'it is nice/fun'.

Explaining Why You Like Something

The Word "Because"

Think About Your Senses

Be Specific