<!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 Questions Diagram</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      min-height: 100%;
    }

    /* Buttons / Question Pins */
    .btn-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .pin-btn {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #374151;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .pin-btn:hover {
      background: #f9fafb;
      border-color: #9ca3af;
    }
    .pin-btn.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }

    /* Story Text Panel */
    .story-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 14px 16px;
      font-size: 15px;
      line-height: 1.6;
      color: #374151;
      position: relative;
    }
    .story-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #6b7280;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .hl {
      border-radius: 4px;
      padding: 2px 4px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
    .hl-where.active-hl {
      background-color: #fef08a;
      color: #854d0e;
      font-weight: 600;
    }
    .hl-why.active-hl {
      background-color: #bae6fd;
      color: #0369a1;
      font-weight: 600;
    }

    /* Visual Answer Stage */
    .visual-stage {
      position: relative;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      min-height: 130px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 12px;
    }

    .answer-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(6px);
      padding: 12px;
    }
    .answer-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Scene layouts */
    .scene-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .scene-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      min-width: 90px;
      text-align: center;
    }
    .tile-icon {
      font-size: 26px;
      line-height: 1;
    }
    .tile-text {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }
    .connector {
      font-size: 18px;
      color: #94a3b8;
      font-weight: bold;
    }

    /* Thought Bubble for Question 3 */
    .thought-bubble {
      background: #ffffff;
      border: 2px dashed #3b82f6;
      border-radius: 18px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    }
  </style>
</head>
<body>

  
  <div class="btn-group" role="tablist">
    <button class="pin-btn active" id="btn-where" role="tab" aria-selected="true" onclick="showStep(0)">
      📍 Where is Leo?
    </button>
    <button class="pin-btn" id="btn-why" role="tab" aria-selected="false" onclick="showStep(1)">
      ❓ Why shivering?
    </button>
    <button class="pin-btn" id="btn-what" role="tab" aria-selected="false" onclick="showStep(2)">
      💭 What next?
    </button>
  </div>

  
  <div class="story-card">
    <div class="story-label">📖 Story Excerpt</div>
    On a <span class="hl hl-why" id="hl-rain">rainy Saturday</span>, Leo walked into the <span class="hl hl-where active-hl" id="hl-barn">dusty barn behind grandmother's house</span>. In the corner, next to an <span class="hl hl-why" id="hl-window">open window</span>, sat a puppy shivering from the cold.
  </div>

  
  <div class="visual-stage">
    
    
    <div class="answer-panel active" id="panel-where">
      <div class="scene-row">
        <div class="scene-tile">
          <span class="tile-icon">👵🏡</span>
          <span class="tile-text">Grandmother's House</span>
        </div>
        <span class="connector">➔</span>
        <div class="scene-tile" style="border-color: #ca8a04; background: #fefce8;">
          <span class="tile-icon">🏚️📍</span>
          <span class="tile-text" style="color: #854d0e;">Dusty Barn</span>
        </div>
      </div>
    </div>

    
    <div class="answer-panel" id="panel-why">
      <div class="scene-row">
        <div class="scene-tile">
          <span class="tile-icon">🌧️</span>
          <span class="tile-text">Rainy Day</span>
        </div>
        <span class="connector">+</span>
        <div class="scene-tile">
          <span class="tile-icon">🪟💨</span>
          <span class="tile-text">Open Window</span>
        </div>
        <span class="connector">=</span>
        <div class="scene-tile" style="border-color: #0284c7; background: #f0f9ff;">
          <span class="tile-icon">🐶🥶</span>
          <span class="tile-text" style="color: #0369a1;">Shivering</span>
        </div>
      </div>
    </div>

    
    <div class="answer-panel" id="panel-what">
      <div class="scene-row">
        <div class="scene-tile">
          <span class="tile-icon">👦💡</span>
          <span class="tile-text">Leo's Idea</span>
        </div>
        <div class="thought-bubble">
          <span style="font-size: 26px;">🧣🐕✨</span>
          <span class="tile-text" style="color: #1d4ed8;">Warm Blanket</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    const buttons = [
      document.getElementById('btn-where'),
      document.getElementById('btn-why'),
      document.getElementById('btn-what')
    ];

    const panels = [
      document.getElementById('panel-where'),
      document.getElementById('panel-why'),
      document.getElementById('panel-what')
    ];

    const hlBarn = document.getElementById('hl-barn');
    const hlRain = document.getElementById('hl-rain');
    const hlWindow = document.getElementById('hl-window');

    function showStep(index) {
      buttons.forEach((btn, i) => {
        const isActive = (i === index);
        btn.classList.toggle('active', isActive);
        btn.setAttribute('aria-selected', isActive);
      });

      panels.forEach((p, i) => {
        p.classList.toggle('active', i === index);
      });

      // Update text highlights
      hlBarn.classList.toggle('active-hl', index === 0);
      hlRain.classList.toggle('active-hl', index === 1);
      hlWindow.classList.toggle('active-hl', index === 1);
    }
  </script>
