<!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>Topic to Focused Questions</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;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    /* Header Banner */
    .banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fffbeb;
      border: 1.5px solid #fef3c7;
      border-radius: 12px;
      padding: 8px 14px;
    }

    .topic-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: #92400e;
    }

    .topic-icon {
      font-size: 20px;
    }

    .arrow-flow {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #d97706;
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
    }

    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
    }

    .inquiry-card {
      border-radius: 14px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
      user-select: none;
    }

    /* How Card Theme */
    .card-how {
      background: #f0fdfa;
      border: 2px solid #ccfbf1;
    }
    .card-how.active, .card-how:hover {
      border-color: #0d9488;
      box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12);
    }

    /* Why Card Theme */
    .card-why {
      background: #faf5ff;
      border: 2px solid #f3e8ff;
    }
    .card-why.active, .card-why:hover {
      border-color: #9333ea;
      box-shadow: 0 4px 12px rgba(147, 51, 234, 0.12);
    }

    /* Badge & Question */
    .badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .badge {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
    }

    .badge-how {
      background: #0d9488;
      color: #ffffff;
    }

    .badge-why {
      background: #9333ea;
      color: #ffffff;
    }

    .tap-hint {
      font-size: 11px;
      font-weight: 500;
      color: #64748b;
    }

    .question-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      color: #0f172a;
    }

    .question-title span {
      padding: 1px 4px;
      border-radius: 4px;
    }

    .card-how .question-title span {
      background: #99f6e4;
      color: #115e59;
    }

    .card-why .question-title span {
      background: #e9d5ff;
      color: #581c87;
    }

    /* Clues / Step List */
    .clues-box {
      background: #ffffff;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      flex: 1;
      justify-content: center;
    }

    .clue-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      padding: 4px 6px;
      border-radius: 6px;
      transition: background-color 0.2s ease;
    }

    .clue-item.highlight {
      background: #f1f5f9;
      color: #0f172a;
    }

    .clue-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .card-how .clue-num {
      background: #ccfbf1;
      color: #0f766e;
    }

    .card-why .clue-num {
      background: #f3e8ff;
      color: #7e22ce;
    }

    .clue-icon {
      font-size: 15px;
      flex-shrink: 0;
    }
  </style>
</head>
<body>

  
  <div class="banner">
    <div class="topic-badge">
      <span class="topic-icon">🐝</span>
      <span>Topic: Honeybees</span>
    </div>
    <div class="arrow-flow">
      <span>Focused Questions</span>
      <span>➔</span>
    </div>
  </div>

  
  <div class="cards-grid">
    
    
    <div class="inquiry-card card-how active" id="cardHow" onclick="selectCard('how')">
      <div class="badge-row">
        <span class="badge badge-how">HOW Question</span>
        <span class="tap-hint">Process</span>
      </div>
      <div class="question-title">
        <span>HOW</span> do bees turn nectar into honey?
      </div>
      <div class="clues-box">
        <div class="clue-item highlight">
          <span class="clue-num">1</span>
          <span class="clue-icon">🌸</span>
          <span>Collect flower nectar</span>
        </div>
        <div class="clue-item">
          <span class="clue-num">2</span>
          <span class="clue-icon">👥</span>
          <span>Pass to hive bees</span>
        </div>
        <div class="clue-item">
          <span class="clue-num">3</span>
          <span class="clue-icon">🪽</span>
          <span>Fan wings to dry</span>
        </div>
      </div>
    </div>

    
    <div class="inquiry-card card-why" id="cardWhy" onclick="selectCard('why')">
      <div class="badge-row">
        <span class="badge badge-why">WHY Question</span>
        <span class="tap-hint">Purpose</span>
      </div>
      <div class="question-title">
        <span>WHY</span> do bees perform the waggle dance?
      </div>
      <div class="clues-box">
        <div class="clue-item highlight">
          <span class="clue-num">✦</span>
          <span class="clue-icon">🧭</span>
          <span>Shows food direction</span>
        </div>
        <div class="clue-item">
          <span class="clue-num">✦</span>
          <span class="clue-icon">📏</span>
          <span>Measures flower distance</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    function selectCard(type) {
      const cardHow = document.getElementById('cardHow');
      const cardWhy = document.getElementById('cardWhy');
      if (type === 'how') {
        cardHow.classList.add('active');
        cardWhy.classList.remove('active');
      } else {
        cardWhy.classList.add('active');
        cardHow.classList.remove('active');
      }
    }
  </script>
