<!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>Author's Purpose: PIE</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

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

    .header-title {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #475569;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    /* Main interactive layout */
    .pie-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
      max-width: 540px;
      flex-wrap: wrap;
    }

    /* SVG Pie Wheel */
    .wheel-wrap {
      position: relative;
      width: 170px;
      height: 170px;
      flex-shrink: 0;
    }

    .pie-svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
      cursor: pointer;
    }

    .pie-slice {
      transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
      transform-origin: 100px 100px;
      opacity: 0.45;
    }

    .pie-slice.active {
      opacity: 1;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
      transform: scale(1.04);
    }

    .pie-center-badge {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 58px;
      height: 58px;
      background: #ffffff;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
      pointer-events: none;
    }

    .pie-center-badge span:first-child {
      font-size: 11px;
      font-weight: 800;
      color: #64748b;
      letter-spacing: 1px;
      line-height: 1;
    }

    .pie-center-badge span:last-child {
      font-size: 15px;
      line-height: 1;
      margin-top: 2px;
    }

    /* Detailed Content Card */
    .card-display {
      flex: 1;
      min-width: 220px;
      max-width: 320px;
      height: 170px;
      position: relative;
    }

    .purpose-panel {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: translateY(6px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    }

    .purpose-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .purpose-panel.p-panel { border-color: #f59e0b; }
    .purpose-panel.i-panel { border-color: #0ea5e9; }
    .purpose-panel.e-panel { border-color: #ec4899; }

    .panel-top {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .letter-badge {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 800;
      color: #ffffff;
      flex-shrink: 0;
    }

    .p-badge { background: #f59e0b; }
    .i-badge { background: #0ea5e9; }
    .e-badge { background: #ec4899; }

    .panel-header-text {
      display: flex;
      flex-direction: column;
    }

    .panel-header-text .title {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .panel-header-text .action {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .panel-example {
      background: #f8fafc;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      border: 1px dashed #cbd5e1;
    }

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

    .example-text {
      display: flex;
      flex-direction: column;
    }

    .example-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #94a3b8;
    }

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

    /* Bottom Selector Tabs */
    .tab-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 14px;
      width: 100%;
      max-width: 500px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1.5px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .tab-btn:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .tab-btn.active.p-tab {
      background: #fef3c7;
      border-color: #f59e0b;
      color: #b45309;
    }

    .tab-btn.active.i-tab {
      background: #e0f2fe;
      border-color: #0ea5e9;
      color: #0369a1;
    }

    .tab-btn.active.e-tab {
      background: #fce7f3;
      border-color: #ec4899;
      color: #be185d;
    }

    /* Stepper dot controls */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 8px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: bold;
      transition: background 0.15s;
    }

    .nav-btn:hover {
      background: #f1f5f9;
    }

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

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
    }

    .dot.active {
      background: #0284c7;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  <div class="header-title">Author’s Purpose (P·I·E)</div>

  <div class="pie-container">
    
    <div class="wheel-wrap">
      <svg class="pie-svg" viewBox="0 0 200 200">
        
        <path class="pie-slice active" id="slice-0" fill="#f59e0b"
              d="M 100 100 L 190 100 A 90 90 0 0 1 55 177.94 Z" />
        
        <path class="pie-slice" id="slice-1" fill="#0ea5e9"
              d="M 100 100 L 55 177.94 A 90 90 0 0 1 55 22.06 Z" />
        
        <path class="pie-slice" id="slice-2" fill="#ec4899"
              d="M 100 100 L 55 22.06 A 90 90 0 0 1 190 100 Z" />
      </svg>
      <div class="pie-center-badge">
        <span>PIE</span>
        <span>🥧</span>
      </div>
    </div>

    
    <div class="card-display">
      
      <div class="purpose-panel p-panel active" id="panel-0">
        <div class="panel-top">
          <div class="letter-badge p-badge">P</div>
          <div class="panel-header-text">
            <span class="title">Persuade</span>
            <span class="action">📢 Convince someone</span>
          </div>
        </div>
        <div class="panel-example">
          <span class="example-icon">🗳️</span>
          <div class="example-text">
            <span class="example-tag">Example</span>
            <span class="example-name">Vote for Class Pet!</span>
          </div>
        </div>
      </div>

      
      <div class="purpose-panel i-panel" id="panel-1">
        <div class="panel-top">
          <div class="letter-badge i-badge">I</div>
          <div class="panel-header-text">
            <span class="title">Inform</span>
            <span class="action">💡 Teach facts & steps</span>
          </div>
        </div>
        <div class="panel-example">
          <span class="example-icon">🐝</span>
          <div class="example-text">
            <span class="example-tag">Example</span>
            <span class="example-name">How Bees Make Honey</span>
          </div>
        </div>
      </div>

      
      <div class="purpose-panel e-panel" id="panel-2">
        <div class="panel-top">
          <div class="letter-badge e-badge">E</div>
          <div class="panel-header-text">
            <span class="title">Entertain</span>
            <span class="action">🍿 Give enjoyment</span>
          </div>
        </div>
        <div class="panel-example">
          <span class="example-icon">🦸</span>
          <div class="example-text">
            <span class="example-tag">Example</span>
            <span class="example-name">Adventure Comic</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="tab-bar">
    <button class="tab-btn active p-tab" id="tab-0" onclick="setStep(0)">
      <span>📢</span> <strong>P</strong>ersuade
    </button>
    <button class="tab-btn i-tab" id="tab-1" onclick="setStep(1)">
      <span>💡</span> <strong>I</strong>nform
    </button>
    <button class="tab-btn e-tab" id="tab-2" onclick="setStep(2)">
      <span>🍿</span> <strong>E</strong>ntertain
    </button>
  </div>

  
  <div class="controls-row">
    <button class="nav-btn" onclick="prevStep()" title="Previous">◀</button>
    <div class="dots-group">
      <div class="dot active" id="dot-0" onclick="setStep(0)"></div>
      <div class="dot" id="dot-1" onclick="setStep(1)"></div>
      <div class="dot" id="dot-2" onclick="setStep(2)"></div>
    </div>
    <button class="nav-btn" onclick="nextStep()" title="Next">▶</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 3;

    function setStep(idx) {
      currentStep = (idx + totalSteps) % totalSteps;

      for (let i = 0; i < totalSteps; i++) {
        // Slices
        const slice = document.getElementById('slice-' + i);
        if (slice) slice.classList.toggle('active', i === currentStep);

        // Panels
        const panel = document.getElementById('panel-' + i);
        if (panel) panel.classList.toggle('active', i === currentStep);

        // Tabs
        const tab = document.getElementById('tab-' + i);
        if (tab) tab.classList.toggle('active', i === currentStep);

        // Dots
        const dot = document.getElementById('dot-' + i);
        if (dot) dot.classList.toggle('active', i === currentStep);
      }
    }

    function nextStep() {
      setStep(currentStep + 1);
    }

    function prevStep() {
      setStep(currentStep - 1);
    }

    // Connect SVG slice click handlers
    for (let i = 0; i < totalSteps; i++) {
      const slice = document.getElementById('slice-' + i);
      if (slice) {
        slice.addEventListener('click', () => setStep(i));
      }
    }
  </script>
</body>
</html>

Identifying Genre, Purpose, and Audience Before Writing

<!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, sans-serif; }
    body {
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      user-select: none;
    }

    /* Scenario Banner */
    .banner {
      width: 100%;
      max-width: 480px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #1d4ed8;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    /* Flowchart Container */
    .flow {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }

    /* Step Card */
    .stage-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    }
    .stage-card.dimmed {
      opacity: 0.35;
    }
    .stage-card.highlight {
      border-color: #3b82f6;
      box-shadow: 0 0 0 1px #3b82f6;
    }

    .stage-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .options {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .opt {
      border-radius: 8px;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      font-weight: 600;
      transition: background 0.2s, border-color 0.2s;
    }

    .opt.win {
      background: #f0fdf4;
      border: 1.5px solid #22c55e;
      color: #15803d;
    }

    .opt.alt {
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      color: #94a3b8;
    }

    .badge {
      font-size: 14px;
      font-weight: 800;
    }

    /* Connecting arrow */
    .arrow {
      text-align: center;
      color: #94a3b8;
      font-size: 12px;
      line-height: 1;
    }
  </style>
</head>
<body>

  <div class="banner">
    <span>🏀</span>
    <span>Goal: Basketball Hoops</span>
  </div>

  <div class="controls">
    <button class="step-btn" data-step="1">1. Audience</button>
    <button class="step-btn" data-step="2">2. Purpose</button>
    <button class="step-btn" data-step="3">3. Genre</button>
    <button class="step-btn active" data-step="all">All</button>
  </div>

  <div class="flow">
    
    <div class="stage-card" id="card-1">
      <div class="stage-title">1. Audience</div>
      <div class="options">
        <div class="opt win">
          <span>👥 School Board</span>
          <span class="badge">✓</span>
        </div>
        <div class="opt alt">
          <span>👶 Classmates</span>
          <span class="badge">✕</span>
        </div>
      </div>
    </div>

    <div class="arrow">↓</div>

    
    <div class="stage-card" id="card-2">
      <div class="stage-title">2. Purpose</div>
      <div class="options">
        <div class="opt win">
          <span>🎯 Persuade</span>
          <span class="badge">✓</span>
        </div>
        <div class="opt alt">
          <span>🎭 Entertain</span>
          <span class="badge">✕</span>
        </div>
      </div>
    </div>

    <div class="arrow">↓</div>

    
    <div class="stage-card" id="card-3">
      <div class="stage-title">3. Genre</div>
      <div class="options">
        <div class="opt win">
          <span>✉️ Formal Letter</span>
          <span class="badge">✓</span>
        </div>
        <div class="opt alt">
          <span>📖 Comic Book</span>
          <span class="badge">✕</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const cards = [
      document.getElementById('card-1'),
      document.getElementById('card-2'),
      document.getElementById('card-3')
    ];

    function setView(step) {
      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.step === step);
      });

      cards.forEach((card, idx) => {
        const cardStep = (idx + 1).toString();
        if (step === 'all') {
          card.classList.remove('dimmed');
          card.classList.remove('highlight');
        } else if (step === cardStep) {
          card.classList.remove('dimmed');
          card.classList.add('highlight');
        } else {
          card.classList.add('dimmed');
          card.classList.remove('highlight');
        }
      });
    }

    buttons.forEach(btn => {
      btn.addEventListener('click', () => setView(btn.dataset.step));
    });
  </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 {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 8px;
    }

    .compass-wrap {
      position: relative;
      width: 100%;
      max-width: 400px;
      aspect-ratio: 1 / 1;
      margin: 0 auto;
    }

    .connections {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .link-line {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-dasharray: 6 6;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .link-line.active {
      stroke: #6366f1;
      stroke-width: 3.5;
      stroke-dasharray: none;
      animation: dash 1s linear infinite;
    }

    .node {
      position: absolute;
      width: 108px;
      padding: 10px 6px;
      border-radius: 16px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      z-index: 2;
      transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
    }

    .node:active {
      transform: scale(0.97);
    }

    .node-icon {
      font-size: 24px;
      line-height: 1;
      margin-bottom: 4px;
    }

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

    .node-sub {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.1;
    }

    /* Node positioning */
    .node-purpose {
      top: 6%;
      left: 50%;
      transform: translateX(-50%);
      border-color: #fdba74;
      background: #fff7ed;
    }
    .node-purpose.active {
      border-color: #ea580c;
      box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.2);
    }

    .node-audience {
      bottom: 8%;
      left: 4%;
      border-color: #93c5fd;
      background: #eff6ff;
    }
    .node-audience.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2);
    }

    .node-genre {
      bottom: 8%;
      right: 4%;
      border-color: #86efac;
      background: #f0fdf4;
    }
    .node-genre.active {
      border-color: #16a34a;
      box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2);
    }

    /* Center core */
    .center-core {
      position: absolute;
      top: 56%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 86px;
      height: 86px;
      border-radius: 50%;
      background: #f8fafc;
      border: 2px dashed #94a3b8;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 2;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .center-core.ready {
      background: #eef2ff;
      border: 2px solid #6366f1;
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
    }

    .center-icon {
      font-size: 22px;
      line-height: 1;
    }

    .center-label {
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 2px;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 4px;
      z-index: 3;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

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

    @media (max-width: 360px) {
      .node {
        width: 96px;
        padding: 8px 4px;
      }
      .node-title { font-size: 12px; }
      .node-sub { font-size: 10px; }
      .center-core { width: 76px; height: 76px; }
      .center-icon { font-size: 18px; }
    }
  </style>
</head>
<body>

  <div class="compass-wrap">
    <svg class="connections" viewBox="0 0 400 400">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#6366f1"/>
        </marker>
      </defs>
      
      <line id="line-pa" class="link-line" x1="170" y1="90" x2="90" y2="280" />
      <line id="line-ag" class="link-line" x1="120" y1="330" x2="280" y2="330" />
      <line id="line-gp" class="link-line" x1="310" y1="280" x2="230" y2="90" />
      
      <line id="line-cp" class="link-line" x1="200" y1="120" x2="200" y2="185" />
      <line id="line-ca" class="link-line" x1="115" y1="290" x2="165" y2="245" />
      <line id="line-cg" class="link-line" x1="285" y1="290" x2="235" y2="245" />
    </svg>

    
    <div id="node-purpose" class="node node-purpose" onclick="setMode(0)">
      <span class="node-icon">🎯</span>
      <div class="node-title">Purpose</div>
      <div class="node-sub">Why write?</div>
    </div>

    
    <div id="node-audience" class="node node-audience" onclick="setMode(1)">
      <span class="node-icon">👥</span>
      <div class="node-title">Audience</div>
      <div class="node-sub">Who reads?</div>
    </div>

    
    <div id="node-genre" class="node node-genre" onclick="setMode(2)">
      <span class="node-icon">📖</span>
      <div class="node-title">Genre</div>
      <div class="node-sub">What format?</div>
    </div>

    
    <div id="center-core" class="center-core" onclick="setMode(3)">
      <span class="center-icon">✍️</span>
      <div class="center-label">Write!</div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-step" onclick="setMode(0)">1. Purpose</button>
    <button class="btn-step" onclick="setMode(1)">2. Audience</button>
    <button class="btn-step" onclick="setMode(2)">3. Genre</button>
    <button class="btn-step" onclick="setMode(3)">✦ Together</button>
  </div>

  <script>
    let currentStep = 3;
    let autoTimer = null;

    const nodes = [
      document.getElementById('node-purpose'),
      document.getElementById('node-audience'),
      document.getElementById('node-genre')
    ];
    const center = document.getElementById('center-core');
    const lines = document.querySelectorAll('.link-line');
    const btns = document.querySelectorAll('.btn-step');

    function updateState() {
      btns.forEach((btn, i) => btn.classList.toggle('active', i === currentStep));

      if (currentStep < 3) {
        nodes.forEach((n, i) => n.classList.toggle('active', i === currentStep));
        center.classList.remove('ready');
        lines.forEach(l => l.classList.remove('active'));
      } else {
        nodes.forEach(n => n.classList.add('active'));
        center.classList.add('ready');
        lines.forEach(l => l.classList.add('active'));
      }
    }

    function setMode(idx) {
      currentStep = idx;
      updateState();
      restartTimer();
    }

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

    function restartTimer() {
      clearInterval(autoTimer);
      autoTimer = setInterval(nextStep, 3500);
    }

    updateState();
    restartTimer();
  </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: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

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

    .filter-group {
      display: flex;
      gap: 6px;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
    }

    .tab-btn {
      border: none;
      background: transparent;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
    }

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

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

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

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

    .card-casual {
      border-top: 4px solid #f59e0b;
    }

    .card-formal {
      border-top: 4px solid #0284c7;
    }

    .audience-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .audience-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 15px;
    }

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

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

    .badge-casual {
      background: #fef3c7;
      color: #b45309;
    }

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

    .speech-bubble {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 14px;
      line-height: 1.45;
      flex: 1;
      position: relative;
    }

    .hl-greeting, .hl-message {
      padding: 1px 4px;
      border-radius: 4px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .view-greeting .hl-greeting {
      background: #fde047;
      color: #854d0e;
      font-weight: 600;
    }

    .view-message .hl-message {
      background: #bae6fd;
      color: #0369a1;
      font-weight: 600;
    }

    .trait-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
      color: #475569;
    }

    .trait-pill {
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 500;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="title">Same Topic • Different Audience</div>
    <div class="filter-group">
      <button class="tab-btn active" onclick="setFocus('all', this)">All</button>
      <button class="tab-btn" onclick="setFocus('greeting', this)">Greeting</button>
      <button class="tab-btn" onclick="setFocus('message', this)">Body</button>
    </div>
  </div>

  <div class="cards-grid" id="grid">
    
    <div class="audience-card card-casual">
      <div class="audience-header">
        <div class="audience-title">
          <span class="icon-badge">🙌</span>
          <span>Best Friend</span>
        </div>
        <span class="tone-badge badge-casual">Informal</span>
      </div>

      <div class="speech-bubble">
        <span class="hl-greeting">Hey!</span> <span class="hl-message">Check out this awesome robot! 🤖</span>
      </div>

      <div class="trait-list">
        <span class="trait-pill">⚡ Casual greeting</span>
        <span class="trait-pill">🎉 Excitement & emojis</span>
      </div>
    </div>

    
    <div class="audience-card card-formal">
      <div class="audience-header">
        <div class="audience-title">
          <span class="icon-badge">🏫</span>
          <span>School Principal</span>
        </div>
        <span class="tone-badge badge-formal">Formal</span>
      </div>

      <div class="speech-bubble">
        <span class="hl-greeting">Dear Principal Davis,</span> <span class="hl-message">I would like to propose a robotics club.</span>
      </div>

      <div class="trait-list">
        <span class="trait-pill">🤝 Polite title & name</span>
        <span class="trait-pill">🎯 Clear, respectful request</span>
      </div>
    </div>
  </div>

  <script>
    function setFocus(mode, btn) {
      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      const grid = document.getElementById('grid');
      grid.classList.remove('view-greeting', 'view-message');

      if (mode === 'greeting') {
        grid.classList.add('view-greeting');
      } else if (mode === 'message') {
        grid.classList.add('view-message');
      }
    }
  </script>

</body>
</html>

Brainstorming and Organizing Ideas with Graphic Organizers

Drafting Focused Paragraphs with Topic Sentences

Revising for Strong Word Choice and Vivid Verbs

Revising for Sentence Variety and Expanded Structures

Peer Conferencing and Incorporating Constructive Feedback

Editing for Capitalization, Punctuation, and Spelling Mechanics

Quick Writes and Timed Writing Fluency Responses

The Recursive Writing Process: Planning, Revising, and Editing

Structuring Poems with Lines, Stanzas, and Intentional Breaks

Writing Free Verse Poetry with Sensory Imagery

Incorporating Similes, Metaphors, and Personification in Verse

Writing Structured Poetic Forms: Haiku, Cinquain, and Couplets

Using Sound Devices: Alliteration, Assonance, and Onomatopoeia

Revising Poetry for Rhythm, Word Economy, and Emotional Impact

Poetic Forms, Imagery, and Figurative Verse

El conflicto dramático y la tensión en escena

Lectura dramatizada con reparto de voces

Adaptación de un cuento a guion de teatro

Diferencias entre texto narrativo, lírico y dramático

Anticipación de acciones teatrales según el título y elenco

Interpretación y adaptación de textos dramáticos

Developing Touch-Typing Technique and Keyboarding Fluency

Formatting Digital Documents: Fonts, Spacing, and Alignment

Inserting and Captioning Digital Images, Charts, and Graphics

Collaborating on Shared Digital Documents and Leaving Comments

Using Digital Spell Checkers and Thesaurus Tools Critically

Publishing and Sharing Multimodal Works for Specific Audiences

Digital Publishing, Keyboarding, and Collaboration

Pisanie odręczne — czytelność i płynność liter

Rozmieszczanie tekstu na stronie zeszytu

Pisanie tekstu ciągłego w jednej linii

Sprawdzanie i poprawianie napisanego tekstu

Pisanie odręczne i redagowanie tekstu

Układanie opowiadania — plan wydarzeń

Pisanie opowiadania — wstęp i zakończenie

Pisanie opowiadania z 6–10 zdań — ćwiczenie

Opisywanie osoby na podstawie obserwacji

Opisywanie przedmiotu — elementy opisu

Opisywanie elementu świata przyrody

Tworzenie opowiadań i opisów

Pisanie notatki — zasady i przykłady

Pisanie życzeń — forma i treść

Pisanie ogłoszenia — zasady tworzenia

Pisanie zaproszenia — elementy i układ

Pisanie podziękowania — forma i treść

Pisanie listu — układ i zasady

Zapis adresu nadawcy i odbiorcy

Pisanie krótkich tekstów z aplikacjami komputerowymi

Formy wypowiedzi użytkowej

Układanie zdarzeń we właściwej kolejności

Układanie planu wypowiedzi

Zapisywanie planu wypowiedzi

Pisanie opowiadania na podstawie planu i obrazka

Planowanie i tworzenie dłuższych wypowiedzi pisemnych

Piszę pojedyncze wyrazy z pamięci

Pisanie ze słuchu — dyktanda z pojedynczymi wyrazami

Pisanie ze słuchu — dyktanda z całymi zdaniami

Poprawność ortograficzna — wyrazy z ó i u

Poprawność ortograficzna — wyrazy z rz i ż

Poprawność ortograficzna — wyrazy z ch i h

Ortografia — pisownia wyrazów i dyktanda

What Is an Opinion Piece?

Introducing Your Topic and Stating Your Opinion

Organizing Your Reasons in a List

Giving Reasons That Support Your Opinion

Telling Strong Reasons From Weak Ones

Using Because, Therefore, and For Example

Writing a Strong Ending for Your Opinion

Putting Your Opinion Piece Together

Writing Opinion Pieces With Reasons

Znaki interpunkcyjne na końcu zdania — kropka i pytajnik

Znaki interpunkcyjne na końcu zdania — wykrzyknik

Przecinki przy wyliczaniu — zasady i przykłady

Skróty — najczęściej stosowane w tekstach

Skróty matematyczne — zapis i znaczenie

Interpunkcja i skróty w tekstach

What Is Informative Writing?

Introducing Your Topic Clearly

Grouping Related Information Together

Adding Illustrations to Help Your Reader

Developing Your Topic With Facts

Adding Definitions and Details

Using Also, Another, and More to Connect Ideas

Writing a Conclusion for Your Information

Putting Your Informative Piece Together

Writing Informative Texts to Teach Others

Kolejność alfabetyczna — według pierwszej litery

Kolejność alfabetyczna — według drugiej litery

Zapis liczebników — cyfry i liczby w tekstach

Zapis pojęć z różnych dyscyplin naukowych

Wielkość liter w tytułach utworów i książek

Wielkość liter w nazwach geograficznych i imionach

Stosowanie wielkiej litery — łączenie zasad

Wielka litera, liczby i porządkowanie tekstu

What Is Narrative Writing?

Setting Up the Situation in Your Story

Introducing Your Characters and Narrator

Putting Events in a Natural Order

Using Dialogue in Your Story

Describing Actions, Thoughts, and Feelings

Using First, Then, Next, and Last

Writing a Satisfying Ending

Using Details From a Text to Write a New Story Ending

Writing Narratives With Detail and Sequence

Planning Your Writing Before You Start

Making Your Writing Better

Checking Your Writing for Organization

Editing for Spelling and Punctuation

Typing Your Writing on a Keyboard

Publishing Your Writing With Technology

Writing Over Several Days

Writing in One Sitting

Revising, Editing, and Publishing Your Writing

La anáfora y la repetición al inicio de versos

Imágenes sensoriales: visuales, auditivas, olfativas, gustativas y táctiles

Refranes y dichos populares como lenguaje figurado

Modismos y expresiones idiomáticas regionales

Creación de metáforas y símiles propios en la escritura

Análisis del efecto emocional de las figuras en el lector

Taller integrado de interpretación de figuras literarias

Recursos de repetición, expresiones cotidianas y taller creativo

Los pronombres personales tónicos y átonos

Los pronombres demostrativos y posesivos en reemplazo del nombre

Pronombres interrogativos y exclamativos con tilde diacrítica

Uso de pronombres para evitar repeticiones: anáfora textual

Concordancia entre pronombre y referente

Detección y corrección de errores de concordancia nominal

Aplicación de categorías nominales en la creación de párrafos

Los pronombres: tipos, funciones y concordancia nominal

Planning an Informative Text

Planning a Persuasive Text

Planning an Imaginative Written Text

Using Visual Features in Written Texts

Choosing Appropriate Form and Layout

Planning Different Text Types

Grouping Ideas in Simple Paragraphs

Using Correct Tense in Your Writing

Using Topic-Specific Vocabulary in Writing

Spelling High-Frequency Words in Writing

Spelling Phonetically Regular Words in Writing

Drafting Your Text

Organising and Drafting Written Texts

Editing for Grammar and Punctuation

Editing for Spelling and Vocabulary

Publishing Written Texts

Creating Multimodal Texts

Editing, Publishing and Multimodal Texts

El modo imperativo para dar instrucciones y consejos

Concordancia estricta entre sujeto y verbo

Casos especiales de concordancia: sujeto colectivo y oraciones impersonales

Coherencia temporal en la redacción de textos completos

Imperativo, concordancia y coherencia textual

Conectores de orden y secuencia temporal

Conectores de adición y ejemplificación

Conectores de oposición y contraste

Conectores de causa y consecuencia en el escrito

Cohesión textual: evitando la repetición de nexos

Puntuación vinculada al uso de conectores

Taller de enlace oracional y articulación de párrafos

Conectores discursivos y cohesión textual

La oración bimembre: sujeto y predicado

El sujeto expreso y el sujeto tácito o desinencial

El núcleo del sujeto y sus modificadores directos e indirectos

El núcleo del predicado y los complementos directo e indirecto

Los complementos circunstanciales: lugar, tiempo, modo y causa

Oraciones simples y oraciones compuestas

Identificación y corrección de fragmentos y oraciones incompletas

Sintaxis oracional: estructura y análisis

Reglas generales de acentuación: agudas, graves, esdrújulas y sobresdrújulas

Diptongos, hiatos y el acento diacrítico en monosílabos

Ortografía de letras dudosas: b-v, c-s-z, g-j y h

Taller integrado de corrección sintáctica y ortográfica

Ortografía: acentuación y grafemas

Definición de la situación comunicativa: propósito y destinatario

Delimitación de la temática de un texto narrativo o argumentativo

Selección y diseño del tema narrativo a partir del entorno

Elaboración del plan textual: jerarquización de ideas

Esquema de secuencias para el texto argumentativo oral y escrito

Planificación del artículo informativo: secciones y subtemas

Planificación y diseño del plan textual

Redacción del párrafo introductorio y planteamiento del tema

Desarrollo de párrafos explicativos con oraciones temáticas y detalles

Incorporación de citas y paráfrasis en el texto

Redacción del párrafo de cierre y conclusión sintética

Producción del primer borrador completo del texto narrativo

Producción de la primera versión de un texto informativo

Inclusión de recursos gráficos, titulares e imágenes en el escrito

Creación de un texto nuevo a partir de noticias de medios masivos

Autoevaluación del borrador frente al plan textual inicial

Redacción y producción de borradores informativos

Criterios de revisión textual: claridad, coherencia y cohesión

Revisión de la estructura de párrafos y progresión temática

Revisar concordancia entre palabras en el escrito

Revisión de la correlación de tiempos verbales

Eliminación de redundancias y palabras innecesarias

Enriquecimiento del vocabulario con sinónimos precisos

Revisión y corrección de borradores

OGE.4.W.5

Aligned learning resources

Related diagrams