<!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>5 Classical Speech Framework</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Top Step Pills */
    .stepper-nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }

    .step-btn {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 4px;
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.25s ease;
      text-align: center;
    }

    .step-btn .step-num {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.8;
    }

    .step-btn .step-name {
      font-size: 12px;
    }

    .step-btn.active {
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .step-btn[data-step="0"].active { background: #2563eb; }
    .step-btn[data-step="1"].active { background: #d97706; }
    .step-btn[data-step="2"].active { background: #059669; }
    .step-btn[data-step="3"].active { background: #7c3aed; }
    .step-btn[data-step="4"].active { background: #e11d48; }

    /* Main Showcase Box */
    .card-stage {
      position: relative;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .badge-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 12px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .badge-0 { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .badge-1 { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
    .badge-2 { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .badge-3 { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
    .badge-4 { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

    .role-tag {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 4px 10px;
      border-radius: 6px;
    }

    .speech-quote {
      font-size: 16px;
      line-height: 1.5;
      font-weight: 600;
      color: #0f172a;
      background: #f8fafc;
      border-left: 4px solid #cbd5e1;
      padding: 14px 16px;
      border-radius: 0 8px 8px 0;
      margin: 8px 0;
      min-height: 72px;
      display: flex;
      align-items: center;
      transition: border-color 0.3s ease;
    }

    .meta-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #e2e8f0;
      font-size: 12px;
      color: #64748b;
    }

    .meta-bar span strong {
      color: #334155;
    }

    /* Timeline Structure Flow */
    .flow-overview {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 4px;
      background: #ffffff;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
    }

    .flow-bar {
      height: 6px;
      border-radius: 3px;
      background: #e2e8f0;
      transition: background 0.3s ease;
    }

    .flow-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      text-align: center;
    }

    .flow-item.active .flow-bar.bar-0 { background: #2563eb; }
    .flow-item.active .flow-bar.bar-1 { background: #d97706; }
    .flow-item.active .flow-bar.bar-2 { background: #059669; }
    .flow-item.active .flow-bar.bar-3 { background: #7c3aed; }
    .flow-item.active .flow-bar.bar-4 { background: #e11d48; }

    .flow-label {
      font-size: 10px;
      color: #94a3b8;
      font-weight: 600;
    }

    .flow-item.active .flow-label {
      color: #1e293b;
      font-weight: 700;
    }

    /* Playback Controls */
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

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

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }

    .nav-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .play-btn {
      background: #0f172a;
      color: #ffffff;
      border: 1px solid #0f172a;
    }

    .play-btn:hover {
      background: #1e293b;
    }

    @media (max-width: 480px) {
      .step-btn .step-name { font-size: 10px; }
      .speech-quote { font-size: 14px; padding: 10px 12px; }
      .role-tag { font-size: 11px; }
      .badge { font-size: 11px; }
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav" id="stepperNav">
    <button class="step-btn active" data-step="0">
      <span class="step-num">Part 1</span>
      <span class="step-name">Exordium</span>
    </button>
    <button class="step-btn" data-step="1">
      <span class="step-num">Part 2</span>
      <span class="step-name">Narratio</span>
    </button>
    <button class="step-btn" data-step="2">
      <span class="step-num">Part 3</span>
      <span class="step-name">Confirmatio</span>
    </button>
    <button class="step-btn" data-step="3">
      <span class="step-num">Part 4</span>
      <span class="step-name">Refutatio</span>
    </button>
    <button class="step-btn" data-step="4">
      <span class="step-num">Part 5</span>
      <span class="step-name">Peroratio</span>
    </button>
  </div>

  
  <div class="card-stage">
    <div>
      <div class="badge-row">
        <span class="badge badge-0" id="partBadge">🎣 1. Exordium</span>
        <span class="role-tag" id="functionTag">Rhetorical Hook</span>
      </div>

      <blockquote class="speech-quote" id="quoteText" style="border-left-color: #2563eb;">
        “Imagine a student sitting in a parking lot at 9 PM just to access Wi-Fi for homework.”
      </blockquote>
    </div>

    <div class="meta-bar">
      <span>Purpose: <strong id="purposeText">Engage emotional attention</strong></span>
      <span>Oratorical Goal: <strong id="goalText">Establish ethos & interest</strong></span>
    </div>
  </div>

  
  <div class="flow-overview" id="flowOverview">
    <div class="flow-item active" data-step="0">
      <div class="flow-bar bar-0"></div>
      <span class="flow-label">Hook</span>
    </div>
    <div class="flow-item" data-step="1">
      <div class="flow-bar bar-1"></div>
      <span class="flow-label">Facts</span>
    </div>
    <div class="flow-item" data-step="2">
      <div class="flow-bar bar-2"></div>
      <span class="flow-label">Proof</span>
    </div>
    <div class="flow-item" data-step="3">
      <div class="flow-bar bar-3"></div>
      <span class="flow-label">Rebuttal</span>
    </div>
    <div class="flow-item" data-step="4">
      <div class="flow-bar bar-4"></div>
      <span class="flow-label">Action</span>
    </div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button class="nav-btn" id="prevBtn">← Prev</button>
      <button class="nav-btn" id="nextBtn">Next →</button>
    </div>
    <button class="nav-btn play-btn" id="playBtn">⏸ Pause</button>
  </div>

  <script>
    const speechSteps = [
      {
        part: "1. Exordium",
        icon: "🎣",
        badgeClass: "badge-0",
        borderColor: "#2563eb",
        tag: "Hook & Context",
        quote: "“Imagine a student sitting in a parking lot at 9 PM just to access Wi-Fi for homework.”",
        purpose: "Draw audience attention & build empathy",
        goal: "Ethos & Pathos"
      },
      {
        part: "2. Narratio",
        icon: "📊",
        badgeClass: "badge-1",
        borderColor: "#d97706",
        tag: "Statement of Facts",
        quote: "“Over 22% of households in our county lack fiber-optic internet connections.”",
        purpose: "Establish clear factual groundwork",
        goal: "Context & Logos"
      },
      {
        part: "3. Confirmatio",
        icon: "💡",
        badgeClass: "badge-2",
        borderColor: "#059669",
        tag: "Core Proof / Argument",
        quote: "“Municipal broadband treats connectivity as public infrastructure, raising graduation rates by 14%.”",
        purpose: "Deliver strongest supporting evidence",
        goal: "Proof & Logic"
      },
      {
        part: "4. Refutatio",
        icon: "🛡️",
        badgeClass: "badge-3",
        borderColor: "#7c3aed",
        tag: "Counter-Argument Refutation",
        quote: "“Critics claim public networks cost taxpayers too much, yet long-term bond financing creates a self-sustaining revenue stream.”",
        purpose: "Neutralize opposing claims directly",
        goal: "Anticipation & Defense"
      },
      {
        part: "5. Peroratio",
        icon: "📢",
        badgeClass: "badge-4",
        borderColor: "#e11d48",
        tag: "Conclusion & Call to Action",
        quote: "“Vote yes on Measure 4 to ensure no student is left offline.”",
        purpose: "Inspire final decisive action",
        goal: "Pathos & Resolution"
      }
    ];

    let currentStep = 0;
    let autoInterval = null;
    let isPlaying = true;

    const partBadge = document.getElementById('partBadge');
    const functionTag = document.getElementById('functionTag');
    const quoteText = document.getElementById('quoteText');
    const purposeText = document.getElementById('purposeText');
    const goalText = document.getElementById('goalText');
    const stepButtons = document.querySelectorAll('.step-btn');
    const flowItems = document.querySelectorAll('.flow-item');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function renderStep(idx) {
      currentStep = (idx + speechSteps.length) % speechSteps.length;
      const data = speechSteps[currentStep];

      // Update Card
      partBadge.className = `badge ${data.badgeClass}`;
      partBadge.textContent = `${data.icon} ${data.part}`;
      functionTag.textContent = data.tag;
      quoteText.textContent = data.quote;
      quoteText.style.borderLeftColor = data.borderColor;
      purposeText.textContent = data.purpose;
      goalText.textContent = data.goal;

      // Update Nav Buttons
      stepButtons.forEach((btn, i) => {
        btn.classList.toggle('active', i === currentStep);
      });

      // Update Flow Bar
      flowItems.forEach((item, i) => {
        item.classList.toggle('active', i === currentStep);
      });
    }

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

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

    function startAutoPlay() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(nextStep, 4500);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

    function pauseAutoPlay() {
      if (autoInterval) clearInterval(autoInterval);
      isPlaying = false;
      playBtn.textContent = '▶ Auto Play';
    }

    // Event Listeners
    stepButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        renderStep(step);
        pauseAutoPlay();
      });
    });

    flowItems.forEach(item => {
      item.addEventListener('click', () => {
        const step = parseInt(item.getAttribute('data-step'), 10);
        renderStep(step);
        pauseAutoPlay();
      });
    });

    prevBtn.addEventListener('click', () => {
      prevStep();
      pauseAutoPlay();
    });

    nextBtn.addEventListener('click', () => {
      nextStep();
      pauseAutoPlay();
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Initialize
    renderStep(0);
    startAutoPlay();
  </script>
</body>
</html>

Structuring Classical and Contemporary Speech Frameworks

<!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>Speech Frameworks Comparison</title>
  <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: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }

    .framework-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .framework-header {
      text-align: center;
      margin-bottom: 4px;
    }

    .framework-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .framework-badge {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 12px;
      margin-top: 2px;
      display: inline-block;
    }

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

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

    .steps-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5px;
      align-items: center;
    }

    /* Classical - Funnel Shape */
    .funnel-step {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 6px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      position: relative;
    }

    .funnel-step.s1 { width: 100%; border-color: #93c5fd; }
    .funnel-step.s2 { width: 88%;  border-color: #60a5fa; }
    .funnel-step.s3 { width: 76%;  border-color: #3b82f6; }
    .funnel-step.s4 { width: 64%;  border-color: #2563eb; }
    .funnel-step.s5 { width: 52%;  border-color: #1d4ed8; }

    /* Monroe - Staircase / Ascending */
    .stair-step {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 6px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
      position: relative;
    }

    .stair-step.m1 { width: 52%; border-color: #fcd34d; }
    .stair-step.m2 { width: 64%; border-color: #fbbf24; }
    .stair-step.m3 { width: 76%; border-color: #f59e0b; }
    .stair-step.m4 { width: 88%; border-color: #d97706; }
    .stair-step.m5 { width: 100%; border-color: #b45309; }

    .step-name {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      white-space: nowrap;
    }

    .step-num {
      font-size: 11px;
      opacity: 0.6;
      margin-right: 4px;
    }

    .funnel-step:hover, .stair-step:hover,
    .funnel-step.active, .stair-step.active {
      background: #ffffff;
      box-shadow: 0 0 0 2px #0284c7;
      border-color: #0284c7;
    }

    .stair-step:hover, .stair-step.active {
      box-shadow: 0 0 0 2px #d97706;
      border-color: #d97706;
    }

    /* Core Question Display Callout */
    .question-panel {
      width: 100%;
      max-width: 620px;
      margin-top: 12px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
    }

    .question-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .question-text {
      font-size: 13.5px;
      font-weight: 600;
      color: #0f172a;
      text-align: right;
    }

    @media (max-width: 480px) {
      .step-name { font-size: 12px; }
      .framework-title { font-size: 13px; }
      .question-text { font-size: 12.5px; }
      .main-grid { gap: 10px; }
    }
  </style>
</head>
<body>

  <div class="main-grid">
    
    <div class="framework-col">
      <div class="framework-header">
        <div class="framework-title">🏛️ Classical</div>
        <span class="framework-badge badge-classical">Argument-Driven / Judicial</span>
      </div>
      <div class="steps-container">
        <div class="funnel-step s1" data-q="Why should I listen? (Ethos & Hook)">
          <span class="step-name"><span class="step-num">1</span>Exordium</span>
        </div>
        <div class="funnel-step s2" data-q="What is the context and background facts?">
          <span class="step-name"><span class="step-num">2</span>Narratio</span>
        </div>
        <div class="funnel-step s3" data-q="What proof supports this claim?">
          <span class="step-name"><span class="step-num">3</span>Confirmatio</span>
        </div>
        <div class="funnel-step s4" data-q="What about the opposing arguments?">
          <span class="step-name"><span class="step-num">4</span>Refutatio</span>
        </div>
        <div class="funnel-step s5" data-q="What is the final synthesis & emotional appeal?">
          <span class="step-name"><span class="step-num">5</span>Peroratio</span>
        </div>
      </div>
    </div>

    
    <div class="framework-col">
      <div class="framework-header">
        <div class="framework-title">⚡ Motivated Sequence</div>
        <span class="framework-badge badge-monroe">Action-Driven / Persuasive</span>
      </div>
      <div class="steps-container">
        <div class="stair-step m1" data-q="Why does this matter right now?">
          <span class="step-name"><span class="step-num">1</span>Attention</span>
        </div>
        <div class="stair-step m2" data-q="What urgent problem must be solved?">
          <span class="step-name"><span class="step-num">2</span>Need</span>
        </div>
        <div class="stair-step m3" data-q="What is the solution to this problem?">
          <span class="step-name"><span class="step-num">3</span>Satisfaction</span>
        </div>
        <div class="stair-step m4" data-q="What does the future look like with this?">
          <span class="step-name"><span class="step-num">4</span>Visualization</span>
        </div>
        <div class="stair-step m5" data-q="What exact step must I take today?">
          <span class="step-name"><span class="step-num">5</span>Action</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="question-panel">
    <div class="question-label" id="stepTarget">Select Step</div>
    <div class="question-text" id="stepQuestion">Hover or tap any step to reveal its core question</div>
  </div>

  <script>
    const items = document.querySelectorAll('.funnel-step, .stair-step');
    const labelEl = document.getElementById('stepTarget');
    const questionEl = document.getElementById('stepQuestion');

    function setActive(el) {
      items.forEach(item => item.classList.remove('active'));
      el.classList.add('active');
      const stepText = el.querySelector('.step-name').textContent.trim();
      const question = el.getAttribute('data-q');
      labelEl.textContent = stepText;
      questionEl.textContent = `"${question}"`;
    }

    items.forEach(el => {
      el.addEventListener('mouseenter', () => setActive(el));
      el.addEventListener('click', () => setActive(el));
    });
  </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;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      height: 100%;
      user-select: none;
    }

    .header {
      text-align: center;
      margin-bottom: 8px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.2px;
    }

    /* Timeline step selector */
    .timeline-nav {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin: 8px 4px 14px;
      padding: 0 8px;
    }
    .timeline-track {
      position: absolute;
      top: 50%;
      left: 16px;
      right: 16px;
      height: 3px;
      background: #e2e8f0;
      transform: translateY(-50%);
      z-index: 1;
    }
    .timeline-progress {
      position: absolute;
      top: 50%;
      left: 16px;
      height: 3px;
      background: #2563eb;
      transform: translateY(-50%);
      z-index: 1;
      transition: width 0.3s ease;
      width: 0%;
    }
    .nav-btn {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 999px;
      width: 32px;
      height: 32px;
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.25s ease;
    }
    .nav-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.18);
    }

    /* Display Card Container */
    .viewport {
      flex: 1;
      position: relative;
      min-height: 250px;
    }
    .step-card {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .step-card.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Card Elements */
    .badge-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .phase-badge {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #eff6ff;
      color: #2563eb;
    }
    .phase-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .visual-panel {
      flex: 1;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;
      position: relative;
      overflow: hidden;
    }

    /* Step-Specific Visuals */
    /* Step 1: Attention */
    .stat-box {
      text-align: center;
    }
    .stat-num {
      font-size: 44px;
      font-weight: 900;
      color: #dc2626;
      line-height: 1;
    }
    .stat-lbl {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 4px;
    }

    /* Step 2: Need */
    .need-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 320px;
    }
    .need-pill {
      background: #fff;
      border: 1px solid #fed7aa;
      border-radius: 8px;
      padding: 10px 4px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
      color: #c2410c;
    }
    .need-icon {
      font-size: 22px;
      margin-bottom: 4px;
    }

    /* Step 3: Satisfaction */
    .solution-box {
      text-align: center;
      background: #fff;
      border: 2px solid #22c55e;
      border-radius: 12px;
      padding: 12px 18px;
      width: 100%;
      max-width: 280px;
    }
    .solution-name {
      font-size: 18px;
      font-weight: 800;
      color: #15803d;
      margin-bottom: 4px;
    }
    .solution-spec {
      font-size: 12px;
      font-weight: 600;
      color: #1e2945;
    }

    /* Step 4: Visualization */
    .split-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      height: 100%;
    }
    .split-col {
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 4px;
    }
    .split-col.bad {
      background: #fef2f2;
      border: 1px solid #fecaca;
    }
    .split-col.good {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }
    .split-icon {
      font-size: 26px;
    }
    .split-lbl {
      font-size: 11px;
      font-weight: 700;
    }
    .bad .split-lbl { color: #991b1b; }
    .good .split-lbl { color: #166534; }

    /* Step 5: Action */
    .action-box {
      display: flex;
      align-items: center;
      gap: 14px;
      background: #fff;
      border: 1px solid #cbd5e1;
      padding: 12px;
      border-radius: 10px;
    }
    .qr-mock {
      width: 60px;
      height: 60px;
      background: repeating-conic-gradient(#1e2945 0% 25%, #fff 0% 50%) 50% / 12px 12px;
      border: 3px solid #1e2945;
      border-radius: 4px;
      flex-shrink: 0;
    }
    .action-details {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .action-btn-mock {
      background: #2563eb;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 4px;
      display: inline-block;
      text-align: center;
    }
    .action-sub {
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
    }

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }
    .ctrl-btn {
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      cursor: pointer;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title">Monroe's Motivated Sequence</div>
  </div>

  <div class="timeline-nav">
    <div class="timeline-track"></div>
    <div class="timeline-progress" id="progress"></div>
    <button class="nav-btn active" onclick="goToStep(0)">1</button>
    <button class="nav-btn" onclick="goToStep(1)">2</button>
    <button class="nav-btn" onclick="goToStep(2)">3</button>
    <button class="nav-btn" onclick="goToStep(3)">4</button>
    <button class="nav-btn" onclick="goToStep(4)">5</button>
  </div>

  <div class="viewport">
    
    <div class="step-card active" id="card-0">
      <div class="badge-row">
        <span class="phase-badge">Step 1</span>
        <span class="phase-title">Attention</span>
      </div>
      <div class="visual-panel">
        <div class="stat-box">
          <div class="stat-num">42%</div>
          <div class="stat-lbl">Math Failure Rate</div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="card-1">
      <div class="badge-row">
        <span class="phase-badge">Step 2</span>
        <span class="phase-title">Need</span>
      </div>
      <div class="visual-panel">
        <div class="need-grid">
          <div class="need-pill"><div class="need-icon">📉</div>Scores</div>
          <div class="need-pill"><div class="need-icon">👤</div>Isolation</div>
          <div class="need-pill"><div class="need-icon">⚡</div>Stress</div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="card-2">
      <div class="badge-row">
        <span class="phase-badge">Step 3</span>
        <span class="phase-title">Satisfaction</span>
      </div>
      <div class="visual-panel">
        <div class="solution-box">
          <div class="solution-name">StudyBridge</div>
          <div class="solution-spec">20-Min Daily Peer Tutoring</div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="card-3">
      <div class="badge-row">
        <span class="phase-badge">Step 4</span>
        <span class="phase-title">Visualization</span>
      </div>
      <div class="visual-panel">
        <div class="split-grid">
          <div class="split-col bad">
            <div class="split-icon">🥀</div>
            <div class="split-lbl">Without Help<br>Failing Alone</div>
          </div>
          <div class="split-col good">
            <div class="split-icon">🎓</div>
            <div class="split-lbl">With Mentor<br>Mastering Math</div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="step-card" id="card-4">
      <div class="badge-row">
        <span class="phase-badge">Step 5</span>
        <span class="phase-title">Action</span>
      </div>
      <div class="visual-panel">
        <div class="action-box">
          <div class="qr-mock"></div>
          <div class="action-details">
            <span class="action-btn-mock">Scan / Sign Up</span>
            <span class="action-sub">Launch: This Friday</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">← Prev</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Pause</button>
    <button class="ctrl-btn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    let current = 0;
    const total = 5;
    let isPlaying = true;
    let timer = null;

    const cards = [0, 1, 2, 3, 4].map(i => document.getElementById(`card-${i}`));
    const btns = document.querySelectorAll('.nav-btn');
    const progress = document.getElementById('progress');
    const playBtn = document.getElementById('playBtn');

    function updateUI() {
      cards.forEach((card, idx) => {
        card.classList.toggle('active', idx === current);
      });
      btns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === current);
      });
      progress.style.width = (current / (total - 1)) * 100 + '%';
    }

    function goToStep(idx) {
      current = idx;
      updateUI();
    }

    function nextStep() {
      current = (current + 1) % total;
      updateUI();
    }

    function prevStep() {
      current = (current - 1 + total) % total;
      updateUI();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) startTimer();
      else clearInterval(timer);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3500);
    }

    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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
      user-select: none;
    }

    /* Track / Steps Header */
    .timeline-nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      width: 100%;
      max-width: 620px;
      position: relative;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    }

    .step-btn:hover {
      border-color: #22b7ff;
    }

    .step-btn.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #22b7ff inset;
    }

    .step-num {
      font-size: 11px;
      font-weight: 700;
      color: #8896ab;
      line-height: 1;
    }
    .step-btn.active .step-num {
      color: #0284c7;
    }

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

    .step-badge {
      font-size: 10px;
      color: #64748b;
      line-height: 1;
    }

    /* Rhetorical Arc Visualization */
    .arc-container {
      width: 100%;
      max-width: 620px;
      margin: 14px 0 12px 0;
      position: relative;
      height: 24px;
      display: flex;
      align-items: center;
    }

    .arc-line-bg {
      position: absolute;
      width: 100%;
      height: 4px;
      background: #f1f5f9;
      border-radius: 2px;
    }

    .arc-line-progress {
      position: absolute;
      left: 0;
      height: 4px;
      background: #22b7ff;
      border-radius: 2px;
      transition: width 0.35s ease;
    }

    .arc-nodes {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 8%;
    }

    .arc-node {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      transition: border-color 0.25s, transform 0.25s, background-color 0.25s;
    }

    .arc-node.active {
      border-color: #22b7ff;
      background: #22b7ff;
      transform: scale(1.3);
    }

    .arc-node.passed {
      border-color: #22b7ff;
      background: #ffffff;
    }

    /* Detail Stage Card */
    .stage-wrapper {
      width: 100%;
      max-width: 620px;
      height: 180px;
      position: relative;
      overflow: hidden;
    }

    .stage-card {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 14px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

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

    .stage-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f1f5f9;
      padding-bottom: 8px;
    }

    .stage-title {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

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

    .stage-title span {
      font-size: 13px;
      color: #0284c7;
      font-weight: 600;
    }

    .pill {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      background: #e0f2fe;
      color: #0369a1;
    }

    .stage-body {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 12px;
      margin-top: 8px;
      align-items: center;
    }

    .metric-box {
      background: #f8fafc;
      border-radius: 8px;
      padding: 8px 10px;
      border: 1px solid #edf2f7;
    }

    .metric-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      margin-bottom: 2px;
    }

    .metric-val {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .visual-gauge {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .gauge-bar-track {
      height: 8px;
      background: #edf2f7;
      border-radius: 4px;
      overflow: hidden;
    }

    .gauge-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #38bdf8, #0284c7);
      border-radius: 4px;
    }

    .gauge-labels {
      display: flex;
      justify-content: space-between;
      font-size: 10px;
      color: #64748b;
      font-weight: 600;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }

    .ctrl-btn:hover {
      border-color: #22b7ff;
      background: #f8fafc;
    }

    .dots-nav {
      display: flex;
      gap: 6px;
      margin: 0 8px;
    }

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

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

    @media (max-width: 480px) {
      .step-name {
        font-size: 10px;
      }
      .step-badge {
        display: none;
      }
      .stage-body {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .stage-wrapper {
        height: 200px;
      }
    }
  </style>
</head>
<body>

  
  <div class="timeline-nav">
    <div class="step-btn active" data-step="0">
      <span class="step-num">01</span>
      <span class="step-name">Exordium</span>
      <span class="step-badge">Ethos</span>
    </div>
    <div class="step-btn" data-step="1">
      <span class="step-num">02</span>
      <span class="step-name">Narratio</span>
      <span class="step-badge">Facts</span>
    </div>
    <div class="step-btn" data-step="2">
      <span class="step-num">03</span>
      <span class="step-name">Confirmatio</span>
      <span class="step-badge">Proof</span>
    </div>
    <div class="step-btn" data-step="3">
      <span class="step-num">04</span>
      <span class="step-name">Refutatio</span>
      <span class="step-badge">Rebuttal</span>
    </div>
    <div class="step-btn" data-step="4">
      <span class="step-num">05</span>
      <span class="step-name">Peroratio</span>
      <span class="step-badge">Climax</span>
    </div>
  </div>

  
  <div class="arc-container">
    <div class="arc-line-bg"></div>
    <div class="arc-line-progress" id="arcProgress" style="width: 10%;"></div>
    <div class="arc-nodes">
      <div class="arc-node active"></div>
      <div class="arc-node"></div>
      <div class="arc-node"></div>
      <div class="arc-node"></div>
      <div class="arc-node"></div>
    </div>
  </div>

  
  <div class="stage-wrapper">
    
    <div class="stage-card active" data-card="0">
      <div class="stage-header">
        <div class="stage-title">
          <h2>1. Exordium</h2>
          <span>The Hook</span>
        </div>
        <span class="pill">Ethos Focus</span>
      </div>
      <div class="stage-body">
        <div class="metric-box">
          <div class="metric-label">Rhetorical Function</div>
          <div class="metric-val">Capture attention &amp; build speaker credibility</div>
        </div>
        <div class="visual-gauge">
          <div class="gauge-labels">
            <span>Engagement Arc</span>
            <span>Interest Spark</span>
          </div>
          <div class="gauge-bar-track">
            <div class="gauge-bar-fill" style="width: 45%;"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="stage-card" data-card="1">
      <div class="stage-header">
        <div class="stage-title">
          <h2>2. Narratio</h2>
          <span>The Context</span>
        </div>
        <span class="pill">Logos Base</span>
      </div>
      <div class="stage-body">
        <div class="metric-box">
          <div class="metric-label">Rhetorical Function</div>
          <div class="metric-val">Establish background facts &amp; core issue</div>
        </div>
        <div class="visual-gauge">
          <div class="gauge-labels">
            <span>Engagement Arc</span>
            <span>Clarity</span>
          </div>
          <div class="gauge-bar-track">
            <div class="gauge-bar-fill" style="width: 55%;"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="stage-card" data-card="2">
      <div class="stage-header">
        <div class="stage-title">
          <h2>3. Confirmatio</h2>
          <span>The Proof</span>
        </div>
        <span class="pill">Evidence Hub</span>
      </div>
      <div class="stage-body">
        <div class="metric-box">
          <div class="metric-label">Rhetorical Function</div>
          <div class="metric-val">Present central arguments &amp; strong proof</div>
        </div>
        <div class="visual-gauge">
          <div class="gauge-labels">
            <span>Engagement Arc</span>
            <span>Logic Peak</span>
          </div>
          <div class="gauge-bar-track">
            <div class="gauge-bar-fill" style="width: 80%;"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="stage-card" data-card="3">
      <div class="stage-header">
        <div class="stage-title">
          <h2>4. Refutatio</h2>
          <span>The Rebuttal</span>
        </div>
        <span class="pill">Anticipation</span>
      </div>
      <div class="stage-body">
        <div class="metric-box">
          <div class="metric-label">Rhetorical Function</div>
          <div class="metric-val">Dismantle opposing views &amp; objections</div>
        </div>
        <div class="visual-gauge">
          <div class="gauge-labels">
            <span>Engagement Arc</span>
            <span>Resolution</span>
          </div>
          <div class="gauge-bar-track">
            <div class="gauge-bar-fill" style="width: 75%;"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="stage-card" data-card="4">
      <div class="stage-header">
        <div class="stage-title">
          <h2>5. Peroratio</h2>
          <span>The Climax</span>
        </div>
        <span class="pill">Pathos Peak</span>
      </div>
      <div class="stage-body">
        <div class="metric-box">
          <div class="metric-label">Rhetorical Function</div>
          <div class="metric-val">Inspire emotion &amp; issue Call to Action</div>
        </div>
        <div class="visual-gauge">
          <div class="gauge-labels">
            <span>Engagement Arc</span>
            <span>Max Impact</span>
          </div>
          <div class="gauge-bar-track">
            <div class="gauge-bar-fill" style="width: 100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn" aria-label="Previous step">←</button>
    <div class="dots-nav">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
      <div class="dot" data-step="4"></div>
    </div>
    <button class="ctrl-btn" id="nextBtn" aria-label="Next step">→</button>
    <button class="ctrl-btn" id="playBtn" style="margin-left: 8px;">Auto ▶</button>
  </div>

  <script>
    const stepBtns = document.querySelectorAll('.step-btn');
    const cards = document.querySelectorAll('.stage-card');
    const nodes = document.querySelectorAll('.arc-node');
    const dots = document.querySelectorAll('.dot');
    const arcProgress = document.getElementById('arcProgress');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playBtn = document.getElementById('playBtn');

    let current = 0;
    const total = 5;
    let timer = null;

    const progressWidths = ['10%', '30%', '50%', '70%', '100%'];

    function goTo(idx) {
      current = (idx + total) % total;

      stepBtns.forEach((btn, i) => {
        btn.classList.toggle('active', i === current);
      });

      cards.forEach((card, i) => {
        card.classList.toggle('active', i === current);
      });

      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === current);
      });

      nodes.forEach((node, i) => {
        node.classList.remove('active', 'passed');
        if (i === current) {
          node.classList.add('active');
        } else if (i < current) {
          node.classList.add('passed');
        }
      });

      arcProgress.style.width = progressWidths[current];
    }

    stepBtns.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        stopAuto();
        goTo(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopAuto();
        goTo(i);
      });
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      goTo(current - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      goTo(current + 1);
    });

    function startAuto() {
      playBtn.textContent = 'Pause ⏸';
      timer = setInterval(() => {
        goTo(current + 1);
      }, 3500);
    }

    function stopAuto() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = 'Auto ▶';
      }
    }

    playBtn.addEventListener('click', () => {
      if (timer) {
        stopAuto();
      } else {
        startAuto();
      }
    });
  </script>
</body>
</html>

Establishing Democratic Norms and Collegial Protocols

Posing Questions That Probe Reasoning and Evidence

Navigating Counterarguments and Concessions in Debate

Constructing Persuasive Arguments with Logical Appeals

Synthesizing Divergent Viewpoints to Reach Consensus

Defusing Fallacious Contentions and De-escalating Disputes

Moderating Parliamentary and Town Hall Deliberations

Academic Deliberation and Structured Debate

La oración compuesta: coordinación y yuxtaposición

Oraciones subordinadas sustantivas y sus funciones

Oraciones subordinadas adjetivas: explicativas y especificativas

Pronombres relativos complejos: el cual, cuyo y quien

Oraciones subordinadas adverbiales de tiempo, lugar y modo

Subordinadas causales, finales e ilativas

Subordinadas condicionales y concesivas en la argumentación

Uso del subjuntivo en estructuras de duda, deseo y posibilidad

Correlación temporal y concordancia de tiempos verbales

Oraciones compuestas y subordinadas: estructura y relaciones

Formas no personales del verbo: infinitivo, gerundio y participio

Voz pasiva perifrástica y pasiva refleja

Estructuras paralelas y paralelismo sintáctico

Modificadores desplazados y anfibologías sintácticas

Queísmo y dequeísmo: norma y corrección

Estilística y corrección sintáctica avanzada

Debata oksfordzka — format, role i zasady procedowania

Odpieranie zarzutów i technika pytań krzyżowych

Mowa podsumowująca i synteza rozbieżnych stanowisk

Kompromis a konsensus — dochodzenie do porozumienia

Argumentacja i obrona stanowiska w dyskusji plenarnej

Zwroty grzecznościowe i formuły modalne w kulturalnej polemice

Zasada życzliwości interpretacyjnej i technika stalowego człowieka

Ewaluacja przebiegu dyskusji — sporządzanie bilansu argumentacyjnego

Improwizacja krasomówcza i odpowiedzi na pytania ad hoc

Formaty debat i zaawansowane techniki dyskusyjne

Formy i przejawy agresji językowej: złośliwość, inwektywa, mowa nienawiści

Ataki personalne: argumentum ad hominem i ad personam

Błąd chochoła (straw man) — demaskowanie przeinaczania tez

Fałszywa alternatywa — przełamywanie pozornych dylematów

Równia pochyła i generalizacja pochopna w wywodzie

Zadawanie pytań precyzujących i prośba o rozwinięcie stanowiska

Wykazywanie wewnętrznej sprzeczności w wypowiedzi oponenta

Szantaż emocjonalny i manipulowanie lękiem lub litością

Chwyty erystyczne i błędy logiczne w dyskusji

El punto y coma en oraciones complejas y yuxtapuestas

Los dos puntos en citas, explicaciones y conclusiones

La raya, los paréntesis y los corchetes como incisos

Comillas latinas, inglesas y simples: jerarquía tipográfica

Signos de puntuación delimitadores en textos complejos

Deploying Advanced Rhetorical Devices in Formal Speeches

Using Formal English When Indicated or Appropriate

Mastering Prosody, Vocal Modulation, and Intentional Pauses

Commanding Physical Presence, Purposeful Gestures, and Gaze

Assessing the Impact of Audience Cues on Speech Delivery

Delivering Academic Keynotes and Defending Theses

Advanced Oratory and Speechmaking Craft

Błędne koło w dowodzeniu (petitio principii i tautologia)

Etykietowanie, stygmatyzacja i dehumanizacja w dyskursie

Komunikat „JA” i nazywanie nieuczciwych zabiegów rozmówcy

Autorytet pozorny i powoływanie się na opinię powszechną

Techniki asertywne: zdarta płyta i zamglenie w sytuacji presji

Analiza krytyczna nagłówków sensacyjnych i manipulacji medialnej

Etyka słowa — odpowiedzialność nadawcy za skutki wypowiedzi

Pisanie repliki polemicznej na tekst zawierający manipulację

Obrona przed manipulacją, asertywność i etyka słowa

Eliminación de la redundancia y pleonasmos en la prosa académica

Adecuación del registro formal y eliminación de coloquialismos

El principio de coherencia global: unidad temática del texto

Protocolo de autocorrección y revisión entre pares

Edición de estilo y autocorrección de textos académicos

Tradycja retoryczna: funkcje docere, movere, delectare

Pięć etapów tworzenia mowy: inventio, dispositio, elocutio, memoria, pronuntiatio

Środki perswazji retorycznej: ethos, pathos i logos

Klasyczny układ mowy: exordium, narratio, propositio, argumentatio, peroratio

Rodzaje mów: popisowa, sądownicza i doradcza w nowoczesnym zastosowaniu

Topika retoryczna: odnajdywanie miejsc wspólnych (loci communes)

Figury retoryczne myśli: pytanie retoryczne, apostrofa, antyteza i inwersja

Figury retoryczne słowa: anafora, epifora, paralelizm i gradacja

Chwyty erystyczne i chwyty nieuczciwej perswazji: rozpoznawanie i obrona

Retoryka klasyczna i sztuka perswazji

Trzy filary perswazji arystotelesowskiej: ethos, logos i pathos

Klasyczny kanon retoryczny: inventio, dispositio, elocutio, memoria, pronuntiatio

Kompozycja mowy: exordium, narratio, argumentatio i peroratio

Sztuka wstępu — captatio benevolentiae i nawiązanie kontaktu

Figury myśli: pytanie retoryczne, apostrofa, wykrzyknienie i antyteza

Figury słowa: powtórzenia, anafora, epifora i paralelizm składniowy

Tropy retoryczne: metafora, metonimia, synekdocha i hiperbola

Ironia i litota jako narzędzia subtelnego wartościowania

Retoryka klasyczna: fundamenty, kompozycja i stylistyka

Raíces griegas en el léxico científico y filosófico

Raíces latinas en el léxico humanístico y jurídico

Prefijos y sufijos cultos y su valor transformador

Etimología grecolatina y formación de palabras cultas

Styl wysoki, średni i niski — dobór tonu do sytuacji

Toposy retoryczne (miejsca wspólne) w argumentacji

Sztuka zakończenia — peroratio, synteza i wezwanie do działania

Środki pozajęzykowe w retoryce: intonacja, pauza i akcent zdaniowy

Gatunki retoryczne: mowa pochwalna (laudacja) i okolicznościowa

Mowa obrończa i oskarżycielska na kanwie tekstu literackiego

Analiza retoryczna słynnych mów historycznych i literackich

Projektowanie i redagowanie autorskiej mowy perswazyjnej

Wygłoszenie przemówienia z uwzględnieniem kontaktu wzrokowego i gestu

Sztuka oratorska: gatunki retoryczne i wystąpienia publiczne

Język ciała w wystąpieniach: postawa, gestykulacja i kontakt wzrokowy

Emisja głosu, dykcja, artykulacja i panowanie nad oddechem

Prozodia mowy: intonacja, akcent zdaniowy, tempo i rola pauzy

Radzenie sobie ze stresem i tremą przed wystąpieniem publicznym

Przestrzeń i scenografia wystąpienia: ruch sceniczny i dystans proksemiczny

Stosowanie pomocy wizualnych i multimedialnych bez zastępowania mówcy

Warsztat sceniczny mówcy: głos, ciało i opanowanie

Estrategias de clave de contexto para términos desconocidos

Denotación, connotación y carga ideológica del léxico

Sinonimia conceptual: matices semánticos y precisión

Antonimia gradual, complementaria y recíproca

Polisemia, homonimia y ambigüedad léxica

Campos semánticos y redes conceptuales en el texto

Relaciones semánticas y precisión léxica en textos académicos

Wygłaszanie mowy pochwalnej (laudacja) i mowy okolicznościowej

Wygłaszanie przemówienia perswazyjnego i mobilizującego do działania

Sztuka odpowiadania na trudne pytania z sali: sesja Q&A

Analiza retoryczna wielkich przemówień historycznych i literackich

Warsztat oratorski: autorska mowa przed kamerą z autoewaluacją

Sztuka oratorska w praktyce: wystąpienia i formy oratorskie

Typologia pytań: od informacyjnych do problemowych i sokratejskich

Formułowanie pytań badawczych i hipotez interpretacyjnych

Budowa wyczerpującej i logicznej odpowiedzi na pytanie złożone

Formułowanie i uzasadnianie sądów wartościujących

Ocena postaw i motywacji bohaterów literackich w kontekście epoki

Redagowanie rzetelnej informacji: schemat 5W+H (kto, co, gdzie, kiedy, dlaczego, jak)

Komentarz publicystyczny — struktura, teza i perspektywa autora

Zadawanie pytań, formułowanie odpowiedzi i sądów wartościujących

Conectores discursivos: estructuradores y contraargumentativos

Latinismos y locuciones latinas de uso académico

Neologismos, extranjerismos y préstamos lingüísticos

El lenguaje metafórico en la construcción del pensamiento teórico

Recursos discursivos del lenguaje académico

Głos w dyskusji: formuła ad vocem i płynne nawiązanie do przedmówcy

Kultura wypowiedzi w internecie — redagowanie komentarza na forum

Uzasadnianie tez: wnioskowanie dedukcyjne i indukcyjne

Rozgraniczenie opisu faktograficznego od wartościowania w recenzji

Rozumienie czasowników operacyjnych w poleceniach egzaminacyjnych

Stosowanie parafrazy i cytatu w precyzyjnej odpowiedzi na pytanie

Formułowanie zdania odrębnego (votum separatum)

Redagowanie pisemnego uzasadnienia wyboru dzieła do prezentacji

Rola moderatora dyskusji — udzielanie głosu i synteza wypowiedzi

Sztuka dyskusji, argumentacji i precyzji analitycznej

Etykieta językowa i formy grzecznościowe w pismach urzędowych

Zwroty adresatywne, formuły nagłówkowe i pożegnalne

Układ graficzny i elementy składowe oficjalnego pisma

Redagowanie podania i wniosku do instytucji publicznej

Protokół z posiedzenia lub zebrania — wymogi formalne i styl

Protokół syntetyczny a protokół dosłowny i uchwały

Opinia — struktura, obiektywizm i formułowanie ocen

Opinia o dziele kultury a recenzja krytyczna — różnice gatunkowe

Pisma urzędowe i dokumentacja: etykieta, podanie, protokół i opinia

Planning a GCSE Spoken Language Presentation

Selecting Accurate Evidence and Well-Chosen Details for Presentations

Selecting Reliable Sources for Presentation Evidence

Structuring the Body of a Formal Presentation

Building a Coherent Presentation From Start to Finish

Using Standard English Grammar in Formal Presentations

Adapting Presentation Style for Formal vs. Informal Settings

Applying Standard English Conventions in Spoken Presentations

Delivering a Presentation Under GCSE Exam Conditions

Spoken Language: Formal Presentations and Standard English

Zażalenie i reklamacja — formułowanie roszczeń i dowodów

Odpowiedź na reklamację lub zażalenie — sztuka odmowy z taktem

Życiorys tradycyjny a nowoczesne CV — układ i zwięzłość

List motywacyjny — profesjonalna autoprezentacja

Oświadczenie woli i upoważnienie — rygor prawny i jednoznaczność

Netykieta w oficjalnym e-mailu: temat, powitanie, treść, podpis

List otwarty i apel publiczny — zaangażowanie w sprawy społeczne

Korekta błędów pragmatycznych, kancelaryjnych i grzecznościowych

Symulacja urzędowa: przygotowanie wniosku, protokołu i odpowiedzi

Pisma użytkowe i aplikacyjne: reklamacje, CV, oświadczenia i e-korespondencja

Active Listening Skills for GCSE Spoken Language

Responding to Questions in Presentations and Discussions

Using Evidence to Respond to Spoken Claims

Providing Constructive Feedback on Presentations

Participating Effectively in Group Discussions

Spoken Language: Listening and Responding

Rozprawka dedukcyjna (z tezą) a indukcyjna (z hipotezą)

Analiza tematu wypracowania: słowa klucze i zakres problemowy

Formułowanie precyzyjnej i niebanalnej tezy

Konstrukcja wstępu: wprowadzenie w problematykę i teza

Funkcja akapitu w strukturze argumentacyjnej: zdanie kluczowe i rozwinięcie

Hierarchizacja argumentów i porządek dowodzenia w pracy

Funkcjonalne wykorzystanie lektury obowiązkowej jako dowodu w wywodzie

Włączanie kontekstów: historycznoliterackiego, biograficznego i filozoficznego

OGE.11.SL.4

Aligned learning resources

Related diagrams