<!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%;
    }

    .flow-wrapper {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Step Navigation */
    .nav-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 2px;
    }
    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .tab-btn:hover {
      background: #e2e8f0;
      color: #334155;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }

    /* Top Grid: Statement -> Supported By -> Story */
    .top-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px;
    }

    .card-box {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      min-height: 86px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    }

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

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 4px;
      color: #64748b;
    }

    .tag.statement-tag { color: #2563eb; }
    .tag.text-tag { color: #d97706; }
    .tag.result-tag { color: #059669; }

    .card-content {
      font-size: 13.5px;
      line-height: 1.4;
      font-weight: 500;
      color: #334155;
    }

    .mark-yellow {
      background-color: #fef08a;
      color: #854d0e;
      padding: 1px 4px;
      border-radius: 4px;
      font-weight: 700;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .mark-yellow.glow {
      background-color: #fde047;
      box-shadow: 0 0 0 2px #facc15;
    }

    /* Connector Badge */
    .connector-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
    }

    .badge-arrow {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
    }

    .arrow-icon {
      color: #3b82f6;
      font-size: 14px;
      font-weight: bold;
      display: inline-block;
      line-height: 1;
    }

    /* Downward Connector */
    .mid-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #64748b;
      font-size: 12px;
      font-weight: 600;
      margin: 0;
    }

    .down-icon {
      color: #059669;
      font-size: 15px;
    }

    /* Bottom Combined Card */
    .result-card {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
      border-radius: 12px;
      padding: 12px 14px;
      transition: all 0.3s ease;
    }

    .result-card.highlight {
      border-color: #059669;
      box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
    }

    .result-text {
      font-size: 14px;
      line-height: 1.45;
      color: #1e2945;
      font-weight: 500;
    }

    .quote-inline {
      background-color: #fde047;
      color: #713f12;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid #eab308;
    }

    @media (max-width: 480px) {
      .top-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .card-box {
        min-height: auto;
      }
      .connector-col {
        flex-direction: row;
        gap: 6px;
        margin: 2px 0;
      }
      .connector-col .arrow-icon {
        transform: rotate(90deg);
      }
    }
  </style>
</head>
<body>

  <div class="flow-wrapper">
    
    <div class="nav-tabs" role="tablist">
      <button class="tab-btn active" id="step1Btn" onclick="setStep(1)">1. Statement</button>
      <button class="tab-btn" id="step2Btn" onclick="setStep(2)">2. Evidence</button>
      <button class="tab-btn" id="step3Btn" onclick="setStep(3)">3. Exact Quote</button>
    </div>

    
    <div class="top-grid">
      
      <div class="card-box" id="boxStatement">
        <span class="tag statement-tag">Statement</span>
        <div class="card-content">Maya was determined to keep going.</div>
      </div>

      
      <div class="connector-col">
        <span class="badge-arrow">Supported by</span>
        <span class="arrow-icon">→</span>
      </div>

      
      <div class="card-box" id="boxEvidence">
        <span class="tag text-tag">Story Text</span>
        <div class="card-content">
          The wind roared, but <span class="mark-yellow" id="yellowQuote">she refused to turn back.</span>
        </div>
      </div>
    </div>

    
    <div class="mid-arrow">
      <span class="down-icon">↓</span> Combine with exact quotes
    </div>

    
    <div class="result-card" id="boxResult">
      <span class="tag result-tag">Integrated Sentence</span>
      <div class="result-text">
        The author shows Maya was determined because <span class="quote-inline">"she refused to turn back."</span>
      </div>
    </div>
  </div>

  <script>
    function setStep(step) {
      // Button states
      document.querySelectorAll('.tab-btn').forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === step);
      });

      // Highlight logic
      const stmtBox = document.getElementById('boxStatement');
      const evidBox = document.getElementById('boxEvidence');
      const yellow = document.getElementById('yellowQuote');
      const resBox = document.getElementById('boxResult');

      stmtBox.classList.toggle('highlight', step === 1);
      evidBox.classList.toggle('highlight', step === 2);
      yellow.classList.toggle('glow', step === 2);
      resBox.classList.toggle('highlight', step === 3);
    }
  </script>
</body>
</html>

Quoting Accurately From Stories

