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

    /* Top Story Context Pill */
    .story-prompt {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 8px;
      line-height: 1.35;
    }

    .story-prompt strong {
      color: #1e2945;
      white-space: nowrap;
    }

    /* Cards Stack */
    .breakdown-stack {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .row-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    .row-card:focus-visible {
      outline: 2px solid #2563eb;
    }

    /* Card Top Bar */
    .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .badge-label-group {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-icon {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      flex-shrink: 0;
    }

    .header-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .category-tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    .card-content {
      font-size: 14px;
      font-weight: 500;
      color: #1e2945;
      line-height: 1.35;
      padding-left: 30px;
    }

    /* Blue Theme: Character */
    .theme-blue .badge-icon { background: #dbeafe; color: #1d4ed8; }
    .theme-blue .header-title { color: #1d4ed8; }
    .theme-blue .category-tag { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
    .theme-blue.active {
      border-color: #2563eb;
      background: #f8fbff;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    }

    /* Green Theme: Setting */
    .theme-green .badge-icon { background: #dcfce7; color: #15803d; }
    .theme-green .header-title { color: #15803d; }
    .theme-green .category-tag { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
    .theme-green.active {
      border-color: #16a34a;
      background: #f8fdf9;
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15);
    }

    /* Orange Theme: Conflict */
    .theme-orange .badge-icon { background: #ffedd5; color: #c2410c; }
    .theme-orange .header-title { color: #c2410c; }
    .theme-orange .category-tag { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; }
    .theme-orange.active {
      border-color: #ea580c;
      background: #fffaf5;
      box-shadow: 0 2px 8px rgba(234, 88, 12, 0.15);
    }

    /* Role Info Banner at bottom */
    .role-banner {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
    }

    .role-icon {
      font-size: 16px;
      flex-shrink: 0;
    }

    .role-text {
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="story-prompt">
    <span>📖</span>
    <span><strong>Snippet:</strong> Maya opened her notebook in the quiet library, only to realize her map was gone.</span>
  </div>

  <div class="breakdown-stack" role="tablist" aria-label="Story Components">
    
    
    <div class="row-card theme-blue active" id="card-0" role="tab" tabindex="0" aria-selected="true" onclick="selectCard(0)">
      <div class="card-top">
        <div class="badge-label-group">
          <span class="badge-icon">🧭</span>
          <span class="header-title">Main Character</span>
        </div>
        <span class="category-tag">Exposition</span>
      </div>
      <div class="card-content">Maya (a 10-year-old explorer)</div>
    </div>

    
    <div class="row-card theme-green" id="card-1" role="tab" tabindex="0" aria-selected="false" onclick="selectCard(1)">
      <div class="card-top">
        <div class="badge-label-group">
          <span class="badge-icon">🏛️</span>
          <span class="header-title">Setting</span>
        </div>
        <span class="category-tag">Exposition</span>
      </div>
      <div class="card-content">Oak Creek Library on a stormy Tuesday afternoon</div>
    </div>

    
    <div class="row-card theme-orange" id="card-2" role="tab" tabindex="0" aria-selected="false" onclick="selectCard(2)">
      <div class="card-top">
        <div class="badge-label-group">
          <span class="badge-icon">⚡</span>
          <span class="header-title">Initial Conflict</span>
        </div>
        <span class="category-tag">Spark</span>
      </div>
      <div class="card-content">Her treasure map is missing right when she is ready to go</div>
    </div>

  </div>

  
  <div class="role-banner" id="roleBanner">
    <span class="role-icon" id="bannerIcon">💡</span>
    <span class="role-text" id="bannerText"><strong>WHO:</strong> Introduces the reader to the hero before the action starts.</span>
  </div>

  <script>
    const roleDetails = [
      {
        icon: '💡',
        text: '<strong>WHO (Exposition):</strong> Introduces the hero to the reader before action starts.'
      },
      {
        icon: '📍',
        text: '<strong>WHERE & WHEN (Exposition):</strong> Sets the backdrop and mood of the opening scene.'
      },
      {
        icon: '⚡',
        text: '<strong>THE SPARK (Conflict):</strong> The problem that kicks off the roller coaster ride!'
      }
    ];

    let currentIndex = 0;

    function selectCard(index) {
      currentIndex = index;
      for (let i = 0; i < 3; i++) {
        const card = document.getElementById('card-' + i);
        const isActive = (i === index);
        card.classList.toggle('active', isActive);
        card.setAttribute('aria-selected', isActive ? 'true' : 'false');
      }

      const bannerIcon = document.getElementById('bannerIcon');
      const bannerText = document.getElementById('bannerText');
      bannerIcon.innerHTML = roleDetails[index].icon;
      bannerText.innerHTML = roleDetails[index].text;
    }

    // Keyboard navigation support
    document.querySelectorAll('.row-card').forEach((card, idx) => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          selectCard(idx);
        } else if (e.key === 'ArrowDown') {
          e.preventDefault();
          const next = (idx + 1) % 3;
          document.getElementById('card-' + next).focus();
          selectCard(next);
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          const prev = (idx + 2) % 3;
          document.getElementById('card-' + prev).focus();
          selectCard(prev);
        }
      });
    });
  </script>
</body>
</html>

Identifying Story Exposition and Initial Conflict

<!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>Story Arc: Spark to Climax</title>
  <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: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      min-height: 100%;
      user-select: none;
    }

    .flow-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 999px;
      margin-bottom: 8px;
    }
    .flow-bar .highlight {
      color: #2563eb;
    }

    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 540px;
      aspect-ratio: 16 / 9;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Hill track */
    .track-bg {
      fill: none;
      stroke: #e2e8f0;
      stroke-width: 8;
      stroke-linecap: round;
    }
    .track-fill {
      fill: none;
      stroke: #2563eb;
      stroke-width: 8;
      stroke-linecap: round;
      stroke-dasharray: 600;
      stroke-dashoffset: 600;
      transition: stroke-dashoffset 0.6s ease;
    }

    /* Node styling */
    .node-group {
      cursor: pointer;
      transition: opacity 0.3s ease;
    }
    .node-group:focus {
      outline: none;
    }
    .node-circle {
      transition: fill 0.3s, stroke 0.3s, filter 0.3s;
    }
    .node-group.active .node-circle {
      filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.4));
    }

    /* Coaster / Marker */
    .marker-car {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Info cards */
    .cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 540px;
      margin-top: 10px;
    }

    .info-card {
      background: #f8fafc;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 8px 6px;
      text-align: center;
      cursor: pointer;
      transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .info-card.active {
      background: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    }

    .card-icon {
      font-size: 20px;
      margin-bottom: 2px;
      display: block;
    }
    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }
    .card-desc {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.2;
    }

    /* Step buttons */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }
    .nav-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .nav-btn:active {
      background: #e2e8f0;
    }
    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s;
    }
    .dot.active {
      background: #2563eb;
    }
  </style>
</head>
<body>

  <div class="flow-bar">
    <span>🔥 Spark</span>
    <span>→</span>
    <span>📈 Build-Up</span>
    <span>→</span>
    <span class="highlight">🎆 Explosion</span>
  </div>

  <div class="canvas-container">
    <svg viewBox="0 0 400 200">
      
      <path class="track-bg" d="M 40 165 L 120 165 C 200 165, 240 45, 340 40" />
      <path id="trackFill" class="track-fill" d="M 40 165 L 120 165 C 200 165, 240 45, 340 40" />

      
      <g class="node-group active" id="node0" onclick="setStep(0)">
        <circle class="node-circle" cx="60" cy="165" r="14" fill="#ffedd5" stroke="#ea580c" stroke-width="2.5" />
        <text x="60" y="170" text-anchor="middle" font-size="14">🔥</text>
        <text x="60" y="193" text-anchor="middle" font-size="10" font-weight="700" fill="#1e2945">Flat Start</text>
      </g>

      
      <g class="node-group" id="node1" onclick="setStep(1)">
        <circle class="node-circle" cx="205" cy="120" r="14" fill="#dbeafe" stroke="#2563eb" stroke-width="2.5" />
        <text x="205" y="125" text-anchor="middle" font-size="13">📈</text>
        <text x="205" y="100" text-anchor="middle" font-size="10" font-weight="700" fill="#1e2945">Rising Climb</text>
      </g>

      
      <g class="node-group" id="node2" onclick="setStep(2)">
        <circle class="node-circle" cx="340" cy="40" r="15" fill="#fef08a" stroke="#ca8a04" stroke-width="2.5" />
        <text x="340" y="46" text-anchor="middle" font-size="16">🎆</text>
        <text x="340" y="18" text-anchor="middle" font-size="10" font-weight="700" fill="#1e2945">Peak Climax</text>
      </g>

      
      <g id="marker" class="marker-car" transform="translate(60, 165)">
        <circle r="6" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
      </g>
    </svg>
  </div>

  <div class="cards-row">
    <div class="info-card active" id="card0" onclick="setStep(0)">
      <span class="card-icon">🔥</span>
      <div class="card-title">Initial Conflict</div>
      <div class="card-desc">The spark</div>
    </div>
    <div class="info-card" id="card1" onclick="setStep(1)">
      <span class="card-icon">📈</span>
      <div class="card-title">Rising Action</div>
      <div class="card-desc">Building tension</div>
    </div>
    <div class="info-card" id="card2" onclick="setStep(2)">
      <span class="card-icon">🎆</span>
      <div class="card-title">Climax</div>
      <div class="card-desc">Big showdown</div>
    </div>
  </div>

  <div class="controls">
    <button class="nav-btn" onclick="prevStep()">◀ Back</button>
    <div class="dots">
      <div class="dot active" onclick="setStep(0)"></div>
      <div class="dot" onclick="setStep(1)"></div>
      <div class="dot" onclick="setStep(2)"></div>
    </div>
    <button class="nav-btn" onclick="nextStep()">Next ▶</button>
  </div>

  <script>
    const positions = [
      { x: 60, y: 165, offset: 520 },
      { x: 205, y: 120, offset: 280 },
      { x: 340, y: 40, offset: 0 }
    ];

    let current = 0;

    function updateView() {
      const p = positions[current];
      
      // Update track fill
      document.getElementById('trackFill').style.strokeDashoffset = p.offset;

      // Update marker position
      document.getElementById('marker').setAttribute('transform', `translate(${p.x}, ${p.y})`);

      // Update node active states
      for (let i = 0; i < 3; i++) {
        document.getElementById(`node${i}`).classList.toggle('active', i === current);
        document.getElementById(`card${i}`).classList.toggle('active', i === current);
        document.querySelectorAll('.dot')[i].classList.toggle('active', i === current);
      }
    }

    function setStep(index) {
      current = index;
      updateView();
    }

    function nextStep() {
      current = (current + 1) % 3;
      updateView();
    }

    function prevStep() {
      current = (current - 1 + 3) % 3;
      updateView();
    }

    // Auto cycle peacefully every 4s unless clicked
    let timer = setInterval(nextStep, 4000);
    document.body.addEventListener('pointerdown', () => {
      clearInterval(timer);
    });

    updateView();
  </script>
</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 {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      gap: 12px;
    }

    .header-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #475569;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

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

    .launch-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
      box-shadow: 0 2px 5px rgba(30, 41, 69, 0.04);
    }

    .launch-card.active {
      box-shadow: 0 6px 14px rgba(30, 41, 69, 0.08);
      transform: translateY(-2px);
    }

    .launch-card[data-step="0"].active {
      border-color: #0284c7;
    }

    .launch-card[data-step="1"].active {
      border-color: #d97706;
    }

    .launch-card[data-step="2"].active {
      border-color: #e11d48;
    }

    .icon-bubble {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
    }

    .card-who .icon-bubble {
      background: #e0f2fe;
    }

    .card-where .icon-bubble {
      background: #fef3c7;
    }

    .card-what .icon-bubble {
      background: #ffe4e6;
    }

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

    .card-tag {
      font-size: 11px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 6px;
      letter-spacing: 0.3px;
    }

    .card-who .card-tag {
      background: #e0f2fe;
      color: #0369a1;
    }

    .card-where .card-tag {
      background: #fef3c7;
      color: #b45309;
    }

    .card-what .card-tag {
      background: #ffe4e6;
      color: #be123c;
    }

    .card-prompt {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.25;
    }

    .track-visual {
      width: 100%;
      max-width: 600px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .track-bar {
      flex: 1;
      height: 6px;
      background: #f1f5f9;
      border-radius: 99px;
      position: relative;
      overflow: hidden;
    }

    .track-fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 33.33%;
      background: #0284c7;
      border-radius: 99px;
      transition: width 0.3s ease, background-color 0.3s ease;
    }

    .track-label {
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      white-space: nowrap;
    }

    @media (max-width: 380px) {
      .cards-container {
        gap: 6px;
      }
      .launch-card {
        padding: 10px 4px;
      }
      .icon-bubble {
        width: 40px;
        height: 40px;
        font-size: 19px;
      }
      .card-title {
        font-size: 12px;
      }
      .card-prompt {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="header-badge">🚀 Exposition Launchpad</div>

  <div class="cards-container">
    
    <div class="launch-card card-who active" data-step="0">
      <div class="icon-bubble">👦🎒</div>
      <div class="card-title">Characters</div>
      <div class="card-tag">WHO</div>
      <div class="card-prompt">Who is the story about?</div>
    </div>

    
    <div class="launch-card card-where" data-step="1">
      <div class="icon-bubble">🏫🍂</div>
      <div class="card-title">Setting</div>
      <div class="card-tag">WHERE & WHEN</div>
      <div class="card-prompt">Where & when does it happen?</div>
    </div>

    
    <div class="launch-card card-what" data-step="2">
      <div class="icon-bubble">⚡❗</div>
      <div class="card-title">Initial Conflict</div>
      <div class="card-tag">WHAT</div>
      <div class="card-prompt">What problem starts the adventure?</div>
    </div>
  </div>

  <div class="track-visual">
    <span class="track-label" id="trackStatus">Step 1 of 3</span>
    <div class="track-bar">
      <div class="track-fill" id="trackFill"></div>
    </div>
    <span class="track-label" style="color: #64748b; font-weight: 500;">Flat Track → Hill</span>
  </div>

  <script>
    const cards = document.querySelectorAll('.launch-card');
    const trackFill = document.getElementById('trackFill');
    const trackStatus = document.getElementById('trackStatus');

    const stepColors = ['#0284c7', '#d97706', '#e11d48'];
    const stepWidths = ['33.33%', '66.66%', '100%'];
    const stepNames = ['Characters (WHO)', 'Setting (WHERE/WHEN)', 'Conflict (WHAT)'];

    let currentStep = 0;
    let autoInterval = null;

    function setStep(index) {
      currentStep = index;
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
      trackFill.style.width = stepWidths[index];
      trackFill.style.backgroundColor = stepColors[index];
      trackStatus.textContent = `Step ${index + 1}: ${stepNames[index]}`;
    }

    cards.forEach((card) => {
      card.addEventListener('click', () => {
        clearInterval(autoInterval);
        const step = parseInt(card.getAttribute('data-step'), 10);
        setStep(step);
      });
    });

    // Auto-cycle through the 3 components calmly
    autoInterval = setInterval(() => {
      setStep((currentStep + 1) % 3);
    }, 3200);

    setStep(0);
  </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

Asking and Answering Questions About Stories

Finding Answers Right in the Story

Proving Your Answer With Words From the Story

Who, What, Where, and When Questions About Stories

Why and How Questions About Stories

Inferring Cause and Effect From Story Details

Asking Literal Questions About Key Story Details

Answering Questions Using Explicit Text Evidence

Recounting Key Events in Sequential Order

Making Inferences by Combining Clues and Background Knowledge

Inferring Character Feelings and Traits From Actions

Supporting Inferences With Two Pieces of Text Evidence

Drawing Evidence-Based Conclusions About Story Outcomes

Asking Questions, Citing Evidence, and Inferencing in Stories

Tracing Rising Action and Escalating Challenges

Identifying the Climax and Turning Point

Analyzing Falling Action and Resolution

Distinguishing Major and Minor Characters

Analyzing Character Motivations and Desires

How Character Actions Cause Plot Developments

Tracking Character Change Across a Story

Story Elements, Plot Structure, and Character Dynamics

Describing Characters by Their Traits

Figuring Out Character Traits From What They Say

Understanding Why Characters Do What They Do

Describing How Characters Feel

How Character Actions Move the Story Forward

How Character Actions Create the Sequence of Events

Your Point of View vs. the Narrator's Point of View

Your Point of View vs. a Character's Point of View

Characters Drive the Story

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

Czytanie ze zrozumieniem — główna myśl tekstu

Odpowiadam na pytania szczegółowe do tekstu

Określanie kolejności wydarzeń w opowiadaniu

Wyszukiwanie bohaterów i wydarzeń w tekście

Czytanie instrukcji — postępowanie według kroków

Ciche czytanie z pełnym zrozumieniem

Czytanie głośne — poprawna dykcja i intonacja

Strategie czytania ze zrozumieniem

¿Qué es una obra de teatro y cómo se lee?

La estructura del guion teatral: actos y escenas

Los diálogos y monólogos en el teatro

Las acotaciones: indicaciones de acción y emoción

El reparto de personajes y la lista dramática

Escenografía, vestuario y ambientación teatral

Elementos del guion teatral

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 Character Types Across Stories

Comparing Similar Settings in Different Stories

Finding Themes Across Multiple Texts

Comparing Plot Patterns and Conflict Resolutions

Comparing Books in a Series or by the Same Author

Writing Responses That Compare Ideas Across Texts

Writing Responses That Contrast Ideas Across Texts

Comparing and Contrasting Literature

Odróżnianie zdarzeń istotnych od mniej istotnych

Postacie główne i drugorzędne w utworze literackim

Wskazywanie cech bohaterów i ocenianie ich postępowania

Uzasadnianie oceny bohatera — argumenty z tekstu

Wydarzenie zmieniające postępowanie bohatera — punkt zwrotny

Analiza postaci i wydarzeń w utworze literackim

Określanie nastroju w utworze literackim

Odróżnianie świata fikcji od rzeczywistości

Byty rzeczywiste a medialne — rozpoznawanie

Byty realistyczne a fikcyjne — rozróżnianie

Nastrój, fikcja i rzeczywistość w tekstach kultury

What Is Theme? Telling Theme From Topic

Inferring Theme From Story Details

Using Evidence to Support Your Theme Idea

Identifying Major and Minor Characters

Explaining Relationships Among Characters

How Characters Influence Each Other

Analyzing Theme & Characters in Stories

Plot Elements: The Sequence of Events

Identifying the Conflict in a Story

Understanding How a Story Is Resolved

Analyzing Plot From Beginning to End

How the Setting Influences the Plot

How the Setting Creates Mood and Conflict

Connecting Setting, Characters, and Plot

Writing About Story Elements

Understanding Plot & Setting in Stories

OGE.4.RL.3

OGE.4.RL.3

Aligned learning resources

Related diagrams