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 if you had a secret cheat code that let you figure out thousands of hard English words without ever using a dictionary?

More than half of the words in the English language are built from ancient word parts that come from **Greek** and **Latin**.

A **root** is the core building block of a word that carries its main meaning.

Just like snap-together toy bricks, you can combine different roots to build brand new words.

<!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>Root Word Builder</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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px;
      gap: 16px;
    }

    .selector {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }

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

    .tab-btn.active {
      border-color: #22b7ff;
      background: #e8f7ff;
      color: #0084cc;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.25);
    }

    .stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .parts-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .brick {
      flex: 1;
      max-width: 140px;
      background: #ffffff;
      border: 2px solid;
      border-radius: 12px;
      padding: 12px 6px;
      text-align: center;
      position: relative;
      box-shadow: 0 4px 10px rgba(0,0,0,0.04);
      transition: transform 0.3s ease;
    }

    .brick::before {
      content: "";
      position: absolute;
      top: -8px;
      left: calc(50% - 14px);
      width: 28px;
      height: 8px;
      border-radius: 4px 4px 0 0;
      background: inherit;
      border: 2px solid;
      border-color: inherit;
      border-bottom: none;
    }

    .brick-blue {
      border-color: #22b7ff;
      background: #f0faff;
    }
    .brick-blue .root-text {
      color: #0077b6;
    }

    .brick-purple {
      border-color: #9d4edd;
      background: #faf4ff;
    }
    .brick-purple .root-text {
      color: #7b2cbf;
    }

    .symbol {
      font-size: 20px;
      font-weight: 700;
      color: #9ca3af;
    }

    .root-text {
      font-size: 20px;
      font-weight: 800;
      display: block;
      margin-bottom: 2px;
    }

    .meaning-text {
      font-size: 13px;
      font-weight: 600;
      color: #6b7280;
    }

    .result-box {
      width: 100%;
      max-width: 320px;
      background: #ffffff;
      border: 2px dashed #cbd5e1;
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    .result-icon {
      font-size: 32px;
      line-height: 1;
    }

    .result-word {
      font-size: 22px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.5px;
    }
  </style>
</head>
<body>

  <div class="selector">
    <button class="tab-btn active" onclick="setWord(0)">bio + graph</button>
    <button class="tab-btn" onclick="setWord(1)">tele + phone</button>
    <button class="tab-btn" onclick="setWord(2)">aqua + duct</button>
  </div>

  <div class="stage">
    <div class="parts-row">
      <div class="brick brick-blue">
        <span class="root-text" id="root1">bio</span>
        <span class="meaning-text" id="mean1">life</span>
      </div>

      <div class="symbol">+</div>

      <div class="brick brick-purple">
        <span class="root-text" id="root2">graph</span>
        <span class="meaning-text" id="mean2">write</span>
      </div>
    </div>

    <div class="symbol">↓</div>

    <div class="result-box">
      <span class="result-icon" id="resIcon">📖</span>
      <span class="result-word" id="resWord">biography</span>
    </div>
  </div>

  <script>
    const data = [
      { r1: "bio", m1: "life", r2: "graph", m2: "write", word: "biography", icon: "📖" },
      { r1: "tele", m1: "far", r2: "phone", m2: "sound", word: "telephone", icon: "📞" },
      { r1: "aqua", m1: "water", r2: "duct", m2: "lead", word: "aqueduct", icon: "🏛️" }
    ];

    let current = 0;
    let timer = null;

    function setWord(idx) {
      current = idx;
      const d = data[idx];

      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === idx);
      });

      document.getElementById('root1').textContent = d.r1;
      document.getElementById('mean1').textContent = d.m1;
      document.getElementById('root2').textContent = d.r2;
      document.getElementById('mean2').textContent = d.m2;
      document.getElementById('resWord').textContent = d.word;
      document.getElementById('resIcon').textContent = d.icon;

      resetTimer();
    }

    function resetTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        setWord((current + 1) % data.length);
      }, 3500);
    }

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

How did words from ancient Greece and Rome end up in your school books today?

Centuries ago, ancient Greek and Roman scholars named new inventions, science ideas, and tools using their own languages.