</body>
</html>

Forming Focused Research Questions About a Topic

<!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: #ffffff;
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    .topic-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 14px;
      font-weight: 700;
      font-size: 14px;
      color: #0f172a;
    }

    .topic-tag {
      background: #22b7ff;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .rows-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .inquiry-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .inquiry-row.active {
      box-shadow: 0 0 0 2px var(--theme-color);
      background: #ffffff;
    }

    .q-badge {
      flex-shrink: 0;
      width: 64px;
      height: 38px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--theme-bg);
      color: var(--theme-color);
      font-weight: 800;
      font-size: 14px;
      border: 1px solid var(--theme-border);
    }

    .cards-group {
      display: flex;
      gap: 6px;
      flex: 1;
    }

    .tile {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      text-align: center;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .inquiry-row.active .tile {
      background: var(--theme-bg);
      border-color: var(--theme-border);
    }

    .tile-icon {
      font-size: 17px;
      line-height: 1;
    }

    .tile-label {
      font-size: 11px;
      font-weight: 600;
      color: #334155;
      line-height: 1.1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .row-who {
      --theme-color: #6366f1;
      --theme-bg: #eef2ff;
      --theme-border: #c7d2fe;
    }

    .row-how {
      --theme-color: #d97706;
      --theme-bg: #fffbeb;
      --theme-border: #fde68a;
    }

    .row-why {
      --theme-color: #059669;
      --theme-bg: #ecfdf5;
      --theme-border: #a7f3d0;
    }

    .question-display {
      background: #0f172a;
      color: #f8fafc;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 48px;
    }

    .question-prefix {
      color: #38bdf8;
      font-weight: 800;
      flex-shrink: 0;
    }

    .question-text {
      flex: 1;
      color: #f1f5f9;
      line-height: 1.3;
    }

    .nav-controls {
      display: flex;
      justify-content: center;
      gap: 6px;
    }

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

    .nav-btn.active {
      background: #0284c7;
      width: 20px;
      border-radius: 4px;
    }
  </style>
</head>
<body>

  <div class="topic-bar">
    <span>🌳 Our City Park</span>
    <span class="topic-tag">Inquiry Map</span>
  </div>

  <div class="rows-container">
    
    <div class="inquiry-row row-who active" id="row-0" onclick="selectRow(0)">
      <div class="q-badge">WHO</div>
      <div class="cards-group">
        <div class="tile">
          <span class="tile-icon">🏛️</span>
          <span class="tile-label">Mayor</span>
        </div>
        <div class="tile">
          <span class="tile-icon">📐</span>
          <span class="tile-label">Planners</span>
        </div>
        <div class="tile">
          <span class="tile-icon">🔨</span>
          <span class="tile-label">Builders</span>
        </div>
      </div>
    </div>

    
    <div class="inquiry-row row-how" id="row-1" onclick="selectRow(1)">
      <div class="q-badge">HOW</div>
      <div class="cards-group">
        <div class="tile">
          <span class="tile-icon">🗣️</span>
          <span class="tile-label">Town Halls</span>
        </div>
        <div class="tile">
          <span class="tile-icon">🗳️</span>
          <span class="tile-label">Voting</span>
        </div>
        <div class="tile">
          <span class="tile-icon">📋</span>
          <span class="tile-label">Surveys</span>
        </div>
      </div>
    </div>

    
    <div class="inquiry-row row-why" id="row-2" onclick="selectRow(2)">
      <div class="q-badge">WHY</div>
      <div class="cards-group">
        <div class="tile">
          <span class="tile-icon">🍃</span>
          <span class="tile-label">Clean Air</span>
        </div>
        <div class="tile">
          <span class="tile-icon">🏃</span>
          <span class="tile-label">Exercise</span>
        </div>
        <div class="tile">
          <span class="tile-icon">👥</span>
          <span class="tile-label">Gathering</span>
        </div>
      </div>
    </div>
  </div>

  <div class="question-display">
    <span class="question-prefix" id="qPrefix">WHO?</span>
    <span class="question-text" id="qText">Who works together to design and build a new playground?</span>
  </div>

  <div class="nav-controls">
    <button class="nav-btn active" onclick="selectRow(0)" aria-label="Who"></button>
    <button class="nav-btn" onclick="selectRow(1)" aria-label="How"></button>
    <button class="nav-btn" onclick="selectRow(2)" aria-label="Why"></button>
  </div>

  <script>
    const questions = [
      {
        stem: 'WHO?',
        text: 'Who works together to design and build a new playground?'
      },
      {
        stem: 'HOW?',
        text: 'How do citizens share ideas with city leaders before building?'
      },
      {
        stem: 'WHY?',
        text: 'Why are public green spaces important for communities?'
      }
    ];

    let currentIndex = 0;
    let autoTimer = null;

    function selectRow(index, manual = true) {
      currentIndex = index;
      for (let i = 0; i < 3; i++) {
        document.getElementById(`row-${i}`).classList.toggle('active', i === index);
        document.querySelectorAll('.nav-btn')[i].classList.toggle('active', i === index);
      }
      document.getElementById('qPrefix').textContent = questions[index].stem;
      document.getElementById('qText').textContent = questions[index].text;

      if (manual) {
        clearInterval(autoTimer);
        startAutoCycle();
      }
    }

    function startAutoCycle() {
      autoTimer = setInterval(() => {
        currentIndex = (currentIndex + 1) % 3;
        selectRow(currentIndex, false);
      }, 3600);
    }

    startAutoCycle();
  </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">
  <title>Closed vs Focused Inquiry Questions</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

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

    .topic-switcher {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      background: #f1f5f9;
      padding: 4px;
      border-radius: 999px;
      border: 1px solid #e2e8f0;
    }

    .topic-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 999px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .topic-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 650px;
    }

    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    .path-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 10px;
      border: 2px solid #f1f5f9;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
    }

    .path-col.active-col-closed {
      border-color: #f43f5e;
      box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15);
    }

    .path-col.active-col-inquiry {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }

    .header-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 8px;
    }

    .badge-closed {
      background: #ffe4e6;
      color: #e11d48;
    }

    .badge-inquiry {
      background: #dcfce7;
      color: #15803d;
    }

    .question-box {
      width: 100%;
      min-height: 48px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1.3;
    }

    .q-closed {
      background: #fff1f2;
      border: 1px solid #fecdd3;
      color: #9f1239;
    }

    .q-inquiry {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #166534;
    }

    .flow-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 6px 0;
      width: 100%;
    }

    .flow-arrow {
      color: #94a3b8;
      font-size: 14px;
      line-height: 1;
    }

    /* Closed branch result */
    .dead-end-card {
      width: 100%;
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      border-radius: 8px;
      padding: 10px 8px;
      text-align: center;
      margin-top: 4px;
    }

    .dead-end-icon {
      font-size: 20px;
      display: block;
      margin-bottom: 2px;
    }

    .dead-end-ans {
      font-size: 13px;
      font-weight: 700;
      color: #e11d48;
    }

    .dead-end-status {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }

    /* Inquiry branch nodes */
    .discovery-branches {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 4px;
    }

    .discovery-node {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      text-align: left;
    }

    .node-icon {
      font-size: 14px;
      flex-shrink: 0;
    }

    .summary-footer {
      width: 100%;
      max-width: 650px;
      margin-top: 10px;
      padding: 8px 12px;
      background: #f8fafc;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      font-size: 12px;
      color: #475569;
      text-align: center;
      font-weight: 500;
    }

    .summary-footer strong {
      color: #0f172a;
    }
  </style>
