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 noticed that your math teacher, science teacher, and reading teacher all ask you to do the exact same things?

They might all ask you to **analyze** a problem, find **evidence**, or state a **conclusion**.

**General academic words** are thinking and writing words that appear across almost every subject in school.

Special topic words belong to just one subject—like *photosynthesis* in science—but general academic words travel everywhere you go.

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

  .toggle-row {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 420px;
  }

  .tab-btn {
    flex: 1;
    border: none;
    background: #ffffff;
    padding: 10px 8px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    text-align: center;
  }

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

  .stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 12px 0;
  }

  .word-hub {
    background: #ffffff;
    padding: 12px 24px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease, border 0.3s ease;
    border: 2px solid transparent;
  }

  .word-hub.general {
    border-color: #22b7ff;
    color: #0284c7;
  }

  .word-hub.topic {
    border-color: #10b981;
    color: #059669;
  }

  .connector-svg {
    width: 100%;
    height: 60px;
    overflow: visible;
  }

  .conn-line {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke 0.3s ease, stroke-dasharray 0.3s ease, opacity 0.3s ease;
  }

  .conn-line.active-blue {
    stroke: #22b7ff;
    stroke-width: 3.5;
  }

  .conn-line.active-green {
    stroke: #10b981;
    stroke-width: 3.5;
  }

  .conn-line.inactive {
    stroke: #e2e8f0;
    opacity: 0.4;
    stroke-dasharray: 4 4;
  }

  .classrooms {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
  }

  .room-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 2px solid rgba(0,0,0,0);
  }

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

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

  .room-card.connected-blue {
    border-color: #22b7ff;
    background: #f0f9ff;
    transform: translateY(-3px);
  }

  .room-card.connected-green {
    border-color: #10b981;
    background: #ecfdf5;
    transform: translateY(-3px);
  }

  .room-card.locked {
    opacity: 0.35;
    filter: grayscale(0.8);
    transform: none;
  }
</style>
</head>
<body>

  <div class="toggle-row">
    <button class="tab-btn active" id="btn-general">General Word</button>
    <button class="tab-btn" id="btn-topic">Topic Word</button>
  </div>

  <div class="stage">
    <div class="word-hub general" id="word-hub">
      <span id="hub-icon">✦</span>
      <span id="hub-text">Analyze</span>
    </div>

    <svg class="connector-svg" viewBox="0 0 300 60" preserveAspectRatio="none">
      <path id="path-left" class="conn-line active-blue" d="M 150 0 C 150 35, 50 25, 50 60" />
      <path id="path-mid" class="conn-line active-blue" d="M 150 0 C 150 30, 150 30, 150 60" />
      <path id="path-right" class="conn-line active-blue" d="M 150 0 C 150 35, 250 25, 250 60" />
    </svg>

    <div class="classrooms">
      <div class="room-card connected-blue" id="room-sci">
        <div class="room-icon">🔬</div>
        <div class="room-name">Science</div>
      </div>
      <div class="room-card connected-blue" id="room-hist">
        <div class="room-icon">📜</div>
        <div class="room-name">History</div>
      </div>
      <div class="room-card connected-blue" id="room-math">
        <div class="room-icon">📐</div>
        <div class="room-name">Math</div>
      </div>
    </div>
  </div>

<script>
  const btnGeneral = document.getElementById('btn-general');
  const btnTopic = document.getElementById('btn-topic');
  const wordHub = document.getElementById('word-hub');
  const hubText = document.getElementById('hub-text');
  const hubIcon = document.getElementById('hub-icon');

  const pathLeft = document.getElementById('path-left');
  const pathMid = document.getElementById('path-mid');
  const pathRight = document.getElementById('path-right');

  const roomSci = document.getElementById('room-sci');
  const roomHist = document.getElementById('room-hist');
  const roomMath = document.getElementById('room-math');

  function setMode(mode) {
    if (mode === 'general') {
      btnGeneral.classList.add('active');
      btnTopic.classList.remove('active');

      wordHub.className = 'word-hub general';
      hubIcon.textContent = '✦';
      hubText.textContent = 'Analyze';

      pathLeft.className = 'conn-line active-blue';
      pathMid.className = 'conn-line active-blue';
      pathRight.className = 'conn-line active-blue';

      roomSci.className = 'room-card connected-blue';
      roomHist.className = 'room-card connected-blue';
      roomMath.className = 'room-card connected-blue';
    } else {
      btnTopic.classList.add('active');
      btnGeneral.classList.remove('active');

      wordHub.className = 'word-hub topic';
      hubIcon.textContent = '🌿';
      hubText.textContent = 'Photosynthesis';

      pathLeft.className = 'conn-line active-green';
      pathMid.className = 'conn-line inactive';
      pathRight.className = 'conn-line inactive';

      roomSci.className = 'room-card connected-green';
      roomHist.className = 'room-card locked';
      roomMath.className = 'room-card locked';
    }
  }

  btnGeneral.addEventListener('click', () => setMode('general'));
  btnTopic.addEventListener('click', () => setMode('topic'));
