<!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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      width: 100%;
      height: 100%;
      background: #fafbfc;
      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;
      user-select: none;
    }

    .board {
      position: relative;
      width: 100%;
      max-width: 360px;
      height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lines-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .center-hub {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 104px;
      height: 104px;
      background: #ffffff;
      border: 2px solid #fed7aa;
      border-radius: 50%;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 2;
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .center-hub:active {
      transform: translate(-50%, -50%) scale(0.96);
    }

    .hub-icons {
      font-size: 32px;
      line-height: 1.1;
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .hub-label {
      font-size: 11px;
      font-weight: 700;
      color: #9a3412;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .note {
      position: absolute;
      width: 114px;
      background: #ffffff;
      border-radius: 10px;
      padding: 7px 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1.5px solid transparent;
      cursor: pointer;
      z-index: 3;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .note.active {
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    /* Positions around 360x360 board */
    .note-who   { top: 12px;  left: 10px; }
    .note-what  { top: 142px; left: 8px; }
    .note-where { bottom: 12px; left: 10px; }
    .note-when  { top: 12px;  right: 10px; }
    .note-why   { top: 142px; right: 8px; }
    .note-how   { bottom: 12px; right: 10px; }

    .tag {
      align-self: flex-start;
      font-size: 10px;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 4px;
      letter-spacing: 0.4px;
    }

    .tag-who   { background: #f3e8ff; color: #7e22ce; }
    .tag-what  { background: #e0f2fe; color: #0369a1; }
    .tag-where { background: #dcfce7; color: #15803d; }
    .tag-when  { background: #fef3c7; color: #b45309; }
    .tag-why   { background: #ffe4e6; color: #be123c; }
    .tag-how   { background: #ccfbf1; color: #0f766e; }

    .note.active.note-who   { border-color: #a855f7; }
    .note.active.note-what  { border-color: #0284c7; }
    .note.active.note-where { border-color: #22c55e; }
    .note.active.note-when  { border-color: #f59e0b; }
    .note.active.note-why   { border-color: #f43f5e; }
    .note.active.note-how   { border-color: #14b8a6; }

    .note-text {
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      line-height: 1.25;
    }

    .line-path {
      stroke-width: 1.5;
      stroke-dasharray: 4, 4;
      fill: none;
      transition: stroke 0.25s ease, stroke-width 0.25s ease;
    }

    .line-who   { stroke: #d8b4fe; }
    .line-what  { stroke: #7dd3fc; }
    .line-where { stroke: #86efac; }
    .line-when  { stroke: #fde047; }
    .line-why   { stroke: #fda4af; }
    .line-how   { stroke: #5eead4; }

    .line-path.active {
      stroke-width: 2.5;
      stroke-dasharray: none;
    }
  </style>
</head>
<body>

  <div class="board">
    
    <svg class="lines-svg" viewBox="0 0 360 360">
      <path id="line-who"   class="line-path line-who active"   d="M 120 46 C 145 65, 150 130, 180 180" />
      <path id="line-what"  class="line-path line-what"  d="M 122 170 C 145 172, 155 178, 180 180" />
      <path id="line-where" class="line-path line-where" d="M 120 314 C 145 295, 150 230, 180 180" />
      <path id="line-when"  class="line-path line-when"  d="M 240 46 C 215 65, 210 130, 180 180" />
      <path id="line-why"   class="line-path line-why"   d="M 238 170 C 215 172, 205 178, 180 180" />
      <path id="line-how"   class="line-path line-how"   d="M 240 314 C 215 295, 210 230, 180 180" />
    </svg>

    
    <div class="center-hub" id="hub">
      <div class="hub-icons">🐝🌸</div>
      <div class="hub-label">Inquiry</div>
    </div>

    
    <div class="note note-who active" data-index="0">
      <span class="tag tag-who">WHO</span>
      <span class="note-text">lives inside?</span>
    </div>

    <div class="note note-what" data-index="1">
      <span class="tag tag-what">WHAT</span>
      <span class="note-text">is nectar?</span>
    </div>

    <div class="note note-where" data-index="2">
      <span class="tag tag-where">WHERE</span>
      <span class="note-text">do they nest?</span>
    </div>

    <div class="note note-when" data-index="3">
      <span class="tag tag-when">WHEN</span>
      <span class="note-text">are they active?</span>
    </div>

    <div class="note note-why" data-index="4">
      <span class="tag tag-why">WHY</span>
      <span class="note-text">do they buzz?</span>
    </div>

    <div class="note note-how" data-index="5">
      <span class="tag tag-how">HOW</span>
      <span class="note-text">do they fly?</span>
    </div>
  </div>

  <script>
    const notes = $$('.note');
    const lines = [
      $('#line-who'),
      $('#line-what'),
      $('#line-where'),
      $('#line-when'),
      $('#line-why'),
      $('#line-how')
    ];

    const player = new StepPlayer('.note', {
      interval: 3200,
      onChange: (index) => {
        lines.forEach((line, i) => {
          if (i === index) {
            line.classList.add('active');
          } else {
            line.classList.remove('active');
          }
        });
      }
    });

    notes.forEach((note, index) => {
      onTap(note, () => {
        player.goTo(index);
        player.pause();
      });
    });

    onTap($('#hub'), () => {
      player.next();
    });

    player.start();
  </script>
</body>
</html>

Gathering More Information Through Questions

<!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, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

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

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

    .column {
      background: #ffffff;
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      border: 1.5px solid #e2e8f0;
      position: relative;
    }

    .column.closed {
      border-top: 4px solid #ef4444;
    }

    .column.open {
      border-top: 4px solid #10b981;
    }

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

    .tag-closed {
      background: #fee2e2;
      color: #b91c1c;
    }

    .tag-open {
      background: #d1fae5;
      color: #047857;
    }

    .portal-icon {
      font-size: 32px;
      line-height: 1;
      margin-bottom: 8px;
    }

    .question-box {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      background: #f8fafc;
      border-radius: 8px;
      padding: 8px 10px;
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      border: 1px dashed #cbd5e1;
    }

    .arrow {
      font-size: 14px;
      color: #94a3b8;
      margin-bottom: 8px;
    }

    .outcome-box {
      width: 100%;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-grow: 1;
    }

    .outcome-closed {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
    }

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

    .badge-icon {
      font-size: 24px;
      line-height: 1;
    }

    .answer-text {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.3;
    }

    .sub-result {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .sub-stop {
      background: #ef4444;
      color: #ffffff;
    }

    .sub-learn {
      background: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="column closed">
      <span class="tag tag-closed">Closed Question</span>
      <div class="portal-icon">🚪</div>
      <div class="question-box">"Can sea turtles swim?"</div>
      <div class="arrow">↓</div>
      <div class="outcome-box outcome-closed">
        <div class="badge-icon">🛑</div>
        <div class="answer-text">"Yes."</div>
        <span class="sub-result sub-stop">Dead End</span>
      </div>
    </div>

    
    <div class="column open">
      <span class="tag tag-open">Research Question</span>
      <div class="portal-icon">🪟</div>
      <div class="question-box">"How do sea turtles swim across the ocean?"</div>
      <div class="arrow">↓</div>
      <div class="outcome-box outcome-open">
        <div class="badge-icon">📖 🌊</div>
        <div class="answer-text">"They flap front flippers like wings!"</div>
        <span class="sub-result sub-learn">Opens Learning</span>
      </div>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

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

    @media (max-width: 440px) {
      .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
      }
    }

    .key-card {
      border-radius: 14px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      border: 2px solid transparent;
      transition: box-shadow 0.2s ease, transform 0.15s ease, opacity 0.2s ease;
      position: relative;
    }

    .key-card:active {
      transform: translateY(1px);
    }

    .key-card.active {
      box-shadow: 0 0 0 2.5px #1e2945, 0 4px 12px rgba(0,0,0,0.08);
    }

    /* Pastel Themes */
    .card-who { background: #ffe4e6; border-color: #fecdd3; }
    .card-who .word { color: #e11d48; }

    .card-what { background: #fef3c7; border-color: #fde68a; }
    .card-what .word { color: #d97706; }

    .card-where { background: #dcfce7; border-color: #bbf7d0; }
    .card-where .word { color: #059669; }

    .card-when { background: #e0f2fe; border-color: #bae6fd; }
    .card-when .word { color: #0284c7; }

    .card-why { background: #f3e8ff; border-color: #e9d5ff; }
    .card-why .word { color: #7c3aed; }

    .card-how { background: #e0e7ff; border-color: #c7d2fe; }
    .card-how .word { color: #4338ca; }

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

    .word {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.2px;
      margin-bottom: 3px;
    }

    .finds-label {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      line-height: 1.2;
    }

    .detail-bar {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 48px;
    }

    .detail-text {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
    }

    .detail-example {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      font-style: italic;
    }

    .badge {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
      background: #e2e8f0;
      color: #475569;
      white-space: nowrap;
    }
  </style>
</head>
<body>

  <div class="grid" id="cardGrid">
    <div class="key-card card-who active" data-word="Who" data-target="Person or Creature" data-q="Who made this?">
      <div class="icon-wrap">👤</div>
      <div class="word">Who</div>
      <div class="finds-label">Person / Creature</div>
    </div>

    <div class="key-card card-what" data-word="What" data-target="Thing or Action" data-q="What is it made of?">
      <div class="icon-wrap">🔍</div>
      <div class="word">What</div>
      <div class="finds-label">Thing / Action</div>
    </div>

    <div class="key-card card-where" data-word="Where" data-target="Location or Place" data-q="Where was it found?">
      <div class="icon-wrap">📍</div>
      <div class="word">Where</div>
      <div class="finds-label">Place / Location</div>
    </div>

    <div class="key-card card-when" data-word="When" data-target="Time or Season" data-q="When was it built?">
      <div class="icon-wrap">⏰</div>
      <div class="word">When</div>
      <div class="finds-label">Time / Season</div>
    </div>

    <div class="key-card card-why" data-word="Why" data-target="Reason or Cause" data-q="Why is it shiny?">
      <div class="icon-wrap">💡</div>
      <div class="word">Why</div>
      <div class="finds-label">Reason / Cause</div>
    </div>

    <div class="key-card card-how" data-word="How" data-target="Process or Way" data-q="How did they build it?">
      <div class="icon-wrap">⚙️</div>
      <div class="word">How</div>
      <div class="finds-label">Process / Way</div>
    </div>
  </div>

  <div class="detail-bar" id="detailBar">
    <div>
      <span class="detail-text" id="targetLabel">Finds a person or creature:</span>
      <span class="detail-example" id="exampleLabel">"Who made this?"</span>
    </div>
    <span class="badge" id="keyBadge">WHO KEY</span>
  </div>

  <script>
    const cards = document.querySelectorAll('.key-card');
    const targetLabel = document.getElementById('targetLabel');
    const exampleLabel = document.getElementById('exampleLabel');
    const keyBadge = document.getElementById('keyBadge');

    cards.forEach(card => {
      card.addEventListener('click', () => {
        cards.forEach(c => c.classList.remove('active'));
        card.classList.add('active');

        const word = card.getAttribute('data-word');
        const target = card.getAttribute('data-target');
        const q = card.getAttribute('data-q');

        targetLabel.textContent = `Finds ${target.toLowerCase()}: `;
        exampleLabel.textContent = `"${q}"`;
        keyBadge.textContent = `${word.toUpperCase()} KEY`;
      });
    });
  </script>
</body>
</html>

OGE.2.W.7

Aligned learning resources

Related diagrams