</head>
<body>

  
  <div class="topic-switcher">
    <button class="topic-btn active" id="btn-otters" onclick="setTopic('otters')">🦦 Sea Otters</button>
    <button class="topic-btn" id="btn-volcanoes" onclick="setTopic('volcanoes')">🌋 Volcanoes</button>
  </div>

  
  <div class="comparison-grid">
    
    
    <div class="path-col active-col-closed" id="col-closed" onclick="selectCol('closed')">
      <span class="header-badge badge-closed">🚫 Closed Question</span>
      <div class="question-box q-closed" id="q-closed-text">
        "Do otters swim?"
      </div>
      
      <div class="flow-connector">
        <span class="flow-arrow">▼</span>
      </div>

      <div class="dead-end-card">
        <span class="dead-end-icon">🔒</span>
        <div class="dead-end-ans" id="ans-closed-text">Answer: "Yes."</div>
        <div class="dead-end-status">🛑 Dead End (0 New Leads)</div>
      </div>
    </div>

    
    <div class="path-col" id="col-inquiry" onclick="selectCol('inquiry')">
      <span class="header-badge badge-inquiry">🔍 Focused Inquiry</span>
      <div class="question-box q-inquiry" id="q-inquiry-text">
        "How do sea otters use rocks as tools?"
      </div>

      <div class="flow-connector">
        <span class="flow-arrow">▼</span>
      </div>

      <div class="discovery-branches">
        <div class="discovery-node">
          <span class="node-icon">📖</span>
          <span id="node-1">Diet & feeding habits</span>
        </div>
        <div class="discovery-node">
          <span class="node-icon">🎥</span>
          <span id="node-2">Underwater tool footage</span>
        </div>
        <div class="discovery-node">
          <span class="node-icon">💡</span>
          <span id="node-3">Rare animal tool-use facts</span>
        </div>
      </div>
    </div>

  </div>

  
  <div class="summary-footer" id="insight-bar">
    💡 <strong>Inquiry questions</strong> ask <em>How</em> or <em>Why</em> to open multiple paths of research.
  </div>

  <script>
    const data = {
      otters: {
        closedQ: '"Do otters swim?"',
        closedAns: 'Answer: "Yes."',
        inquiryQ: '"How do sea otters use rocks as tools?"',
        nodes: [
          'Diet & feeding habits',
          'Underwater tool footage',
          'Rare animal tool-use facts'
        ]
      },
      volcanoes: {
        closedQ: '"Are volcanoes hot?"',
        closedAns: 'Answer: "Yes."',
        inquiryQ: '"Why do volcanoes erupt with different shapes?"',
        nodes: [
          'Magma thickness & gas',
          'Shield vs composite types',
          'Plate boundary maps'
        ]
      }
    };

    let currentTopic = 'otters';

    function setTopic(topic) {
      currentTopic = topic;
      document.getElementById('btn-otters').classList.toggle('active', topic === 'otters');
      document.getElementById('btn-volcanoes').classList.toggle('active', topic === 'volcanoes');

      const d = data[topic];
      document.getElementById('q-closed-text').textContent = d.closedQ;
      document.getElementById('ans-closed-text').textContent = d.closedAns;
      document.getElementById('q-inquiry-text').textContent = d.inquiryQ;
      document.getElementById('node-1').textContent = d.nodes[0];
      document.getElementById('node-2').textContent = d.nodes[1];
      document.getElementById('node-3').textContent = d.nodes[2];
    }

    function selectCol(type) {
      const colClosed = document.getElementById('col-closed');
      const colInquiry = document.getElementById('col-inquiry');
      const insight = document.getElementById('insight-bar');

      if (type === 'closed') {
        colClosed.classList.add('active-col-closed');
        colInquiry.classList.remove('active-col-inquiry');
        insight.innerHTML = '🚫 <strong>Closed questions</strong> end with a 1-word answer, stopping research.';
      } else {
        colInquiry.classList.add('active-col-inquiry');
        colClosed.classList.remove('active-col-closed');
        insight.innerHTML = '🔍 <strong>Inquiry questions</strong> create multiple research leads to explore.';
      }
    }
  </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%;
    }

    .header-text {
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      text-align: center;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 640px;
    }

    .wonder-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
      position: relative;
    }

    /* Column 1: Purple (WHO) */
    .card-who {
      border: 2px solid #ddd6fe;
      background: #faf5ff;
    }
    .card-who.active {
      box-shadow: 0 0 0 3px #8b5cf6;
    }
    .badge-who {
      background: #8b5cf6;
      color: #ffffff;
    }

    /* Column 2: Teal (HOW) */
    .card-how {
      border: 2px solid #99f6e4;
      background: #f0fdfa;
    }
    .card-how.active {
      box-shadow: 0 0 0 3px #0d9488;
    }
    .badge-how {
      background: #0d9488;
      color: #ffffff;
    }

    /* Column 3: Amber (WHY) */
    .card-why {
      border: 2px solid #fde68a;
      background: #fffbeb;
    }
    .card-why.active {
      box-shadow: 0 0 0 3px #d97706;
    }
    .badge-why {
      background: #d97706;
      color: #ffffff;
    }

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

    .badge {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.05em;
      padding: 3px 12px;
      border-radius: 20px;
      margin-bottom: 8px;
      display: inline-block;
    }

    .subtext {
      font-size: 12px;
      line-height: 1.35;
      color: #475569;
      font-weight: 500;
      margin-bottom: 10px;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .example-box {
      width: 100%;
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 6px;
      font-size: 11px;
      line-height: 1.3;
      font-weight: 600;
      color: #1e293b;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .example-label {
      font-size: 10px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    @media (max-width: 480px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .wonder-card {
        padding: 10px 12px;
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: 10px;
      }
      .subtext {
        min-height: auto;
        justify-content: flex-start;
        font-size: 12px;
        margin-bottom: 4px;
      }
      .icon-box {
        margin-bottom: 0;
        font-size: 24px;
      }
      .badge {
        margin-bottom: 4px;
      }
      .card-content {
        flex: 1;
      }
      .example-box {
        margin-top: 4px;
      }
    }
  </style>
</head>
<body>

  <div class="header-text">The Three Wonder Words</div>

  <div class="grid">
    
    <div class="wonder-card card-who active" onclick="selectCard(0)">
      <div class="icon-box">👥</div>
      <div class="card-content">
        <div class="badge badge-who">WHO</div>
        <div class="subtext">Investigates people, leaders, or living organisms.</div>
        <div class="example-box">
          <div class="example-label">Example</div>
          "Who in our town designs bike paths?"
        </div>
      </div>
    </div>

    
    <div class="wonder-card card-how" onclick="selectCard(1)">
      <div class="icon-box">⚙️</div>
      <div class="card-content">
        <div class="badge badge-how">HOW</div>
        <div class="subtext">Investigates steps, actions, and how things work.</div>
        <div class="example-box">
          <div class="example-label">Example</div>
          "How do desert cacti store water?"
        </div>
      </div>
    </div>

    
    <div class="wonder-card card-why" onclick="selectCard(2)">
      <div class="icon-box">💡</div>
      <div class="card-content">
        <div class="badge badge-why">WHY</div>
        <div class="subtext">Investigates causes, reasons, and purposes.</div>
        <div class="example-box">
          <div class="example-label">Example</div>
          "Why do leaves change color in autumn?"
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectCard(index) {
      const cards = document.querySelectorAll('.wonder-card');
      cards.forEach((card, i) => {
        if (i === index) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

Läsa och tolka texter från olika medier

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)

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

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

Gathering Information From Print and Digital Sources

Asking an Expert: Gathering Information from Classroom Interviews

Recording Observations and Personal Experiences in Field Notes

Taking Notes and Paraphrasing Facts in Your Own Words

Citing Sources with Simple Bibliographies and Acknowledgments

Synthesizing Findings into a Multi-Paragraph Research Report

Shared Inquiry and Research Reports

Uttrycka känslor, kunskaper och åsikter med varierat ordförråd

Synonymer, antonymer och nyansskillnader mellan ord

Ordens värdeladdning: Positiva och negativa konnotationer

Bildspråk: Metaforer och liknelser i romani chib

Idiomatiska uttryck och ordspråk i romani chib

Digitala lexikon och grammatiska uppslagsverk

Romani chib: Ordkunskap, stilistik och bildspråk

Las partes del libro: portada, contraportada, título y autor

Para qué sirve el índice y los números de página

Lectura y función del afiche escolar

Las tarjetas de invitación y felicitación

La carta y el mensaje a un amigo

Las notas y los recados en la nevera o el tablero

Exploración de libros y mensajes sociales

Använda digitala och tryckta ordböcker på meänkieli

Digitala hjälpmedel för stavningskontroll och översättning

Informationssökning i barnanpassade källor

Källkritik för unga: vem har skrivit och varför

Skapa en egen ordlista eller begreppskarta

Ordförrådets bredd: ordval för olika sammanhang

Språkliga verktyg, informationssökning och källkritik

Lyssna efter nyckelord och betydelsebärande ord

Använda förförståelse vid lyssnande

Lyssna på enkla muntliga instruktioner

Lyssna på upplästa sagor och berättelser

Uppfatta tonfall och känslor i talat språk

Lyssna på barnradio och poddar på meänkieli

Grundläggande hörförståelse på meänkieli

Sortera viktig och oviktig information vid lyssnande

Lyssna på olika dialekter och uttal av meänkieli

Anteckna och rita medan man lyssnar

Återge information från en muntlig berättare

Lyssna aktivt utan att avbryta

Lyssna och svara på frågor om en dialog

Aktivt lyssnande och bearbetning på meänkieli

Hitta i böcker, innehållsförteckningar och register

Hitta enkel fakta på anvisade webbsidor

Använda sökt information i en egen text

Samla information från muntliga berättelser och intervjuer

Använda information från muntliga källor i samtal

Välja ut passande information ur ett begränsat urval

Jämföra fakta från två olika skriftliga källor

Enkel källkritik: Vem har skrivit texten och varför?

Hänvisa till källor i tal och skrift

Kombinera fakta från text och samtal i ett mini-projekt

Organisationer som främjar romani chib och romsk kultur

Informationssökning i källor

What Is a Shared Research Project?

Reading Several Books on One Topic to Write a Report

Writing Down What You Observe in Science

Remembering What You Know to Answer Questions

Finding Information From Books and Other Sources

Writing a Short Report From Your Research

Research Projects and Gathering Information

Hitta information i en enkel faktabok

Använda bildtexter och faktarutor för att hitta svar

Söka enkla fakta på en anvisad barnwebbplats

Hämta kunskap från en intervju eller muntlig berättelse

Använda information från en film eller ljudklipp

Söka information i olika källor

Skilja på fakta och egna åsikter

Fundera på vem som har skrivit eller berättat texten

Använda insamlad fakta i en egen text

Berätta vilken källa man har använt

Upptäcka om en bild eller text verkar orimlig

Sortera insamlade fakta med stödstrukturer

Jämföra information från två olika källor

Källkritik och att använda fakta

Ord och begrepp för att uttrycka känslor

Ord och begrepp för att uttrycka kunskaper och åsikter

Ordens nyanser och värdeladdning

Kulturella ord och begrepp i meänkieli

Släktskap och närmiljö: ord med kulturell förankring

Formuleringar för att inleda och avsluta samtal och texter

Inleda och avsluta berättelser och redovisningar

Likheter och skillnader mellan talad och skriven meänkieli

Söka enkel information i muntliga källor

Använda muntlig information i eget tal och samspel

Ordförråd, språkbruk och samtalskonst

Definir para quién escribo y qué quiero contar

Buscar información haciendo preguntas a familiares y amigos

Buscar ideas en libros ilustrados y revistas escolares

Organizar un plan con dibujos y palabras clave

Planificación antes de escribir: audiencia, ideas y esquemas

Söka fakta i muntliga källor och intervjuer

Använda muntlig fakta i egna presentationer och diskussioner

Romani chibs rötter och historiska spridning

Romers villkor i relation till majoritetssamhället

Romskt kulturarv: Musik, hantverk och estetiska uttryck

Kulturarvets bevarande och nyskapande i dag

Aktuella samhällsfrågor som berör romer

Jämföra aktuella samhällsfrågor mellan nationella minoriteter

Romani chibs historia, kulturarv och samhällsfrågor

OGE.3.W.6

OGE.3.W.6

Aligned learning resources

Related diagrams