<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Tone Comparison Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

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

    .main-wrapper {
      width: 100%;
      max-width: 660px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Interactive Filters */
    .filter-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

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

    .filter-btn:hover {
      background: #e2e8f0;
    }

    .filter-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    /* Comparison Grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

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

    /* Tier Column Cards */
    .tier-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .tier-header {
      padding: 8px 10px;
      text-align: center;
      border-bottom: 1px solid #e2e8f0;
    }

    .tier-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    .tier-audience {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.2;
    }

    /* Specific Header Themes */
    .tier-friendly .tier-header { background: #fef9c3; color: #854d0e; }
    .tier-prof .tier-header { background: #e0f2fe; color: #0369a1; }
    .tier-formal .tier-header { background: #f3e8ff; color: #6b21a8; }

    /* Content Segments */
    .tier-body {
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .segment {
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.35;
      transition: opacity 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
      background: #f8fafc;
      border: 1px solid transparent;
    }

    .segment-tag {
      display: block;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
      opacity: 0.75;
    }

    /* Subtle Pastel Highlights */
    .part-greeting {
      border-color: #fed7aa;
      background: #fff7ed;
      color: #9a3412;
    }

    .part-request {
      border-color: #bae6fd;
      background: #f0f9ff;
      color: #0c4a6e;
    }

    .part-signoff {
      border-color: #bbf7d0;
      background: #f0fdf4;
      color: #166534;
    }

    /* Dimming & Highlighting States */
    .dimmed {
      opacity: 0.25;
      background: #f8fafc !important;
      border-color: transparent !important;
      color: #94a3b8 !important;
    }

    .highlighted {
      box-shadow: 0 0 0 2px currentColor;
    }
  </style>
</head>
<body>
  <div class="main-wrapper">
    
    <div class="filter-bar">
      <button class="filter-btn active" data-part="all">Show All</button>
      <button class="filter-btn" data-part="greeting">1. Greeting</button>
      <button class="filter-btn" data-part="request">2. Request</button>
      <button class="filter-btn" data-part="signoff">3. Sign-off</button>
    </div>

    
    <div class="grid">
      
      <div class="tier-card tier-friendly">
        <div class="tier-header">
          <div class="tier-title">💬 Friendly</div>
          <div class="tier-audience">Peer Group Chat</div>
        </div>
        <div class="tier-body">
          <div class="segment part-greeting" data-type="greeting">
            <span class="segment-tag">Greeting</span>
            Hey guys,
          </div>
          <div class="segment part-request" data-type="request">
            <span class="segment-tag">Request</span>
            Can we push the slide deck to Friday?
          </div>
          <div class="segment part-signoff" data-type="signoff">
            <span class="segment-tag">Sign-off</span>
            Later!
          </div>
        </div>
      </div>

      
      <div class="tier-card tier-prof">
        <div class="tier-header">
          <div class="tier-title">✉️ Professional</div>
          <div class="tier-audience">Teacher / Manager</div>
        </div>
        <div class="tier-body">
          <div class="segment part-greeting" data-type="greeting">
            <span class="segment-tag">Greeting</span>
            Dear Ms. Rivera,
          </div>
          <div class="segment part-request" data-type="request">
            <span class="segment-tag">Request</span>
            Could I please request an extension until Friday?
          </div>
          <div class="segment part-signoff" data-type="signoff">
            <span class="segment-tag">Sign-off</span>
            Best regards,
          </div>
        </div>
      </div>

      
      <div class="tier-card tier-formal">
        <div class="tier-header">
          <div class="tier-title">🏛️ Formal</div>
          <div class="tier-audience">Academic Board</div>
        </div>
        <div class="tier-body">
          <div class="segment part-greeting" data-type="greeting">
            <span class="segment-tag">Greeting</span>
            To the Review Board:
          </div>
          <div class="segment part-request" data-type="request">
            <span class="segment-tag">Request</span>
            I formally petition for an extension to the deadline.
          </div>
          <div class="segment part-signoff" data-type="signoff">
            <span class="segment-tag">Sign-off</span>
            Respectfully submitted,
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const filterButtons = document.querySelectorAll('.filter-btn');
    const segments = document.querySelectorAll('.segment');

    function setActiveFilter(part) {
      filterButtons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.part === part);
      });

      segments.forEach(seg => {
        if (part === 'all') {
          seg.classList.remove('dimmed', 'highlighted');
        } else {
          const match = seg.dataset.type === part;
          seg.classList.toggle('dimmed', !match);
          seg.classList.toggle('highlighted', match);
        }
      });
    }

    filterButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        setActiveFilter(btn.dataset.part);
      });
    });

    segments.forEach(seg => {
      seg.addEventListener('click', () => {
        setActiveFilter(seg.dataset.type);
      });
    });
  </script>