<!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;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Original Quote Header */
    .source-box {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .source-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .source-text {
      font-size: 15px;
      font-weight: 600;
      color: #0f172a;
      line-height: 1.3;
    }

    /* Cards Grid */
    .cards-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .attempt-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: 28px 1fr auto;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      user-select: none;
    }
    .attempt-card:hover {
      background: #f1f5f9;
    }
    .attempt-card.active {
      box-shadow: 0 0 0 2px #22b7ff;
      border-color: #22b7ff;
    }

    /* Icons */
    .status-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 800;
      flex-shrink: 0;
    }
    .status-icon.correct {
      background: #dcfce7;
      color: #15803d;
      border: 1.5px solid #86efac;
    }
    .status-icon.wrong {
      background: #fee2e2;
      color: #b91c1c;
      border: 1.5px solid #fca5a5;
    }

    /* Quote Text */
    .quote-content {
      font-size: 14px;
      line-height: 1.35;
      color: #334155;
      font-weight: 500;
    }
    .quote-content.match {
      color: #166534;
      font-weight: 600;
    }

    /* Highlighting */
    .err-word {
      background: #fee2e2;
      color: #991b1b;
      padding: 1px 4px;
      border-radius: 4px;
      text-decoration: line-through;
      font-weight: 700;
    }
    .missing-quote-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fee2e2;
      color: #b91c1c;
      border: 1px dashed #ef4444;
      border-radius: 4px;
      padding: 0 4px;
      font-weight: 800;
      font-size: 12px;
    }

    /* Badges */
    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
      text-align: center;
    }
    .badge.success {
      background: #dcfce7;
      color: #166534;
    }
    .badge.error {
      background: #fee2e2;
      color: #991b1b;
    }

    /* Interactive Stepper / Navigation */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding-top: 2px;
    }
    .dot-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.2s, transform 0.2s;
    }
    .dot-btn.active {
      background: #22b7ff;
      transform: scale(1.3);
    }

    @media (max-width: 480px) {
      .attempt-card {
        grid-template-columns: 24px 1fr;
        gap: 8px;
      }
      .badge {
        grid-column: 2;
        justify-self: start;
        padding: 2px 6px;
        font-size: 10px;
      }
      .quote-content {
        font-size: 13px;
      }
      .source-text {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  
  <div class="source-box">
    <div class="source-label">📖 Original Story</div>
    <div class="source-text">The river surged over the jagged rocks.</div>
  </div>

  
  <div class="cards-container">
    
    <div class="attempt-card active" id="card-0" onclick="selectCard(0)">
      <div class="status-icon correct">✓</div>
      <div class="quote-content match">
        &ldquo;The river surged over the jagged rocks.&rdquo;
      </div>
      <span class="badge success">Exact Match</span>
    </div>

    
    <div class="attempt-card" id="card-1" onclick="selectCard(1)">
      <div class="status-icon wrong">✕</div>
      <div class="quote-content">
        &ldquo;The <span class="err-word">water rushed</span> over the <span class="err-word">sharp</span> rocks.&rdquo;
      </div>
      <span class="badge error">Wrong Words</span>
    </div>

    
    <div class="attempt-card" id="card-2" onclick="selectCard(2)">
      <div class="status-icon wrong">✕</div>
      <div class="quote-content">
        <span class="missing-quote-mark">"?"</span> The river surged over the jagged rocks. <span class="missing-quote-mark">"?"</span>
      </div>
      <span class="badge error">Missing Quotes</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="dot-btn active" id="dot-0" onclick="selectCard(0)" aria-label="Card 1"></button>
    <button class="dot-btn" id="dot-1" onclick="selectCard(1)" aria-label="Card 2"></button>
    <button class="dot-btn" id="dot-2" onclick="selectCard(2)" aria-label="Card 3"></button>
  </div>

  <script>
    let currentIndex = 0;
    const cards = [
      document.getElementById('card-0'),
      document.getElementById('card-1'),
      document.getElementById('card-2')
    ];
    const dots = [
      document.getElementById('dot-0'),
      document.getElementById('dot-1'),
      document.getElementById('dot-2')
    ];

    function selectCard(index) {
      currentIndex = index;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === index);
      });
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Direct Quotation Anatomy</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e293b;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .main-wrap {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .header-area {
      text-align: center;
    }

    .header-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }

    .header-sub {
      font-size: 12px;
      color: #64748b;
      margin-top: 2px;
    }

    /* Sentence display */
    .quote-box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 14px 10px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
    }

    .segment {
      font-size: clamp(13px, 3vw, 16px);
      line-height: 1.2;
      padding: 6px 8px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      user-select: none;
    }

    .seg-signal {
      background: #f3e8ff;
      color: #7e22ce;
      border: 1.5px solid #d8b4fe;
    }

    .seg-open {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1.5px solid #93c5fd;
      letter-spacing: 1px;
    }

    .seg-text {
      background: #ccfbf1;
      color: #0f766e;
      border: 1.5px solid #5eead4;
      white-space: normal;
      text-align: center;
    }

    .seg-close {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1.5px solid #93c5fd;
      letter-spacing: 1px;
    }

    .segment:hover {
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
    }

    .segment.dimmed {
      opacity: 0.3;
      filter: grayscale(40%);
    }

    .segment.active {
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.45);
    }

    /* Role Cards grid */
    .badges-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .badge-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 10px 6px;
      border-radius: 10px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
      user-select: none;
    }

    .badge-card .tag-pill {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
      margin-bottom: 6px;
    }

    .badge-card.card-signal {
      border-color: #d8b4fe;
      background: #faf5ff;
    }
    .badge-card.card-signal .tag-pill {
      background: #e9d5ff;
      color: #7e22ce;
    }
    .badge-card.card-signal .title {
      color: #7e22ce;
    }

    .badge-card.card-open {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .badge-card.card-open .tag-pill {
      background: #bfdbfe;
      color: #1d4ed8;
    }
    .badge-card.card-open .title {
      color: #1d4ed8;
    }

    .badge-card.card-text {
      border-color: #5eead4;
      background: #f0fdfa;
    }
    .badge-card.card-text .tag-pill {
      background: #99f6e4;
      color: #0f766e;
    }
    .badge-card.card-text .title {
      color: #0f766e;
    }

    .badge-card.card-close {
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .badge-card.card-close .tag-pill {
      background: #bfdbfe;
      color: #1d4ed8;
    }
    .badge-card.card-close .title {
      color: #1d4ed8;
    }

    .badge-card .title {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
      margin-bottom: 4px;
    }

    .badge-card .sample {
      font-size: 11px;
      font-family: monospace;
      font-weight: 600;
      color: #475569;
      background: rgba(255, 255, 255, 0.7);
      padding: 2px 4px;
      border-radius: 4px;
      border: 1px solid rgba(0,0,0,0.06);
    }

    .badge-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .badge-card.active {
      box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.45);
      border-width: 2px;
    }

    .badge-card.dimmed {
      opacity: 0.35;
    }

    /* Explanation drawer */
    .info-box {
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.4;
      color: #334155;
      min-height: 48px;
      display: flex;
      align-items: center;
    }

    .info-box strong {
      color: #0f172a;
      margin-right: 4px;
    }

    @media (max-width: 520px) {
      .badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
      .badge-card {
        padding: 8px 6px;
      }
      .badge-card .title {
        font-size: 11px;
      }
      .quote-box {
        gap: 3px;
        padding: 10px 6px;
      }
      .segment {
        padding: 5px 6px;
      }
    }
  </style>
</head>
<body>

<div class="main-wrap">
  <div class="header-area">
    <div class="header-title">Anatomy of a Direct Quotation</div>
    <div class="header-sub">Click any part to inspect punctuation and structure rules</div>
  </div>

  
  <div class="quote-box" id="quoteContainer">
    <span class="segment seg-signal" data-index="0" title="Signal Phrase">The narrator explains</span>
    <span class="segment seg-open" data-index="1" title="Comma + Opening Quote">,&nbsp;"</span>
    <span class="segment seg-text" data-index="2" title="Exact Quoted Words">the old engine sputtered and died</span>
    <span class="segment seg-close" data-index="3" title="Period + Closing Quote">."</span>
  </div>

  
  <div class="badges-grid" id="badgesContainer">
    <div class="badge-card card-signal" data-index="0">
      <span class="tag-pill">Part 1</span>
      <span class="title">Signal Phrase</span>
      <span class="sample">The narrator explains</span>
    </div>
    <div class="badge-card card-open" data-index="1">
      <span class="tag-pill">Part 2</span>
      <span class="title">Comma + Quote</span>
      <span class="sample">,&nbsp;"</span>
    </div>
    <div class="badge-card card-text" data-index="2">
      <span class="tag-pill">Part 3</span>
      <span class="title">Exact Words</span>
      <span class="sample">the old engine...</span>
    </div>
    <div class="badge-card card-close" data-index="3">
      <span class="tag-pill">Part 4</span>
      <span class="title">Period + Quote</span>
      <span class="sample">."</span>
    </div>
  </div>

  
  <div class="info-box" id="infoBox">
    <div><strong>Rule Guide:</strong> Direct quotations use a signal phrase, a separating comma, quotation marks, and terminal punctuation placed inside the closing quote.</div>
  </div>
</div>

<script>
  const details = [
    {
      title: "Part 1: Signal Phrase",
      rule: "Identifies the speaker or source (e.g., 'The narrator explains'). It introduces the quotation to the reader."
    },
    {
      title: "Part 2: Comma + Opening Quote",
      rule: "A comma separates the introductory signal phrase from the quotation. The opening quotation mark follows immediately."
    },
    {
      title: "Part 3: Exact Words",
      rule: "Contains the word-for-word statement being quoted directly from the source or speaker."
    },
    {
      title: "Part 4: Period + Closing Quote",
      rule: "In standard American punctuation, the period goes <em>inside</em> the closing quotation mark."
    }
  ];

  const defaultInfo = "<strong>Rule Guide:</strong> Direct quotations use a signal phrase, a separating comma, quotation marks, and terminal punctuation placed inside the closing quote.";

  const segments = document.querySelectorAll('.segment');
  const cards = document.querySelectorAll('.badge-card');
  const infoBox = document.getElementById('infoBox');
  let selectedIndex = null;

  function selectIndex(idx) {
    if (selectedIndex === idx) {
      // Toggle off
      selectedIndex = null;
      segments.forEach(el => el.classList.remove('active', 'dimmed'));
      cards.forEach(el => el.classList.remove('active', 'dimmed'));
      infoBox.innerHTML = `<div>${defaultInfo}</div>`;
      return;
    }

    selectedIndex = idx;
    segments.forEach(el => {
      const i = parseInt(el.dataset.index);
      if (i === idx) {
        el.classList.add('active');
        el.classList.remove('dimmed');
      } else {
        el.classList.remove('active');
        el.classList.add('dimmed');
      }
    });

    cards.forEach(el => {
      const i = parseInt(el.dataset.index);
      if (i === idx) {
        el.classList.add('active');
        el.classList.remove('dimmed');
      } else {
        el.classList.remove('active');
        el.classList.add('dimmed');
      }
    });

    const info = details[idx];
    infoBox.innerHTML = `<div><strong>${info.title}:</strong> ${info.rule}</div>`;
  }

  segments.forEach(el => {
    el.addEventListener('click', () => {
      selectIndex(parseInt(el.dataset.index));
    });
  });

  cards.forEach(el => {
    el.addEventListener('click', () => {
      selectIndex(parseInt(el.dataset.index));
    });
  });
</script>

</body>
</html>

Anticipar de qué trata el texto a partir del título

Hacer inferencias sencillas con pistas del dibujo y texto

Identificación de personajes principales y secundarios

Rasgos físicos y psicológicos de los personajes

El espacio y el ambiente en la narración

El tiempo en el relato: cronológico y retrospectivo

Estructura de la trama: inicio, nudo y desenlace

Distinción entre tema central e idea principal en relatos

La voz del narrador: primera y tercera persona

El conflicto narrativo y los obstáculos del protagonista

Análisis de los elementos constitutivos del relato narrativo

Drawing Evidence From Stories to Support Your Analysis

Quoting Accurately From Stories and Poems

Making Inferences From Literature Using Text Evidence

Supporting Your Inferences With Direct Quotes

Combining Quotes and Inferences in Your Explanations

Selecting the Strongest Quotes for Literary Analysis

Quoting Accurately and Making Inferences From Literature

Paraphrasing Evidence From Stories

Separating What the Text Says From What You Infer

Making Inferences From Story Details

Citing Evidence From Different Parts of a Story

Formulating and Testing Reading Hypotheses

Justifying Literary Interpretations With Evidence

Text Evidence, Inferences, and Literary Hypotheses

Determining the Theme of a Story

Determining the Theme of a Drama

Finding the Theme of a Poem

How Characters Facing Challenges Reveal Theme

How a Speaker's Reflection Reveals Theme in Poetry

Finding Theme Through Text Evidence

Summarizing Literature in Your Own Words

Determining Theme and Summarizing Literature

Hipótesis predictivas según la época y el contexto cultural

Relación entre el contexto del cuento y la propia experiencia

Comparación de versiones de un mismo relato tradicional

Comprobación y reajuste de hipótesis durante la lectura

Síntesis e interpretación global del relato leído

Interpretación contextual y síntesis del relato narrativo

Using Specific Details to Support Comparisons

Comparing How Characters Interact With Each Other

Comparing How Different Characters Respond to the Same Event

Comparing Settings Using Specific Details

Comparing Events Using Specific Details

Writing a Comparison of Characters, Settings, or Events

Comparing Characters, Settings, and Events in Literature

Relatos mitológicos sobre el origen del sol y la luna

Dioses, héroes y seres sobrenaturales en el mito

La leyenda popular y su vínculo con la comunidad

Diferencias clave entre mito y leyenda

La fábula y la personificación de animales

La moraleja: enseñanza y reflexión en la fábula

Narrativa tradicional: mitos, leyendas y fábulas

El poema: versos, estrofas y estructura lírica

La rima consonante y asonante en la poesía

Ritmo, musicalidad y cadencia del verso

Expresión de emociones y sentimientos en la lírica

Coplas, retahílas y adivinanzas populares

Poesía y lírica tradicional

Comparación entre un texto narrativo y un poema

Hipótesis de lectura a partir del género literario

Intertextualidad: mitos y poemas que dialogan entre sí

Análisis estilístico integrado de textos poéticos y narrativos

Comparación e integración de géneros literarios

El conflicto dramático y la tensión en escena

Lectura dramatizada con reparto de voces

Adaptación de un cuento a guion de teatro

Diferencias entre texto narrativo, lírico y dramático

Anticipación de acciones teatrales según el título y elenco

Interpretación y adaptación de textos dramáticos

Comparing Mystery Stories on Similar Themes

Comparing Adventure Stories on Similar Topics

Comparing Approaches to Similar Themes in the Same Genre

Using a Chart to Compare Stories in the Same Genre

Writing About Similarities and Differences in Same-Genre Stories

Comparing Stories in the Same Genre

El teatro de títeres y marionetas

La comedia y la tragedia en el teatro escolar

El mensaje social en las obras teatrales

Ensayo general y puesta en común de una escena

Géneros teatrales y puesta en escena

Generating Inquiry Questions While Reading Literature

Forming Mental Images From Complex Literary Descriptions

Making Personal and Societal Connections to Literature

Using Literary Terminology in Academic Discussions

Presenting Evidence-Based Opinions on Complex Texts

Independent Complex Reading and Critical Literary Discussion

Sentido literal frente a sentido figurado

El símil o comparación explícita con conectores

La metáfora: identificación y transferencia de sentido

Diferencias entre el símil y la metáfora

La personificación o prosopopeya en poemas y fábulas

La hipérbole o exageración expresiva

La onomatopeya y la imitación de sonidos

La aliteración y el juego de sonidos en versos

Fundamentos del lenguaje figurado y figuras clásicas

What Is an Inference?

Finding Clues in the Text for Inferences

Making Inferences About Characters

Making Inferences About Theme and Plot

Supporting Inferences With Text Evidence

Making and Supporting Inferences

La anáfora y la repetición al inicio de versos

Imágenes sensoriales: visuales, auditivas, olfativas, gustativas y táctiles

Refranes y dichos populares como lenguaje figurado

Modismos y expresiones idiomáticas regionales

Creación de metáforas y símiles propios en la escritura

Análisis del efecto emocional de las figuras en el lector

Taller integrado de interpretación de figuras literarias

Recursos de repetición, expresiones cotidianas y taller creativo

Describing Personal Connections to Self-Selected Texts

Describing Personal Connections to Assigned Texts

Writing Responses That Demonstrate Understanding

Comparing Ideas Across Multiple Texts

Contrasting Ideas Across Multiple Texts

Writing About a Topic Using Multiple Sources

Using Text Evidence to Support Your Responses

Supporting Your Opinion With Information From Texts

Supporting Opinions With Evidence From Multiple Sources

Responding to Texts: Personal Connections & Evidence-Based Writing

Inferring Multiple Themes From Text Evidence

Distinguishing Theme From Topic

Tracing Theme Development Across a Text

Supporting Theme Inferences With Text Evidence

Analyzing Themes in Literature

OGE.6.RL.1

OGE.6.RL.1

Aligned learning resources

Related diagrams