<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 8px;
      user-select: none;
      -webkit-user-select: none;
    }

    .wireframe-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 680px;
      margin: 0 auto;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 8px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      font-size: 11px;
      color: #334155;
      font-weight: 600;
    }

    .breadcrumb-trail {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #0f172a;
    }
    .breadcrumb-trail span.active {
      color: #2563eb;
      font-weight: 700;
    }

    .wireframe-grid {
      display: grid;
      grid-template-columns: 80px 1fr 100px;
      gap: 8px;
      min-height: 250px;
    }

    @media (max-width: 420px) {
      .wireframe-grid {
        grid-template-columns: 60px 1fr 85px;
        gap: 6px;
      }
    }

    .panel {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #1e293b;
      margin-bottom: 6px;
      text-align: center;
    }

    /* Spine */
    .spine-track {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      position: relative;
      flex: 1;
      justify-content: center;
      padding: 4px 0;
    }
    .spine-line {
      position: absolute;
      width: 2px;
      top: 14px;
      bottom: 14px;
      background: #cbd5e1;
      z-index: 0;
    }
    .spine-node {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #94a3b8;
      color: #475569;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      z-index: 1;
      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
    }
    .spine-node.completed {
      background: #e0f2fe;
      border-color: #0284c7;
      color: #0284c7;
    }
    .spine-node.active {
      background: #2563eb;
      border-color: #1d4ed8;
      color: #ffffff;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    }
    .spine-node.target-preview {
      border-color: #d97706;
      box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.35);
      background: #fef3c7;
      color: #b45309;
    }

    /* Lexia Center */
    .lexia-box {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      padding: 8px 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: space-between;
    }
    .lexia-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 4px;
    }
    .lexia-tag {
      font-size: 12px;
      font-weight: 700;
      color: #1d4ed8;
    }
    .lexia-theme {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
    }

    .lexia-content {
      font-size: 11.5px;
      line-height: 1.4;
      color: #334155;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    @media (max-width: 420px) {
      .lexia-content {
        font-size: 10.5px;
        line-height: 1.35;
      }
    }

    /* Anchor Link */
    .anchor-wrap {
      margin: 4px 0;
      display: flex;
      align-items: center;
    }
    .anchor-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #eff6ff;
      border: 1.5px solid #2563eb;
      color: #1d4ed8;
      font-size: 11px;
      font-weight: 600;
      padding: 4px 8px;
      border-radius: 12px;
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.2s, box-shadow 0.2s;
    }
    .anchor-pill:hover, .anchor-pill.active-preview {
      background: #dbeafe;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    }
    .anchor-pill span.target-text {
      font-weight: 700;
      text-decoration: underline;
    }

    /* Radar Mini-Map */
    .radar-container {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg.radar-svg {
      width: 100%;
      height: 100%;
      max-height: 180px;
      overflow: visible;
    }
    .radar-edge {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      transition: stroke 0.3s, stroke-width 0.3s;
    }
    .radar-edge.active-edge {
      stroke: #2563eb;
      stroke-width: 2.5;
    }
    .radar-dot {
      cursor: pointer;
    }
    .radar-dot circle {
      fill: #ffffff;
      stroke: #64748b;
      stroke-width: 1.5;
      transition: fill 0.2s, stroke 0.2s, stroke-width 0.2s;
    }
    .radar-dot.active circle {
      fill: #2563eb;
      stroke: #1d4ed8;
      stroke-width: 2.5;
    }
    .radar-dot.target-preview circle {
      stroke: #d97706;
      stroke-width: 2.5;
      fill: #fef3c7;
    }
    .radar-dot text {
      font-size: 8px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      fill: #1e293b;
      pointer-events: none;
    }
    .radar-dot.active text {
      fill: #ffffff;
    }
    .radar-dot.target-preview text {
      fill: #b45309;
    }

    /* Helper instruction footer */
    .instruction-bar {
      font-size: 10.5px;
      color: #64748b;
      text-align: center;
      padding-top: 2px;
    }
  </style>
</head>
<body>

  <div class="wireframe-container">
    <div class="top-bar">
      <span>WAYFINDING ESSAY LAYOUT</span>
      <div class="breadcrumb-trail" id="breadcrumbs">
        Path: <span id="bcPath">Node 1 → <span class="active">Node 2</span></span>
      </div>
    </div>

    <div class="wireframe-grid">
      
      <div class="panel">
        <div class="panel-title">Spine</div>
        <div class="spine-track">
          <div class="spine-line"></div>
          <div class="spine-node completed" data-id="1" title="Node 1: Thesis">✓</div>
          <div class="spine-node active" data-id="2" title="Node 2: Lexias">2</div>
          <div class="spine-node" data-id="3" title="Node 3: Synthesis">3</div>
          <div class="spine-node" data-id="4" title="Node 4: Wayfinding">4</div>
        </div>
      </div>

      
      <div class="panel">
        <div class="panel-title">Active Lexia</div>
        <div class="lexia-box">
          <div class="lexia-header">
            <span class="lexia-tag" id="lexiaTitle">Node 2: Non-Linear Lexias</span>
            <span class="lexia-theme" id="lexiaTheme">Hypertext</span>
          </div>

          <div class="lexia-content" id="lexiaBody">
            <p id="lexiaP1">Digital essays split linear narratives into modular lexias.</p>
            
            <div class="anchor-wrap">
              <div class="anchor-pill" id="anchorLink" title="Click or hover to preview target node">
                <span>Branch →</span> <span class="target-text" id="targetLabel">Node 4</span>
              </div>
            </div>

            <p id="lexiaP2">Contextual anchor links preserve orientation across divergent paths.</p>
          </div>
        </div>
      </div>

      
      <div class="panel">
        <div class="panel-title">Radar</div>
        <div class="radar-container">
          <svg class="radar-svg" viewBox="0 0 100 120">
            <line id="edge-1-2" class="radar-edge" x1="50" y1="20" x2="25" y2="55" />
            <line id="edge-1-3" class="radar-edge" x1="50" y1="20" x2="75" y2="55" />
            <line id="edge-2-3" class="radar-edge" x1="25" y1="55" x2="75" y2="55" />
            <line id="edge-2-4" class="radar-edge active-edge" x1="25" y1="55" x2="50" y2="100" />
            <line id="edge-3-4" class="radar-edge" x1="75" y1="55" x2="50" y2="100" />

            <g class="radar-dot" id="rdot-1" data-id="1" transform="translate(50, 20)">
              <circle r="9" />
              <text>1</text>
            </g>
            <g class="radar-dot active" id="rdot-2" data-id="2" transform="translate(25, 55)">
              <circle r="10" />
              <text>2</text>
            </g>
            <g class="radar-dot" id="rdot-3" data-id="3" transform="translate(75, 55)">
              <circle r="9" />
              <text>3</text>
            </g>
            <g class="radar-dot" id="rdot-4" data-id="4" transform="translate(50, 100)">
              <circle r="9" />
              <text>4</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="instruction-bar">
      💡 Click any <strong>Spine node</strong>, <strong>Radar dot</strong>, or the <strong>Branch button</strong> to navigate.
    </div>
  </div>

  <script>
    const nodeData = {
      1: {
        title: "Node 1: Thesis Statement",
        theme: "Introduction",
        p1: "Linear text restricts exploratory, non-sequential thematic reasoning.",
        target: 2,
        targetBtnText: "Branch → Node 2",
        p2: "Spine tracking anchors reader progress while enabling exploratory jumps.",
        path: '<span class="active">Node 1</span>'
      },
      2: {
        title: "Node 2: Non-Linear Lexias",
        theme: "Hypertext",
        p1: "Digital essays split linear narratives into modular lexias.",
        target: 4,
        targetBtnText: "Branch → Node 4",
        p2: "Contextual anchor links preserve orientation across divergent paths.",
        path: 'Node 1 → <span class="active">Node 2</span>'
      },
      3: {
        title: "Node 3: Thematic Synthesis",
        theme: "Structure",
        p1: "Parallel concepts link side branches directly back to core theses.",
        target: 4,
        targetBtnText: "Branch → Node 4",
        p2: "The dynamic mini-map highlights real-time cluster positioning.",
        path: 'Node 1 → Node 2 → <span class="active">Node 3</span>'
      },
      4: {
        title: "Node 4: Wayfinding Synthesis",
        theme: "Conclusion",
        p1: "Combined spines and radar mini-maps prevent hypermedia disorientation.",
        target: 1,
        targetBtnText: "Restart → Node 1",
        p2: "Readers retain agency while maintaining global conceptual coherence.",
        path: 'Node 1 → Node 2 → Node 4 (<span class="active">End</span>)'
      }
    };

    let current = 2;

    const spineNodes = document.querySelectorAll('.spine-node');
    const radarDots = document.querySelectorAll('.radar-dot');
    const anchor = document.getElementById('anchorLink');
    const lexiaTitle = document.getElementById('lexiaTitle');
    const lexiaTheme = document.getElementById('lexiaTheme');
    const lexiaP1 = document.getElementById('lexiaP1');
    const lexiaP2 = document.getElementById('lexiaP2');
    const targetLabel = document.getElementById('targetLabel');
    const bcPath = document.getElementById('bcPath');

    function updateView(id) {
      current = parseInt(id, 10);
      const data = nodeData[current];
      const targetId = data.target;

      lexiaTitle.textContent = data.title;
      lexiaTheme.textContent = data.theme;
      lexiaP1.textContent = data.p1;
      lexiaP2.textContent = data.p2;
      targetLabel.textContent = `Node ${targetId}`;
      bcPath.innerHTML = data.path;

      if (current === 4) {
        anchor.querySelector('span').textContent = 'Restart →';
      } else {
        anchor.querySelector('span').textContent = 'Branch →';
      }

      spineNodes.forEach(node => {
        const nid = parseInt(node.dataset.id, 10);
        node.className = 'spine-node';
        if (nid === current) {
          node.classList.add('active');
          node.textContent = nid;
        } else if (nid < current) {
          node.classList.add('completed');
          node.textContent = '✓';
        } else {
          node.textContent = nid;
        }
      });

      radarDots.forEach(dot => {
        const did = parseInt(dot.dataset.id, 10);
        dot.classList.toggle('active', did === current);
        dot.classList.remove('target-preview');
      });

      document.querySelectorAll('.radar-edge').forEach(edge => {
        edge.classList.remove('active-edge');
      });
      
      const edgeId = `edge-${Math.min(current, targetId)}-${Math.max(current, targetId)}`;
      const edge = document.getElementById(edgeId);
      if (edge) edge.classList.add('active-edge');
    }

    function setPreview(show) {
      const targetId = nodeData[current].target;
      const targetSpine = document.querySelector(`.spine-node[data-id="${targetId}"]`);
      const targetRadar = document.getElementById(`rdot-${targetId}`);

      if (show) {
        if (targetSpine) targetSpine.classList.add('target-preview');
        if (targetRadar) targetRadar.classList.add('target-preview');
      } else {
        if (targetSpine) targetSpine.classList.remove('target-preview');
        if (targetRadar) targetRadar.classList.remove('target-preview');
      }
    }

    spineNodes.forEach(node => {
      node.addEventListener('click', () => updateView(node.dataset.id));
    });

    radarDots.forEach(dot => {
      dot.addEventListener('click', () => updateView(dot.dataset.id));
    });

    anchor.addEventListener('mouseenter', () => setPreview(true));
    anchor.addEventListener('mouseleave', () => setPreview(false));
    anchor.addEventListener('click', () => {
      updateView(nodeData[current].target);
      setPreview(false);
    });

    updateView(2);
  </script>
</body>
</html>

Designing Non-Linear Hypertext and Interactive Multimodal Essays

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

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

    .title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: #0f172a;
    }

    .tabs {
      display: flex;
      gap: 4px;
      background: #f1f5f9;
      padding: 3px;
      border-radius: 8px;
    }

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

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

    .lexia-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 13px;
      line-height: 1.5;
      color: #334155;
    }

    .hyperlink {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 7px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid #bae6fd;
      transition: all 0.15s ease;
    }

    .hyperlink:hover {
      background: #bae6fd;
    }

    .hyperlink.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .viewport-card {
      position: relative;
      height: 190px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .panel-view {
      position: absolute;
      inset: 0;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      transform: translateY(8px);
    }

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

    /* Waveform Audio Styles */
    .audio-controls {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 320px;
    }

    .play-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: #0284c7;
      color: #ffffff;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: opacity 0.2s ease;
    }

    .play-btn:active {
      opacity: 0.8;
    }

    .waveform-wrap {
      flex: 1;
      height: 48px;
      display: flex;
      align-items: center;
      gap: 3px;
      background: #ffffff;
      padding: 0 8px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }

    .wave-bar {
      flex: 1;
      height: 15%;
      background: #cbd5e1;
      border-radius: 2px;
      transition: height 0.15s ease, background 0.15s ease;
    }

    .wave-bar.active {
      background: #0284c7;
    }

    .meter-wrap {
      width: 100%;
      max-width: 320px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }

    .meter-track {
      flex: 1;
      height: 8px;
      background: #e2e8f0;
      border-radius: 4px;
      margin: 0 10px;
      overflow: hidden;
    }

    .meter-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
      transition: width 0.15s ease;
    }

    /* Chart Styles */
    .chart-container {
      width: 100%;
      max-width: 340px;
      height: 120px;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      gap: 16px;
      padding-bottom: 22px;
      position: relative;
      border-bottom: 2px solid #cbd5e1;
    }

    .chart-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      justify-content: flex-end;
      position: relative;
    }

    .bar {
      width: 100%;
      max-width: 54px;
      border-radius: 4px 4px 0 0;
      transition: height 0.4s ease;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 4px;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
    }

    .bar-day { background: #38bdf8; height: 0%; }
    .bar-night { background: #6366f1; height: 0%; }

    .chart-label {
      position: absolute;
      bottom: -20px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .chart-toggle-row {
      display: flex;
      gap: 8px;
    }

    .pill-btn {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
    }

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

    /* Overview Mode */
    .overview-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      height: 100%;
    }

    .node-preview {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .node-preview:hover {
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2,132,199,0.12);
    }

    .node-icon {
      font-size: 20px;
    }

    .node-title {
      font-size: 12px;
      font-weight: 600;
      color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="header-row">
    <div class="title">Urban Acoustic Ecology</div>
    <div class="tabs">
      <button class="tab-btn active" id="tabArg" onclick="setMode('arg')">Primary Argument</button>
      <button class="tab-btn" id="tabAudio" onclick="setMode('audio')">Archival Audio</button>
      <button class="tab-btn" id="tabData" onclick="setMode('data')">Quantitative Data</button>
    </div>
  </div>

  <div class="lexia-box">
    City soundscapes alter baseline stress. High-density corridors exhibit sharp acoustic spikes from 
    <span class="hyperlink" id="linkAudio" onclick="setMode('audio')">🔊 [Listen: Siren Frequency]</span>, 
    reshaping long-term environmental stress as seen in 
    <span class="hyperlink" id="linkData" onclick="setMode('data')">📊 [Data: Decibel Trends]</span>.
  </div>

  <div class="viewport-card">
    
    
    <div class="panel-view active" id="panelArg">
      <div class="overview-grid">
        <div class="node-preview" onclick="setMode('audio')">
          <div class="node-icon">🔊</div>
          <div class="node-title">Acoustic Evidence</div>
          <div style="font-size: 10px; color: #64748b;">950 Hz Peak Waveform</div>
        </div>
        <div class="node-preview" onclick="setMode('data')">
          <div class="node-icon">📊</div>
          <div class="node-title">Spatial Metrics</div>
          <div style="font-size: 10px; color: #64748b;">Day / Night Decibels</div>
        </div>
      </div>
    </div>

    
    <div class="panel-view" id="panelAudio">
      <div class="audio-controls">
        <button class="play-btn" id="playBtn" onclick="toggleAudio()">▶</button>
        <div class="waveform-wrap" id="waveWrap">
          
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
          <div class="wave-bar"></div><div class="wave-bar"></div>
        </div>
      </div>

      <div class="meter-wrap">
        <span>0 dB</span>
        <div class="meter-track">
          <div class="meter-fill" id="meterFill"></div>
        </div>
        <span id="meterText">45 dB</span>
      </div>
    </div>

    
    <div class="panel-view" id="panelData">
      <div class="chart-toggle-row">
        <button class="pill-btn active" id="btnZoneA" onclick="setZone('corridor')">Main Corridor</button>
        <button class="pill-btn" id="btnZoneB" onclick="setZone('park')">Urban Park</button>
      </div>

      <div class="chart-container">
        <div class="chart-col">
          <div class="bar bar-day" id="barDay">84 dB</div>
          <div class="chart-label">Day (08:00-20:00)</div>
        </div>
        <div class="chart-col">
          <div class="bar bar-night" id="barNight">68 dB</div>
          <div class="chart-label">Night (20:00-08:00)</div>
        </div>
      </div>
    </div>

  </div>

  <script>
    let currentMode = 'arg';
    let isPlaying = false;
    let audioCtx = null;
    let osc = null;
    let gainNode = null;
    let animTimer = null;

    const zoneData = {
      corridor: { day: 88, night: 72 },
      park: { day: 54, night: 42 }
    };

    function setMode(mode) {
      currentMode = mode;
      
      // Update tabs
      document.getElementById('tabArg').className = 'tab-btn' + (mode === 'arg' ? ' active' : '');
      document.getElementById('tabAudio').className = 'tab-btn' + (mode === 'audio' ? ' active' : '');
      document.getElementById('tabData').className = 'tab-btn' + (mode === 'data' ? ' active' : '');

      // Update hyperlinks
      document.getElementById('linkAudio').className = 'hyperlink' + (mode === 'audio' ? ' active' : '');
      document.getElementById('linkData').className = 'hyperlink' + (mode === 'data' ? ' active' : '');

      // Update panels
      document.getElementById('panelArg').className = 'panel-view' + (mode === 'arg' ? ' active' : '');
      document.getElementById('panelAudio').className = 'panel-view' + (mode === 'audio' ? ' active' : '');
      document.getElementById('panelData').className = 'panel-view' + (mode === 'data' ? ' active' : '');

      if (mode !== 'audio' && isPlaying) {
        stopAudio();
      }

      if (mode === 'data') {
        setTimeout(() => setZone('corridor'), 50);
      }
    }

    function toggleAudio() {
      if (isPlaying) {
        stopAudio();
      } else {
        startAudio();
      }
    }

    function startAudio() {
      try {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        osc = audioCtx.createOscillator();
        gainNode = audioCtx.createGain();

        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(700, audioCtx.currentTime);
        
        // Siren warble modulation
        const now = audioCtx.currentTime;
        osc.frequency.linearRampToValueAtTime(1100, now + 0.6);
        osc.frequency.linearRampToValueAtTime(700, now + 1.2);
        
        gainNode.gain.setValueAtTime(0.08, audioCtx.currentTime);
        
        osc.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        osc.start();
      } catch (e) {}

      isPlaying = true;
      document.getElementById('playBtn').textContent = '⏸';
      
      const bars = document.querySelectorAll('.wave-bar');
      const meter = document.getElementById('meterFill');
      const meterText = document.getElementById('meterText');

      let step = 0;
      animTimer = setInterval(() => {
        step++;
        bars.forEach((b, idx) => {
          const h = 20 + Math.sin(step * 0.5 + idx) * 35 + Math.random() * 25;
          b.style.height = h + '%';
          b.classList.add('active');
        });
        
        const db = Math.round(75 + Math.sin(step * 0.4) * 18);
        meter.style.width = ((db / 110) * 100) + '%';
        meterText.textContent = db + ' dB';
        
        if (osc && audioCtx) {
          const freq = 800 + Math.sin(step * 0.6) * 250;
          osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
        }
      }, 120);
    }

    function stopAudio() {
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶';
      clearInterval(animTimer);

      if (osc) {
        try { osc.stop(); osc.disconnect(); } catch (e) {}
        osc = null;
      }

      const bars = document.querySelectorAll('.wave-bar');
      bars.forEach(b => {
        b.style.height = '15%';
        b.classList.remove('active');
      });

      document.getElementById('meterFill').style.width = '35%';
      document.getElementById('meterText').textContent = '45 dB';
    }

    function setZone(zoneKey) {
      document.getElementById('btnZoneA').className = 'pill-btn' + (zoneKey === 'corridor' ? ' active' : '');
      document.getElementById('btnZoneB').className = 'pill-btn' + (zoneKey === 'park' ? ' active' : '');

      const d = zoneData[zoneKey];
      const barDay = document.getElementById('barDay');
      const barNight = document.getElementById('barNight');

      barDay.style.height = (d.day * 0.9) + '%';
      barDay.textContent = d.day + ' dB';

      barNight.style.height = (d.night * 0.9) + '%';
      barNight.textContent = d.night + ' dB';
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hypertext Architectures</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: transparent;
      color: #1e2945;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px;
      user-select: none;
    }
    
    .nav-tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 8px;
    }
    
    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
      text-align: center;
    }
    
    .tab-btn:hover {
      background: #f1f5f9;
    }

    .tab-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .description-box {
      width: 100%;
      max-width: 480px;
      min-height: 38px;
      font-size: 12px;
      line-height: 1.4;
      color: #475569;
      text-align: center;
      margin-bottom: 6px;
      transition: opacity 0.5s ease;
    }

    .canvas-container {
      width: 100%;
      max-width: 480px;
      aspect-ratio: 16 / 10;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    #diagramStage {
      transition: opacity 0.5s ease-in-out;
    }

    #diagramStage.fade-out {
      opacity: 0;
    }

    .link {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.6s ease, stroke-dashoffset 0.6s ease;
    }

    .link.active {
      stroke: #2563eb;
      stroke-dasharray: 8 5;
      animation: flowPath 3s linear infinite;
    }

    .link.secondary {
      stroke: #10b981;
      stroke-dasharray: 8 5;
      animation: flowPath 3s linear infinite;
    }

    @keyframes flowPath {
      to { stroke-dashoffset: -26; }
    }

    .node {
      transition: transform 0.5s ease, opacity 0.5s ease;
    }

    .node circle.main-circle {
      stroke-width: 2.5;
      stroke: #ffffff;
      transition: fill 0.5s ease, stroke 0.5s ease;
    }

    .node-text {
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
      fill: #ffffff;
      pointer-events: none;
    }

    .sub-label {
      font-size: 10px;
      font-weight: 600;
      text-anchor: middle;
      fill: #64748b;
      letter-spacing: 0.02em;
    }

    .pulse {
      animation: pulseAnim 3s infinite ease-out;
      transform-origin: center;
      pointer-events: none;
    }

    @keyframes pulseAnim {
      0% { r: 16px; opacity: 0.55; }
      70% { r: 26px; opacity: 0.05; }
      100% { r: 28px; opacity: 0; }
    }

    @media (max-width: 400px) {
      .tab-btn {
        font-size: 11px;
        padding: 6px 8px;
      }
      .description-box {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="nav-tabs" role="tablist">
    <button class="tab-btn active" id="tab-0" onclick="setTopology(0)">Linear</button>
    <button class="tab-btn" id="tab-1" onclick="setTopology(1)">Axial</button>
    <button class="tab-btn" id="tab-2" onclick="setTopology(2)">Rhizome</button>
  </div>

  <div class="description-box" id="descBox">
    Sequential flow: Lexias progress in a single predetermined order (A → B → C → D).
  </div>

  <div class="canvas-container">
    <svg viewBox="0 0 400 240" id="topologySvg">
      <defs>
        <marker id="arrow-blue" viewBox="0 0 10 10" refX="22" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#2563eb"/>
        </marker>
        <marker id="arrow-green" viewBox="0 0 10 10" refX="22" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#10b981"/>
        </marker>
      </defs>
      <g id="diagramStage">
        <g id="linksGroup"></g>
        <g id="nodesGroup"></g>
      </g>
    </svg>
  </div>

  <script>
    const topologies = [
      // 1. Linear
      {
        desc: "Sequential flow: Lexias progress in a single predetermined order (A → B → C → D).",
        nodes: [
          { id: '1', x: 55, y: 120, label: 'A', sub: 'Start', color: '#2563eb', pulse: true },
          { id: '2', x: 152, y: 120, label: 'B', sub: 'Lexia', color: '#2563eb' },
          { id: '3', x: 248, y: 120, label: 'C', sub: 'Lexia', color: '#2563eb' },
          { id: '4', x: 345, y: 120, label: 'D', sub: 'End', color: '#2563eb' }
        ],
        links: [
          { d: 'M 55 120 L 152 120', marker: 'arrow-blue' },
          { d: 'M 152 120 L 248 120', marker: 'arrow-blue' },
          { d: 'M 248 120 L 345 120', marker: 'arrow-blue' }
        ]
      },
      // 2. Axial / Spine-and-Leaf
      {
        desc: "Axial spine: A primary central argument with exploratory side branches that return to the spine.",
        nodes: [
          { id: 's1', x: 65, y: 120, label: 'A', sub: 'Spine', color: '#2563eb', pulse: true },
          { id: 's2', x: 200, y: 120, label: 'B', sub: 'Spine', color: '#2563eb' },
          { id: 's3', x: 335, y: 120, label: 'C', sub: 'Spine', color: '#2563eb' },
          { id: 'b1', x: 132, y: 48, label: '✦', sub: 'Branch', color: '#10b981' },
          { id: 'b2', x: 268, y: 48, label: '✦', sub: 'Branch', color: '#10b981' },
          { id: 'b3', x: 200, y: 192, label: '✦', sub: 'Return', color: '#10b981' }
        ],
        links: [
          { d: 'M 65 120 L 200 120', marker: 'arrow-blue' },
          { d: 'M 200 120 L 335 120', marker: 'arrow-blue' },
          { d: 'M 65 120 Q 95 48 132 48', marker: 'arrow-green' },
          { d: 'M 132 48 Q 165 48 200 120', marker: 'arrow-green' },
          { d: 'M 200 120 Q 235 48 268 48', marker: 'arrow-green' },
          { d: 'M 268 48 Q 305 48 335 120', marker: 'arrow-green' },
          { d: 'M 200 120 C 130 192 270 192 200 120', marker: 'arrow-green' }
        ]
      },
      // 3. Rhizomatic Network
      {
        desc: "Rhizomatic network: Non-hierarchical, interconnected web where any node connects across themes.",
        nodes: [
          { id: 'r1', x: 75, y: 65, label: '✦', sub: 'Node', color: '#2563eb' },
          { id: 'r2', x: 200, y: 45, label: '✦', sub: 'Mesh', color: '#10b981' },
          { id: 'r3', x: 325, y: 65, label: '✦', sub: 'Node', color: '#2563eb' },
          { id: 'r4', x: 85, y: 175, label: '✦', sub: 'Node', color: '#10b981' },
          { id: 'r5', x: 215, y: 185, label: '✦', sub: 'Nexus', color: '#2563eb', pulse: true },
          { id: 'r6', x: 330, y: 165, label: '✦', sub: 'Node', color: '#10b981' }
        ],
        links: [
          { d: 'M 75 65 L 200 45', marker: 'arrow-blue' },
          { d: 'M 200 45 L 325 65', marker: 'arrow-green' },
          { d: 'M 75 65 L 215 185', marker: 'arrow-blue' },
          { d: 'M 200 45 L 215 185', marker: 'arrow-green' },
          { d: 'M 325 65 L 215 185', marker: 'arrow-blue' },
          { d: 'M 75 65 L 85 175', marker: 'arrow-blue' },
          { d: 'M 85 175 L 215 185', marker: 'arrow-green' },
          { d: 'M 215 185 L 330 165', marker: 'arrow-blue' },
          { d: 'M 325 65 L 330 165', marker: 'arrow-green' },
          { d: 'M 85 175 L 330 165', marker: 'arrow-green' }
        ]
      }
    ];

    let currentIndex = 0;
    let isTransitioning = false;

    function buildContent(index) {
      const data = topologies[index];
      const linksG = document.getElementById('linksGroup');
      const nodesG = document.getElementById('nodesGroup');
      const descBox = document.getElementById('descBox');

      linksG.innerHTML = '';
      nodesG.innerHTML = '';
      descBox.textContent = data.desc;

      data.links.forEach((l) => {
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', l.d);
        path.setAttribute('class', `link active ${l.marker.includes('green') ? 'secondary' : ''}`);
        path.setAttribute('marker-end', `url(#${l.marker})`);
        linksG.appendChild(path);
      });

      data.nodes.forEach((n) => {
        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        g.setAttribute('class', 'node');
        g.setAttribute('transform', `translate(${n.x}, ${n.y})`);

        if (n.pulse) {
          const pulseCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          pulseCircle.setAttribute('cx', 0);
          pulseCircle.setAttribute('cy', 0);
          pulseCircle.setAttribute('r', 16);
          pulseCircle.setAttribute('fill', n.color);
          pulseCircle.setAttribute('class', 'pulse');
          g.appendChild(pulseCircle);
        }

        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', 0);
        circle.setAttribute('cy', 0);
        circle.setAttribute('r', 16);
        circle.setAttribute('fill', n.color);
        circle.setAttribute('class', 'main-circle');
        g.appendChild(circle);

        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        text.setAttribute('class', 'node-text');
        text.textContent = n.label;
        g.appendChild(text);

        if (n.sub) {
          const subText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
          subText.setAttribute('class', 'sub-label');
          subText.setAttribute('y', 27);
          subText.textContent = n.sub;
          g.appendChild(subText);
        }

        nodesG.appendChild(g);
      });
    }

    function setTopology(idx) {
      if (idx === currentIndex || isTransitioning) return;
      isTransitioning = true;
      currentIndex = idx;

      document.querySelectorAll('.tab-btn').forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });

      const stage = document.getElementById('diagramStage');
      const descBox = document.getElementById('descBox');

      stage.style.opacity = '0';
      descBox.style.opacity = '0';

      setTimeout(() => {
        buildContent(idx);
        stage.style.opacity = '1';
        descBox.style.opacity = '1';
        setTimeout(() => {
          isTransitioning = false;
        }, 500);
      }, 250);
    }

    // Initial render
    buildContent(0);
  </script>
</body>
</html>

Collaborative Co-Authoring and Version Control in Digital Writing Platforms

Curating and Formatting Digital Research Portfolios and Web Publications

Dynamic Presentation of Research Data Using Digital Infographics and Slidedocs

Navigating Digital Ethics, Open Licensing, and Online Intellectual Property

Digital Publishing, Hypertext Architecture, and Collaborative Platforms

Using Technology to Produce, Publish, and Update Shared Writing Products

Linking Written Analysis to Dynamic Digital Information Sources

Displaying Social Studies Information Flexibly and Dynamically

Collaborating Digitally on Joint Civic and Policy Projects

Integrating Multimedia Elements Into High School Digital Essays

Developing a Comprehensive High School Editing and Polishing Routine

Publishing and Disseminating Research to Authentic Public Audiences

social-studies

Digital Collaboration, Multimedia, and Publishing in Social Studies (Grades 9-10)

OGE.11.W.7

Aligned learning resources

Related diagrams