<!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>2D Scaling Trap</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .header-tag {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #e11d48;
      background: #ffe4e6;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 8px;
    }

    .comparison-container {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
      gap: 28px;
      width: 100%;
      max-width: 520px;
      margin: 12px 0;
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .bill-box {
      background: #ecfdf5;
      border: 2px solid #059669;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #065f46;
      position: relative;
      transition: all 0.3s ease;
    }

    .bill-1x {
      width: 72px;
      height: 72px;
      font-size: 16px;
      box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12);
    }

    .bill-2x {
      width: 144px;
      height: 144px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      padding: 2px;
      gap: 3px;
      background: #d1fae5;
      border: 2px solid #059669;
      box-shadow: 0 8px 20px rgba(5, 150, 105, 0.16);
    }

    .cell {
      background: #ecfdf5;
      border: 1.5px dashed #059669;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #047857;
      transition: background 0.3s ease;
    }

    .cell.highlight {
      background: #fef08a;
      border-color: #d97706;
      color: #b45309;
    }

    .title-label {
      font-size: 15px;
      font-weight: 800;
      margin-top: 10px;
      color: #1e2945;
    }

    .data-pill {
      font-size: 12px;
      font-weight: 700;
      margin-top: 3px;
      color: #475569;
    }

    .area-pill {
      font-size: 13px;
      font-weight: 800;
      margin-top: 4px;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .area-pill.base {
      background: #f1f5f9;
      color: #334155;
    }

    .area-pill.alert {
      background: #fee2e2;
      color: #dc2626;
    }

    .formula-callout {
      width: 100%;
      max-width: 480px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .formula-item span {
      font-weight: 800;
      color: #2563eb;
    }

    @media (max-width: 380px) {
      .comparison-container {
        gap: 16px;
      }
      .bill-1x {
        width: 60px;
        height: 60px;
      }
      .bill-2x {
        width: 120px;
        height: 120px;
      }
      .formula-callout {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="header-tag">The 2D Scaling Trap</div>

  <div class="comparison-container">
    
    <div class="item">
      <div class="bill-box bill-1x">
        💵 $10M
      </div>
      <div class="title-label">Budget: $10M</div>
      <div class="data-pill">Data = 1×</div>
      <div class="area-pill base">Area = 1 unit</div>
    </div>

    
    <div class="item">
      <div class="bill-box bill-2x" id="billGrid">
        <div class="cell">💵 1</div>
        <div class="cell">💵 2</div>
        <div class="cell">💵 3</div>
        <div class="cell">💵 4</div>
      </div>
      <div class="title-label">Budget: $20M</div>
      <div class="data-pill">Data = 2×</div>
      <div class="area-pill alert">Visual Area = 4 units (400%)</div>
    </div>
  </div>

  <div class="formula-callout">
    <div class="formula-item">Area = <span>k²</span> (2² = 4×)</div>
    <div style="color:#cbd5e1;">|</div>
    <div class="formula-item">Volume = <span>k³</span> (2³ = 8×)</div>
  </div>

</body>
</html>

Evaluating Sources Presented Visually and Quantitatively

<!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: #ffffff;
      color: #1e2945;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .legend {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .legend-line {
      width: 18px;
      height: 3px;
      border-radius: 2px;
    }
    .c-navy { background: #1e2945; }
    .c-coral { background: #f43f5e; }

    .chart-container {
      width: 100%;
      max-width: 580px;
      flex: 1;
      min-height: 220px;
      position: relative;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .axis-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 500;
    }
    .axis-title-left {
      fill: #1e2945;
      font-weight: 700;
      font-size: 11px;
    }
    .axis-title-right {
      fill: #f43f5e;
      font-weight: 700;
      font-size: 11px;
    }

    .controls {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 8px;
    }
    .slider-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }
    input[type="range"] {
      flex: 1;
      height: 6px;
      border-radius: 3px;
      accent-color: #f43f5e;
      cursor: pointer;
    }

    .banner {
      background: #fff1f2;
      border: 1px solid #fecdd3;
      color: #9f1239;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 6px;
      text-align: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .banner.visible {
      opacity: 1;
    }
  </style>
</head>
<body>

  <div class="legend">
    <div class="legend-item">
      <span class="legend-line c-navy"></span>
      <span style="color:#1e2945;">Organic Food ($B)</span>
    </div>
    <div class="legend-item">
      <span class="legend-line c-coral"></span>
      <span style="color:#f43f5e;">Autism Rate (per 1k)</span>
    </div>
  </div>

  <div class="chart-container">
    <svg viewBox="0 0 540 240" id="chartSvg">
      
      <g id="grid" stroke="#f1f5f9" stroke-width="1"></g>

      
      <g id="yLeftTicks"></g>
      <text x="45" y="18" text-anchor="start" class="axis-title-left">Organic ($B)</text>

      
      <g id="yRightTicks"></g>
      <text x="495" y="18" text-anchor="end" class="axis-title-right">Autism / 1k</text>

      
      <g id="xTicks"></g>

      
      <path id="navyLine" fill="none" stroke="#1e2945" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      <path id="coralLine" fill="none" stroke="#f43f5e" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="6,3" />

      
      <g id="navyDots" fill="#1e2945"></g>
      
      <g id="coralDots" fill="#f43f5e"></g>
    </svg>
  </div>

  <div class="controls">
    <div class="slider-row">
      <span>Honest Scale (0–100)</span>
      <input type="range" id="scaleSlider" min="0" max="100" value="0">
      <span>Manipulated (5–20)</span>
    </div>
    <div class="banner" id="banner">
      ⚠️ Spurious Correlation: Scale manipulation forces visual alignment without causation.
    </div>
  </div>

  <script>
    const data = [
      { year: 2000, organic: 6.5, autism: 6.7 },
      { year: 2002, organic: 9.0, autism: 7.8 },
      { year: 2004, organic: 12.2, autism: 9.5 },
      { year: 2006, organic: 16.5, autism: 12.1 },
      { year: 2008, organic: 21.0, autism: 15.3 },
      { year: 2010, organic: 27.0, autism: 19.5 }
    ];

    const bounds = { left: 55, right: 485, top: 32, bottom: 205 };

    function getX(i) {
      return bounds.left + (i / (data.length - 1)) * (bounds.right - bounds.left);
    }

    function getYOrganic(val) {
      // 0 to 30 range
      const ratio = (val - 0) / 30;
      return bounds.bottom - ratio * (bounds.bottom - bounds.top);
    }

    function getYAutism(val, t) {
      // t = 0 -> range [0, 100]
      // t = 1 -> range [4.5, 20.5] (aligned to organic)
      const minVal = 0 * (1 - t) + 4.5 * t;
      const maxVal = 100 * (1 - t) + 20.5 * t;
      const ratio = (val - minVal) / (maxVal - minVal);
      return bounds.bottom - ratio * (bounds.bottom - bounds.top);
    }

    function initStatic() {
      // Grid & X axis
      const grid = document.getElementById('grid');
      const xTicks = document.getElementById('xTicks');
      const yLeftTicks = document.getElementById('yLeftTicks');

      for (let i = 0; i <= 4; i++) {
        const y = bounds.top + (i / 4) * (bounds.bottom - bounds.top);
        grid.innerHTML += `<line x1="${bounds.left}" y1="${y}" x2="${bounds.right}" y2="${y}" />`;
        const val = Math.round(30 - (i / 4) * 30);
        yLeftTicks.innerHTML += `<text x="${bounds.left - 8}" y="${y + 4}" text-anchor="end" class="axis-label">${val}</text>`;
      }

      data.forEach((d, i) => {
        const x = getX(i);
        xTicks.innerHTML += `<text x="${x}" y="${bounds.bottom + 20}" text-anchor="middle" class="axis-label" style="font-weight:600;">${d.year}</text>`;
      });

      // Navy line & dots (fixed)
      const navyPoints = data.map((d, i) => `${getX(i)},${getYOrganic(d.organic)}`);
      document.getElementById('navyLine').setAttribute('d', 'M ' + navyPoints.join(' L '));

      const navyDots = document.getElementById('navyDots');
      data.forEach((d, i) => {
        const x = getX(i);
        const y = getYOrganic(d.organic);
        navyDots.innerHTML += `<circle cx="${x}" cy="${y}" r="4" />`;
      });
    }

    function update(t) {
      // Right Axis ticks
      const minVal = 0 * (1 - t) + 4.5 * t;
      const maxVal = 100 * (1 - t) + 20.5 * t;
      const yRightTicks = document.getElementById('yRightTicks');
      let ticksHtml = '';

      for (let i = 0; i <= 4; i++) {
        const y = bounds.top + (i / 4) * (bounds.bottom - bounds.top);
        const val = (maxVal - (i / 4) * (maxVal - minVal)).toFixed(t > 0.4 ? 1 : 0);
        ticksHtml += `<text x="${bounds.right + 8}" y="${y + 4}" text-anchor="start" class="axis-label" fill="#f43f5e">${val}</text>`;
      }
      yRightTicks.innerHTML = ticksHtml;

      // Coral Line & Dots
      const coralPoints = data.map((d, i) => `${getX(i)},${getYAutism(d.autism, t)}`);
      document.getElementById('coralLine').setAttribute('d', 'M ' + coralPoints.join(' L '));

      const coralDots = document.getElementById('coralDots');
      let dotsHtml = '';
      data.forEach((d, i) => {
        const x = getX(i);
        const y = getYAutism(d.autism, t);
        dotsHtml += `<circle cx="${x}" cy="${y}" r="4" />`;
      });
      coralDots.innerHTML = dotsHtml;

      // Banner visibility
      const banner = document.getElementById('banner');
      if (t > 0.75) {
        banner.classList.add('visible');
      } else {
        banner.classList.remove('visible');
      }
    }

    initStatic();
    const slider = document.getElementById('scaleSlider');
    slider.addEventListener('input', (e) => {
      update(e.target.value / 100);
    });
    update(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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    /* Stepper Navigation */
    .scope-nav {
      display: flex;
      width: 100%;
      max-width: 540px;
      gap: 6px;
      justify-content: space-between;
    }
    .scope-btn {
      flex: 1;
      padding: 6px 4px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: all 0.25s ease;
    }
    .scope-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      box-shadow: 0 0 0 1px #3b82f6;
    }
    .scope-letter {
      font-size: 15px;
      font-weight: 800;
      color: #64748b;
    }
    .scope-btn.active .scope-letter {
      color: #2563eb;
    }
    .scope-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }
    .scope-btn.active .scope-label {
      color: #1e2945;
    }

    /* Stage Canvas Container */
    .stage-container {
      position: relative;
      width: 100%;
      max-width: 540px;
      height: 250px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      margin: 10px 0;
    }

    .step-panel {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: 16px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .step-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .panel-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .badge-check {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
      background: #f1f5f9;
      color: #475569;
    }

    /* Visual Comparison Grids */
    .visual-comparison {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .card-box {
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #fafafa;
    }
    .card-box.truth {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }
    .card-box.trap {
      border-color: #fecaca;
      background: #fef2f2;
    }
    .tag {
      position: absolute;
      top: 6px;
      left: 8px;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
    }
    .tag-trap { background: #fee2e2; color: #dc2626; }
    .tag-truth { background: #dcfce7; color: #16a34a; }

    /* SVG Graphics */
    svg {
      width: 100%;
      height: 100%;
      max-height: 130px;
    }
    .axis { stroke: #94a3b8; stroke-width: 1.5; }
    .bar-danger { fill: #f87171; }
    .bar-safe { fill: #60a5fa; }
    .line-danger { stroke: #ef4444; stroke-width: 2.5; fill: none; }
    .line-safe { stroke: #10b981; stroke-width: 2.5; fill: none; }
    .grid-line { stroke: #e2e8f0; stroke-dasharray: 2,2; }
    .svg-text { font-size: 9px; fill: #64748b; font-weight: 600; }

    /* Bottom Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 540px;
      justify-content: center;
    }
    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
    }
    .ctrl-btn:active { background: #f1f5f9; }
  </style>
</head>
<body>

  
  <div class="scope-nav">
    <button class="scope-btn active" data-step="0">
      <span class="scope-letter">S</span>
      <span class="scope-label">Source</span>
    </button>
    <button class="scope-btn" data-step="1">
      <span class="scope-letter">C</span>
      <span class="scope-label">Context</span>
    </button>
    <button class="scope-btn" data-step="2">
      <span class="scope-letter">O</span>
      <span class="scope-label">Origin</span>
    </button>
    <button class="scope-btn" data-step="3">
      <span class="scope-letter">P</span>
      <span class="scope-label">Proportion</span>
    </button>
    <button class="scope-btn" data-step="4">
      <span class="scope-letter">E</span>
      <span class="scope-label">Evidence</span>
    </button>
  </div>

  
  <div class="stage-container">

    
    <div class="step-panel active">
      <div class="panel-header">
        <span class="panel-title">1. Source &amp; Funding Bias</span>
        <span class="badge-check">Audit: Who paid?</span>
      </div>
      <div class="visual-comparison">
        <div class="card-box trap">
          <span class="tag tag-trap">CONFLICTED</span>
          <div style="font-size: 32px; margin-bottom: 4px;">🏢 ➔ 💰</div>
          <span class="svg-text">Funded by Sponsor</span>
        </div>
        <div class="card-box truth">
          <span class="tag tag-truth">INDEPENDENT</span>
          <div style="font-size: 32px; margin-bottom: 4px;">🔬 ➔ 📊</div>
          <span class="svg-text">Peer-Reviewed Audit</span>
        </div>
      </div>
    </div>

    
    <div class="step-panel">
      <div class="panel-header">
        <span class="panel-title">2. Context &amp; Timeframe</span>
        <span class="badge-check">Audit: Missing range?</span>
      </div>
      <div class="visual-comparison">
        <div class="card-box trap">
          <span class="tag tag-trap">CHERRY-PICKED</span>
          <svg viewBox="0 0 140 80">
            <line x1="15" y1="70" x2="130" y2="70" class="axis"/>
            <line x1="15" y1="10" x2="15" y2="70" class="axis"/>
            <path d="M 20 60 L 60 45 L 100 50 L 125 15" class="line-danger"/>
            <text x="50" y="78" class="svg-text">1-Month Spike</text>
          </svg>
        </div>
        <div class="card-box truth">
          <span class="tag tag-truth">FULL TIMELINE</span>
          <svg viewBox="0 0 140 80">
            <line x1="15" y1="70" x2="130" y2="70" class="axis"/>
            <line x1="15" y1="10" x2="15" y2="70" class="axis"/>
            <path d="M 20 25 L 45 60 L 70 30 L 95 65 L 110 50 L 125 55" class="line-safe"/>
            <text x="45" y="78" class="svg-text">10-Year Normal Cycle</text>
          </svg>
        </div>
      </div>
    </div>

    
    <div class="step-panel">
      <div class="panel-header">
        <span class="panel-title">3. Origin &amp; Baseline</span>
        <span class="badge-check">Audit: Truncated zero?</span>
      </div>
      <div class="visual-comparison">
        <div class="card-box trap">
          <span class="tag tag-trap">TRUNCATED (90–100)</span>
          <svg viewBox="0 0 140 80">
            <line x1="25" y1="70" x2="130" y2="70" class="axis"/>
            <line x1="25" y1="10" x2="25" y2="70" class="axis"/>
            <text x="4" y="68" class="svg-text">90</text>
            <text x="0" y="20" class="svg-text">100</text>
            <rect x="40" y="55" width="28" height="15" class="bar-danger"/>
            <rect x="85" y="15" width="28" height="55" class="bar-danger"/>
            <text x="44" y="78" class="svg-text">92</text>
            <text x="90" y="78" class="svg-text">98</text>
          </svg>
        </div>
        <div class="card-box truth">
          <span class="tag tag-truth">ZERO BASE (0–100)</span>
          <svg viewBox="0 0 140 80">
            <line x1="25" y1="70" x2="130" y2="70" class="axis"/>
            <line x1="25" y1="10" x2="25" y2="70" class="axis"/>
            <text x="10" y="68" class="svg-text">0</text>
            <text x="0" y="20" class="svg-text">100</text>
            <rect x="40" y="22" width="28" height="48" class="bar-safe"/>
            <rect x="85" y="17" width="28" height="53" class="bar-safe"/>
            <text x="44" y="78" class="svg-text">92</text>
            <text x="90" y="78" class="svg-text">98</text>
          </svg>
        </div>
      </div>
    </div>

    
    <div class="step-panel">
      <div class="panel-header">
        <span class="panel-title">4. Proportions &amp; Scaling</span>
        <span class="badge-check">Audit: 2D/3D area lie?</span>
      </div>
      <div class="visual-comparison">
        <div class="card-box trap">
          <span class="tag tag-trap">2× VALUE = 4× AREA</span>
          <svg viewBox="0 0 140 80">
            <rect x="25" y="38" width="20" height="20" fill="#f87171" stroke="#ef4444"/>
            <text x="32" y="70" class="svg-text">1×</text>
            <rect x="65" y="18" width="40" height="40" fill="#f87171" stroke="#ef4444"/>
            <text x="75" y="70" class="svg-text">Area = 4×</text>
          </svg>
        </div>
        <div class="card-box truth">
          <span class="tag tag-truth">TRUE 1D HEIGHT</span>
          <svg viewBox="0 0 140 80">
            <line x1="20" y1="65" x2="120" y2="65" class="axis"/>
            <rect x="35" y="45" width="22" height="20" class="bar-safe"/>
            <text x="42" y="75" class="svg-text">1×</text>
            <rect x="75" y="25" width="22" height="40" class="bar-safe"/>
            <text x="82" y="75" class="svg-text">2×</text>
          </svg>
        </div>
      </div>
    </div>

    
    <div class="step-panel">
      <div class="panel-header">
        <span class="panel-title">5. Evidence vs Claim</span>
        <span class="badge-check">Audit: Mere correlation?</span>
      </div>
      <div class="visual-comparison">
        <div class="card-box trap">
          <span class="tag tag-trap">CORRELATION</span>
          <div style="font-size: 24px; margin-bottom: 2px;">🍦 📈 🦈</div>
          <span class="svg-text">Ice Cream ≠ Sharks</span>
          <span style="font-size: 9px; color: #ef4444; font-weight: 700;">(Lurking: Summer ☀️)</span>
        </div>
        <div class="card-box truth">
          <span class="tag tag-truth">CAUSATION</span>
          <div style="font-size: 24px; margin-bottom: 2px;">🚬 ➔ 🫁</div>
          <span class="svg-text">Controlled Variable</span>
          <span style="font-size: 9px; color: #16a34a; font-weight: 700;">Proven Mechanism</span>
        </div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="ctrl-btn" id="prevBtn">← Back</button>
    <button class="ctrl-btn" id="playBtn">⏸ Pause</button>
    <button class="ctrl-btn" id="nextBtn">Next →</button>
  </div>

  <script>
    const panels = $$('.step-panel');
    const navBtns = $$('.scope-btn');
    const playBtn = $('#playBtn');

    const player = new StepPlayer('.step-panel', {
      interval: 4000,
      onChange: (idx) => {
        navBtns.forEach((btn, i) => {
          btn.classList.toggle('active', i === idx);
        });
      }
    });

    navBtns.forEach((btn, idx) => {
      onTap(btn, () => player.goTo(idx));
    });

    onTap($('#prevBtn'), () => player.prev());
    onTap($('#nextBtn'), () => player.next());
    onTap(playBtn, () => {
      player.toggle();
      playBtn.textContent = player.playing ? '⏸ Pause' : '▶ Play';
    });

    player.start();
  </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;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .toggle-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .toggle-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

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

    @media (max-width: 460px) {
      .charts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }

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

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .deceptive-title { color: #e11d48; }
    .honest-title { color: #0284c7; }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .badge-deceptive {
      background: #ffe4e6;
      color: #e11d48;
    }
    .badge-honest {
      background: #e0f2fe;
      color: #0284c7;
    }

    .chart-area {
      display: flex;
      height: 180px;
      position: relative;
      margin-top: 4px;
      border-bottom: 2px solid #94a3b8;
    }

    .y-axis {
      width: 38px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      padding-right: 6px;
      text-align: right;
      user-select: none;
    }

    .plot {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      position: relative;
      padding: 0 10px;
    }

    .grid-lines {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none;
    }
    .grid-line {
      border-top: 1px dashed #e2e8f0;
      width: 100%;
    }

    .bar-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 38%;
      height: 100%;
      justify-content: flex-end;
      z-index: 1;
    }

    .bar-val {
      font-size: 12px;
      font-weight: 700;
      color: #1e2945;
      margin-bottom: 4px;
    }

    .bar {
      width: 100%;
      border-radius: 4px 4px 0 0;
      transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s;
    }

    .bar-y1 { background: #94a3b8; }
    .bar-y2-deceptive { background: #e11d48; }
    .bar-y2-honest { background: #0284c7; }

    .x-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 6px;
    }

    /* Baseline warning overlay */
    .baseline-cut {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0;
      background: rgba(225, 29, 72, 0.12);
      border-top: 2px dashed #e11d48;
      pointer-events: none;
      transition: height 0.3s ease;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
    }
    .baseline-cut span {
      font-size: 10px;
      font-weight: 700;
      color: #e11d48;
      background: #fff;
      padding: 1px 6px;
      border-radius: 3px;
      border: 1px solid #fecdd3;
      margin-top: -9px;
    }
    .show-baseline .baseline-cut {
      height: 100%;
    }

    .stat-footer {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px solid #e2e8f0;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="btnNormal" class="toggle-btn active" onclick="setMode('normal')">Standard View</button>
    <button id="btnInspect" class="toggle-btn" onclick="setMode('inspect')">Inspect Baseline</button>
  </div>

  <div class="charts-grid" id="chartsGrid">
    
    <div class="chart-card">
      <div class="card-header">
        <div class="card-title deceptive-title">⚠️ Truncated Axis</div>
        <div class="badge badge-deceptive">Lie Factor: 27.5</div>
      </div>

      <div class="chart-area" id="deceptiveArea">
        <div class="y-axis">
          <span>40%</span>
          <span>38%</span>
          <span>36%</span>
          <span>34%</span>
        </div>
        <div class="plot">
          <div class="grid-lines">
            <div class="grid-line"></div>
            <div class="grid-line"></div>
            <div class="grid-line"></div>
            <div class="grid-line"></div>
          </div>

          <div class="baseline-cut">
            <span>Missing 0%–34%</span>
          </div>

          
          <div class="bar-group">
            <div class="bar-val">35%</div>
            <div class="bar bar-y1" style="height: 16.7%;"></div>
            <div class="x-label">Year 1</div>
          </div>

          
          <div class="bar-group">
            <div class="bar-val">39.6%</div>
            <div class="bar bar-y2-deceptive" style="height: 93.3%;"></div>
            <div class="x-label">Year 2</div>
          </div>
        </div>
      </div>

      <div class="stat-footer" style="color: #e11d48;">
        <span>Perceived: +460%</span>
        <span>~5.6× visual height</span>
      </div>
    </div>

    
    <div class="chart-card">
      <div class="card-header">
        <div class="card-title honest-title">✓ Zero Baseline</div>
        <div class="badge badge-honest">Lie Factor: 1.0</div>
      </div>

      <div class="chart-area">
        <div class="y-axis">
          <span>50%</span>
          <span>35%</span>
          <span>20%</span>
          <span>0%</span>
        </div>
        <div class="plot">
          <div class="grid-lines">
            <div class="grid-line"></div>
            <div class="grid-line"></div>
            <div class="grid-line"></div>
            <div class="grid-line"></div>
          </div>

          
          <div class="bar-group">
            <div class="bar-val">35%</div>
            <div class="bar bar-y1" style="height: 70%;"></div>
            <div class="x-label">Year 1</div>
          </div>

          
          <div class="bar-group">
            <div class="bar-val">39.6%</div>
            <div class="bar bar-y2-honest" style="height: 79.2%;"></div>
            <div class="x-label">Year 2</div>
          </div>
        </div>
      </div>

      <div class="stat-footer" style="color: #0284c7;">
        <span>True Change: +13.1%</span>
        <span>1.13× visual height</span>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const deceptiveArea = document.getElementById('deceptiveArea');
      const btnNormal = document.getElementById('btnNormal');
      const btnInspect = document.getElementById('btnInspect');

      if (mode === 'inspect') {
        deceptiveArea.classList.add('show-baseline');
        btnInspect.classList.add('active');
        btnNormal.classList.remove('active');
      } else {
        deceptiveArea.classList.remove('show-baseline');
        btnNormal.classList.add('active');
        btnInspect.classList.remove('active');
      }
    }
  </script>
</body>
</html>

Discourse Structure: Macro and Micro Organisation

Schema Theory and Cognitive Frames

Foregrounding: Deviation and Parallelism in Discourse

Critical Discourse Analysis: Ideology and Power

Narrative Discourse: Labov's Narrative Framework

Intertextuality and Discourse Communities

Positioning Theory and Interpersonal Pragmatics

Pragmatic Failure and Miscommunication

Integrating Pragmatic and Discourse Analysis in Essays

Discourse Analysis: Structure, Ideology, and Narrative

Integrating Visual Information with Historical Text

Integrating Quantitative Data with Historical Analysis

Evaluating Diverse Media Sources for Historical Research

Using Multimedia Sources to Answer Research Questions

Organizing Information From Multiple Sources

Synthesizing Primary and Secondary Sources into Coherent Understanding

Noting Discrepancies Among Historical Sources

Resolving Conflicting Information Across Historical Sources

Reading Complex History Texts Independently and Proficiently

Integrating and Synthesizing Historical Sources

Synthesizing Conflicting Information Across Text and Visual Formats

Integrating Quantitative Data and Charts with Technical Texts

Extracting Quantitative Data From Economic Reports to Support Policy Analysis

Reading Grade 11 Literary Nonfiction Independently

Synthesizing Multi-Format Datasets, Infographics, and Prose into a Unified Conceptual Model

Navigating High-Density Informational and Technical Prose at the College-Ready Band

Multimodal Synthesis, Quantitative Integration, and Text Complexity

Citing Textual Evidence From Science Texts

Identifying Important Distinctions in Scientific Writing

Detecting Gaps and Inconsistencies in Technical Accounts

Determining Central Ideas in Complex Science Texts

Paraphrasing Complex Scientific Concepts in Simpler Terms

Summarizing Technical Processes Accurately

Following Complex Multistep Experimental Procedures

Analyzing Experimental Results Based on Text Explanations

Carrying Out Technical Measurements From Instructions

Reading College-Level Science and Technical Texts Independently

Reading and Analyzing Science/Technical Texts

Analyzing Relationships Among Primary and Secondary Sources

Comparing Eyewitness Journals with Textbook Overviews

Synthesizing Data and Multiple Sources into Historical Accounts

Synthesizing Information From Multiple Sources Into a Unified View

Identifying Agreements and Contradictions Across Sources

Evaluating How Secondary Historians Use Primary Quotes

Corroborating Official Government Reports with Private Correspondence

Assessing Strengths and Limitations of Eyewitness Testimony

Comprehending Multi-Genre History Collections Independently

social-studies

Corroborating Primary and Secondary Sources (Grades 6–8)

Accent, Dialect, and Sociolect in Spoken Voices

Historical Spoken Voices: Analysing Archival Transcripts

Constructed Dialogue and Represented Speech in Oral Narratives

Gender and Interaction in Spoken Discourse

Humour, Irony, and Sarcasm in Spoken Interaction

Courtroom and Legal Discourse: Institutional Constraints

Classroom and Educational Talk: The IRE Structure

Digital Spoken Hybridity: Voice Notes and Live Streams

Comparative Analysis of Two Contrasting Spoken Transcripts

Essay Writing on Spoken Voices and Transcription Data

Spoken Voices in Social, Institutional, and Comparative Contexts

Integrating Quantitative Data with Scientific Text

Evaluating Video and Multimedia Sources in Science

Synthesizing Multiple Science Sources to Solve Problems

Evaluating Hypotheses in Scientific Texts

Verifying Data Claims in Science Writing

Corroborating Scientific Conclusions with Other Sources

Challenging Scientific Conclusions with Additional Evidence

Resolving Conflicting Information in Scientific Sources

Synthesizing Experiments and Texts into Coherent Understanding

Evaluating and Synthesizing Scientific Information

Evaluating Audience Positioning in Unseen Non-Fiction

Comparative Analysis of Paired Non-Fiction Texts

Close Stylistic Commentary on Unseen Non-Fiction

Mastering the Non-Fiction Analytical Essay

Unseen Non-Fiction Analysis and Essay Crafting

Narrative Time: Order, Duration, and Frequency

World-Building and Text World Theory

Setting, Spatial Deixis, and Atmosphere Creation

Narrative Openings and Closings: Framing Strategies

Gothic and Dystopian Conventions in Prose Fiction

Modernist and Postmodern Innovations in the Novel

Sociolinguistic Realism in Prose Dialogue

Unseen Prose Extract: Stylistic Analysis

Comparative Thematic Analysis Across Set Prose Texts

Writing the Advanced Prose Stylistics Essay

Prose Stylistics: Narrative Structure, World-Building, and Critical Analysis

Connecting Insights From Specific Details to the Whole Text

Summarizing Complex Relationships Among Key Details and Ideas

Analyzing How Qualifying Clauses Shape Central Constitutional Doctrines

Synthesizing Interlocking Arguments in The Federalist Papers

Analyzing Micro-Level Historical Vignettes Within Macro-Historiography

Mapping the Interdependence of Economic Theories in Classic Treatises

Assessing Strengths and Limitations of Primary and Secondary Sources

Conducting Scholarly Meta-Analyses of Historical Periods

Scholarly Synthesis and Holistic Textual Analysis (Grades 11–12)

Unseen Poetry: Annotation and Stylistic Interrogation

Thematic Comparison of Two Poems from an Anthology

Close Reading and Prosodic Mapping in Essays

Writing the Comparative Poetry Examination Essay

Unseen Poetry and Comparative Essay Analysis

Unseen Dramatic Extract Analysis

Comparing Dramatic Scenes Across Different Periods

Evaluating Performance Interpretations of Set Plays

Writing the Dramatic Stylistics and Theatre Essay

Applied Dramatic Stylistics and Essay Writing

Evaluating Multiple Sources in Diverse Formats to Solve a Problem

Synthesizing Quantitative Economic Data With Qualitative History

Integrating Demographic Maps and Census Tables with Policy Legislation

Evaluating Statistical Visualizations and Political Infographics for Methodological Bias

Synthesizing Archival Photographs, Audio Recordings, and Textual Testimony

Integrating Spatial GIS Data with Historical Environmental Impact Reports

Applying Multimodal Evidence to Propose Solutions to Contemporary Civic Dilemmas

Multimodal Synthesis and Quantitative Problem-Solving (Grades 11–12)

Reader-Response Theory and Interpretive Communities

Reception History: Tracking Critical Shifts Over Time

Ecocriticism and Environmental Discourses

Intertextual Webs: Adaptation and Reimagining

Evaluating Conflicting Critical Interpretations

Contextual Influences on Language Change and Lexical Drift

Evaluating Cultural Appropriation and Representation

Synthesising Context Seamlessly in Textual Analysis

Critiquing Scholarly Essays and Literary-Linguistic Articles

Writing the Contextually Informed Critical Essay

Reader Reception, Intertextuality, and Critical Synthesis

Comparative Frameworks in Integrated Language and Literature

Comparing Linguistic Methods Across Text Types

Comparing Fictional and Non-Fictional Narratives

Comparing Poetry and Journalistic Reportage

Comparing Dramatic Dialogue and Transcribed Conversation

Comparing Speeches and Literary Monologues

Comparative Analysis Across Literary and Non-Literary Genres

Identifying and Categorizing Fact-Pattern Discrepancies Across Historical Sources

Explaining Discrepancies in Historical Accounts by Analyzing Contextual Provenance

Integrating Divergent Eye-Witness Accounts into a Coherent Narrative

Reconciling Contradictory Economic Statistics from Competing Historical Agencies

Constructing Nuanced Syntheses of Complex International Treaties and Debates

Synthesizing Primary and Secondary Research into Comprehensive Historiographical Assessments

OGE.12.RI.5

Aligned learning resources

Related diagrams