<!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="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
    }
    .card-wrap {
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .book-card {
      background: #fffdf0;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .book-header {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #927238;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .passage {
      font-size: 16px;
      line-height: 1.6;
      color: #1e2945;
      font-weight: 500;
      position: relative;
      z-index: 1;
    }
    .highlight-1, .highlight-2 {
      padding: 2px 4px;
      border-radius: 4px;
      transition: background-color 0.3s ease, color 0.3s ease;
      display: inline;
    }
    .active-h1 {
      background-color: #fef08a;
      box-shadow: 0 0 0 2px #eab308;
      font-weight: 700;
    }
    .active-h2 {
      background-color: #fed7aa;
      box-shadow: 0 0 0 2px #f97316;
      font-weight: 700;
    }
    
    /* Popout Fact Tags */
    .fact-tags {
      position: relative;
      min-height: 48px;
      margin-top: 10px;
    }
    .fact-tag {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }
    .fact-tag.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .tag-1 {
      background: #fef9c3;
      border: 1px solid #facc15;
      color: #854d0e;
    }
    .tag-2 {
      background: #ffedd5;
      border: 1px solid #fdba74;
      color: #9a3412;
    }
    .tag-3 {
      background: #ecfdf5;
      border: 1px solid #86efac;
      color: #166534;
    }

    /* Purpose Stamp */
    .stamp-container {
      margin-top: 4px;
      padding: 10px;
      background: #f0fdf4;
      border: 2px dashed #22c55e;
      border-radius: 8px;
      text-align: center;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .stamp-title {
      font-size: 11px;
      font-weight: 700;
      color: #15803d;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .stamp-main {
      font-size: 15px;
      font-weight: 800;
      color: #166534;
      margin-top: 2px;
    }

    /* Nav Stepper */
    .nav-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .step-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .play-btn {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      color: #1e2945;
    }
  </style>
</head>
<body>
  <div class="card-wrap">
    <div class="book-card">
      <div class="book-header">
        <span>📖</span> Mini-Book Snippet
      </div>

      <div class="passage">
        Honeybees <span id="h1" class="highlight-1">live in hives</span>. They drink sweet <span id="h2" class="highlight-2">nectar</span> from flowers.
      </div>

      <div class="fact-tags">
        <div id="tag1" class="fact-tag tag-1">
          <span>🔍</span>
          <span>Fact 1: Real Bee Home</span>
        </div>
        <div id="tag2" class="fact-tag tag-2">
          <span>🔍</span>
          <span>Fact 2: Real Bee Food</span>
        </div>
        <div id="tag3" class="fact-tag tag-3">
          <span>💡</span>
          <span>Real facts teach readers about nature</span>
        </div>
      </div>

      <div id="stamp" class="stamp-container">
        <div class="stamp-title">Author's Purpose</div>
        <div class="stamp-main">✓ To Inform (Teach)</div>
      </div>
    </div>

    
    <div class="nav-bar">
      <button class="step-btn active" id="btn0" onclick="goToStep(0)">Fact 1</button>
      <button class="step-btn" id="btn1" onclick="goToStep(1)">Fact 2</button>
      <button class="step-btn" id="btn2" onclick="goToStep(2)">Purpose</button>
      <button class="play-btn" id="playToggle" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const h1 = document.getElementById('h1');
    const h2 = document.getElementById('h2');
    const tag1 = document.getElementById('tag1');
    const tag2 = document.getElementById('tag2');
    const tag3 = document.getElementById('tag3');
    const stamp = document.getElementById('stamp');
    const playBtn = document.getElementById('playToggle');

    const buttons = [
      document.getElementById('btn0'),
      document.getElementById('btn1'),
      document.getElementById('btn2')
    ];

    function renderStep(step) {
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Clear highlights & tags
      h1.className = 'highlight-1';
      h2.className = 'highlight-2';
      tag1.classList.remove('visible');
      tag2.classList.remove('visible');
      tag3.classList.remove('visible');

      if (step === 0) {
        h1.classList.add('active-h1');
        tag1.classList.add('visible');
        stamp.style.opacity = '0.5';
      } else if (step === 1) {
        h2.classList.add('active-h2');
        tag2.classList.add('visible');
        stamp.style.opacity = '0.5';
      } else {
        h1.classList.add('active-h1');
        h2.classList.add('active-h2');
        tag3.classList.add('visible');
        stamp.style.opacity = '1';
      }
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      renderStep(currentStep);
    }

    function goToStep(idx) {
      currentStep = idx;
      renderStep(currentStep);
      resetTimer();
    }

    function startTimer() {
      timer = setInterval(nextStep, 3200);
    }

    function resetTimer() {
      if (isPlaying) {
        clearInterval(timer);
        startTimer();
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    // Init
    renderStep(0);
    startTimer();
  </script>
</body>
</html>

Finding Why an Author Wrote a Text: To Teach or Inform

<!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, "Comic Sans MS", "Chalkboard SE", "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }

    .cards-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      align-items: stretch;
      max-width: 650px;
      margin: 0 auto;
      width: 100%;
    }

    .card-column {
      flex: 1 1 270px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .badge-anchor {
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
    }

    .goal-badge {
      background: linear-gradient(135deg, #0ea5e9, #2563eb);
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 999px;
      box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      letter-spacing: 0.2px;
    }

    .book-card {
      flex: 1;
      border-radius: 20px;
      padding: 16px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      border: 3px solid transparent;
      box-shadow: 0 4px 14px rgba(30, 41, 69, 0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    /* Left Card: Storybook */
    .story-card {
      background: #fef9c3;
      border-color: #fde047;
    }

    /* Right Card: Fact Book */
    .fact-card {
      background: #dcfce7;
      border-color: #86efac;
    }

    .card-type {
      font-size: 15px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .story-type { color: #854d0e; }
    .fact-type { color: #166534; }

    /* Illustration Area */
    .scene-box {
      width: 100%;
      height: 120px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.65);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin-bottom: 12px;
      overflow: hidden;
    }

    /* Story Elements */
    .moon-bg {
      position: absolute;
      top: 10px;
      right: 18px;
      font-size: 26px;
      opacity: 0.9;
    }

    .stars-bg {
      position: absolute;
      top: 14px;
      left: 18px;
      font-size: 18px;
    }

    .wizard-frog {
      font-size: 54px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
    }

    /* Fact Book Diagram */
    .fact-scene {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .frog-center {
      font-size: 54px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.12));
    }

    .pointer-label {
      position: absolute;
      background: #ffffff;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      color: #14532d;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      border: 1px solid #bbf7d0;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .pointer-skin {
      top: 12px;
      right: 10px;
    }

    .pointer-feet {
      bottom: 12px;
      left: 10px;
    }

    /* Book Titles */
    .book-title {
      font-size: 15px;
      font-weight: 800;
      color: #1e2945;
      line-height: 1.25;
      margin-bottom: 8px;
    }

    /* Purpose Tag */
    .purpose-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 8px;
      margin-top: auto;
    }

    .story-tag {
      background: rgba(234, 179, 8, 0.2);
      color: #a16207;
    }

    .fact-tag {
      background: rgba(34, 197, 94, 0.25);
      color: #15803d;
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    
    <div class="card-column">
      <div class="badge-anchor"></div>
      <div class="book-card story-card">
        <div class="card-type story-type">📖 Storybook</div>
        
        <div class="scene-box">
          <span class="stars-bg">✨</span>
          <span class="moon-bg">🌙</span>
          <span class="wizard-frog">🐸🪄</span>
        </div>

        <div class="book-title">The Frog Who Flew<br>to the Moon</div>
        <div class="purpose-tag story-tag">(Make-Believe)</div>
      </div>
    </div>

    
    <div class="card-column">
      <div class="badge-anchor">
        <div class="goal-badge">🎓 Goal: Teach Real Facts!</div>
      </div>
      <div class="book-card fact-card">
        <div class="card-type fact-type">📗 Fact Book</div>
        
        <div class="scene-box fact-scene">
          <div class="pointer-label pointer-skin">💧 Wet Skin</div>
          <span class="frog-center">🐸</span>
          <div class="pointer-label pointer-feet">🦶 Webbed Feet</div>
        </div>

        <div class="book-title">All About<br>Frogs</div>
        <div class="purpose-tag fact-tag">(To Inform / Teach)</div>
      </div>
    </div>

  </div>

</body>
</html>

<!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;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .clue-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      max-width: 420px;
    }
    .clue-card {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      border: 2px solid transparent;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.25s ease, border-color 0.25s ease;
    }
    .clue-card:focus-visible {
      outline: 2px solid #22b7ff;
    }
    .badge-icon {
      width: 52px;
      height: 52px;
      min-width: 52px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
    }
    /* Clue 1: Sky Blue */
    .card-photo .badge-icon {
      background: #e0f2fe;
      color: #0284c7;
    }
    .card-photo.active {
      border-color: #0284c7;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.22);
    }

    /* Clue 2: Soft Green */
    .card-fact .badge-icon {
      background: #dcfce7;
      color: #16a34a;
    }
    .card-fact.active {
      border-color: #16a34a;
      box-shadow: 0 4px 14px rgba(22, 163, 74, 0.22);
    }

    /* Clue 3: Warm Orange */
    .card-label .badge-icon {
      background: #ffedd5;
      color: #ea580c;
    }
    .card-label.active {
      border-color: #ea580c;
      box-shadow: 0 4px 14px rgba(234, 88, 12, 0.22);
    }

    .clue-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .clue-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.2;
    }
    .clue-desc {
      font-size: 14px;
      font-weight: 500;
      color: #64748b;
      line-height: 1.2;
    }
    .status-pill {
      margin-top: 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #22b7ff;
      display: inline-block;
    }
  </style>
</head>
<body>

  <div class="clue-list" role="list">
    
    <div class="clue-card card-photo active" id="clue1" role="listitem" tabindex="0">
      <div class="badge-icon">📷</div>
      <div class="clue-info">
        <div class="clue-title">Real Photos</div>
        <div class="clue-desc">Shows real things</div>
      </div>
    </div>

    
    <div class="clue-card card-fact" id="clue2" role="listitem" tabindex="0">
      <div class="badge-icon">✓</div>
      <div class="clue-info">
        <div class="clue-title">True Facts</div>
        <div class="clue-desc">Tells how nature works</div>
      </div>
    </div>

    
    <div class="clue-card card-label" id="clue3" role="listitem" tabindex="0">
      <div class="badge-icon">🏷️</div>
      <div class="clue-info">
        <div class="clue-title">Helpful Labels</div>
        <div class="clue-desc">Names the parts</div>
      </div>
    </div>
  </div>

  <div class="status-pill">
    <span class="status-dot"></span>
    <span>Fact Detective Clues</span>
  </div>

  <script>
    const cards = [
      document.getElementById('clue1'),
      document.getElementById('clue2'),
      document.getElementById('clue3')
    ];

    let currentIndex = 0;
    let timer = null;

    function setActive(index, manual = false) {
      currentIndex = index;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
      if (manual) {
        clearInterval(timer);
        timer = setInterval(nextStep, 3500);
      }
    }

    function nextStep() {
      currentIndex = (currentIndex + 1) % cards.length;
      setActive(currentIndex);
    }

    cards.forEach((card, index) => {
      card.addEventListener('click', () => setActive(index, true));
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          setActive(index, true);
        }
      });
    });

    timer = setInterval(nextStep, 3500);
  </script>
</body>
</html>

Recognizing Persuasive Texts: Convincing the Reader to Act

Identifying Reasons an Author Gives to Support an Idea

Finding Facts and Clues That Support an Author's Point

How Words and Pictures Encourage Readers to Take Action

Exploring Author's Purpose and Supporting Reasons

Texts Are Everywhere: Signs, Books and Screens

How Books Are Organised: Covers, Title Page and Spine

Reading Left to Right and Top to Bottom

Words and Spaces: How Text Is Arranged on a Page

Reading Simple Digital Texts on Screens

What Is Punctuation? Full Stops at the End

Capital Letters at the Start of Sentences

Capital Letters for People's Names

Capital Letters for Place Names

How Story Books and Information Books Are Different

Print, Texts and Punctuation

El papel de quien escribe o habla y de quien lee o escucha

Semejanzas y diferencias entre quien crea el mensaje y quien lo recibe

La intención de informar: dar a conocer un hecho o noticia

La intención de divertir y entretener: contar un chiste o un cuento

La intención de convencer: pedir un favor o recomendar algo

La intención de expresar afecto y emociones: cartas y mensajes de felicitación

OGE.1.RI.4

Aligned learning resources

Related diagrams