</body>
</html>

Asking Who, What, Where, When, Why, and How in 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">
  <title>Story Questions Summary</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      min-height: 100%;
    }

    .nav-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .nav-btn {
      flex: 1;
      max-width: 140px;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 700;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: #ffffff;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .nav-btn.active {
      background: #22b7ff;
      border-color: #0284c7;
      color: #ffffff;
    }

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

    .stage-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
      opacity: 0.7;
    }

    .stage-card.active {
      opacity: 1;
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.35), 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .pill {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 20px;
      margin-bottom: 8px;
    }

    .pill-before { background: #e0f2fe; color: #0369a1; }
    .pill-during { background: #fef3c7; color: #b45309; }
    .pill-after { background: #dcfce7; color: #15803d; }

    .card-icon {
      font-size: 28px;
      margin-bottom: 6px;
      line-height: 1;
    }

    .q-badge {
      font-size: 11px;
      font-weight: 800;
      color: #2563eb;
      background: #eff6ff;
      padding: 2px 6px;
      border-radius: 4px;
      margin-bottom: 4px;
      display: inline-block;
    }

    .question {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 8px;
      line-height: 1.25;
      min-height: 32px;
    }

    .divider {
      width: 80%;
      height: 1px;
      background: #f1f5f9;
      margin-bottom: 8px;
    }

    .answer {
      font-size: 12px;
      line-height: 1.35;
      color: #4b5563;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .footer-ctrls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    @media (max-width: 460px) {
      body {
        padding: 8px;
        gap: 8px;
      }
      .board-grid {
        gap: 6px;
      }
      .stage-card {
        padding: 8px 4px;
      }
      .card-icon {
        font-size: 22px;
      }
      .question {
        font-size: 11px;
        min-height: 28px;
      }
      .answer {
        font-size: 10.5px;
      }
      .pill {
        font-size: 9px;
        padding: 2px 6px;
      }
      .nav-btn {
        font-size: 11px;
        padding: 6px 4px;
      }
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="nav-btn active" id="btn-0" onclick="setStep(0)">1. Before</button>
    <button class="nav-btn" id="btn-1" onclick="setStep(1)">2. During</button>
    <button class="nav-btn" id="btn-2" onclick="setStep(2)">3. After</button>
  </div>

  <div class="board-grid">
    
    <div class="stage-card active" id="card-0" onclick="setStep(0)">
      <span class="pill pill-before">Before</span>
      <div class="card-icon">🏚️ 🐶</div>
      <div><span class="q-badge">WHAT</span></div>
      <div class="question">What is in the barn?</div>
      <div class="divider"></div>
      <div class="answer">Leo finds a scared puppy hiding in the hay.</div>
    </div>

    
    <div class="stage-card" id="card-1" onclick="setStep(1)">
      <span class="pill pill-during">During</span>
      <div class="card-icon">🌧️ 🐕</div>
      <div><span class="q-badge">WHY</span></div>
      <div class="question">Why is it alone?</div>
      <div class="divider"></div>
      <div class="answer">It got lost and frightened during a thunderstorm.</div>
    </div>

    
    <div class="stage-card" id="card-2" onclick="setStep(2)">
      <span class="pill pill-after">After</span>
      <div class="card-icon">📋 🏡</div>
      <div><span class="q-badge">HOW</span></div>
      <div class="question">How did Leo solve it?</div>
      <div class="divider"></div>
      <div class="answer">He put up flyers to help reunite it with its owner.</div>
    </div>
  </div>

  <div class="footer-ctrls">
    <button class="play-btn" id="playBtn" onclick="toggleAuto()">
      <span id="playIcon">⏸</span> <span id="playText">Auto-Play</span>
    </button>
  </div>

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

    function updateUI() {
      for (let i = 0; i < 3; i++) {
        const card = document.getElementById('card-' + i);
        const btn = document.getElementById('btn-' + i);
        if (i === currentStep) {
          card.classList.add('active');
          btn.classList.add('active');
        } else {
          card.classList.remove('active');
          btn.classList.remove('active');
        }
      }
    }

    function setStep(index) {
      currentStep = index;
      updateUI();
      if (isPlaying) {
        resetTimer();
      }
    }

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

    function resetTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function toggleAuto() {
      isPlaying = !isPlaying;
      const playIcon = document.getElementById('playIcon');
      const playText = document.getElementById('playText');
      if (isPlaying) {
        playIcon.textContent = '⏸';
        playText.textContent = 'Auto-Play';
        resetTimer();
      } else {
        playIcon.textContent = '▶';
        playText.textContent = 'Play';
        if (timer) clearInterval(timer);
      }
    }

    // Start auto cycle on load
    resetTimer();
  </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; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .title {
      font-size: 16px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 12px;
      color: #1e2945;
    }

    .grid-container {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
      max-width: 600px;
      justify-content: center;
    }

    .panel {
      flex: 1 1 250px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .panel.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .header-tag {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 2px;
    }

    .sub-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 12px;
    }

    .stage-box {
      width: 100%;
      height: 150px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px dashed #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Literal Graphic */
    .page-mock {
      width: 80%;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .page-line {
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      width: 90%;
    }

    .page-line.short { width: 60%; }

    .page-line.highlight {
      height: 14px;
      background: #fef08a;
      border: 1.5px solid #eab308;
      border-radius: 4px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #854d0e;
    }

    .glass-pointer {
      position: absolute;
      right: 15%;
      top: 38%;
      font-size: 32px;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
      animation: floatPoint 2.4s ease-in-out infinite;
    }

    @keyframes floatPoint {
      0%, 100% { transform: translate(0, 0) rotate(0deg); }
      50% { transform: translate(-6px, -4px) rotate(-8deg); }
    }

    /* Inferential Graphic (Puzzle) */
    .puzzle-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .puzzle-piece {
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0,0,0,0.06);
      transition: transform 0.3s ease;
    }

    .piece-clue {
      background: #dbeafe;
      border: 1.5px solid #93c5fd;
      color: #1e40af;
    }

    .piece-know {
      background: #dcfce7;
      border: 1.5px solid #86efac;
      color: #166534;
    }

    .plus-sign {
      font-size: 16px;
      font-weight: 800;
      color: #64748b;
    }

    .badge-label {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 20px;
      text-align: center;
    }

    .badge-literal {
      background: #fef9c3;
      color: #854d0e;
      border: 1px solid #fde047;
    }

    .badge-infer {
      background: #ede9fe;
      color: #5b21b6;
      border: 1px solid #c4b5fd;
    }

    .toggle-nav {
      display: flex;
      gap: 8px;
      margin-top: 12px;
    }

    .btn-tab {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-tab.active {
      background: #1e2945;
      border-color: #1e2945;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="title">Literal vs. Inferential Questions</div>

  <div class="grid-container">
    
    <div class="panel active" id="panel-literal" onclick="selectPanel('literal')">
      <div class="header-tag">Literal Questions</div>
      <div class="sub-tag">Who • Where • When</div>
      
      <div class="stage-box">
        <div class="page-mock">
          <div class="page-line"></div>
          <div class="page-line highlight">Text Answer</div>
          <div class="page-line short"></div>
        </div>
        <div class="glass-pointer">🔍</div>
      </div>

      <div class="badge-label badge-literal">📍 Right There</div>
    </div>

    
    <div class="panel" id="panel-infer" onclick="selectPanel('infer')">
      <div class="header-tag">Inferential Questions</div>
      <div class="sub-tag">Why • How</div>
      
      <div class="stage-box">
        <div class="puzzle-wrap">
          <div class="puzzle-piece piece-clue">
            <span>📖</span>
            <span>Text Clues</span>
          </div>
          <span class="plus-sign">+</span>
          <div class="puzzle-piece piece-know">
            <span>🧠</span>
            <span>My Knowledge</span>
          </div>
        </div>
      </div>

      <div class="badge-label badge-infer">🧩 Think & Search</div>
    </div>
  </div>

  <div class="toggle-nav">
    <button class="btn-tab active" id="btn-both" onclick="selectPanel('both')">View Both</button>
    <button class="btn-tab" id="btn-literal" onclick="selectPanel('literal')">Literal</button>
    <button class="btn-tab" id="btn-infer" onclick="selectPanel('infer')">Inferential</button>
  </div>

  <script>
    function selectPanel(mode) {
      const pLit = document.getElementById('panel-literal');
      const pInf = document.getElementById('panel-infer');
      const bBoth = document.getElementById('btn-both');
      const bLit = document.getElementById('btn-literal');
      const bInf = document.getElementById('btn-infer');

      bBoth.classList.remove('active');
      bLit.classList.remove('active');
      bInf.classList.remove('active');

      if (mode === 'literal') {
        pLit.classList.add('active');
        pInf.classList.remove('active');
        bLit.classList.add('active');
      } else if (mode === 'infer') {
        pLit.classList.remove('active');
        pInf.classList.add('active');
        bInf.classList.add('active');
      } else {
        pLit.classList.add('active');
        pInf.classList.add('active');
        bBoth.classList.add('active');
      }
    }
    selectPanel('both');
  </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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px 12px;
      user-select: none;
    }

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

    .header-tag {
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Belt strap */
    .belt-container {
      width: 100%;
      position: relative;
      padding-top: 14px;
    }

    .belt-strap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 16px;
      background: #7c583f;
      border-radius: 8px;
      border-top: 2px solid #9c7255;
      border-bottom: 2px solid #563926;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }

    .buckle {
      width: 28px;
      height: 22px;
      background: #f59e0b;
      border: 3px solid #d97706;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

    /* Badges grid */
    .badges-row {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      width: 100%;
    }

    @media (max-width: 460px) {
      .badges-row {
        gap: 4px;
      }
    }

    .badge-btn {
      appearance: none;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 4px 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      position: relative;
    }

    /* Top hanger clip */
    .badge-btn::before {
      content: '';
      position: absolute;
      top: -10px;
      width: 8px;
      height: 10px;
      background: #94a3b8;
      border-radius: 3px 3px 0 0;
    }

    .badge-icon {
      font-size: 22px;
      line-height: 1.1;
    }

    .badge-label {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: #64748b;
      transition: color 0.2s ease;
    }

    @media (max-width: 400px) {
      .badge-icon {
        font-size: 18px;
      }
      .badge-label {
        font-size: 11px;
      }
    }

    /* Color themes per question word */
    .badge-who   { --c: #ec4899; }
    .badge-what  { --c: #3b82f6; }
    .badge-where { --c: #10b981; }
    .badge-when  { --c: #f59e0b; }
    .badge-why   { --c: #8b5cf6; }
    .badge-how   { --c: #06b6d4; }

    .badge-btn:hover {
      border-color: var(--c);
      background: #f8fafc;
    }

    .badge-btn.active {
      border-color: var(--c);
      background: #ffffff;
      box-shadow: 0 0 0 3px var(--c), 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .badge-btn.active .badge-label {
      color: var(--c);
    }

    /* Detective clue display card */
    .clue-panel {
      width: 100%;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
      transition: border-color 0.2s ease;
    }

    .clue-content {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .clue-word {
      font-size: 22px;
      font-weight: 800;
      transition: color 0.2s ease;
    }

    .clue-arrow {
      font-size: 18px;
      color: #94a3b8;
    }

    .clue-target {
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
    }

    .clue-desc {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    /* Stepper dots */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background-color 0.2s ease;
    }

    .dot.active {
      background: #2563eb;
    }
  </style>
</head>
<body>
  <div class="toolbelt-scene">
    <div class="header-tag">🔍 Detective Question Toolbelt</div>

    <div class="belt-container">
      <div class="belt-strap">
        <div class="buckle"></div>
      </div>
      <div class="badges-row">
        <button type="button" class="badge-btn badge-who active" data-word="Who" data-target="Person / Character" data-desc="Identifies people, figures, or characters involved" data-color="#ec4899">
          <span class="badge-icon">👤</span>
          <span class="badge-label">Who</span>
        </button>
        <button type="button" class="badge-btn badge-what" data-word="What" data-target="Thing / Action" data-desc="Identifies events, objects, or main actions" data-color="#3b82f6">
          <span class="badge-icon">📦</span>
          <span class="badge-label">What</span>
        </button>
        <button type="button" class="badge-btn badge-where" data-word="Where" data-target="Place / Setting" data-desc="Identifies locations, environments, or scene settings" data-color="#10b981">
          <span class="badge-icon">📍</span>
          <span class="badge-label">Where</span>
        </button>
        <button type="button" class="badge-btn badge-when" data-word="When" data-target="Time / Day" data-desc="Identifies the time, date, period, or timeline" data-color="#f59e0b">
          <span class="badge-icon">⏰</span>
          <span class="badge-label">When</span>
        </button>
        <button type="button" class="badge-btn badge-why" data-word="Why" data-target="Reason / Cause" data-desc="Identifies motivations, reasons, and causes" data-color="#8b5cf6">
          <span class="badge-icon">💡</span>
          <span class="badge-label">Why</span>
        </button>
        <button type="button" class="badge-btn badge-how" data-word="How" data-target="Way / Steps" data-desc="Identifies the process, manner, or method used" data-color="#06b6d4">
          <span class="badge-icon">⚙️</span>
          <span class="badge-label">How</span>
        </button>
      </div>
    </div>

    <div class="clue-panel" id="cluePanel">
      <div class="clue-content">
        <span class="clue-word" id="clueWord" style="color: #ec4899;">Who</span>
        <span class="clue-arrow">→</span>
        <span class="clue-target" id="clueTarget">Person / Character</span>
      </div>
      <div class="clue-desc" id="clueDesc">Identifies people, figures, or characters involved</div>
    </div>

    <div class="controls" id="dotsContainer">
      <button type="button" class="dot active" aria-label="Who"></button>
      <button type="button" class="dot" aria-label="What"></button>
      <button type="button" class="dot" aria-label="Where"></button>
      <button type="button" class="dot" aria-label="When"></button>
      <button type="button" class="dot" aria-label="Why"></button>
      <button type="button" class="dot" aria-label="How"></button>
    </div>
  </div>

  <script>
    const badges = document.querySelectorAll('.badge-btn');
    const dots = document.querySelectorAll('.dot');
    const clueWord = document.getElementById('clueWord');
    const clueTarget = document.getElementById('clueTarget');
    const clueDesc = document.getElementById('clueDesc');

    let currentIndex = 0;
    let autoInterval = null;

    function updateBadge(index) {
      currentIndex = index;
      badges.forEach((b, i) => b.classList.toggle('active', i === index));
      dots.forEach((d, i) => d.classList.toggle('active', i === index));

      const activeBtn = badges[index];
      if (activeBtn) {
        clueWord.textContent = activeBtn.dataset.word;
        clueWord.style.color = activeBtn.dataset.color;
        clueTarget.textContent = activeBtn.dataset.target;
        if (clueDesc && activeBtn.dataset.desc) {
          clueDesc.textContent = activeBtn.dataset.desc;
        }
      }
    }

    function startAutoPlay() {
      stopAutoPlay();
      autoInterval = setInterval(() => {
        const nextIndex = (currentIndex + 1) % badges.length;
        updateBadge(nextIndex);
      }, 3200);
    }

    function stopAutoPlay() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
      }
    }

    badges.forEach((badge, idx) => {
      badge.addEventListener('click', () => {
        stopAutoPlay();
        updateBadge(idx);
      });
      badge.addEventListener('mouseenter', () => {
        stopAutoPlay();
        updateBadge(idx);
      });
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        stopAutoPlay();
        updateBadge(idx);
      });
    });

    startAutoPlay();
  </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="1:1">
  <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: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .svg-container {
      width: 100%;
      filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.12));
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    /* Interactive spotlight transitions */
    .callout {
      transition: opacity 0.3s ease, transform 0.3s ease;
      cursor: pointer;
    }

    .callout:not(.focus) {
      opacity: 0.25;
    }

    .callout.focus {
      opacity: 1;
    }

    .target-highlight {
      transition: opacity 0.3s ease;
    }

    .target-highlight:not(.focus) {
      opacity: 0.2;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    <div class="controls">
      <button class="btn active" id="btn-all" onclick="setFocus('all')">All Questions</button>
      <button class="btn" id="btn-who" onclick="setFocus('who')">Who?</button>
      <button class="btn" id="btn-why" onclick="setFocus('why')">Why?</button>
      <button class="btn" id="btn-where" onclick="setFocus('where')">Where?</button>
    </div>

    <div class="svg-container">
      <svg viewBox="0 0 460 470" xmlns="http://www.w3.org/2000/svg">
        <defs>
          
          <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#0a1128" />
            <stop offset="60%" stop-color="#101f42" />
            <stop offset="100%" stop-color="#1e3a5f" />
          </linearGradient>

          
          <radialGradient id="blueGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#38bdf8" stop-opacity="0.9" />
            <stop offset="40%" stop-color="#0284c7" stop-opacity="0.5" />
            <stop offset="100%" stop-color="#0284c7" stop-opacity="0" />
          </radialGradient>

          
          <linearGradient id="beamGrad" x1="0" y1="1" x2="0.6" y2="0">
            <stop offset="0%" stop-color="#fef08a" stop-opacity="0.8" />
            <stop offset="100%" stop-color="#fef08a" stop-opacity="0" />
          </linearGradient>

          
          <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-opacity="0.25" />
          </filter>
        </defs>

        
        <rect x="20" y="10" width="420" height="450" rx="12" fill="url(#skyGrad)" stroke="#334155" stroke-width="2" />

        
        <circle cx="380" cy="55" r="18" fill="#fef9c3" />
        <circle cx="373" cy="50" r="15" fill="#0a1128" />
        
        <circle cx="80" cy="70" r="1.5" fill="#ffffff" opacity="0.8" />
        <circle cx="150" cy="45" r="1" fill="#ffffff" opacity="0.6" />
        <circle cx="210" cy="75" r="1.5" fill="#ffffff" opacity="0.9" />
        <circle cx="260" cy="40" r="1.2" fill="#ffffff" opacity="0.7" />
        <circle cx="320" cy="85" r="1.5" fill="#ffffff" opacity="0.8" />

        
        <rect x="60" y="24" width="340" height="34" rx="6" fill="#0f172a" fill-opacity="0.7" stroke="#38bdf8" stroke-width="1.5" />
        <text x="230" y="46" fill="#f8fafc" font-size="15" font-weight="900" letter-spacing="1.5" text-anchor="middle">THE MIDNIGHT TREEHOUSE</text>

        
        
        <path d="M 270 460 Q 285 300 290 200 Q 295 140 310 100 L 340 100 Q 330 180 345 300 Q 360 400 375 460 Z" fill="#1e293b" />
        
        
        <path d="M 300 240 Q 230 235 180 230 Q 230 250 305 260 Z" fill="#1e293b" />
        
        
        <circle cx="330" cy="110" r="65" fill="#0f172a" />
        <circle cx="230" cy="140" r="50" fill="#0f172a" />
        <circle cx="270" cy="90" r="45" fill="#0f172a" />

        
        <g id="target-why" class="target-highlight focus">
          
          <circle cx="235" cy="195" r="65" fill="url(#blueGlow)" />
          
          
          <polygon points="200,185 240,150 280,185" fill="#334155" />
          <rect x="205" y="185" width="70" height="50" rx="3" fill="#1e293b" stroke="#475569" stroke-width="1.5" />
          
          
          <rect x="220" y="195" width="22" height="22" rx="2" fill="#38bdf8" />
          <line x1="231" y1="195" x2="231" y2="217" stroke="#0f172a" stroke-width="1.5" />
          <line x1="220" y1="206" x2="242" y2="206" stroke="#0f172a" stroke-width="1.5" />
          
          <rect x="252" y="200" width="15" height="35" rx="1" fill="#0284c7" />
        </g>

        
        <g id="target-where" class="target-highlight focus">
          <line x1="220" y1="235" x2="240" y2="390" stroke="#94a3b8" stroke-width="2" stroke-dasharray="1 6" stroke-linecap="round" />
          <line x1="232" y1="235" x2="252" y2="390" stroke="#94a3b8" stroke-width="2" stroke-dasharray="1 6" stroke-linecap="round" />
          
          <line x1="222" y1="255" x2="234" y2="255" stroke="#cbd5e1" stroke-width="2.5" />
          <line x1="225" y1="280" x2="237" y2="280" stroke="#cbd5e1" stroke-width="2.5" />
          <line x1="228" y1="305" x2="240" y2="305" stroke="#cbd5e1" stroke-width="2.5" />
          <line x1="231" y1="330" x2="243" y2="330" stroke="#cbd5e1" stroke-width="2.5" />
          <line x1="234" y1="355" x2="246" y2="355" stroke="#cbd5e1" stroke-width="2.5" />
          <line x1="237" y1="380" x2="249" y2="380" stroke="#cbd5e1" stroke-width="2.5" />
        </g>

        
        <path d="M 20 420 Q 180 390 440 430 L 440 460 L 20 460 Z" fill="#0f172a" />

        
        <g id="target-who" class="target-highlight focus">
          
          <polygon points="122,376 210,210 260,250" fill="url(#beamGrad)" />
          
          
          
          <line x1="102" y1="410" x2="102" y2="435" stroke="#0284c7" stroke-width="5" stroke-linecap="round" />
          <line x1="112" y1="410" x2="114" y2="435" stroke="#0284c7" stroke-width="5" stroke-linecap="round" />
          
          <path d="M 96 370 L 118 370 L 122 412 L 92 412 Z" fill="#e11d48" rx="4" />
          
          <circle cx="107" cy="352" r="11" fill="#fed7aa" />
          <path d="M 100 344 Q 108 340 116 346 Q 112 356 98 356 Z" fill="#7c2d12" />
          <path d="M 98 350 Q 86 354 88 364 Q 96 362 98 354 Z" fill="#7c2d12" />
          
          <line x1="112" y1="375" x2="124" y2="376" stroke="#fed7aa" stroke-width="4" stroke-linecap="round" />
          <rect x="122" y="372" width="9" height="7" rx="1.5" fill="#facc15" />
        </g>

        
        <g id="callout-who" class="callout focus" onclick="setFocus('who')" filter="url(#shadow)">
          
          <path d="M 130 310 L 112 342" stroke="#f59e0b" stroke-width="2.5" stroke-dasharray="3 3" fill="none" />
          <circle cx="112" cy="342" r="3.5" fill="#f59e0b" />
          
          
          <rect x="35" y="272" width="145" height="38" rx="8" fill="#ffffff" stroke="#f59e0b" stroke-width="2" />
          <text x="45" y="296" font-size="13" font-weight="800" fill="#d97706">WHO</text>
          <text x="82" y="296" font-size="13" font-weight="600" fill="#1e293b">is this girl?</text>
        </g>

        
        <g id="callout-why" class="callout focus" onclick="setFocus('why')" filter="url(#shadow)">
          
          <path d="M 315 170 L 265 190" stroke="#0284c7" stroke-width="2.5" stroke-dasharray="3 3" fill="none" />
          <circle cx="265" cy="190" r="3.5" fill="#0284c7" />
          
          
          <rect x="270" y="115" width="165" height="50" rx="8" fill="#ffffff" stroke="#0284c7" stroke-width="2" />
          <text x="280" y="136" font-size="13" font-weight="800" fill="#0284c7">WHY</text>
          <text x="316" y="136" font-size="12" font-weight="600" fill="#1e293b">is the treehouse</text>
          <text x="280" y="153" font-size="12" font-weight="600" fill="#1e293b">glowing at midnight?</text>
        </g>

        
        <g id="callout-where" class="callout focus" onclick="setFocus('where')" filter="url(#shadow)">
          
          <path d="M 270 330 L 246 330" stroke="#10b981" stroke-width="2.5" stroke-dasharray="3 3" fill="none" />
          <circle cx="246" cy="330" r="3.5" fill="#10b981" />
          
          
          <rect x="270" y="312" width="165" height="38" rx="8" fill="#ffffff" stroke="#10b981" stroke-width="2" />
          <text x="280" y="336" font-size="13" font-weight="800" fill="#059669">WHERE</text>
          <text x="340" y="336" font-size="13" font-weight="600" fill="#1e293b">will she climb?</text>
        </g>

      </svg>
    </div>
  </div>

  <script>
    function setFocus(mode) {
      // Update buttons
      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      const activeBtn = document.getElementById('btn-' + mode);
      if (activeBtn) activeBtn.classList.add('active');

      const items = ['who', 'why', 'where'];
      items.forEach(key => {
        const callout = document.getElementById('callout-' + key);
        const target = document.getElementById('target-' + key);
        const isMatch = (mode === 'all' || mode === key);

        if (isMatch) {
          callout.classList.add('focus');
          target.classList.add('focus');
        } else {
          callout.classList.remove('focus');
          target.classList.remove('focus');
        }
      });
    }
  </script>
</body>
</html>

Locating Explicit Evidence in Literary Texts

Making Inferences from Clues and Background Knowledge

Answering Questions About Story Problems and Solutions

Defending Inferences with Specific Text Details

Generating Deep Questions to Clarify Confusions

Asking and Answering Questions About Stories

Använda förförståelse och bildstöd vid läsning

Hitta direkt uttalad information i enkla texter

Koppla textens innehåll till egna upplevelser

Läsa mellan raderna: Dra enkla slutsatser

Förstå nya ord med hjälp av sammanhanget

Upptäcka och åtgärda läshinder

Sammanfatta huvudbudskapet i en kort text

Grundläggande lässtrategier och textförståelse

Förstå textens bilder och rubriker

Aktivera förförståelse inför läsning

Läsa enkla meningar med flyt

Stanna upp och reda ut okända ord

Hitta direkt information i texten

Läsa mellan raderna och dra enkla slutsatser

Grundläggande lässtrategier: Före och under läsning

El mundo maravilloso de los cuentos infantiles

Las fábulas y sus enseñanzas morales

Rimas y ritmo en poemas y canciones de cuna

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

Leyendas populares y personajes fantásticos de mi región

Adivinanzas, trabalenguas y retahílas populares

Personajes buenos, malos y ayudantes en la literatura

Los lugares donde ocurren los relatos: bosques, castillos y aldeas

Distinguir la realidad y la fantasía en los cuentos

Compartir emociones y preferencias sobre libros leídos

Lectura y disfrute de textos literarios infantiles

Romani chibs alfabet och vokalljud

Konsonanter och särskilda tecken i romani chib

Samband mellan ljud och bokstav i enkla stavelser

Uttal och betoning i enkla vardagsord

Känna igen och läsa vanliga ordbilder

Läsa enkla fraser med flyt

Lässtrategier: Använda bildstöd för ordförståelse

Lässtrategier: Lista ut ord med hjälp av sammanhanget

Intonation och frasmelodi i frågor och påståenden

Romani chib: Ljud, bokstäver och grundläggande läsning

Koppla berättelsens innehåll till egna erfarenheter

Återberätta handlingens början, mitt och slut

Läsa enkla digitala texter med ljud och bild

Ställa egna frågor till texten

Jämföra två olika korta texter om samma ämne

Bearbeta, återberätta och jämföra texter

Lässtrategier för enkla texter i olika medier

Aktivera förförståelse med rubriker och bilder

Läsa enkla ord och fraser i vardagstexter

Hitta nyckelord och betydelsebärande ord i text

Läsa mellan raderna: enkla inferenser och slutsatser

Läsa och tolka texter från olika medier

Grundläggande lässtrategier och textavkodning

Dubbla vokaler: aa, ee, ii, oo, uu, yy, ää och öö

Dubbla konsonanter: kk, pp, tt och mm

Diftonger i meänkieli: uo, ie och yö

Diftonger med i: ai, ei, oi och ui

Dela ord i stavelser på meänkieli

Från ljud till enkla ord: Ljuda ihop korta ord

Läsa enkla meningar med ljudenliga ord

Ljudkombinationer och tidig läsning på meänkieli

Läsa och navigera i enkla digitala texter

Jämföra två texter om samma ämne

Skilja mellan fakta och åsikter i text

Tolka samspel mellan text och bild i medietexter

Reflektera över textens syfte och mottagare

Textanalys och källkritisk läsning

Lyssna på och samtala om bilderböcker

Traditionella romska sagor och fabler för barn

Barnsånger och ramsor på romani chib

Enkla dikter med känslor och färger

Skriva en enkel presentation om mig själv

Skriva enkla beskrivningar av djur och saker

Skriva korta meddelanden och hälsningskort

Kombinera text och egen teckning

Berättelser, sånger och enkla texter

Förutspå handling utifrån titel och bokomslag

Stanna upp och reda ut obekanta ord

Hjälpmedel för ordförståelse: Ordböcker och digitala resurser

Läsa mellan raderna: Upptäcka enkla ledtrådar

Grundläggande lässtrategier och ordförståelse

Ställa frågor till texten: vem, vad, var och när

Reda ut obekanta ord under läsningens gång

Sammanfatta det viktigaste i en enkel text

Lyssna aktivt på talad meänkieli och uppfatta sammanhang

Läflyt och intonation vid högläsning

Kritiskt perspektiv på enkla texter i vardagen

Textbearbetning, läsflyt och kritisk läsning

Lässtrategier före läsning: Förförståelse och hypoteser

Lässtrategier under läsning: Ställa frågor och reda ut oklarheter

Lässtrategier efter läsning: Sammanfatta och reflektera

Läsa mellan raderna och dra slutsatser (inferenser)

Informationssökning och källkritik i digitala medier

Ungdomslitteratur: Teman om identitet och livsfrågor

Människors villkor i berättande texter

Strukturen i sakprosatexter: Rubriker, ingress och brödtext

Lässtrategier och textanalys i olika medier

Läsa texter i digitala medier: Pekplatta och skärm

Läsa skyltar, korta meddelanden och instruktioner

Återberätta det viktigaste i en text med egna ord

Urskilja textens budskap och enkla lärdomar

Anpassa läsningen efter textens form och syfte

Ställa egna frågor till texten under läsning

Berätta vad man tyckte om boken och motivera

Textförståelse, olika medier och boksamtal

Who and What: Asking Questions About Stories

Where and When: Asking Questions About Stories

Why and How: Asking Questions About Stories

Going Back to the Story to Find Your Answer

Asking Questions About Characters' Feelings

Describing What a Character Does in a Story

How Characters Handle Tough Challenges

What Characters Feel and How They React

Comparing How Two Characters React Differently

Putting It Together: Questions and Characters

Understanding Stories: Questions and Character Responses

Romska sagor och berättelser för barn

Berättelsens delar: Början, mitt och slut

Karaktärer och miljöer i berättande texter

Bilderböcker: Samspel mellan text och bild

Dikter och ramsor på romani chib

Romska barnvisor och sångtexter

Berättelser, rim och visor på romani chib

Visualising: Making Pictures in Your Mind

Predicting What Happens Next

Connecting Texts to Your Own Experience

Connecting One Text to Another

Summarising: Telling the Main Idea

Comprehension Strategies: Visualising, Predicting, and Connecting

Följa enkla steg-för-steg-instruktioner

Läsa och förstå enkla recept

Spelregler och lekinstruktioner

Läsa beskrivningar av föremål och djur

Läsa beskrivningar av personer och platser

Faktatexter om romska traditioner och hantverk

Rubriker, mellanrubriker och punktlistor

Sammanhängande beskrivningar av processer

Sambandsord för ordning och orsak

Jämföra instruerande och berättande texttyper

Granska och bedöma information i enkla faktatexter

Instruerande och beskrivande texter

What Does It Mean to Make an Inference?

Finding Clue Words That Help You Infer

Using Pictures to Make Inferences

Supporting Your Inferences With Evidence From the Text

Answering Questions Using Text Evidence

Using Background Knowledge to Make Inferences

Reading Comprehension: Making Inferences

Monitoring: Noticing When You Don't Understand

Asking Questions While Reading

Finding Literal Meaning: What the Text Says

Inferring Meaning: What the Text Doesn't Say

Combining Comprehension Strategies

Reading Aloud With Expression and Fluency

Deepening Comprehension: Monitoring, Questioning, and Inference

Ord för glada och lugna känslor: Iloinen ja rauhallinen

Ord för ledsna, arga och rädda känslor

Uttrycka vad man tycker om och ogillar

Uttrycka enkla åsikter med motiveringar: Mie tykkään siksi ko...

Ord för skolan och skoldagen: Koulu ja koulupäivä

Ord för fritid, lekar och intressen: Vappaa-aika

Synonymer och motsatsord på meänkieli

Använda kontextledtrådar för att förstå nya ord

Tematiskt ordförråd: Skapa en egen ordbok

Känslor, åsikter och ordkunskap på meänkieli

What Are Key Ideas in a Text?

Separating Important Details From Less Important Details

Identifying Key Details That Support the Topic

Finding the Main Idea Using Key Details

Combining Information From Two Parts of a Text

Creating New Ideas by Combining What You Read

Synthesizing Information From Pictures and Words

Reading Comprehension: Evaluating Key Ideas and Synthesizing

Enkla kapitelböcker: Följa en längre handling

Känslor och relationer hos sagofigurer

Enkla texter om romska högtider och firanden

Magiska föremål och hjälpare i traditionella sagor

Jämföra två olika berättelser med liknande tema

Dramatisera en saga med röst och rörelse

Hitta på ett eget slut på berättelsen

Sagofördjupning, tolkning och eget skapande

Lectura en eco y modelado de lectura fluida

Lectura coral de rimas y retahílas

Respeto de la pausa del punto en la lectura oral

Lectura con entonación de preguntas y exclamaciones

Lectura autónoma de microtextos con apoyo visual

Fluidez lectora y expresión oral

Skillnaden mellan saga och faktatext

Faktatextens delar: Rubrik, bild och bildtext

Läsa enkla faktatexter om djur och natur

Läsa fakta om kroppen och hälsan

Läsa enkla instruktioner och recept steg för steg

Faktatexter om romsk historia och traditioner

Läsa och förstå enkla faktatexter

OGE.3.RL.1

Aligned learning resources

Related diagrams