<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Formula Header Cards */
    .formula-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .formula-step {
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      cursor: pointer;
      transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      border: 2px solid transparent;
      opacity: 0.45;
    }
    .formula-step.active {
      opacity: 1;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    .step-hook { background: #fef8e8; border-color: #f59e0b; }
    .step-bridge { background: #f0fdfa; border-color: #0d9488; }
    .step-thesis { background: #eff6ff; border-color: #2563eb; }

    .step-num {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .step-hook .step-num { color: #d97706; }
    .step-bridge .step-num { color: #0d9488; }
    .step-thesis .step-num { color: #2563eb; }

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

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .badge-hook { background: #fde68a; color: #92400e; }
    .badge-bridge { background: #99f6e4; color: #115e59; }
    .badge-thesis { background: #bfdbfe; color: #1e40af; }

    /* Assembled Output Box */
    .assembly-zone {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 190px;
    }

    .zone-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .sentence-block {
      border-radius: 6px;
      padding: 8px 10px;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 500;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      transition: all 0.3s ease;
      opacity: 0.2;
      background: #ffffff;
      border-left: 4px solid #cbd5e1;
    }

    .sentence-block.highlight {
      opacity: 1;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .sentence-block.hook-block.highlight {
      border-left-color: #f59e0b;
      background: #fffdf5;
    }
    .sentence-block.bridge-block.highlight {
      border-left-color: #0d9488;
      background: #f4fbf9;
    }
    .sentence-block.thesis-block.highlight {
      border-left-color: #2563eb;
      background: #f5f8ff;
    }

    .tag-pill {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      flex-shrink: 0;
      margin-top: 1px;
    }

    /* Controls */
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn.active-btn {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .play-btn {
      padding: 6px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }
  </style>
</head>
<body>

  
  <div class="formula-row">
    <div class="formula-step step-hook active" id="card-0" onclick="setStep(0)">
      <span class="step-num">Step 1</span>
      <span class="step-title">🪝 Hook</span>
      <span class="badge badge-hook">Startle or Involve</span>
    </div>
    <div class="formula-step step-bridge" id="card-1" onclick="setStep(1)">
      <span class="step-num">Step 2</span>
      <span class="step-title">🌉 Bridge</span>
      <span class="badge badge-bridge">Connect to Topic</span>
    </div>
    <div class="formula-step step-thesis" id="card-2" onclick="setStep(2)">
      <span class="step-num">Step 3</span>
      <span class="step-title">🎯 Thesis</span>
      <span class="badge badge-thesis">Claim + Reasons</span>
    </div>
  </div>

  
  <div class="assembly-zone">
    <div class="zone-label">
      <span>Assembled Introduction</span>
      <span id="step-counter" style="color: #64748b; font-weight:600;">Step 1 of 3</span>
    </div>

    <div class="sentence-block hook-block highlight" id="block-0">
      <span class="tag-pill badge-hook">Hook</span>
      <span>"If you felt exhausted this morning, you are not alone."</span>
    </div>

    <div class="sentence-block bridge-block" id="block-1">
      <span class="tag-pill badge-bridge">Bridge</span>
      <span>"Our district schedules classes earlier than almost any other state."</span>
    </div>

    <div class="sentence-block thesis-block" id="block-2">
      <span class="tag-pill badge-thesis">Thesis</span>
      <span>"Moving middle school start times to 8:30 AM will improve grades, lower depression, and reduce morning car accidents."</span>
    </div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button class="btn active-btn" id="btn-0" onclick="setStep(0)">1. Hook</button>
      <button class="btn" id="btn-1" onclick="setStep(1)">2. Bridge</button>
      <button class="btn" id="btn-2" onclick="setStep(2)">3. Thesis</button>
      <button class="btn" id="btn-3" onclick="setStep(3)">✦ Full Intro</button>
    </div>
    <button class="btn play-btn" id="play-toggle" onclick="toggleAutoPlay()" title="Toggle Auto-Play">⏸</button>
  </div>

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

    function render() {
      // Update top cards
      for (let i = 0; i < 3; i++) {
        const card = document.getElementById(`card-${i}`);
        if (currentStep === 3 || currentStep === i) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      }

      // Update sentence blocks
      for (let i = 0; i < 3; i++) {
        const block = document.getElementById(`block-${i}`);
        if (currentStep === 3 || currentStep >= i) {
          block.classList.add('highlight');
        } else {
          block.classList.remove('highlight');
        }
      }

      // Update buttons
      for (let i = 0; i <= 3; i++) {
        const btn = document.getElementById(`btn-${i}`);
        if (i === currentStep) {
          btn.classList.add('active-btn');
        } else {
          btn.classList.remove('active-btn');
        }
      }

      // Counter text
      const counter = document.getElementById('step-counter');
      if (currentStep === 3) {
        counter.textContent = "Complete Formula ✓";
      } else {
        counter.textContent = `Step ${currentStep + 1} of 3`;
      }
    }

    function setStep(step) {
      currentStep = step;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      render();
    }

    function toggleAutoPlay() {
      isPlaying = !isPlaying;
      const playBtn = document.getElementById('play-toggle');
      if (isPlaying) {
        playBtn.textContent = '⏸';
        startTimer();
      } else {
        playBtn.textContent = '▶';
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        nextStep();
      }, 3200);
    }

    // Initialize
    render();
    startTimer();
  </script>
</body>
</html>

Structuring Focused Oral Presentations with Compelling Introductions and Conclusions

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

    body {
      width: 100%;
      min-height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px 10px;
    }

    .diagram-stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    /* Central Bookend Connection Badge */
    .center-badge {
      position: absolute;
      width: 32%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background: #ffffff;
      border: 2px dashed #94a3b8;
      box-shadow: 0 4px 14px rgba(30, 41, 69, 0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px;
      z-index: 2;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .center-badge.matched {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.25);
    }

    .center-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }

    .center-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.15;
    }

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

    /* Step Cards positioned around circle */
    .step-node {
      position: absolute;
      width: 42%;
      background: #ffffff;
      border-radius: 12px;
      padding: 8px 10px;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.08);
      border: 2px solid rgba(0, 0, 0, 0);
      cursor: pointer;
      z-index: 3;
      user-select: none;
      transition: box-shadow 0.3s ease, background-color 0.3s ease;
    }

    .step-node.node-1 { top: 3%; left: 50%; transform: translateX(-50%); }
    .step-node.node-2 { top: 50%; right: 1%; transform: translateY(-50%); }
    .step-node.node-3 { bottom: 3%; left: 50%; transform: translateX(-50%); }
    .step-node.node-4 { top: 50%; left: 1%; transform: translateY(-50%); }

    .step-node.active {
      box-shadow: 0 0 0 3px #22b7ff, 0 8px 20px rgba(34, 183, 255, 0.25);
      background: #f0f9ff;
    }

    .node-header {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 3px;
    }

    .node-num {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #475569;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .step-node.active .node-num {
      background: #22b7ff;
      color: #ffffff;
    }

    .node-title {
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .node-desc {
      font-size: 11px;
      color: #64748b;
      line-height: 1.2;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 6px;
      width: 100%;
    }

    .btn-ctrl {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .dots-container {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.25s ease, transform 0.25s ease;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.25);
    }

    /* Track SVG styling */
    .track-bg {
      fill: none;
      stroke: #e2e8f0;
      stroke-width: 6;
    }

    .track-active {
      fill: none;
      stroke: #22b7ff;
      stroke-width: 6;
      stroke-linecap: round;
      transition: stroke-dasharray 0.4s ease, stroke-dashoffset 0.4s ease;
    }

    .connector-line {
      stroke: #0284c7;
      stroke-width: 2;
      stroke-dasharray: 4 4;
    }
  </style>
</head>
<body>

  <div class="diagram-stage">
    
    <svg class="loop-svg" viewBox="0 0 360 360">
      
      <circle cx="180" cy="180" r="115" class="track-bg" />
      
      
      <circle id="trackProgress" cx="180" cy="180" r="115" class="track-active"
        stroke-dasharray="180 722" stroke-dashoffset="180" transform="rotate(-90 180 180)" />

      
      <polygon points="295,170 302,185 288,185" fill="#0284c7" />
      <polygon points="185,295 170,302 170,288" fill="#0284c7" />
      <polygon points="65,190 58,175 72,175" fill="#0284c7" />
      <polygon points="175,65 190,58 190,72" fill="#0284c7" />

      
      <path d="M 110 110 Q 180 140 180 180" fill="none" class="connector-line" />
    </svg>

    
    <div class="center-badge" id="centerBadge">
      <div class="center-icon">📚</div>
      <div class="center-title">Bookend Clasp</div>
      <div class="center-sub">Hook ↔ Call to Action</div>
    </div>

    
    <div class="step-node step node-1 active" data-step="0">
      <div class="node-header">
        <span class="node-num">1</span>
        <span class="node-title">⏰ Opening Hook</span>
      </div>
      <div class="node-desc">Alarm clock story</div>
    </div>

    
    <div class="step-node step node-2" data-step="1">
      <div class="node-header">
        <span class="node-num">2</span>
        <span class="node-title">💡 Body Points</span>
      </div>
      <div class="node-desc">Evidence & data</div>
    </div>

    
    <div class="step-node step node-3" data-step="2">
      <div class="node-header">
        <span class="node-num">3</span>
        <span class="node-title">🔄 Synthesis</span>
      </div>
      <div class="node-desc">Connecting ideas</div>
    </div>

    
    <div class="step-node step node-4" data-step="3">
      <div class="node-header">
        <span class="node-num">4</span>
        <span class="node-title">🎯 Bookend & CTA</span>
      </div>
      <div class="node-desc">6 AM alarm + Petition</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-ctrl" id="playBtn"><span id="playIcon">⏸</span> Pause</button>
    <div class="dots-container">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
    <button class="btn-ctrl" id="nextBtn">Next →</button>
  </div>

  <script>
    const steps = $$('.step');
    const dots = $$('.dot');
    const track = $('#trackProgress');
    const centerBadge = $('#centerBadge');
    const playBtn = $('#playBtn');
    const playIcon = $('#playIcon');
    const nextBtn = $('#nextBtn');

    // Circumference = 2 * PI * 115 ≈ 722.5
    const dashStates = [
      "180 722", // Step 1: ~1/4 circle
      "360 722", // Step 2: ~2/4 circle
      "540 722", // Step 3: ~3/4 circle
      "723 722"  // Step 4: full loop closed
    ];

    const player = new StepPlayer('.step', {
      interval: 3200,
      onChange: (index) => {
        // Update track dash
        track.setAttribute('stroke-dasharray', dashStates[index]);

        // Update indicator dots
        dots.forEach((d, i) => {
          d.classList.toggle('active', i === index);
        });

        // Glow center clasp when loop completes at bookend (Step 4) or start (Step 1)
        centerBadge.classList.toggle('matched', index === 3 || index === 0);
      }
    });

    player.start();

    // Wire dots and nodes for interaction
    dots.forEach((dot, idx) => {
      onTap(dot, () => {
        player.goTo(idx);
        player.pause();
        updatePlayBtn();
      });
    });

    steps.forEach((node, idx) => {
      onTap(node, () => {
        player.goTo(idx);
        player.pause();
        updatePlayBtn();
      });
    });

    function updatePlayBtn() {
      if (player.playing) {
        playIcon.textContent = '⏸';
        playBtn.innerHTML = '<span id="playIcon">⏸</span> Pause';
      } else {
        playIcon.textContent = '▶';
        playBtn.innerHTML = '<span id="playIcon">▶</span> Play';
      }
    }

    onTap(playBtn, () => {
      player.toggle();
      updatePlayBtn();
    });

    onTap(nextBtn, () => {
      player.next();
      player.pause();
      updatePlayBtn();
    });
  </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 {
      width: 100%;
      min-height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    .diagram-area {
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .svg-container {
      width: 100%;
      position: relative;
    }

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

    .section-shape {
      cursor: pointer;
      transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
      stroke-width: 2.5px;
    }

    .section-shape.inactive {
      fill: #f1f5f9;
      stroke: #cbd5e1;
    }

    .section-shape.active {
      fill: #e0f2fe;
      stroke: #22b7ff;
      filter: drop-shadow(0 4px 8px rgba(34, 183, 255, 0.25));
    }

    .sec-title {
      font-size: 15px;
      font-weight: 700;
      fill: #1e2945;
      pointer-events: none;
      user-select: none;
      transition: fill 0.25s ease;
    }

    .sec-sub {
      font-size: 11.5px;
      font-weight: 500;
      fill: #64748b;
      pointer-events: none;
      user-select: none;
    }

    .active-text {
      fill: #0369a1 !important;
    }

    .info-panel {
      min-height: 58px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: border-color 0.25s ease, background 0.25s ease;
    }

    .info-panel.highlight {
      border-color: #22b7ff;
      background: #f0f9ff;
    }

    .info-icon {
      font-size: 20px;
      line-height: 1;
      flex-shrink: 0;
    }

    .info-text {
      font-size: 13.5px;
      line-height: 1.35;
      font-weight: 600;
      color: #1e2945;
    }

    .width-guide {
      font-size: 10px;
      font-weight: 600;
      fill: #94a3b8;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

<div class="diagram-area">
  <div class="svg-container">
    <svg viewBox="0 0 360 260" preserveAspectRatio="xMidYMid meet">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#94a3b8"/>
        </marker>
      </defs>

      
      <line x1="20" y1="12" x2="340" y2="12" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
      <text x="180" y="9" text-anchor="middle" class="width-guide">BROAD CONTEXT</text>

      <line x1="105" y1="130" x2="255" y2="130" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
      <text x="54" y="133" text-anchor="middle" class="width-guide">FOCUSED</text>

      <line x1="20" y1="248" x2="340" y2="248" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3,3" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
      <text x="180" y="257" text-anchor="middle" class="width-guide">BROAD IMPACT</text>

      
      <g id="sec-intro" class="section-group" onclick="selectSection(0)" onmouseenter="selectSection(0)">
        <polygon id="poly-intro" class="section-shape active" points="24,20 336,20 236,92 124,92" rx="10"/>
        <text id="title-intro" x="180" y="48" text-anchor="middle" class="sec-title active-text">Introduction</text>
        <text x="180" y="68" text-anchor="middle" class="sec-sub">Hook &amp; Thesis</text>
      </g>

      
      <g id="sec-body" class="section-group" onclick="selectSection(1)" onmouseenter="selectSection(1)">
        <rect id="poly-body" class="section-shape inactive" x="124" y="98" width="112" height="64" rx="8"/>
        <text id="title-body" x="180" y="128" text-anchor="middle" class="sec-title">Body Points</text>
        <text x="180" y="146" text-anchor="middle" class="sec-sub">Evidence &amp; Stories</text>
      </g>

      
      <g id="sec-concl" class="section-group" onclick="selectSection(2)" onmouseenter="selectSection(2)">
        <polygon id="poly-concl" class="section-shape inactive" points="124,168 236,168 336,240 24,240"/>
        <text id="title-concl" x="180" y="198" text-anchor="middle" class="sec-title">Conclusion</text>
        <text x="180" y="218" text-anchor="middle" class="sec-sub">Summary &amp; Call to Action</text>
      </g>
    </svg>
  </div>

  <div id="infoPanel" class="info-panel highlight">
    <span id="infoIcon" class="info-icon">🎯</span>
    <span id="infoText" class="info-text">Grabs audience attention broad, then sharpens to core message</span>
  </div>
</div>

<script>
  const data = [
    {
      icon: "🎯",
      text: "Start broad to grab attention, then narrow sharply to your thesis."
    },
    {
      icon: "🔍",
      text: "Stay tightly focused on concrete points, evidence, and concise stories."
    },
    {
      icon: "🚀",
      text: "Recap your core thesis and expand back out to broad real-world impact."
    }
  ];

  const shapes = [
    document.getElementById('poly-intro'),
    document.getElementById('poly-body'),
    document.getElementById('poly-concl')
  ];

  const titles = [
    document.getElementById('title-intro'),
    document.getElementById('title-body'),
    document.getElementById('title-concl')
  ];

  const infoPanel = document.getElementById('infoPanel');
  const infoIcon = document.getElementById('infoIcon');
  const infoText = document.getElementById('infoText');

  function selectSection(index) {
    shapes.forEach((shape, i) => {
      if (i === index) {
        shape.classList.remove('inactive');
        shape.classList.add('active');
        titles[i].classList.add('active-text');
      } else {
        shape.classList.remove('active');
        shape.classList.add('inactive');
        titles[i].classList.remove('active-text');
      }
    });

    infoIcon.textContent = data[index].icon;
    infoText.textContent = data[index].text;
    infoPanel.classList.add('highlight');
  }
</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: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
      -webkit-user-select: none;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }

    .title-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #6b7280;
    }

    .hint-text {
      font-size: 12px;
      color: #6b7280;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

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

    .hook-card {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 14px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      position: relative;
    }

    .hook-card:hover {
      border-color: #cbd5e1;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.06);
    }

    .hook-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    .card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .strategy-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .icon-badge {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
      transition: background-color 0.2s ease;
    }

    .hook-card.active .icon-badge {
      background: #e0f2fe;
    }

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

    .type-pill {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 2px 6px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #64748b;
    }

    .hook-card.active .type-pill {
      background: #bae6fd;
      color: #0369a1;
    }

    .quote-box {
      font-size: 13.5px;
      line-height: 1.35;
      color: #334155;
      font-style: italic;
      padding: 8px 10px;
      background: #f8fafc;
      border-radius: 8px;
      border-left: 3px solid #cbd5e1;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .hook-card.active .quote-box {
      background: #ffffff;
      border-left-color: #22b7ff;
      color: #0f172a;
      font-weight: 500;
    }

    .action-goal {
      font-size: 11.5px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .hook-card.active .action-goal {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="header">
    <span class="title-tag">4 Opening Hook Types</span>
    <span class="hint-text">Tap to select</span>
  </div>

  <div class="grid">
    
    <div class="hook-card active" onclick="selectCard(this)">
      <div class="card-top">
        <div class="strategy-info">
          <div class="icon-badge">⚡</div>
          <span class="strategy-name">Shocking Stat</span>
        </div>
        <span class="type-pill">Data</span>
      </div>
      <div class="quote-box">
        "68% of teens are sleep-deprived right now."
      </div>
      <div class="action-goal">
        <span>✦</span> Jolts audience with unexpected facts
      </div>
    </div>

    
    <div class="hook-card" onclick="selectCard(this)">
      <div class="card-top">
        <div class="strategy-info">
          <div class="icon-badge">📖</div>
          <span class="strategy-name">Mini-Story</span>
        </div>
        <span class="type-pill">Narrative</span>
      </div>
      <div class="quote-box">
        "At 6:00 AM, my alarm went off, and I walked into a wall."
      </div>
      <div class="action-goal">
        <span>✦</span> Connects through relatable humor
      </div>
    </div>

    
    <div class="hook-card" onclick="selectCard(this)">
      <div class="card-top">
        <div class="strategy-info">
          <div class="icon-badge">❓</div>
          <span class="strategy-name">Provocative Question</span>
        </div>
        <span class="type-pill">Curiosity</span>
      </div>
      <div class="quote-box">
        "What if school started two hours later?"
      </div>
      <div class="action-goal">
        <span>✦</span> Sparks active imagination & wonder
      </div>
    </div>

    
    <div class="hook-card" onclick="selectCard(this)">
      <div class="card-top">
        <div class="strategy-info">
          <div class="icon-badge">🎯</div>
          <span class="strategy-name">Bold Challenge</span>
        </div>
        <span class="type-pill">Action</span>
      </div>
      <div class="quote-box">
        "Put your phone in another room tonight."
      </div>
      <div class="action-goal">
        <span>✦</span> Demands immediate personal investment
      </div>
    </div>
  </div>

  <script>
    function selectCard(element) {
      document.querySelectorAll('.hook-card').forEach(card => {
        card.classList.remove('active');
      });
      element.classList.add('active');
    }
  </script>
</body>
</html>

OGE.9.SL.5

Aligned learning resources

Related diagrams