<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }

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

    /* Sentence Card Container */
    .sentence-card {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px 16px 20px;
    }

    .sentence-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      row-gap: 14px;
      text-align: center;
    }

    /* Question Starter Highlight (Yellow) */
    .starter-box {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fef08a;
      border: 2px solid #eab308;
      color: #854d0e;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      flex-shrink: 0;
    }

    .starter-label {
      position: absolute;
      top: -19px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 1px 6px;
      border-radius: 4px;
      background: #fef9c3;
      color: #854d0e;
      border: 1px solid #facc15;
    }

    .sentence-words {
      font-size: 20px;
      font-weight: 600;
      line-height: 1.2;
      color: #334155;
    }

    /* Group question mark and rising pitch indicator together */
    .end-group {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* Question Mark Highlight (Blue) */
    .mark-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #dbeafe;
      border: 2px solid #3b82f6;
      color: #1d4ed8;
      width: 32px;
      height: 34px;
      border-radius: 8px;
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
    }

    /* Pitch Indicator Callout */
    .pitch-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
      color: #1d4ed8;
      padding: 4px 10px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1);
      user-select: none;
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    .pitch-btn:hover {
      background: #dbeafe;
      border-color: #60a5fa;
    }

    .pitch-btn:active {
      background: #bfdbfe;
    }

    .pitch-arrow-svg {
      width: 18px;
      height: 14px;
      stroke: #2563eb;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex-shrink: 0;
    }

    .speaker-icon {
      font-size: 13px;
      line-height: 1;
    }

    /* Starters Pill Section */
    .starters-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .section-title {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

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

    .starter-pill {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    .starter-pill:hover {
      background: #e2e8f0;
      color: #0f172a;
    }

    .starter-pill.active {
      background: #fef08a;
      border-color: #eab308;
      color: #854d0e;
      box-shadow: 0 0 0 1px #eab308;
    }

    @media (max-width: 420px) {
      .sentence-card {
        padding: 20px 10px 16px;
      }
      .starter-box, .sentence-words {
        font-size: 17px;
      }
      .mark-box {
        font-size: 18px;
        width: 28px;
        height: 30px;
      }
      .pitch-btn {
        font-size: 11px;
        padding: 3px 8px;
      }
      .starter-pill {
        font-size: 12px;
        padding: 4px 10px;
      }
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="sentence-card">
    <div class="sentence-flow">
      <div class="starter-box">
        <span class="starter-label">Starter</span>
        <span id="starterText">Where</span>
      </div>

      <span class="sentence-words" id="sentenceBody">did you hide the treasure</span>

      
      <div class="end-group">
        <div class="mark-box" title="Question mark">?</div>
        <button id="pitchBtn" class="pitch-btn" title="Click to hear rising voice pitch">
          <svg class="pitch-arrow-svg" viewBox="0 0 20 16">
            <path d="M 2 13 Q 9 13 13 5" />
            <polyline points="8 4 14 4 14 10" />
          </svg>
          <span>Voice pitches up</span>
          <span class="speaker-icon">🔊</span>
        </button>
      </div>
    </div>
  </div>

  
  <div class="starters-section">
    <div class="section-title">Common Question Starters (Click to explore)</div>
    <div class="pills-grid" id="pillsContainer">
      <button class="starter-pill" data-starter="Who" data-body="hid the treasure">Who</button>
      <button class="starter-pill" data-starter="What" data-body="is the treasure">What</button>
      <button class="starter-pill active" data-starter="Where" data-body="did you hide the treasure">Where</button>
      <button class="starter-pill" data-starter="When" data-body="did you find the treasure">When</button>
      <button class="starter-pill" data-starter="Why" data-body="is the treasure hidden">Why</button>
      <button class="starter-pill" data-starter="How" data-body="can we find the treasure">How</button>
      <button class="starter-pill" data-starter="Is" data-body="this the treasure map">Is</button>
      <button class="starter-pill" data-starter="Can" data-body="you open the treasure chest">Can</button>
      <button class="starter-pill" data-starter="Do" data-body="you know the secret code">Do</button>
    </div>
  </div>
</div>

<script>
  // Rising tone synthesis for question inflection
  function playQuestionPitch() {
    try {
      const AudioCtx = window.AudioContext || window.webkitAudioContext;
      if (!AudioCtx) return;
      const ctx = new AudioCtx();
      if (ctx.state === 'suspended') {
        ctx.resume();
      }
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();

      osc.type = 'sine';
      osc.connect(gain);
      gain.connect(ctx.destination);

      const now = ctx.currentTime;
      osc.frequency.setValueAtTime(260, now);
      osc.frequency.setValueAtTime(280, now + 0.2);
      osc.frequency.exponentialRampToValueAtTime(460, now + 0.55);

      gain.gain.setValueAtTime(0.2, now);
      gain.gain.exponentialRampToValueAtTime(0.01, now + 0.6);

      osc.start(now);
      osc.stop(now + 0.6);
    } catch (e) {
      // Audio not supported or blocked
    }
  }

  const pitchBtn = document.getElementById('pitchBtn');
  pitchBtn.addEventListener('click', playQuestionPitch);

  // Interactive pill selection
  const starterText = document.getElementById('starterText');
  const sentenceBody = document.getElementById('sentenceBody');
  const pills = document.querySelectorAll('.starter-pill');

  pills.forEach(pill => {
    pill.addEventListener('click', () => {
      pills.forEach(p => p.classList.remove('active'));
      pill.classList.add('active');
      starterText.textContent = pill.getAttribute('data-starter');
      sentenceBody.textContent = pill.getAttribute('data-body');
    });
  });
</script>

</body>
</html>

Using End Marks for Statements, Questions, Exclamations, and Commands

<!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: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100%;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }
    .panel {
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      transition: box-shadow 0.2s ease;
    }
    .panel-statement {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
    }
    .panel-exclamation {
      background: #fffdf7;
      border: 1.5px solid #fcd34d;
    }
    .pill {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 12px;
      border-radius: 20px;
    }
    .pill-statement {
      background: #e2e8f0;
      color: #475569;
    }
    .pill-exclamation {
      background: #fef3c7;
      color: #b45309;
    }
    .sentence-box {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      color: #334155;
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }
    .punct-statement {
      display: inline-block;
      font-size: 26px;
      font-weight: 900;
      color: #475569;
      line-height: 0;
      margin-left: 1px;
      vertical-align: -2px;
    }
    .punct-exclamation {
      display: inline-block;
      font-size: 26px;
      font-weight: 900;
      color: #d97706;
      line-height: 0;
      margin-left: 1px;
      transform: scale(1.15);
      animation: gentle-pulse 2s infinite ease-in-out;
    }
    @keyframes gentle-pulse {
      0%, 100% { transform: scale(1.15); }
      50% { transform: scale(1.3); }
    }
    .wave-container {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
    }
    .badge {
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
    }
    .badge-statement {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
    }
    .badge-exclamation {
      background: #fffbeb;
      color: #92400e;
      border: 1px solid #fde68a;
    }
    .audio-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      user-select: none;
    }
    .audio-btn:active {
      background: #f1f5f9;
    }
    .btn-exclamation {
      border-color: #fcd34d;
      color: #b45309;
    }
    .btn-exclamation:active {
      background: #fef3c7;
    }

    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .panel {
        padding: 10px;
        gap: 8px;
      }
      .wave-container {
        height: 48px;
      }
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="panel panel-statement">
      <div class="pill pill-statement">Statement</div>
      
      <div class="sentence-box">
        We won the game<span class="punct-statement">.</span>
      </div>

      
      <div class="wave-container">
        <svg viewBox="0 0 160 50" preserveAspectRatio="none">
          
          <path d="M 10 25 Q 35 21, 60 25 T 110 25 T 150 25" fill="none" stroke="#94a3b8" stroke-width="3" stroke-linecap="round" />
          <circle cx="150" cy="25" r="4" fill="#64748b" />
        </svg>
      </div>

      <div class="badge badge-statement">
        <span>💬</span> Calm, steady voice
      </div>

      <button class="audio-btn" onclick="playCalmPitch()">
        <span>▶</span> Hear Tone
      </button>
    </div>

    
    <div class="panel panel-exclamation">
      <div class="pill pill-exclamation">Exclamation</div>
      
      <div class="sentence-box">
        We won the game<span class="punct-exclamation">!</span>
      </div>

      
      <div class="wave-container">
        <svg viewBox="0 0 160 50" preserveAspectRatio="none">
          
          <path d="M 10 38 L 35 30 L 55 36 L 80 18 L 105 28 L 130 10 L 150 6" fill="none" stroke="#f59e0b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
          
          <circle cx="150" cy="6" r="4" fill="#d97706" />
          <path d="M 142 6 L 158 6 M 150 -2 L 150 14" stroke="#d97706" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      </div>

      <div class="badge badge-exclamation">
        <span>🎉</span> Strong, excited voice
      </div>

      <button class="audio-btn btn-exclamation" onclick="playExcitedPitch()">
        <span>▶</span> Hear Tone
      </button>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    // Steady, calm statement pitch (even tone)
    function playCalmPitch() {
      const ctx = getAudioContext();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();
      
      const now = ctx.currentTime;
      osc.type = 'sine';
      osc.frequency.setValueAtTime(220, now); // A3
      osc.frequency.linearRampToValueAtTime(210, now + 0.5); // Slight calm decline
      
      gain.gain.setValueAtTime(0.2, now);
      gain.gain.exponentialRampToValueAtTime(0.001, now + 0.55);
      
      osc.connect(gain);
      gain.connect(ctx.destination);
      osc.start(now);
      osc.stop(now + 0.55);
    }

    // Energetic, rising exclamation pitch (upward triad fan-tone)
    function playExcitedPitch() {
      const ctx = getAudioContext();
      const notes = [261.63, 329.63, 523.25]; // C4, E4, C5 (rising excitement)
      const noteDuration = 0.14;
      const now = ctx.currentTime;

      notes.forEach((freq, index) => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        const startTime = now + (index * 0.11);
        
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(freq, startTime);
        if (index === 2) {
          osc.frequency.linearRampToValueAtTime(587.33, startTime + noteDuration * 1.5); // D5 rise
        }
        
        gain.gain.setValueAtTime(0.25, startTime);
        gain.gain.exponentialRampToValueAtTime(0.001, startTime + (index === 2 ? 0.35 : noteDuration));
        
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start(startTime);
        osc.stop(startTime + (index === 2 ? 0.35 : noteDuration));
      });
    }
  </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 {
      width: 100%;
      min-height: 100%;
      background: transparent;
      padding: 12px;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

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

    .command-card {
      background: #ffffff;
      border-radius: 14px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border: 2px solid transparent;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .card-calm {
      border-color: #e0f2fe;
      background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
    }

    .card-urgent {
      border-color: #ffedd5;
      background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .badge-calm {
      background: #e0f2fe;
      color: #0369a1;
    }

    .badge-urgent {
      background: #fed7aa;
      color: #c2410c;
    }

    .sentence-box {
      font-size: 15px;
      font-weight: 500;
      line-height: 1.4;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      color: #334155;
    }

    .mark-highlight-calm {
      color: #0284c7;
      font-weight: 800;
      background: #e0f2fe;
      padding: 0 4px;
      border-radius: 4px;
    }

    .mark-highlight-urgent {
      color: #ea580c;
      font-weight: 800;
      background: #ffedd5;
      padding: 0 4px;
      border-radius: 4px;
    }

    .mark-circle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 8px;
      user-select: none;
    }

    .mark-calm {
      background: #0284c7;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
    }

    .mark-urgent {
      background: #ea580c;
      color: #ffffff;
      box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25);
    }

    .mark-name {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .mark-name-calm {
      color: #0369a1;
    }

    .mark-name-urgent {
      color: #c2410c;
    }

    .tone-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      transition: background 0.15s ease, border-color 0.15s ease;
    }

    .tone-btn:active {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    @media (max-width: 360px) {
      .sentence-box {
        font-size: 14px;
      }
      .badge {
        font-size: 12px;
      }
      .mark-circle {
        width: 48px;
        height: 48px;
        font-size: 28px;
      }
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="command-card card-calm">
      <div class="badge badge-calm">Calm Request</div>
      <div class="sentence-box">
        Please close the front door<span class="mark-highlight-calm">.</span>
      </div>
      <div class="mark-circle mark-calm">.</div>
      <div class="mark-name mark-name-calm">Period</div>
      <button type="button" class="tone-btn" onclick="playCalmTone()">
        <span>🔉</span> Soft Tone
      </button>
    </div>

    
    <div class="command-card card-urgent">
      <div class="badge badge-urgent">Urgent Warning</div>
      <div class="sentence-box">
        Watch out for that car<span class="mark-highlight-urgent">!</span>
      </div>
      <div class="mark-circle mark-urgent">!</div>
      <div class="mark-name mark-name-urgent">Exclamation</div>
      <button type="button" class="tone-btn" onclick="playUrgentTone()">
        <span>📢</span> Urgent Tone
      </button>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playCalmTone() {
      const ctx = getAudioContext();
      const osc = ctx.createOscillator();
      const gain = ctx.createGain();

      osc.type = 'sine';
      osc.frequency.setValueAtTime(392, ctx.currentTime); // G4 calm note
      osc.frequency.exponentialRampToValueAtTime(330, ctx.currentTime + 0.4); // E4

      gain.gain.setValueAtTime(0.12, ctx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.4);

      osc.connect(gain);
      gain.connect(ctx.destination);

      osc.start();
      osc.stop(ctx.currentTime + 0.4);
    }

    function playUrgentTone() {
      const ctx = getAudioContext();
      
      // Crisp 2-burst warning alert
      [0, 0.15].forEach(delay => {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.type = 'triangle';
        osc.frequency.setValueAtTime(700, ctx.currentTime + delay);
        osc.frequency.setValueAtTime(880, ctx.currentTime + delay + 0.05);

        gain.gain.setValueAtTime(0.2, ctx.currentTime + delay);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + 0.12);

        osc.connect(gain);
        gain.connect(ctx.destination);

        osc.start(ctx.currentTime + delay);
        osc.stop(ctx.currentTime + delay + 0.12);
      });
    }
  </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;
      background: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .grid-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .row-card {
      display: grid;
      grid-template-columns: 105px 1fr 64px;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    @media (max-width: 480px) {
      .row-card {
        grid-template-columns: 88px 1fr 48px;
        gap: 6px;
        padding: 8px 10px;
      }
    }

    .row-card:hover {
      border-color: #cbd5e1;
    }

    .row-card.active {
      border-color: var(--theme-border);
      background: var(--theme-bg-light);
      box-shadow: 0 2px 8px var(--theme-glow);
    }

    /* Type Badges */
    .badge-col {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .type-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      color: var(--theme-text);
      background: var(--theme-badge-bg);
      border: 1px solid var(--theme-badge-border);
      text-align: center;
    }

    @media (max-width: 480px) {
      .type-badge {
        font-size: 11px;
        padding: 3px 6px;
      }
    }

    .purpose-hint {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      padding-left: 2px;
      white-space: nowrap;
    }

    @media (max-width: 480px) {
      .purpose-hint {
        font-size: 9px;
      }
    }

    /* Sentence Box */
    .sentence-col {
      font-size: 14.5px;
      font-weight: 500;
      color: #334155;
      line-height: 1.35;
    }

    @media (max-width: 480px) {
      .sentence-col {
        font-size: 13px;
      }
    }

    .sentence-text {
      display: inline;
    }

    .mark-inline {
      font-weight: 800;
      color: var(--theme-text);
      background: var(--theme-badge-bg);
      padding: 1px 4px;
      border-radius: 4px;
      margin-left: 1px;
      border: 1px solid var(--theme-badge-border);
      display: inline-block;
      transition: transform 0.2s ease;
    }

    .row-card.active .mark-inline {
      transform: scale(1.15);
    }

    /* End Mark Box */
    .mark-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 4px;
      min-height: 48px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .row-card.active .mark-col {
      background: #ffffff;
      border-color: var(--theme-border);
    }

    .mark-glyph {
      font-size: 22px;
      font-weight: 900;
      line-height: 1;
      color: var(--theme-text);
    }

    .mark-name {
      font-size: 9.5px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
      text-align: center;
      white-space: nowrap;
    }

    @media (max-width: 480px) {
      .mark-glyph {
        font-size: 18px;
      }
      .mark-name {
        font-size: 8px;
      }
    }

    /* Color Themes */
    .theme-statement {
      --theme-text: #0284c7;
      --theme-badge-bg: #e0f2fe;
      --theme-badge-border: #bae6fd;
      --theme-border: #38bdf8;
      --theme-bg-light: #f0f9ff;
      --theme-glow: rgba(2, 132, 199, 0.12);
    }

    .theme-question {
      --theme-text: #7c3aed;
      --theme-badge-bg: #ede9fe;
      --theme-badge-border: #ddd6fe;
      --theme-border: #a78bfa;
      --theme-bg-light: #f5f3ff;
      --theme-glow: rgba(124, 58, 237, 0.12);
    }

    .theme-command {
      --theme-text: #d97706;
      --theme-badge-bg: #fef3c7;
      --theme-badge-border: #fde68a;
      --theme-border: #fbbf24;
      --theme-bg-light: #fffbeb;
      --theme-glow: rgba(217, 119, 6, 0.12);
    }

    .theme-exclamation {
      --theme-text: #e11d48;
      --theme-badge-bg: #ffe4e6;
      --theme-badge-border: #fecdd3;
      --theme-border: #fb7185;
      --theme-bg-light: #fff1f2;
      --theme-glow: rgba(225, 29, 72, 0.12);
    }
  </style>
</head>
<body>

  <div class="grid-container" id="grid">
    
    
    <div class="row-card theme-statement active" data-index="0">
      <div class="badge-col">
        <span class="type-badge">Statement</span>
        <span class="purpose-hint">Tells info</span>
      </div>
      <div class="sentence-col">
        <span class="sentence-text">The pizza is hot</span><span class="mark-inline">.</span>
      </div>
      <div class="mark-col">
        <div class="mark-glyph">.</div>
        <div class="mark-name">Period</div>
      </div>
    </div>

    
    <div class="row-card theme-question" data-index="1">
      <div class="badge-col">
        <span class="type-badge">Question</span>
        <span class="purpose-hint">Asks info</span>
      </div>
      <div class="sentence-col">
        <span class="sentence-text">Is the pizza hot</span><span class="mark-inline">?</span>
      </div>
      <div class="mark-col">
        <div class="mark-glyph">?</div>
        <div class="mark-name">Question</div>
      </div>
    </div>

    
    <div class="row-card theme-command" data-index="2">
      <div class="badge-col">
        <span class="type-badge">Command</span>
        <span class="purpose-hint">Gives order</span>
      </div>
      <div class="sentence-col">
        <span class="sentence-text">Pass me a slice of pizza</span><span class="mark-inline">.</span>
      </div>
      <div class="mark-col">
        <div class="mark-glyph">.</div>
        <div class="mark-name">Period</div>
      </div>
    </div>

    
    <div class="row-card theme-exclamation" data-index="3">
      <div class="badge-col">
        <span class="type-badge">Exclamation</span>
        <span class="purpose-hint">Strong feeling</span>
      </div>
      <div class="sentence-col">
        <span class="sentence-text">This is the best pizza ever</span><span class="mark-inline">!</span>
      </div>
      <div class="mark-col">
        <div class="mark-glyph">!</div>
        <div class="mark-name">Exclamation</div>
      </div>
    </div>

  </div>

  <script>
    const rows = document.querySelectorAll('.row-card');
    let currentIndex = 0;
    let autoPlayTimer = null;

    function selectRow(index) {
      rows.forEach((r, i) => {
        r.classList.toggle('active', i === index);
      });
      currentIndex = index;
    }

    rows.forEach((row, index) => {
      row.addEventListener('click', () => {
        clearInterval(autoPlayTimer);
        selectRow(index);
      });
    });

    // Gentle auto-cycle through the 4 types
    autoPlayTimer = setInterval(() => {
      currentIndex = (currentIndex + 1) % rows.length;
      selectRow(currentIndex);
    }, 3200);
  </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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

    body {
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
    }

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

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

    .signal-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .signal-card:focus-visible {
      outline: 2px solid #3b82f6;
    }

    .signal-card.active-period {
      border-color: #3b82f6;
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18);
      background: #f0f7ff;
    }

    .signal-card.active-question {
      border-color: #d97706;
      box-shadow: 0 4px 14px rgba(217, 119, 6, 0.18);
      background: #fffbeb;
    }

    .signal-card.active-exclamation {
      border-color: #e11d48;
      box-shadow: 0 4px 14px rgba(225, 29, 72, 0.18);
      background: #fff1f2;
    }

    /* Traffic Sign Badges */
    .sign-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 22px;
      color: #ffffff;
      margin-bottom: 8px;
    }

    .sign-octagon {
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      background: #3b82f6;
    }

    .sign-diamond {
      background: #d97706;
      transform: rotate(45deg);
      border-radius: 4px;
    }
    .sign-diamond span {
      transform: rotate(-45deg);
    }

    .sign-triangle {
      background: #e11d48;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      padding-top: 6px;
    }

    .name {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 20px;
      margin-bottom: 8px;
      display: inline-block;
    }

    .badge-period { background: #dbeafe; color: #1d4ed8; }
    .badge-question { background: #fef3c7; color: #b45309; }
    .badge-exclamation { background: #ffe4e6; color: #be123c; }

    .contour-box {
      width: 100%;
      height: 48px;
      background: #f8fafc;
      border-radius: 8px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
    }

    .contour-svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .contour-path {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 120;
      stroke-dashoffset: 0;
    }

    .animating .contour-path {
      animation: drawLine 0.6s ease forwards;
    }

    @keyframes drawLine {
      from { stroke-dashoffset: 120; }
      to { stroke-dashoffset: 0; }
    }

    .example-text {
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 4px;
      line-height: 1.2;
    }

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

    .audio-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 11px;
      color: #94a3b8;
      margin-top: 6px;
    }
  </style>
</head>
<body>

  <div class="grid" role="region" aria-label="End Marks Traffic Signals">

    
    <div class="signal-card" id="card-period" onclick="activate('period')" tabindex="0" role="button" aria-label="Period: Voice drops to full stop">
      <div class="sign-icon sign-octagon">.</div>
      <div class="name">Period</div>
      <span class="badge badge-period">Voice Drops ↘</span>
      
      <div class="contour-box">
        <svg class="contour-svg" viewBox="0 0 100 36">
          <path class="contour-path" stroke="#3b82f6" d="M 10 14 L 60 14 Q 85 14 90 28" />
          <circle cx="90" cy="28" r="3.5" fill="#3b82f6" />
        </svg>
      </div>

      <div class="example-text">The sun shines.</div>
      <div class="cue">Calm · Full Stop</div>
      <div class="audio-hint"><span>🔊</span> Tap tone</div>
    </div>

    
    <div class="signal-card" id="card-question" onclick="activate('question')" tabindex="0" role="button" aria-label="Question Mark: Voice rises up">
      <div class="sign-icon sign-diamond"><span>?</span></div>
      <div class="name">Question</div>
      <span class="badge badge-question">Voice Rises ↗</span>
      
      <div class="contour-box">
        <svg class="contour-svg" viewBox="0 0 100 36">
          <path class="contour-path" stroke="#d97706" d="M 10 24 Q 50 24 85 8" />
          <polygon points="82,4 92,7 86,14" fill="#d97706" />
        </svg>
      </div>

      <div class="example-text">Is the sun out?</div>
      <div class="cue">Curious · Rise</div>
      <div class="audio-hint"><span>🔊</span> Tap tone</div>
    </div>

    
    <div class="signal-card" id="card-exclamation" onclick="activate('exclamation')" tabindex="0" role="button" aria-label="Exclamation Mark: Voice bursts with energy">
      <div class="sign-icon sign-triangle">!</div>
      <div class="name">Exclamation</div>
      <span class="badge badge-exclamation">Energy Burst 💥</span>
      
      <div class="contour-box">
        <svg class="contour-svg" viewBox="0 0 100 36">
          <path class="contour-path" stroke="#e11d48" d="M 10 26 L 40 26 L 55 6 L 70 26 L 90 26" />
          <circle cx="55" cy="6" r="3.5" fill="#e11d48" />
        </svg>
      </div>

      <div class="example-text">Look how bright!</div>
      <div class="cue">Excited · Burst</div>
      <div class="audio-hint"><span>🔊</span> Tap tone</div>
    </div>

  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playTone(type) {
      try {
        const ctx = getAudioContext();
        const now = ctx.currentTime;
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();

        osc.connect(gain);
        gain.connect(ctx.destination);

        if (type === 'period') {
          // Descending pitch dropping to a calm rest
          osc.type = 'sine';
          osc.frequency.setValueAtTime(280, now);
          osc.frequency.exponentialRampToValueAtTime(140, now + 0.45);
          gain.gain.setValueAtTime(0.2, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
          osc.start(now);
          osc.stop(now + 0.45);
        } else if (type === 'question') {
          // Pitch sweeping upward
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(220, now);
          osc.frequency.exponentialRampToValueAtTime(440, now + 0.45);
          gain.gain.setValueAtTime(0.2, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.45);
          osc.start(now);
          osc.stop(now + 0.45);
        } else if (type === 'exclamation') {
          // Sharp energetic pop
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(320, now);
          osc.frequency.setValueAtTime(560, now + 0.08);
          osc.frequency.exponentialRampToValueAtTime(280, now + 0.4);
          gain.gain.setValueAtTime(0.3, now);
          gain.gain.exponentialRampToValueAtTime(0.001, now + 0.4);
          osc.start(now);
          osc.stop(now + 0.4);
        }
      } catch (e) {
        // Fallback gracefully if Web Audio is blocked
      }
    }

    function activate(type) {
      const cards = {
        period: document.getElementById('card-period'),
        question: document.getElementById('card-question'),
        exclamation: document.getElementById('card-exclamation')
      };

      Object.keys(cards).forEach(key => {
        cards[key].classList.remove('active-period', 'active-question', 'active-exclamation', 'animating');
      });

      const activeCard = cards[type];
      activeCard.classList.add(`active-${type}`);
      
      // Re-trigger stroke animation
      void activeCard.offsetWidth;
      activeCard.classList.add('animating');

      playTone(type);
    }

    // Enable keyboard activation
    document.querySelectorAll('.signal-card').forEach(card => {
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          card.click();
        }
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      user-select: none;
    }

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

    /* Sentence container */
    .sentence-container {
      width: 100%;
      padding: 12px 8px 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .sentence-text {
      font-size: clamp(20px, 5.5vw, 26px);
      font-weight: 600;
      color: #1e293b;
      line-height: 1.5;
      text-align: center;
      word-break: normal;
    }

    .last-chunk {
      white-space: nowrap;
      display: inline;
    }

    .period-target {
      position: relative;
      display: inline-block;
      margin-left: 2px;
      vertical-align: baseline;
    }

    .period-char {
      display: inline-block;
      color: #0284c7;
      font-size: 1.15em;
      font-weight: 800;
      line-height: 1;
      padding: 0 4px;
      border-radius: 6px;
      background: #e0f2fe;
      box-shadow: 0 0 0 2px #38bdf8;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .period-char.highlighted {
      background: #bae6fd;
      box-shadow: 0 0 0 3px #0284c7;
    }

    /* Attached callout badge */
    .callout-badge {
      position: absolute;
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-65%);
      display: flex;
      flex-direction: column;
      align-items: center;
      white-space: nowrap;
      z-index: 10;
      pointer-events: none;
    }

    .badge-arrow {
      position: absolute;
      top: -7px;
      left: 65%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 7px solid #0284c7;
    }

    .badge-pill {
      background: #0284c7;
      color: #ffffff;
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2px;
      box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
      text-align: center;
    }

    /* Voice Contour Pitch Track Card */
    .contour-card {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .contour-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .sound-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #0284c7;
      padding: 5px 12px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .sound-btn:hover {
      background-color: #f0f9ff;
      border-color: #38bdf8;
    }

    .sound-btn:active {
      background-color: #e0f2fe;
    }

    .svg-track {
      width: 100%;
      height: 56px;
      overflow: visible;
    }

    .pitch-line-bg {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 3;
      stroke-linecap: round;
    }

    .pitch-line-active {
      fill: none;
      stroke: #0284c7;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 400;
      stroke-dashoffset: 400;
      transition: stroke-dashoffset 1.2s ease-out;
    }

    .pitch-line-active.played {
      stroke-dashoffset: 0;
    }

    .tracer-dot {
      fill: #0284c7;
      r: 6;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .tracer-dot.active {
      opacity: 1;
    }

    .falling-tag {
      font-size: 11px;
      font-weight: 600;
      fill: #64748b;
    }
  </style>
</head>
<body>
  <div class="diagram">
    
    
    <div class="sentence-container">
      <div class="sentence-text">
        <span>The puppy plays in the</span>
        <span class="last-chunk">
          <span> grass</span><span class="period-target"><span id="period" class="period-char">.</span><span class="callout-badge"><span class="badge-arrow"></span><span class="badge-pill">Period (Tells a fact)</span></span></span>
        </span>
      </div>
    </div>

    
    <div class="contour-card">
      <div class="contour-header">
        <span>Falling Pitch Tone</span>
        <button id="playBtn" class="sound-btn" type="button">Play Tone 🔊</button>
      </div>

      <svg class="svg-track" viewBox="0 0 360 56">
        
        <path class="pitch-line-bg" d="M 20 20 Q 180 20 250 22 T 340 46" />
        
        
        <path id="pitchPath" class="pitch-line-active" d="M 20 20 Q 180 20 250 22 T 340 46" />
        
        
        <circle id="dot" class="tracer-dot" cx="20" cy="20" />

        
        <text x="22" y="13" class="falling-tag">Natural voice</text>
        <text x="272" y="42" class="falling-tag" fill="#0284c7">Voice falls ➘</text>
      </svg>
    </div>

  </div>

  <script>
    const playBtn = document.getElementById('playBtn');
    const pitchPath = document.getElementById('pitchPath');
    const dot = document.getElementById('dot');
    const period = document.getElementById('period');

    let audioCtx = null;
    let isPlaying = false;

    function playStatementTone() {
      if (isPlaying) return;
      isPlaying = true;

      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
      if (!audioCtx) audioCtx = new AudioContextClass();
      if (audioCtx.state === 'suspended') audioCtx.resume();

      const now = audioCtx.currentTime;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();

      osc.type = 'sine';
      // Statement pitch contour: natural flat pitch then falling at period
      osc.frequency.setValueAtTime(240, now);
      osc.frequency.setValueAtTime(240, now + 0.6);
      osc.frequency.exponentialRampToValueAtTime(160, now + 1.2);

      gain.gain.setValueAtTime(0.01, now);
      gain.gain.linearRampToValueAtTime(0.2, now + 0.1);
      gain.gain.setValueAtTime(0.2, now + 0.9);
      gain.gain.linearRampToValueAtTime(0.001, now + 1.25);

      osc.connect(gain);
      gain.connect(audioCtx.destination);

      osc.start(now);
      osc.stop(now + 1.3);

      pitchPath.classList.remove('played');
      void pitchPath.offsetWidth;
      pitchPath.classList.add('played');

      dot.classList.add('active');
      const startTime = performance.now();
      const duration = 1200;
      const pathLength = pitchPath.getTotalLength();

      function animateDot(t) {
        const elapsed = t - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const pt = pitchPath.getPointAtLength(progress * pathLength);
        dot.setAttribute('cx', pt.x);
        dot.setAttribute('cy', pt.y);

        if (progress > 0.85) {
          period.classList.add('highlighted');
        }

        if (progress < 1) {
          requestAnimationFrame(animateDot);
        } else {
          setTimeout(() => {
            period.classList.remove('highlighted');
            dot.classList.remove('active');
            isPlaying = false;
          }, 300);
        }
      }

      requestAnimationFrame(animateDot);
    }

    playBtn.addEventListener('click', playStatementTone);

    // Initial static preview on load
    pitchPath.classList.add('played');
  </script>
</body>
</html>

OGE.3.L.6

Aligned learning resources

Related diagrams