</body>
</html>

Adjusting Language and Tone to Suit Form, Audience, and Purpose

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .grid {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .header-row {
      display: grid;
      grid-template-columns: 1fr 36px 1fr;
      align-items: center;
      gap: 8px;
      padding: 0 4px 4px 4px;
    }
    .badge {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 6px;
      text-align: center;
      white-space: nowrap;
    }
    .badge-informal {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fde68a;
    }
    .badge-formal {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .conv-row {
      display: grid;
      grid-template-columns: 1fr 36px 1fr;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .conv-row:hover {
      background: #f8fafc;
    }
    .conv-row.active {
      background: #ffffff;
      box-shadow: 0 0 0 2px #0284c7, 0 4px 12px rgba(2, 132, 199, 0.12);
      border-color: #0284c7;
    }
    .term {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.2;
    }
    .term-informal {
      color: #b45309;
      text-align: right;
      padding-right: 4px;
    }
    .conv-row.active .term-informal {
      color: #78350f;
    }
    .arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 16px;
      font-weight: 700;
      transition: color 0.2s ease, transform 0.2s ease;
    }
    .conv-row.active .arrow {
      color: #0284c7;
      transform: translateX(2px);
    }
    .term-formal {
      color: #0369a1;
      text-align: left;
      padding-left: 4px;
    }
    .conv-row.active .term-formal {
      color: #0c4a6e;
      font-weight: 700;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      padding: 0;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }
    .dot.active {
      background: #0284c7;
      transform: scale(1.25);
    }
    .ctrl-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      cursor: pointer;
      margin-left: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .ctrl-btn:hover {
      background: #e2e8f0;
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="header-row">
      <div class="badge badge-informal">Informal</div>
      <div></div>
      <div class="badge badge-formal">Formal</div>
    </div>

    <div class="rows">
      <div class="conv-row step active">
        <div class="term term-informal">ask for</div>
        <div class="arrow">➔</div>
        <div class="term term-formal">request</div>
      </div>
      <div class="conv-row step">
        <div class="term term-informal">figure out</div>
        <div class="arrow">➔</div>
        <div class="term term-formal">determine</div>
      </div>
      <div class="conv-row step">
        <div class="term term-informal">fix</div>
        <div class="arrow">➔</div>
        <div class="term term-formal">resolve</div>
      </div>
      <div class="conv-row step">
        <div class="term term-informal">get back to</div>
        <div class="arrow">➔</div>
        <div class="term term-formal">respond</div>
      </div>
      <div class="conv-row step">
        <div class="term term-informal">talk about</div>
        <div class="arrow">➔</div>
        <div class="term term-formal">discuss</div>
      </div>
    </div>

    <div class="controls">
      <button class="dot active" aria-label="Pair 1"></button>
      <button class="dot" aria-label="Pair 2"></button>
      <button class="dot" aria-label="Pair 3"></button>
      <button class="dot" aria-label="Pair 4"></button>
      <button class="dot" aria-label="Pair 5"></button>
      <button id="playBtn" class="ctrl-btn" aria-label="Pause Auto-Play">
        <span id="playIcon">⏸</span>
      </button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const rows = document.querySelectorAll('.conv-row');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    let current = 0;
    let playing = true;
    let timer = null;

    function setStep(idx) {
      current = (idx + rows.length) % rows.length;
      rows.forEach((r, i) => r.classList.toggle('active', i === current));
      dots.forEach((d, i) => d.classList.toggle('active', i === current));
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setStep(current + 1);
      }, 3000);
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
    }

    rows.forEach((row, idx) => {
      row.addEventListener('click', () => {
        setStep(idx);
        if (playing) startTimer();
      });
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        setStep(idx);
        if (playing) startTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      playing = !playing;
      playIcon.textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        stopTimer();
      }
    });

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Politeness Strategies and Syntactic Control</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    
    .nav-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }

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

    .column-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      border: 1px solid #e2e8f0;
      position: relative;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 8px;
      border-radius: 6px;
      width: fit-content;
    }
    .badge-casual {
      background: #eff6ff;
      color: #2563eb;
      border: 1px solid #bfdbfe;
    }
    .badge-formal {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .feature-tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .speech-box {
      background: #ffffff;
      border-radius: 8px;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 1.4;
      font-weight: 500;
      min-height: 80px;
      display: flex;
      align-items: center;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .speech-box mark {
      border-radius: 3px;
      padding: 1px 3px;
    }
    .mark-blue {
      background: #dbeafe;
      color: #1e40af;
      font-weight: 600;
    }
    .mark-emerald {
      background: #d1fae5;
      color: #065f46;
      font-weight: 600;
    }

    .spectrum {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
    }
    .meter {
      flex: 1;
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      overflow: hidden;
    }
    .meter-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.3s ease;
    }
    .meter-casual {
      width: 25%;
      background: #2563eb;
    }
    .meter-formal {
      width: 90%;
      background: #059669;
    }

    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
      .speech-box {
        min-height: 64px;
      }
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" id="tab0" onclick="switchExample(0)">Example 1: Request</button>
    <button class="tab-btn" id="tab1" onclick="switchExample(1)">Example 2: Revision</button>
  </div>

  <div class="comparison-grid">
    
    <div class="column-card">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span class="badge badge-casual">Direct</span>
        <span class="feature-tag">Imperative</span>
      </div>
      <div class="speech-box" id="casualText">
        "<mark class="mark-blue">Send</mark> me the files."
      </div>
      <div class="spectrum">
        <span>Hedging</span>
        <div class="meter"><div class="meter-fill meter-casual"></div></div>
        <span>Low</span>
      </div>
    </div>

    
    <div class="column-card">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span class="badge badge-formal">Hedged</span>
        <span class="feature-tag">Modal + Indirect</span>
      </div>
      <div class="speech-box" id="formalText">
        "<mark class="mark-emerald">Could you please</mark> forward the files at your earliest convenience?"
      </div>
      <div class="spectrum">
        <span>Hedging</span>
        <div class="meter"><div class="meter-fill meter-formal"></div></div>
        <span>High</span>
      </div>
    </div>
  </div>

  <script>
    const examples = [
      {
        casual: '"<mark class=\'mark-blue\'>Send</mark> me the files."',
        formal: '"<mark class=\'mark-emerald\'>Could you please</mark> forward the files at your earliest convenience?"'
      },
      {
        casual: '"<mark class=\'mark-blue\'>Fix</mark> this error."',
        formal: '"<mark class=\'mark-emerald\'>It is recommended</mark> that this discrepancy be rectified."'
      }
    ];

    function switchExample(index) {
      document.getElementById('tab0').classList.toggle('active', index === 0);
      document.getElementById('tab1').classList.toggle('active', index === 1);
      document.getElementById('casualText').innerHTML = examples[index].casual;
      document.getElementById('formalText').innerHTML = examples[index].formal;
    }
  </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: #f8fafc;
      color: #1e293b;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

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

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

    .tier-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      user-select: none;
    }

    .tier-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .tier-card.active-1 {
      border-color: #2563eb;
      box-shadow: 0 0 0 1px #2563eb;
    }
    .tier-card.active-2 {
      border-color: #059669;
      box-shadow: 0 0 0 1px #059669;
    }
    .tier-card.active-3 {
      border-color: #d97706;
      box-shadow: 0 0 0 1px #d97706;
    }

    .tier-top {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .icon-badge {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }

    .tier-title {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
    }

    .tier-pill {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 999px;
      display: inline-block;
      width: fit-content;
    }

    .c-blue { background: #eff6ff; color: #2563eb; }
    .c-emerald { background: #ecfdf5; color: #059669; }
    .c-amber { background: #fffbeb; color: #d97706; }

    .meta-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 13px;
    }

    .meta-item {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .meta-label {
      font-size: 10px;
      text-transform: uppercase;
      font-weight: 700;
      color: #94a3b8;
      letter-spacing: 0.04em;
    }

    .meta-val {
      font-weight: 600;
      color: #334155;
    }

    /* Example live preview box */
    .preview-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 60px;
    }

    .preview-indicator {
      width: 4px;
      height: 32px;
      border-radius: 2px;
      background: #2563eb;
      transition: background-color 0.2s ease;
      flex-shrink: 0;
    }

    .preview-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .preview-tag {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .preview-text {
      font-size: 14px;
      font-weight: 500;
      color: #0f172a;
      font-style: italic;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span>Correspondence Tiers</span>
    <span>Select a Tier</span>
  </div>

  <div class="cards-grid">
    
    <div class="tier-card active-1" id="card1" onclick="selectTier(1)">
      <div class="tier-top">
        <div class="icon-badge c-blue">💬</div>
        <div>
          <div class="tier-title" style="color: #2563eb;">Casual</div>
          <span class="tier-pill c-blue">Peer-to-Peer</span>
        </div>
      </div>
      <div class="meta-list">
        <div class="meta-item">
          <span class="meta-label">Channel</span>
          <span class="meta-val">SMS · Chat</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Tone</span>
          <span class="meta-val">Relaxed &amp; Direct</span>
        </div>
      </div>
    </div>

    
    <div class="tier-card" id="card2" onclick="selectTier(2)">
      <div class="tier-top">
        <div class="icon-badge c-emerald">💼</div>
        <div>
          <div class="tier-title" style="color: #059669;">Workplace</div>
          <span class="tier-pill c-emerald">Colleague</span>
        </div>
      </div>
      <div class="meta-list">
        <div class="meta-item">
          <span class="meta-label">Channel</span>
          <span class="meta-val">Email · Memo</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Tone</span>
          <span class="meta-val">Polite &amp; Clear</span>
        </div>
      </div>
    </div>

    
    <div class="tier-card" id="card3" onclick="selectTier(3)">
      <div class="tier-top">
        <div class="icon-badge c-amber">🏛️</div>
        <div>
          <div class="tier-title" style="color: #d97706;">Official</div>
          <span class="tier-pill c-amber">Institution</span>
        </div>
      </div>
      <div class="meta-list">
        <div class="meta-item">
          <span class="meta-label">Channel</span>
          <span class="meta-val">Letter · Petition</span>
        </div>
        <div class="meta-item">
          <span class="meta-label">Tone</span>
          <span class="meta-val">Elevated &amp; Respectful</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="preview-box">
    <div class="preview-indicator" id="previewBar"></div>
    <div class="preview-content">
      <span class="preview-tag" id="previewTag">Casual Example</span>
      <span class="preview-text" id="previewText">"Hey, send me the notes ASAP thx!"</span>
    </div>
  </div>

  <script>
    const tiers = {
      1: {
        tag: 'Casual Example',
        text: '"Hey, send me the notes ASAP thx!"',
        color: '#2563eb'
      },
      2: {
        tag: 'Workplace Example',
        text: '"Hi Alex, could you please share the meeting notes when ready?"',
        color: '#059669'
      },
      3: {
        tag: 'Official Example',
        text: '"Dear Principal Vance, I am writing to respectfully request..."',
        color: '#d97706'
      }
    };

    function selectTier(id) {
      for (let i = 1; i <= 3; i++) {
        const card = document.getElementById('card' + i);
        card.classList.remove('active-1', 'active-2', 'active-3');
      }
      const activeCard = document.getElementById('card' + id);
      activeCard.classList.add('active-' + id);

      const previewBar = document.getElementById('previewBar');
      const previewTag = document.getElementById('previewTag');
      const previewText = document.getElementById('previewText');

      previewBar.style.backgroundColor = tiers[id].color;
      previewTag.textContent = tiers[id].tag;
      previewText.textContent = tiers[id].text;
    }
  </script>
</body>
</html>

OGE.10.W.4

Aligned learning resources

Related diagrams