When English speakers later invented things like telephones and cameras, they used those same Greek and Latin **word roots** to name 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>Greek &amp; Latin Roots</title>
<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: 100vh;
    padding: 12px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }
  .word-nav {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .nav-btn {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nav-btn:hover {
    color: #1e2945;
    border-color: #cbd5e1;
  }
  .nav-btn.active {
    background: #1e2945;
    color: #ffffff;
    border-color: #1e2945;
    box-shadow: 0 4px 10px rgba(30, 41, 69, 0.15);
  }
  .board {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e6e8ec;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .equation-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .root-block {
    flex: 1;
    max-width: 150px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1.5px solid transparent;
  }
  .root-block.r1 {
    background: #eff6ff;
    border-color: #bfdbfe;
  }
  .root-block.r2 {
    background: #faf5ff;
    border-color: #e9d5ff;
  }
  .root-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.5px;
  }
  .root-block.r1 .root-title { color: #1d4ed8; }
  .root-block.r2 .root-title { color: #7e22ce; }
  
  .root-icon {
    font-size: 24px;
    line-height: 1.2;
  }
  .root-meaning {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
  }
  .math-sign {
    font-size: 22px;
    font-weight: 800;
    color: #94a3b8;
  }
  .divider-arrow {
    font-size: 20px;
    color: #22b7ff;
    line-height: 1;
  }
  .result-card {
    width: 100%;
    background: #f8fafc;
    border-radius: 12px;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #e2e8f0;
  }
  .result-word {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
  }
  .p1 { color: #1d4ed8; }
  .p2 { color: #7e22ce; }
  
  .result-meaning-box {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
  }
  .result-desc {
    font-size: 14px;
    font-weight: 700;
    color: #1e2945;
  }
  .result-emoji {
    font-size: 32px;
    line-height: 1;
  }
  .controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .ctrl-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
  }
  .ctrl-btn:hover {
    background: #f1f5f9;
  }
  .dots {
    display: flex;
    gap: 6px;
  }
  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .dot.active {
    background: #22b7ff;
    width: 18px;
    border-radius: 4px;
  }
  @media (max-width: 400px) {
    .root-title { font-size: 16px; }
    .result-word { font-size: 18px; }
    .root-icon { font-size: 20px; }
    .result-emoji { font-size: 26px; }
    .root-meaning, .result-desc { font-size: 12px; }
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="word-nav" id="navGroup">
    <button class="nav-btn active" data-idx="0">📞 Telephone</button>
    <button class="nav-btn" data-idx="1">🔭 Telescope</button>
    <button class="nav-btn" data-idx="2">📷 Photograph</button>
    <button class="nav-btn" data-idx="3">🔬 Microscope</button>
  </div>

  <div class="board">
    <div class="equation-row">
      <div class="root-block r1">
        <span class="root-icon" id="icon1">📡</span>
        <span class="root-title" id="root1">tele</span>
        <span class="root-meaning" id="mean1">far / distant</span>
      </div>

      <span class="math-sign">+</span>

      <div class="root-block r2">
        <span class="root-icon" id="icon2">🔊</span>
        <span class="root-title" id="root2">phone</span>
        <span class="root-meaning" id="mean2">sound</span>
      </div>
    </div>

    <div class="divider-arrow">↓</div>

    <div class="result-card">
      <div class="result-word">
        <span class="p1" id="resPart1">tele</span><span class="p2" id="resPart2">phone</span>
      </div>
      <div class="result-meaning-box">
        <div class="result-desc" id="resDesc">Distant Sound</div>
        <div class="result-emoji" id="resEmoji">📞</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous">◀</button>
    <div class="dots" id="dotsGroup">
      <span class="dot active" data-idx="0"></span>
      <span class="dot" data-idx="1"></span>
      <span class="dot" data-idx="2"></span>
      <span class="dot" data-idx="3"></span>
    </div>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next">▶</button>
  </div>
</div>

<script>
  const data = [
    {
      r1: "tele",
      icon1: "📡",
      mean1: "far away",
      r2: "phone",
      icon2: "🔊",
      mean2: "sound",
      part1: "tele",
      part2: "phone",
      desc: "Distant Sound",
      emoji: "📞"
    },
    {
      r1: "tele",
      icon1: "📡",
      mean1: "far away",
      r2: "scope",
      icon2: "👁️",
      mean2: "look / see",
      part1: "tele",
      part2: "scope",
      desc: "See Far Away",
      emoji: "🔭"
    },
    {
      r1: "photo",
      icon1: "☀️",
      mean1: "light",
      r2: "graph",
      icon2: "✍️",
      mean2: "draw / record",
      part1: "photo",
      part2: "graph",
      desc: "Drawn with Light",
      emoji: "📷"
    },
    {
      r1: "micro",
      icon1: "▫️",
      mean1: "tiny / small",
      r2: "scope",
      icon2: "👁️",
      mean2: "look / see",
      part1: "micro",
      part2: "scope",
      desc: "See Tiny Things",
      emoji: "🔬"
    }
  ];

  let currentIndex = 0;
  let timer = null;

  const root1El = document.getElementById('root1');
  const icon1El = document.getElementById('icon1');
  const mean1El = document.getElementById('mean1');

  const root2El = document.getElementById('root2');
  const icon2El = document.getElementById('icon2');
  const mean2El = document.getElementById('mean2');

  const resP1 = document.getElementById('resPart1');
  const resP2 = document.getElementById('resPart2');
  const resDesc = document.getElementById('resDesc');
  const resEmoji = document.getElementById('resEmoji');

  const navBtns = document.querySelectorAll('.nav-btn');
  const dots = document.querySelectorAll('.dot');

  function render(idx) {
    currentIndex = idx;
    const item = data[idx];

    root1El.textContent = item.r1;
    icon1El.textContent = item.icon1;
    mean1El.textContent = item.mean1;

    root2El.textContent = item.r2;
    icon2El.textContent = item.icon2;
    mean2El.textContent = item.mean2;

    resP1.textContent = item.part1;
    resP2.textContent = item.part2;
    resDesc.textContent = item.desc;
    resEmoji.textContent = item.emoji;

    navBtns.forEach((btn, i) => btn.classList.toggle('active', i === idx));
    dots.forEach((dot, i) => dot.classList.toggle('active', i === idx));
  }

  function next() {
    render((currentIndex + 1) % data.length);
  }

  function prev() {
    render((currentIndex - 1 + data.length) % data.length);
  }

  function startAutoPlay() {
    stopAutoPlay();
    timer = setInterval(next, 3600);
  }

  function stopAutoPlay() {
    if (timer) clearInterval(timer);
  }

  navBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      stopAutoPlay();
      render(parseInt(btn.getAttribute('data-idx'), 10));
    });
  });

  dots.forEach(dot => {
    dot.addEventListener('click', () => {
      stopAutoPlay();
      render(parseInt(dot.getAttribute('data-idx'), 10));
    });
  });

  document.getElementById('nextBtn').addEventListener('click', () => {
    stopAutoPlay();
    next();
  });

  document.getElementById('prevBtn').addEventListener('click', () => {
    stopAutoPlay();
    prev();
  });

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

So how do you actually crack the code when you spot a long word in a story?

Let's decode the word **autograph** by breaking it into its two root parts.

First, find the first root: **auto** means *self*. Next, find the second root: **graph** means *write*.

Put the two meanings together: an **autograph** is a signature written by a person's *own self*!

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

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

    .tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

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

    .stage {
      width: 100%;
      max-width: 440px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .equation {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .root-card {
      flex: 1;
      max-width: 140px;
      padding: 12px 8px;
      border-radius: 12px;
      text-align: center;
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .root-card.prefix {
      background: #eff6ff;
      border: 1.5px dashed #3b82f6;
    }

    .root-card.suffix {
      background: #fdf2f8;
      border: 1.5px dashed #ec4899;
    }

    .root-title {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.01em;
      margin-bottom: 2px;
    }

    .root-card.prefix .root-title { color: #1d4ed8; }
    .root-card.suffix .root-title { color: #be185d; }

    .root-meaning {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
    }

    .symbol {
      font-size: 20px;
      font-weight: 700;
      color: #94a3b8;
    }

    .arrow-divider {
      font-size: 18px;
      color: #cbd5e1;
    }

    .result-box {
      width: 100%;
      max-width: 320px;
      background: #f8fafc;
      border: 2px solid #22b7ff;
      border-radius: 14px;
      padding: 14px 16px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.12);
      transition: transform 0.3s ease;
    }

    .result-word {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.02em;
      display: flex;
      justify-content: center;
      gap: 1px;
      margin-bottom: 4px;
    }

    .highlight-1 { color: #1d4ed8; }
    .highlight-2 { color: #be185d; }

    .result-meaning {
      font-size: 14px;
      font-weight: 600;
      color: #475569;
    }

    .result-icon {
      font-size: 24px;
      margin-bottom: 4px;
    }
  </style>
</head>
<body>

  <div class="tabs">
    <button class="tab-btn active" onclick="setExample(0)">autograph</button>
    <button class="tab-btn" onclick="setExample(1)">telescope</button>
    <button class="tab-btn" onclick="setExample(2)">biology</button>
  </div>

  <div class="stage">
    <div class="equation">
      <div class="root-card prefix">
        <div class="root-title" id="root1-text">auto</div>
        <div class="root-meaning" id="root1-def">"self"</div>
      </div>

      <div class="symbol">+</div>

      <div class="root-card suffix">
        <div class="root-title" id="root2-text">graph</div>
        <div class="root-meaning" id="root2-def">"write"</div>
      </div>
    </div>

    <div class="arrow-divider">↓</div>

    <div class="result-box">
      <div class="result-icon" id="res-icon">✍️</div>
      <div class="result-word">
        <span class="highlight-1" id="res-p1">auto</span><span class="highlight-2" id="res-p2">graph</span>
      </div>
      <div class="result-meaning" id="res-def">"self" + "write"</div>
    </div>
  </div>

  <script>
    const data = [
      {
        r1: 'auto',
        d1: '"self"',
        r2: 'graph',
        d2: '"write"',
        icon: '✍️',
        combined: '"self" + "write"'
      },
      {
        r1: 'tele',
        d1: '"far"',
        r2: 'scope',
        d2: '"see"',
        icon: '🔭',
        combined: '"far" + "see"'
      },
      {
        r1: 'bio',
        d1: '"life"',
        r2: 'logy',
        d2: '"study"',
        icon: '🔬',
        combined: '"life" + "study"'
      }
    ];

    let current = 0;
    let timer = null;

    function render(idx) {
      const item = data[idx];
      document.getElementById('root1-text').textContent = item.r1;
      document.getElementById('root1-def').textContent = item.d1;
      document.getElementById('root2-text').textContent = item.r2;
      document.getElementById('root2-def').textContent = item.d2;
      document.getElementById('res-p1').textContent = item.r1;
      document.getElementById('res-p2').textContent = item.r2;
      document.getElementById('res-icon').textContent = item.icon;
      document.getElementById('res-def').textContent = item.combined;

      const btns = document.querySelectorAll('.tab-btn');
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
    }

    function setExample(idx) {
      current = idx;
      render(current);
      resetAutoCycle();
    }

    function resetAutoCycle() {
      clearInterval(timer);
      timer = setInterval(() => {
        current = (current + 1) % data.length;
        render(current);
      }, 3600);
    }

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

Many students think a root must be a word that can stand alone on its own, like *jump* or *play*.

Most Greek and Latin roots, like **tract** (pull) or **aud** (hear), cannot stand alone in English — they need to be joined with other roots or word parts to make a full word.

Ready to test your new decoding superpowers on an unfamiliar word?

If **tele** means *far away* and **port** means *to carry*, what does **teleport** mean?

It means to carry or move something across a distance instantly — you just decoded a sci-fi word using ancient roots!

What Are Greek and Latin Roots?. Understand that many English words are built from Greek and Latin root words that carry core meaning.

Latin and Greek Roots and Affixes | 4th Grade Reading & Vocabulary

Use Greek and Latin Roots as Clues to the Meanings of Words (Grade 4 - L.4.4.b)

Root Words, Suffixes, and Prefixes: Building Morphological Awareness

Effective 4th-grade instruction for CCSS L.4.4.b relies on morphological analysis rather than isolated rote memorization. Introduce high-frequency Greek and Latin roots in thematic families (e.g., communication/vision/sound roots: 'tele', 'graph', 'phon', 'photo', 'aud', 'vis/vid'). Use visual 'word sums' and morphology matrices to show how word parts combine systematically. Always teach students a 3-step decoding protocol: (1) Break word into parts, (2) Define each morpheme, (3) Synthesize and test the combined meaning in sentence context.

What Are Greek and Latin Roots?

What Is a Root?

Ancient Clues in Modern Words

Cracking the Code: Step-by-Step