</script>
</body>
</html>

How does knowing just one academic word help you in three different classrooms?

Let's look at what happens when the academic word **contrast** shows up across different subjects.

<!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;
      -webkit-tap-highlight-color: transparent;
    }

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

    /* Subject Switcher */
    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 440px;
      justify-content: center;
    }

    .tab-btn {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

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

    /* Main Display Area */
    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* Comparison Cards */
    .item-card {
      width: 38%;
      height: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      text-align: center;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .item-icon {
      font-size: 46px;
      margin-bottom: 8px;
      line-height: 1;
    }

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

    /* Central Contrast Hub */
    .center-hub {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .hub-badge {
      background: #1e2945;
      color: #ffffff;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.25);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .vs-symbol {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #22b7ff;
      color: #22b7ff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 900;
      margin: 6px 0;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .action-tag {
      font-size: 11px;
      font-weight: 700;
      color: #22b7ff;
      background: rgba(34, 183, 255, 0.12);
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
    }

    /* Pagination controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .dot-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #d1d5db;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.25s ease;
    }

    .dot-btn.active {
      background: #22b7ff;
      transform: scale(1.3);
    }

    .play-btn {
      background: none;
      border: 1px solid #e6e6e6;
      border-radius: 50%;
      width: 28px;
      height: 28px;
      font-size: 11px;
      color: #6b7280;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tab0">🔬 Science</button>
    <button class="tab-btn" id="tab1">📜 History</button>
    <button class="tab-btn" id="tab2">📖 Reading</button>
  </div>

  
  <div class="stage">
    
    <div class="item-card" id="cardA">
      <div class="item-icon" id="iconA">☀️</div>
      <div class="item-label" id="labelA">Plant</div>
    </div>

    
    <div class="center-hub">
      <div class="hub-badge">CONTRAST</div>
      <div class="vs-symbol">≠</div>
      <div class="action-tag">Find Differences</div>
    </div>

    
    <div class="item-card" id="cardB">
      <div class="item-icon" id="iconB">🍄</div>
      <div class="item-label" id="labelB">Fungus</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="playBtn" aria-label="Play/Pause">⏸</button>
    <button class="dot-btn active" id="dot0" aria-label="Science"></button>
    <button class="dot-btn" id="dot1" aria-label="History"></button>
    <button class="dot-btn" id="dot2" aria-label="Reading"></button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const subjects = [
      { tab: 'tab0', dot: 'dot0', iconA: '☀️', labelA: 'Plant', iconB: '🍄', labelB: 'Fungus' },
      { tab: 'tab1', dot: 'dot1', iconA: '👑', labelA: 'Monarchy', iconB: '🗳️', labelB: 'Democracy' },
      { tab: 'tab2', dot: 'dot2', iconA: '🐉', labelA: 'Fiction', iconB: '📰', labelB: 'Nonfiction' }
    ];

    let current = 0;
    let timer = null;
    let isPlaying = true;

    function render(idx) {
      current = idx;
      const data = subjects[idx];

      // Update Card Content with smooth opacity
      const cardA = document.getElementById('cardA');
      const cardB = document.getElementById('cardB');
      
      cardA.style.opacity = '0.3';
      cardB.style.opacity = '0.3';

      setTimeout(() => {
        document.getElementById('iconA').textContent = data.iconA;
        document.getElementById('labelA').textContent = data.labelA;
        document.getElementById('iconB').textContent = data.iconB;
        document.getElementById('labelB').textContent = data.labelB;
        
        cardA.style.opacity = '1';
        cardB.style.opacity = '1';
      }, 150);

      // Update Tabs & Dots
      subjects.forEach((s, i) => {
        document.getElementById(s.tab).classList.toggle('active', i === idx);
        document.getElementById(s.dot).classList.toggle('active', i === idx);
      });
    }

    function startAutoPlay() {
      stopAutoPlay();
      timer = setInterval(() => {
        render((current + 1) % subjects.length);
      }, 3200);
      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸';
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶';
    }

    subjects.forEach((s, i) => {
      document.getElementById(s.tab).addEventListener('click', () => {
        render(i);
        stopAutoPlay();
      });
      document.getElementById(s.dot).addEventListener('click', () => {
        render(i);
        stopAutoPlay();
      });
    });

    document.getElementById('playBtn').addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        render((current + 1) % subjects.length);
        startAutoPlay();
      }
    });

    // Start auto cycle
    startAutoPlay();
  </script>
</body>
</html>

The topic changes every single time, but your mission stays the same: find what makes things different.

So how do academic words make our everyday talk more precise?

Academic words help you explain big ideas clearly without using long, messy sentences.

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .nav-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 16px;
      width: 100%;
      max-width: 480px;
    }

    .tab-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }

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

    .display-box {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e6e6e6;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    .transform-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .phrase-card {
      flex: 1;
      padding: 14px 12px;
      border-radius: 10px;
      text-align: center;
      min-height: 76px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .messy {
      background: #f1f5f9;
      border: 1px dashed #cbd5e1;
      color: #64748b;
      font-size: 14px;
      line-height: 1.3;
    }

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

    .academic {
      background: #e0f6ff;
      border: 1px solid #22b7ff;
      color: #0284c7;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .subjects-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #94a3b8;
      font-weight: 700;
      text-align: center;
    }

    .subjects-grid {
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .sub-badge {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 500;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs" id="tabs">
    <button class="tab-btn active" data-idx="0">Demonstrate</button>
    <button class="tab-btn" data-idx="1">Analyze</button>
    <button class="tab-btn" data-idx="2">Contrast</button>
  </div>

  <div class="display-box">
    <div class="transform-row">
      <div class="phrase-card messy" id="everydayText">
        Show clearly<br>with proof
      </div>
      <div class="arrow">➔</div>
      <div class="phrase-card academic" id="academicWord">
        Demonstrate
      </div>
    </div>

    <div class="subjects-label">Used Across All Subjects</div>

    <div class="subjects-grid">
      <div class="sub-badge">📐 Math</div>
      <div class="sub-badge">🔬 Science</div>
      <div class="sub-badge">📖 ELA</div>
      <div class="sub-badge">📜 History</div>
    </div>
  </div>

  <script>
    const data = [
      {
        word: "Demonstrate",
        everyday: "Show clearly<br>with proof"
      },
      {
        word: "Analyze",
        everyday: "Break down<br>to study parts"
      },
      {
        word: "Contrast",
        everyday: "Find differences<br>between"
      }
    ];

    const everydayEl = document.getElementById('everydayText');
    const academicEl = document.getElementById('academicWord');
    const buttons = document.querySelectorAll('.tab-btn');

    let current = 0;
    let timer = null;

    function render(idx) {
      current = idx;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });
      everydayEl.innerHTML = data[idx].everyday;
      academicEl.textContent = data[idx].word;
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        clearInterval(timer);
        render(i);
        startCycle();
      });
    });

    function startCycle() {
      timer = setInterval(() => {
        current = (current + 1) % data.length;
        render(current);
      }, 3500);
    }

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

What should you do when an assignment prompt asks you to **demonstrate** your thinking?

The word **demonstrate** simply means to show clearly using drawings, numbers, or written steps.

Whenever you see these traveler words on a test or worksheet, you now hold the key to exactly what you need to do.

What Are General Academic Words?. Understand that general academic words appear across many subjects and help you talk and write about ideas.

Use Academic Vocabulary in Context (Grade 4)

4th Grade Reading and Vocabulary: Building High-Utility Academic Words

Developing Academic Vocabulary Across Content Areas

Effective instruction for CCSS L.4.6 requires explicit contrast between conversational language, high-utility cross-curricular terms, and disciplinary technical terms. Teachers should utilize the 'Beck & McKeown Three-Tier Framework', providing student-friendly definitions, multi-context exposure (e.g., using 'factor' or 'demonstrate' in science, math, and social studies within the same week), and sentence-stem oral routines to bridge receptive understanding into expressive mastery.

What Are General Academic Words?

Words That Travel Everywhere

Academic Words at Work

Everyday Talk vs. Academic Words