<!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: 8px 4px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

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

    .control-btn {
      background: #0284c7;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, opacity 0.2s ease;
    }
    .control-btn:hover { background: #0369a1; }
    .control-btn:active { opacity: 0.85; }

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

    .column {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Headers */
    .badge-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .badge-unstructured {
      background: #ffe4e6;
      color: #be123c;
    }
    .badge-partitio {
      background: #e0f2fe;
      color: #0369a1;
    }

    /* Panels */
    .visual-panel {
      position: relative;
      height: 220px;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .panel-unstructured {
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
    }

    .panel-partitio {
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      padding: 10px 8px;
      justify-content: space-between;
      align-items: center;
    }

    /* Unstructured Nodes */
    .tangle-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .tangle-path {
      fill: none;
      stroke: #f43f5e;
      stroke-width: 2.5;
      stroke-dasharray: 6 5;
      opacity: 0.6;
      transition: stroke-dashoffset 0.4s ease;
    }

    .wandering-dot {
      fill: #e11d48;
      transition: cx 0.5s ease, cy 0.5s ease;
    }

    .fragment-tag {
      position: absolute;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 5px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      white-space: nowrap;
      transition: all 0.3s ease;
    }
    .fragment-tag.active {
      border-color: #f43f5e;
      color: #be123c;
      background: #fff1f2;
      box-shadow: 0 0 0 2px #fecdd3;
    }

    /* Partitio Scaffold */
    .thesis-node {
      background: #0369a1;
      color: #ffffff;
      padding: 7px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25);
      z-index: 2;
      width: 88%;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .thesis-node.active {
      box-shadow: 0 0 0 3px #7dd3fc;
    }

    .fork-svg {
      width: 100%;
      height: 40px;
      margin: -2px 0;
    }
    .fork-line {
      fill: none;
      stroke: #38bdf8;
      stroke-width: 2.5;
    }
    .fork-active-line {
      fill: none;
      stroke: #0284c7;
      stroke-width: 3;
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      transition: stroke-dashoffset 0.4s ease;
    }

    .pillars-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      width: 100%;
      z-index: 2;
    }

    .pillar-card {
      background: #ffffff;
      border: 1.5px solid #bae6fd;
      border-radius: 8px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.05);
      transition: all 0.3s ease;
    }
    .pillar-card.active {
      border-color: #0284c7;
      background: #f0fdf4;
      box-shadow: 0 0 0 2px #86efac;
    }

    .pillar-num {
      background: #0284c7;
      color: #fff;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pillar-title {
      font-size: 11px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
    }
    .pillar-sub {
      font-size: 9.5px;
      color: #64748b;
      line-height: 1.1;
    }

    /* Bottom Outcome Pills */
    .outcome-pill {
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 11.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.3;
    }
    .outcome-bad {
      background: #fff1f2;
      color: #9f1239;
      border: 1px solid #fecdd3;
    }
    .outcome-good {
      background: #ecfdf5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .speech-step-indicator {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="header-controls">
    <span class="speech-step-indicator" id="stepLabel">Comparison Mode</span>
    <button class="control-btn" id="playBtn" onclick="toggleFlow()">
      <span id="playIcon">▶</span> <span id="playText">Trace Speech Delivery</span>
    </button>
  </div>

  <div class="grid-container">
    
    <div class="column">
      <div class="badge-header badge-unstructured">
        <span>⚠️</span> Unstructured Delivery
      </div>
      
      <div class="visual-panel panel-unstructured" id="panelLeft">
        <svg class="tangle-svg" viewBox="0 0 200 220" preserveAspectRatio="none">
          <path id="tanglePath" class="tangle-path" d="M 40 45 Q 160 30 150 110 T 50 170 Q 170 180 155 55 Q 60 110 40 45" />
          <circle id="dotUnstructured" class="wandering-dot" cx="40" cy="45" r="5" style="display:none;" />
        </svg>

        <div class="fragment-tag" id="f1" style="top: 15%; left: 8%;">? Bus routes</div>
        <div class="fragment-tag" id="f2" style="top: 20%; right: 8%;">Grades drop</div>
        <div class="fragment-tag" id="f3" style="top: 50%; left: 24%;">Sleep cycles</div>
        <div class="fragment-tag" id="f4" style="bottom: 15%; right: 12%;">Why 8:30 AM?</div>
      </div>

      <div class="outcome-pill outcome-bad">
        <span>✖</span> Lost mental map & high fatigue
      </div>
    </div>

    
    <div class="column">
      <div class="badge-header badge-partitio">
        <span>⚓</span> Partitio Architecture
      </div>

      <div class="visual-panel panel-partitio" id="panelRight">
        <div class="thesis-node" id="thesisNode">
          Claim: Shift Start to 8:30 AM
        </div>

        <svg class="fork-svg" viewBox="0 0 200 40">
          <path class="fork-line" d="M 100 0 L 100 15 M 100 15 L 34 38 M 100 15 L 100 38 M 100 15 L 166 38" />
          <path id="fork1" class="fork-active-line" d="M 100 0 L 100 15 L 34 38" />
          <path id="fork2" class="fork-active-line" d="M 100 0 L 100 15 L 100 38" />
          <path id="fork3" class="fork-active-line" d="M 100 0 L 100 15 L 166 38" />
        </svg>

        <div class="pillars-row">
          <div class="pillar-card" id="p1">
            <div class="pillar-num">1</div>
            <div class="pillar-title">Biology</div>
            <div class="pillar-sub">Sleep Cycle</div>
          </div>
          <div class="pillar-card" id="p2">
            <div class="pillar-num">2</div>
            <div class="pillar-title">Academics</div>
            <div class="pillar-sub">Test Focus</div>
          </div>
          <div class="pillar-card" id="p3">
            <div class="pillar-num">3</div>
            <div class="pillar-title">Logistics</div>
            <div class="pillar-sub">Bus Routes</div>
          </div>
        </div>
      </div>

      <div class="outcome-pill outcome-good">
        <span>✓</span> Instant scaffold & clear focus
      </div>
    </div>
  </div>

  <script>
    let isPlaying = false;
    let step = 0;
    let timer = null;

    const steps = [
      {
        label: "Step 1: Stating the Point",
        unstructured: 'f4',
        unstructuredPos: { cx: 155, cy: 175 },
        partitio: 'thesis',
        partitioFork: null
      },
      {
        label: "Step 2: First Reason",
        unstructured: 'f1',
        unstructuredPos: { cx: 40, cy: 45 },
        partitio: 'p1',
        partitioFork: 'fork1'
      },
      {
        label: "Step 3: Second Reason",
        unstructured: 'f3',
        unstructuredPos: { cx: 80, cy: 120 },
        partitio: 'p2',
        partitioFork: 'fork2'
      },
      {
        label: "Step 4: Final Support",
        unstructured: 'f2',
        unstructuredPos: { cx: 160, cy: 60 },
        partitio: 'p3',
        partitioFork: 'fork3'
      }
    ];

    function renderStep(idx) {
      const s = steps[idx];
      document.getElementById('stepLabel').textContent = s.label;

      // Reset unstructured
      ['f1','f2','f3','f4'].forEach(id => document.getElementById(id).classList.remove('active'));
      const activeFrag = document.getElementById(s.unstructured);
      if (activeFrag) activeFrag.classList.add('active');

      const dot = document.getElementById('dotUnstructured');
      dot.style.display = 'block';
      dot.setAttribute('cx', s.unstructuredPos.cx);
      dot.setAttribute('cy', s.unstructuredPos.cy);

      // Reset partitio
      document.getElementById('thesisNode').classList.remove('active');
      ['p1','p2','p3'].forEach(id => document.getElementById(id).classList.remove('active'));
      ['fork1','fork2','fork3'].forEach(id => document.getElementById(id).style.strokeDashoffset = '60');

      if (s.partitio === 'thesis') {
        document.getElementById('thesisNode').classList.add('active');
      } else {
        document.getElementById(s.partitio).classList.add('active');
        if (s.partitioFork) {
          document.getElementById(s.partitioFork).style.strokeDashoffset = '0';
        }
      }
    }

    function resetAll() {
      document.getElementById('stepLabel').textContent = "Comparison Mode";
      ['f1','f2','f3','f4'].forEach(id => document.getElementById(id).classList.remove('active'));
      document.getElementById('dotUnstructured').style.display = 'none';
      document.getElementById('thesisNode').classList.remove('active');
      ['p1','p2','p3'].forEach(id => document.getElementById(id).classList.remove('active'));
      ['fork1','fork2','fork3'].forEach(id => document.getElementById(id).style.strokeDashoffset = '60');
    }

    function nextStep() {
      step = (step + 1) % steps.length;
      renderStep(step);
    }

    function toggleFlow() {
      if (isPlaying) {
        clearInterval(timer);
        isPlaying = false;
        document.getElementById('playIcon').textContent = '▶';
        document.getElementById('playText').textContent = 'Trace Speech Delivery';
      } else {
        isPlaying = true;
        document.getElementById('playIcon').textContent = '⏸';
        document.getElementById('playText').textContent = 'Pause';
        renderStep(step);
        timer = setInterval(() => {
          nextStep();
        }, 3000);
      }
    }
  </script>
</body>
</html>

Structuring Speeches with Classical Oratorical 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>Dynamic Mapping of Rhetorical Appeals</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #0f172a;
      background: #ffffff;
      padding: 10px 12px;
      user-select: none;
    }

    /* Header Controls */
    .header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .title-group {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .filter-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: opacity 0.2s, background 0.2s, border-color 0.2s;
    }

    .filter-btn.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
    }

    .filter-btn.ethos.active { background: #4f46e5; border-color: #4f46e5; }
    .filter-btn.logos.active { background: #0284c7; border-color: #0284c7; }
    .filter-btn.pathos.active { background: #e11d48; border-color: #e11d48; }

    .play-btn {
      appearance: none;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #0f172a;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    /* SVG Chart */
    .chart-container {
      position: relative;
      width: 100%;
      background: #fafafa;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
    }

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

    .grid-line {
      stroke: #e2e8f0;
      stroke-dasharray: 4 4;
      stroke-width: 1;
    }

    .col-divider {
      stroke: #f1f5f9;
      stroke-width: 1;
    }

    .col-hitbox {
      cursor: pointer;
      fill: transparent;
      transition: fill 0.2s ease;
    }

    .col-hitbox:hover {
      fill: rgba(15, 23, 42, 0.03);
    }

    .active-column-rect {
      fill: rgba(15, 23, 42, 0.05);
      transition: x 0.3s ease;
    }

    .curve-path {
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-width 0.3s, opacity 0.3s;
    }

    .area-path {
      opacity: 0.15;
      transition: opacity 0.3s;
    }

    .point-marker {
      transition: transform 0.3s ease, opacity 0.3s;
    }

    .axis-label {
      font-size: 9.5px;
      font-weight: 600;
      fill: #64748b;
      text-anchor: middle;
    }

    .level-label {
      font-size: 8.5px;
      font-weight: 500;
      fill: #94a3b8;
    }

    /* Detail Stage Card */
    .detail-card {
      margin-top: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      min-height: 52px;
    }

    .stage-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .stage-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .badge-ethos { background: #e0e7ff; color: #4338ca; }
    .badge-logos { background: #e0f2fe; color: #0369a1; }
    .badge-pathos { background: #ffe4e6; color: #be123c; }

    .stage-desc {
      font-size: 11.5px;
      color: #475569;
      margin-top: 2px;
    }

    /* Intensity Mini-Meters */
    .meters-group {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 110px;
    }

    .meter-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      font-weight: 600;
    }

    .meter-name {
      width: 40px;
      text-align: right;
    }

    .meter-track {
      flex: 1;
      height: 4px;
      background: #e2e8f0;
      border-radius: 2px;
      overflow: hidden;
      width: 50px;
    }

    .meter-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* Stepper Navigation */
    .stepper {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
      margin-top: 8px;
    }

    .step-pill {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      padding: 5px 2px;
      border-radius: 6px;
      font-size: 10.5px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .step-pill.active {
      background: #0f172a;
      color: #ffffff;
      border-color: #0f172a;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
  </style>
</head>
<body>

  <div class="header">
    <div class="title-group">
      <span class="title">Rhetorical Appeals in Classical Speech</span>
    </div>
    <div class="controls">
      <button class="filter-btn active" data-filter="all">All</button>
      <button class="filter-btn ethos" data-filter="ethos">Ethos</button>
      <button class="filter-btn logos" data-filter="logos">Logos</button>
      <button class="filter-btn pathos" data-filter="pathos">Pathos</button>
      <button class="play-btn" id="playBtn">▶ Auto</button>
    </div>
  </div>

  <div class="chart-container">
    <svg viewBox="0 0 600 200" id="rhetoricSvg">
      <defs>
        <linearGradient id="gradEthos" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#4f46e5" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#4f46e5" stop-opacity="0.0"/>
        </linearGradient>
        <linearGradient id="gradLogos" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#0284c7" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#0284c7" stop-opacity="0.0"/>
        </linearGradient>
        <linearGradient id="gradPathos" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#e11d48" stop-opacity="0.35"/>
          <stop offset="100%" stop-color="#e11d48" stop-opacity="0.0"/>
        </linearGradient>
      </defs>

      
      <rect id="activeCol" class="active-column-rect" x="20" y="10" width="93.3" height="155" rx="4" />

      
      <line x1="20" y1="35" x2="580" y2="35" class="grid-line" />
      <text x="24" y="32" class="level-label">High</text>

      <line x1="20" y1="90" x2="580" y2="90" class="grid-line" />
      <text x="24" y="87" class="level-label">Mid</text>

      <line x1="20" y1="145" x2="580" y2="145" class="grid-line" />
      <text x="24" y="142" class="level-label">Low</text>

      
      <path id="areaEthos" class="area-path" fill="url(#gradEthos)"/>
      <path id="areaLogos" class="area-path" fill="url(#gradLogos)"/>
      <path id="areaPathos" class="area-path" fill="url(#gradPathos)"/>

      <path id="lineEthos" class="curve-path" stroke="#4f46e5" />
      <path id="lineLogos" class="curve-path" stroke="#0284c7" />
      <path id="linePathos" class="curve-path" stroke="#e11d48" />

      
      <g id="markersGroup"></g>

      
      <g id="columnsGroup"></g>
    </svg>
  </div>

  
  <div class="detail-card">
    <div>
      <div class="stage-title">
        <span id="stageName">1. Exordium</span>
        <span id="stageBadge" class="stage-badge badge-ethos">Primary: Ethos</span>
      </div>
      <div id="stageGoal" class="stage-desc">Establish speaker credibility, goodwill, and topic relevance.</div>
    </div>
    <div class="meters-group">
      <div class="meter-row" style="color: #4f46e5;">
        <span class="meter-name">Ethos</span>
        <div class="meter-track"><div id="meterEthos" class="meter-fill" style="background:#4f46e5; width:90%;"></div></div>
      </div>
      <div class="meter-row" style="color: #0284c7;">
        <span class="meter-name">Logos</span>
        <div class="meter-track"><div id="meterLogos" class="meter-fill" style="background:#0284c7; width:25%;"></div></div>
      </div>
      <div class="meter-row" style="color: #e11d48;">
        <span class="meter-name">Pathos</span>
        <div class="meter-track"><div id="meterPathos" class="meter-fill" style="background:#e11d48; width:30%;"></div></div>
      </div>
    </div>
  </div>

  
  <div class="stepper" id="stepper">
    <button class="step-pill active" data-step="0">1. Exordium</button>
    <button class="step-pill" data-step="1">2. Narratio</button>
    <button class="step-pill" data-step="2">3. Partitio</button>
    <button class="step-pill" data-step="3">4. Confirmatio</button>
    <button class="step-pill" data-step="4">5. Refutatio</button>
    <button class="step-pill" data-step="5">6. Peroratio</button>
  </div>

  <script>
    const stages = [
      {
        latin: "1. Exordium",
        badge: "Primary: Ethos",
        badgeClass: "badge-ethos",
        goal: "Establish speaker credibility, goodwill, and secure audience attention.",
        ethos: 92, logos: 25, pathos: 30
      },
      {
        latin: "2. Narratio",
        badge: "Primary: Logos",
        badgeClass: "badge-logos",
        goal: "Provide essential background facts, context, and define core issues.",
        ethos: 55, logos: 80, pathos: 25
      },
      {
        latin: "3. Partitio",
        badge: "Primary: Logos",
        badgeClass: "badge-logos",
        goal: "Outline structure and state the central thesis / proposition clearly.",
        ethos: 40, logos: 90, pathos: 15
      },
      {
        latin: "4. Confirmatio",
        badge: "Primary: Logos",
        badgeClass: "badge-logos",
        goal: "Present the strongest evidence, logical arguments, and positive proofs.",
        ethos: 35, logos: 96, pathos: 40
      },
      {
        latin: "5. Refutatio",
        badge: "Primary: Logos + Pathos",
        badgeClass: "badge-logos",
        goal: "Dismantle opposing views with reasoned counters while raising urgency.",
        ethos: 30, logos: 85, pathos: 65
      },
      {
        latin: "6. Peroratio",
        badge: "Primary: Pathos",
        badgeClass: "badge-pathos",
        goal: "Deliver emotional climax, summarize value, and give strong call-to-action.",
        ethos: 58, logos: 30, pathos: 95
      }
    ];

    // Chart dimensions
    const leftMargin = 30;
    const rightMargin = 570;
    const colWidth = (rightMargin - leftMargin) / 6;
    const baseY = 165; // 0%
    const topY = 25;   // 100%
    const scaleY = (baseY - topY) / 100;

    const xCoords = stages.map((_, i) => leftMargin + colWidth * i + colWidth / 2);
    const getY = (val) => baseY - (val * scaleY);

    // Natural cubic spline generator for SVG paths
    function getSplinePath(points) {
      if (points.length === 0) return "";
      let d = `M ${points[0].x} ${points[0].y}`;
      for (let i = 0; i < points.length - 1; i++) {
        const p0 = i > 0 ? points[i - 1] : points[i];
        const p1 = points[i];
        const p2 = points[i + 1];
        const p3 = i < points.length - 2 ? points[i + 2] : p2;

        const cp1x = p1.x + (p2.x - p0.x) / 6;
        const cp1y = p1.y + (p2.y - p0.y) / 6;
        const cp2x = p2.x - (p3.x - p1.x) / 6;
        const cp2y = p2.y - (p3.y - p1.y) / 6;

        d += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)}, ${cp2x.toFixed(1)} ${cp2y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
      }
      return d;
    }

    function getAreaPath(points) {
      const lineD = getSplinePath(points);
      const first = points[0];
      const last = points[points.length - 1];
      return `${lineD} L ${last.x} ${baseY} L ${first.x} ${baseY} Z`;
    }

    const ethosPts = stages.map((s, i) => ({ x: xCoords[i], y: getY(s.ethos) }));
    const logosPts = stages.map((s, i) => ({ x: xCoords[i], y: getY(s.logos) }));
    const pathosPts = stages.map((s, i) => ({ x: xCoords[i], y: getY(s.pathos) }));

    // Set paths
    document.getElementById('lineEthos').setAttribute('d', getSplinePath(ethosPts));
    document.getElementById('areaEthos').setAttribute('d', getAreaPath(ethosPts));

    document.getElementById('lineLogos').setAttribute('d', getSplinePath(logosPts));
    document.getElementById('areaLogos').setAttribute('d', getAreaPath(logosPts));

    document.getElementById('linePathos').setAttribute('d', getSplinePath(pathosPts));
    document.getElementById('areaPathos').setAttribute('d', getAreaPath(pathosPts));

    // Render interactive columns & stage labels
    const colsGroup = document.getElementById('columnsGroup');
    const markersGroup = document.getElementById('markersGroup');

    stages.forEach((st, i) => {
      const colX = leftMargin + i * colWidth;
      
      // Hitbox
      const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
      rect.setAttribute('x', colX);
      rect.setAttribute('y', '10');
      rect.setAttribute('width', colWidth);
      rect.setAttribute('height', '180');
      rect.setAttribute('class', 'col-hitbox');
      rect.addEventListener('click', () => selectStage(i));
      colsGroup.appendChild(rect);

      // Label below baseline
      const text = document.createElementNS("http://www.w3.org/2000/svg", "text");
      text.setAttribute('x', xCoords[i]);
      text.setAttribute('y', '182');
      text.setAttribute('class', 'axis-label');
      text.textContent = st.latin.split(' ')[1] || st.latin;
      colsGroup.appendChild(text);

      // Markers for each appeal
      [
        { key: 'ethos', y: getY(st.ethos), color: '#4f46e5' },
        { key: 'logos', y: getY(st.logos), color: '#0284c7' },
        { key: 'pathos', y: getY(st.pathos), color: '#e11d48' }
      ].forEach(m => {
        const dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        dot.setAttribute('cx', xCoords[i]);
        dot.setAttribute('cy', m.y);
        dot.setAttribute('r', '3.5');
        dot.setAttribute('fill', '#ffffff');
        dot.setAttribute('stroke', m.color);
        dot.setAttribute('stroke-width', '2');
        dot.setAttribute('class', `point-marker point-${m.key}`);
        dot.setAttribute('id', `marker-${m.key}-${i}`);
        markersGroup.appendChild(dot);
      });
    });

    // State & Selection
    let currentStage = 0;
    let playTimer = null;

    function selectStage(index) {
      currentStage = index;
      const st = stages[index];

      // Update Column Highlight
      const activeCol = document.getElementById('activeCol');
      activeCol.setAttribute('x', leftMargin + index * colWidth);
      activeCol.setAttribute('width', colWidth);

      // Update Detail Card
      document.getElementById('stageName').textContent = st.latin;
      const badge = document.getElementById('stageBadge');
      badge.textContent = st.badge;
      badge.className = `stage-badge ${st.badgeClass}`;
      document.getElementById('stageGoal').textContent = st.goal;

      // Update Meters
      document.getElementById('meterEthos').style.width = `${st.ethos}%`;
      document.getElementById('meterLogos').style.width = `${st.logos}%`;
      document.getElementById('meterPathos').style.width = `${st.pathos}%`;

      // Update Stepper buttons
      document.querySelectorAll('.step-pill').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      // Highlight active dots
      stages.forEach((_, i) => {
        ['ethos', 'logos', 'pathos'].forEach(key => {
          const dot = document.getElementById(`marker-${key}-${i}`);
          if (dot) {
            dot.setAttribute('r', i === index ? '5.5' : '3.5');
            dot.setAttribute('stroke-width', i === index ? '2.5' : '1.5');
          }
        });
      });
    }

    // Stepper click handlers
    document.querySelectorAll('.step-pill').forEach(pill => {
      pill.addEventListener('click', (e) => {
        const step = parseInt(e.target.dataset.step, 10);
        selectStage(step);
      });
    });

    // Filter Appeals
    const filterBtns = document.querySelectorAll('.filter-btn');
    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const filter = btn.dataset.filter;

        ['ethos', 'logos', 'pathos'].forEach(key => {
          const show = (filter === 'all' || filter === key);
          const line = document.getElementById(`line${key.charAt(0).toUpperCase() + key.slice(1)}`);
          const area = document.getElementById(`area${key.charAt(0).toUpperCase() + key.slice(1)}`);
          const markers = document.querySelectorAll(`.point-${key}`);

          line.style.opacity = show ? '1' : '0.12';
          line.style.strokeWidth = show ? (filter === key ? '3.5' : '2.5') : '1.5';
          area.style.opacity = show ? (filter === key ? '0.28' : '0.15') : '0.02';
          markers.forEach(m => m.style.opacity = show ? '1' : '0.15');
        });
      });
    });

    // Auto Play / Pause
    const playBtn = document.getElementById('playBtn');
    function togglePlay() {
      if (playTimer) {
        clearInterval(playTimer);
        playTimer = null;
        playBtn.innerHTML = '▶ Auto';
      } else {
        playBtn.innerHTML = '⏸ Pause';
        playTimer = setInterval(() => {
          selectStage((currentStage + 1) % stages.length);
        }, 3200);
      }
    }
    playBtn.addEventListener('click', togglePlay);

    // Initial render
    selectStage(0);
  </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: #f8f9fa;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .flow-container {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

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

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

    .stage-card {
      background: #ffffff;
      border: 2px solid rgba(0, 0, 0, 0.06);
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      position: relative;
      transition: box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
      user-select: none;
    }

    .stage-card:focus-visible {
      outline: 2px solid #2563eb;
    }

    .stage-card.active {
      background: #ffffff;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    }

    .card-1.active { border-color: #0284c7; }
    .card-2.active { border-color: #0d9488; }
    .card-3.active { border-color: #7c3aed; }
    .card-4.active { border-color: #2563eb; }
    .card-5.active { border-color: #ea580c; }
    .card-6.active { border-color: #e11d48; }

    .step-num {
      position: absolute;
      top: 6px;
      left: 8px;
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
    }

    .icon-badge {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin: 4px 0 8px 0;
      transition: background-color 0.3s ease;
    }

    .card-1 .icon-badge { background: #e0f2fe; }
    .card-2 .icon-badge { background: #ccfbf1; }
    .card-3 .icon-badge { background: #ede9fe; }
    .card-4 .icon-badge { background: #dbeafe; }
    .card-5 .icon-badge { background: #ffedd5; }
    .card-6 .icon-badge { background: #ffe4e6; }

    .title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 2px;
      line-height: 1.2;
    }

    .purpose {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.2;
    }

    /* Controls bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

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

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

    .dot.active {
      background: #1e2945;
      transform: scale(1.3);
    }

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

    .play-btn:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <div class="flow-container">
    <div class="grid">
      
      <div class="stage-card card-1 active" role="button" tabindex="0" aria-label="1. Exordium: Hook">
        <span class="step-num">1</span>
        <div class="icon-badge">🎣</div>
        <div class="title">Exordium</div>
        <div class="purpose">Hook</div>
      </div>

      
      <div class="stage-card card-2" role="button" tabindex="0" aria-label="2. Narratio: Context">
        <span class="step-num">2</span>
        <div class="icon-badge">📜</div>
        <div class="title">Narratio</div>
        <div class="purpose">Context</div>
      </div>

      
      <div class="stage-card card-3" role="button" tabindex="0" aria-label="3. Partitio: Roadmap">
        <span class="step-num">3</span>
        <div class="icon-badge">🗺️</div>
        <div class="title">Partitio</div>
        <div class="purpose">Roadmap</div>
      </div>

      
      <div class="stage-card card-4" role="button" tabindex="0" aria-label="4. Confirmatio: Evidence">
        <span class="step-num">4</span>
        <div class="icon-badge">🏛️</div>
        <div class="title">Confirmatio</div>
        <div class="purpose">Evidence</div>
      </div>

      
      <div class="stage-card card-5" role="button" tabindex="0" aria-label="5. Refutatio: Rebuttal">
        <span class="step-num">5</span>
        <div class="icon-badge">🛡️</div>
        <div class="title">Refutatio</div>
        <div class="purpose">Rebuttal</div>
      </div>

      
      <div class="stage-card card-6" role="button" tabindex="0" aria-label="6. Peroratio: Climax">
        <span class="step-num">6</span>
        <div class="icon-badge">🔥</div>
        <div class="title">Peroratio</div>
        <div class="purpose">Climax</div>
      </div>
    </div>

    <div class="controls">
      <button id="playBtn" class="play-btn" aria-label="Toggle autoplay">
        <span id="playIcon">⏸</span> Flow
      </button>
      <div class="dots" aria-label="Stages">
        <button class="dot active" aria-label="Stage 1"></button>
        <button class="dot" aria-label="Stage 2"></button>
        <button class="dot" aria-label="Stage 3"></button>
        <button class="dot" aria-label="Stage 4"></button>
        <button class="dot" aria-label="Stage 5"></button>
        <button class="dot" aria-label="Stage 6"></button>
      </div>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.stage-card');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

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

    function setStage(index) {
      current = index;
      cards.forEach((c, i) => c.classList.toggle('active', i === current));
      dots.forEach((d, i) => d.classList.toggle('active', i === current));
    }

    function nextStage() {
      setStage((current + 1) % cards.length);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStage, 3000);
    }

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

    function togglePlay() {
      playing = !playing;
      playIcon.textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        pauseTimer();
      }
    }

    cards.forEach((card, index) => {
      const select = () => {
        setStage(index);
        if (playing) startTimer();
      };
      card.addEventListener('click', select);
      card.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          select();
        }
      });
    });

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

    playBtn.addEventListener('click', togglePlay);

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

La comunicación oral en situaciones comunicativas auténticas

Definición de la temática del discurso oral argumentativo

Formulación de la hipótesis para demostrar en un texto oral

Búsqueda y selección de información para el discurso oral

Elaboración del plan textual oral: jerarquizando fuentes diversas

Almacenamiento y organización de fichas de apoyo para la oratoria

Preparación y planificación del discurso oral argumentativo

Uso de estrategias descriptivas para demostrar la hipótesis oral

Estrategias explicativas, causales y analógicas en la oratoria

Argumentos de autoridad, ejemplificación y datos estadísticos en el habla

Recursos prosódicos: entonación, ritmo, pausas y volumen

Lenguaje no verbal: contacto visual, gestualidad y postura corporal

Estrategias argumentativas y recursos expresivos en la oratoria

Formulating Sound Arguments for Oral Presentation

Crafting Classical Speech Introductions

Structuring First Transitions in Formal Speeches

Structuring Second Transitions in Formal Speeches

Developing the Body of a Formal Speech

Writing Powerful Speech Conclusions

Applying the Art of Persuasion in Formal Speeches

Incorporating Rhetorical Devices in Spoken Arguments

Integrating Ethos, Pathos, and Logos in Formal Speeches

Constructing Formal Speeches

Escucha activa e identificación de argumentos del interlocutor

Juicio crítico sobre la fuerza y pertinencia de argumentos

Técnicas de contraargumentación y refutación respetuosa

Construcción de consensos y acuerdos en el debate académico

Debate democrático: escucha crítica, refutación y consensos

Crafting Impactful Transitions and Calls to Action

Adapting Linguistic Register and Diction for Diverse Audiences

Mastering Vocal Variety: Pacing, Inflection, and Enunciation

Using Posture to Maintain Engagement With Your Audience

Employing Purposeful Gestures and Dynamic Eye Contact

Rehearsal Protocols and Self-Critique Using Rubrics

Formal Speechmaking and Delivery Mechanics

Formulating a Thesis Statement for Spoken Presentations

Evaluating Source Reliability for Presentation Evidence

Structuring a Logical Evidence Progression in Speeches

Planning and Structuring Evidence-Based Presentations

Maintaining Audience Engagement Through Eye Contact

Adjusting Pacing and Pauses for Emphasis in Speeches

Calibrating Volume and Enunciation for Presentation Settings

Employing Purposeful Gestures in Formal Speech Delivery

Applying Standard English Conventions in Spoken Presentations

Synthesizing Delivery Skills for a Complete Presentation

Self-Assessing Presentation Delivery and Adjusting

Delivering Formal Presentations With Effective Techniques

Employing Eye Contact Techniques in Formal Speeches

Managing Speaking Rate and Strategic Pauses

Calibrating Volume and Enunciation for Formal Speeches

Employing Purposeful Gestures in Formal Presentations

Using Standard English Conventions in Formal Speeches

Delivering Formal Speeches

What Is a Classical Speech? Structure Overview

Crafting a Speech Introduction That Hooks and Frames

Writing First Transitions in Speeches

Writing Second Transitions in Speeches

Building the Body of a Speech: Claims, Evidence, and Warrant

Writing a Speech Conclusion That Resonates

Using Conventions of Language to Communicate Ideas Effectively

Structuring and Writing a Classical Speech

The Art of Persuasion in Speeches

Using Ethos, Pathos, and Logos in Speeches

Using Rhetorical Questions in Speeches

Using Repetition and Parallelism in Speeches

Using Antithesis and Contrast in Speeches

Persuasion and Rhetorical Devices in Speeches

Eye Contact: Connecting With Your Audience

Speaking Rate and Pacing

Using Pauses for Effect

Volume: Projecting Your Voice Appropriately

Enunciation: Speaking Clearly Under Pressure

Purposeful Gestures in Speech Delivery

Combining Delivery Techniques for a Polished Speech

Delivering a Full Classical Speech

Delivering a Classical Speech with Confidence

What Makes a Presentation Formal?

Crafting a Clear Thesis for a Presentation

Selecting Reliable Sources for Presentation Evidence

Organizing Evidence in a Logical Progression

Designing an Effective Introduction for a Speech

Structuring the Body of a Formal Presentation

Crafting a Memorable Conclusion for a Presentation

Structuring a Formal Presentation: Thesis, Evidence, and Organization

Eye Contact: Techniques and Purpose

Controlling Speaking Rate and Using Pauses for Effect

Volume and Projection in Formal Presentations

Enunciation and Articulation Techniques

Purposeful Gestures: What They Add to a Presentation

Conventions of Language in Spoken Communication

Rehearsing and Self-Evaluating Delivery

Combining Delivery Skills in a Practice Presentation

Peer Feedback on Formal Presentations

Delivering a Formal Presentation: Application

Delivering a Formal Presentation: Voice, Body Language, and Rehearsal

Structuring a Formal Presentation with Logical Organization

Using Smooth Transitions in Formal Presentations

Selecting Accurate Evidence and Well-Chosen Details for Presentations

Using Rhetorical Devices in Formal Presentations

Using Eye Contact and Volume in Formal Speeches

Using Purposeful Gestures, Enunciation, and Language Conventions

Designing and Delivering Formal Presentations

Planning a GCSE Spoken Language Presentation

Building a Coherent Presentation From Start to Finish

Using Standard English Grammar in Formal Presentations

Using Formal English When Indicated or Appropriate

Adapting Presentation Style for Formal vs. Informal Settings

Delivering a Presentation Under GCSE Exam Conditions

Spoken Language: Formal Presentations and Standard English

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

Merencanakan Presentasi Teks Sastra

Berbicara dengan Intonasi dan Artikulasi yang Tepat

Membaca Puisi dengan Ekspresi (Deklamasi)

Menceritakan Kembali Novel atau Cerpen secara Lisan

Bermain Peran Berdasarkan Naskah Drama

Mempresentasikan Teks Sastra dalam Format Digital

Membuat Video Pembacaan Puisi

Membuat Podcast Sastra

Mempresentasikan Sastra Dunia dalam Bentuk Pertunjukan

Berbicara dan Mempresentasikan Teks Sastra

Merencanakan Presentasi Akademis

Mempresentasikan Hasil Riset secara Lisan

Berpidato dengan Struktur yang Tepat

Berdiskusi dan Berdebat dalam Konteks Sosial

Mempresentasikan Teks Prosedural secara Lisan

Mempresentasikan Ide atau Usulan dalam Konteks Kerja

Mempresentasikan Teks Non-Sastra dalam Konteks Sosial

Menggunakan Bahasa Tubuh dalam Presentasi

Mengelola Pertanyaan dan Tanggapan Audiens

Mempresentasikan Konten Digital: Vlog dan Presentasi Online

Mengevaluasi Presentasi Sendiri dan Teman

Mempresentasikan Proyek Sastra: Antologi dan Pertunjukan

Keterampilan Presentasi Lanjutan dan Proyek Karya

Using Acquired Vocabulary in Responses

Discussing Explicit Meanings of Texts

Writing About Implicit Meanings With Evidence

Responding With Appropriate Register, Vocabulary, Tone, and Voice

Responding Orally to Listening Tasks with Appropriate Vocabulary

Reflecting on and Adjusting Responses When Evidence Warrants

Vocabulary, Meaning, and Style in Text Responses

Engaging in Meaningful and Respectful Discourse

Making Relevant Comments That Build on a Message

Adjusting Your Language for Different Audiences and Situations

Asking Probing Questions to Deepen Understanding

Academic Discussion and Discourse

Planning Spoken Presentations

Rehearsing Spoken Presentations

Using Volume and Pace in Presentations

Using Tone and Pitch in Presentations

Organising Ideas in Spoken Presentations

Delivering Persuasive Presentations

Delivering Analytical Presentations

Adapting Your Voice for Different Audiences and Purposes

Using Images to Support, Not Distract From, Your Speech

Adapting Your Speech for Different Audiences

Planning and Delivering Spoken Presentations

Planning and Delivering Presentations for Audience and Purpose

Using Informal, Formal, and Technical Language Effectively

Employing Eye Contact, Speaking Rate, and Volume

Using Purposeful Gestures and Clear Enunciation

Building on Others' Ideas in Collaborative Discussion

Establishing Ground Rules and Building Consensus

Effective Presentations and Collaborative Discussion

Presenting Findings Clearly and Concisely

Organizing Presentations for a Logical Line of Reasoning

Using Transitions to Guide Listeners Through Complex Arguments

Developing Substance Appropriate to Purpose

Matching Presentation Style to Purpose, Audience, and Task

Structuring and Delivering Oral Presentations

Adapting Speech to Different Contexts

Adapting Speech to Different Tasks

Demonstrating Command of Formal English

Delivering a Complete Multimedia Presentation

Adapting Speech to Context and Task

OGE.10.SL.3

OGE.10.SL.3

Aligned learning resources

Related diagrams