<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }
    .track {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .track-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }
    .track-title {
      font-size: 13px;
      font-weight: 700;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .tag {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 9999px;
      background: #e2e8f0;
      color: #475569;
    }
    .tag.math {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .tag.time {
      background: #e0e7ff;
      color: #4338ca;
    }
    .filmstrip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      background: #0f172a;
      padding: 6px;
      border-radius: 8px;
    }
    .sprocket-row {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 4px;
      padding: 2px 0;
    }
    .sprocket {
      height: 4px;
      background: #334155;
      border-radius: 1px;
    }
    .frame {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 6px;
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 3px;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
      user-select: none;
    }
    .frame:active {
      transform: translateY(1px);
    }
    .frame.active {
      border-color: #3b82f6;
      background: #eff6ff;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
    .input-pill {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      background: #f1f5f9;
      padding: 1px 6px;
      border-radius: 4px;
    }
    .frame.active .input-pill {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .term {
      font-size: 17px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.1;
    }
    .frame.active .term {
      color: #2563eb;
    }
    .meaning {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      line-height: 1.1;
      white-space: nowrap;
    }
    .frame.active .meaning {
      color: #1e293b;
    }
    .info-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
    }
    .info-active {
      color: #2563eb;
      font-weight: 700;
    }
  </style>
</head>
<body>

  
  <div class="track">
    <div class="track-header">
      <span class="track-title">1-Indexed Domain</span>
      <span class="tag math">Domain: { 1, 2, 3, 4, ... }</span>
    </div>
    <div class="filmstrip">
      <div class="frame active" data-col="0" onclick="selectColumn(0)">
        <span class="input-pill">n = 1</span>
        <span class="term">a₁</span>
        <span class="meaning">1st Term</span>
      </div>
      <div class="frame" data-col="1" onclick="selectColumn(1)">
        <span class="input-pill">n = 2</span>
        <span class="term">a₂</span>
        <span class="meaning">2nd Term</span>
      </div>
      <div class="frame" data-col="2" onclick="selectColumn(2)">
        <span class="input-pill">n = 3</span>
        <span class="term">a₃</span>
        <span class="meaning">3rd Term</span>
      </div>
      <div class="frame" data-col="3" onclick="selectColumn(3)">
        <span class="input-pill">n = 4</span>
        <span class="term">a₄</span>
        <span class="meaning">4th Term</span>
      </div>
    </div>
  </div>

  
  <div class="track">
    <div class="track-header">
      <span class="track-title">0-Indexed Domain</span>
      <span class="tag time">Domain: { 0, 1, 2, 3, ... }</span>
    </div>
    <div class="filmstrip">
      <div class="frame active" data-col="0" onclick="selectColumn(0)">
        <span class="input-pill">n = 0</span>
        <span class="term">a₀</span>
        <span class="meaning">Start (t = 0)</span>
      </div>
      <div class="frame" data-col="1" onclick="selectColumn(1)">
        <span class="input-pill">n = 1</span>
        <span class="term">a₁</span>
        <span class="meaning">After 1 step</span>
      </div>
      <div class="frame" data-col="2" onclick="selectColumn(2)">
        <span class="input-pill">n = 2</span>
        <span class="term">a₂</span>
        <span class="meaning">After 2 steps</span>
      </div>
      <div class="frame" data-col="3" onclick="selectColumn(3)">
        <span class="input-pill">n = 3</span>
        <span class="term">a₃</span>
        <span class="meaning">After 3 steps</span>
      </div>
    </div>
  </div>

  
  <div class="info-bar">
    <span id="comparisonText">Position: <strong>1st Term</strong></span>
    <span class="info-active" id="stateText">State: <strong>Initial Value (a₀)</strong></span>
  </div>

  <script>
    const descriptions = [
      { comp: "Position: <strong>1st Term (a₁)</strong>", state: "State: <strong>Initial Value (a₀)</strong>" },
      { comp: "Position: <strong>2nd Term (a₂)</strong>", state: "State: <strong>After 1 Step (a₁)</strong>" },
      { comp: "Position: <strong>3rd Term (a₃)</strong>", state: "State: <strong>After 2 Steps (a₂)</strong>" },
      { comp: "Position: <strong>4th Term (a₄)</strong>", state: "State: <strong>After 3 Steps (a₃)</strong>" }
    ];

    function selectColumn(index) {
      document.querySelectorAll('.frame').forEach(frame => {
        if (parseInt(frame.dataset.col, 10) === index) {
          frame.classList.add('active');
        } else {
          frame.classList.remove('active');
        }
      });
      document.getElementById('comparisonText').innerHTML = descriptions[index].comp;
      document.getElementById('stateText').innerHTML = descriptions[index].state;
    }
  </script>
</body>
</html>

Sequences as Functions on Discrete Domains

<!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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 10px;
    }
    .diagram-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 640px;
      margin: 0 auto;
    }

    /* Header controls */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }
    .formula-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .step-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .step-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .step-btn.active {
      background: #059669;
      color: #ffffff;
      border-color: #059669;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    }
    .play-btn {
      height: 30px;
      padding: 0 12px;
      border-radius: 15px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .play-btn:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    /* Main split container */
    .content-grid {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 12px;
      align-items: center;
    }
    @media (max-width: 460px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Calculation cards */
    .card-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .calc-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      user-select: none;
    }
    .calc-card:hover {
      border-color: #cbd5e1;
      background: #fafafa;
    }
    .calc-card.active {
      background: #ecfdf5;
      border-color: #10b981;
      box-shadow: 0 0 0 1px #10b981;
    }
    .calc-expr {
      font-size: 13px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #334155;
      font-weight: 600;
      white-space: nowrap;
    }
    .calc-card.active .calc-expr {
      color: #065f46;
      font-weight: 700;
    }
    .calc-coord {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      background: #f8fafc;
      padding: 2px 7px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      white-space: nowrap;
    }
    .calc-card.active .calc-coord {
      background: #10b981;
      color: #ffffff;
      border-color: #059669;
    }

    /* Graph panel */
    .graph-pane {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 240px;
      display: block;
    }
    .axis-line {
      stroke: #64748b;
      stroke-width: 1.5;
      stroke-linecap: round;
    }
    .grid-line {
      stroke: #e2e8f0;
      stroke-width: 1;
    }
    .zero-axis {
      stroke: #94a3b8;
      stroke-width: 1.25;
      stroke-dasharray: 3 3;
    }
    .ref-trend {
      stroke: #cbd5e1;
      stroke-width: 1.5;
      stroke-dasharray: 4 4;
    }
    .tick-label {
      font-size: 11px;
      fill: #64748b;
      font-family: system-ui, sans-serif;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .tick-label.y-tick {
      text-anchor: end;
    }
    .axis-title {
      font-size: 12px;
      fill: #0f172a;
      font-weight: 700;
      font-family: system-ui, sans-serif;
      dominant-baseline: central;
    }
    .point-group {
      cursor: pointer;
    }
    .pt-halo {
      fill: none;
      stroke: #10b981;
      stroke-width: 4;
      opacity: 0;
      transition: opacity 0.2s ease, r 0.2s ease;
    }
    .pt-circle {
      fill: #059669;
      stroke: #ffffff;
      stroke-width: 2;
      transition: fill 0.2s ease, stroke-width 0.2s ease, r 0.2s ease;
    }
    .point-group:hover .pt-halo {
      opacity: 0.25;
    }
    .point-group.active .pt-halo {
      opacity: 0.45;
      r: 15;
    }
    .point-group.active .pt-circle {
      fill: #047857;
      stroke-width: 2.5;
      r: 7;
    }
    .pt-tag {
      font-size: 11px;
      font-weight: 700;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      fill: #334155;
      transition: fill 0.2s ease, font-weight 0.2s ease;
    }
    .point-group.active .pt-tag {
      fill: #047857;
      font-weight: 800;
    }

    /* Warning Callout Banner */
    .warning-banner {
      background: #fffbeb;
      border: 1px solid #fde68a;
      border-left: 4px solid #f59e0b;
      border-radius: 6px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #92400e;
      display: flex;
      align-items: center;
      gap: 6px;
      line-height: 1.35;
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    
    <div class="top-bar">
      <div class="formula-badge">
        <span>Sequence:</span>
        <span style="color:#059669;">a<sub>n</sub> = −3n + 10</span>
      </div>
      <div class="controls">
        <button class="step-btn active" onclick="selectStep(0)" aria-label="Step 1">1</button>
        <button class="step-btn" onclick="selectStep(1)" aria-label="Step 2">2</button>
        <button class="step-btn" onclick="selectStep(2)" aria-label="Step 3">3</button>
        <button class="step-btn" onclick="selectStep(3)" aria-label="Step 4">4</button>
        <button id="playBtn" class="play-btn" onclick="togglePlay()">⏸ Pause</button>
      </div>
    </div>

    
    <div class="content-grid">
      
      <div class="card-list">
        <div class="calc-card active" onclick="selectStep(0)">
          <div class="calc-expr">n = 1 → −3(1)+10 = 7</div>
          <div class="calc-coord">(1, 7)</div>
        </div>
        <div class="calc-card" onclick="selectStep(1)">
          <div class="calc-expr">n = 2 → −3(2)+10 = 4</div>
          <div class="calc-coord">(2, 4)</div>
        </div>
        <div class="calc-card" onclick="selectStep(2)">
          <div class="calc-expr">n = 3 → −3(3)+10 = 1</div>
          <div class="calc-coord">(3, 1)</div>
        </div>
        <div class="calc-card" onclick="selectStep(3)">
          <div class="calc-expr">n = 4 → −3(4)+10 = −2</div>
          <div class="calc-coord">(4, −2)</div>
        </div>
      </div>

      
      <div class="graph-pane">
        <svg viewBox="0 0 310 235" aria-label="Discrete plot of sequence values on coordinate plane">
          
          <line class="grid-line" x1="45" y1="43" x2="280" y2="43" />
          <line class="grid-line" x1="45" y1="97" x2="280" y2="97" />
          <line class="grid-line" x1="45" y1="151" x2="280" y2="151" />
          <line class="grid-line" x1="45" y1="205" x2="280" y2="205" />

          
          <line class="grid-line" x1="95" y1="25" x2="95" y2="220" />
          <line class="grid-line" x1="145" y1="25" x2="145" y2="220" />
          <line class="grid-line" x1="195" y1="25" x2="195" y2="220" />
          <line class="grid-line" x1="245" y1="25" x2="245" y2="220" />

          
          <line class="zero-axis" x1="45" y1="169" x2="280" y2="169" />
          <text class="tick-label y-tick" x="38" y="169" style="font-size:10px; fill:#94a3b8;">0</text>

          
          
          <line class="axis-line" x1="45" y1="25" x2="45" y2="220" />
          
          <polygon points="45,18 41,26 49,26" fill="#64748b" />

          
          <line class="axis-line" x1="45" y1="220" x2="280" y2="220" />
          
          <polygon points="287,220 279,216 279,224" fill="#64748b" />

          
          <text class="axis-title" x="294" y="220" text-anchor="start">n</text>
          <text class="axis-title" x="45" y="10" text-anchor="middle">a<tspan font-size="9" dy="2">n</tspan></text>

          
          <line class="axis-line" x1="41" y1="43" x2="45" y2="43" />
          <line class="axis-line" x1="41" y1="97" x2="45" y2="97" />
          <line class="axis-line" x1="41" y1="151" x2="45" y2="151" />
          <line class="axis-line" x1="41" y1="205" x2="45" y2="205" />

          <text class="tick-label y-tick" x="38" y="43">7</text>
          <text class="tick-label y-tick" x="38" y="97">4</text>
          <text class="tick-label y-tick" x="38" y="151">1</text>
          <text class="tick-label y-tick" x="38" y="205">−2</text>

          
          <line class="axis-line" x1="95" y1="220" x2="95" y2="224" />
          <line class="axis-line" x1="145" y1="220" x2="145" y2="224" />
          <line class="axis-line" x1="195" y1="220" x2="195" y2="224" />
          <line class="axis-line" x1="245" y1="220" x2="245" y2="224" />

          <text class="tick-label" x="95" y="231">1</text>
          <text class="tick-label" x="145" y="231">2</text>
          <text class="tick-label" x="195" y="231">3</text>
          <text class="tick-label" x="245" y="231">4</text>

          
          <line class="ref-trend" x1="70" y1="16" x2="260" y2="221.2" />

          
          <g id="pt-0" class="point-group active" onclick="selectStep(0)">
            <circle class="pt-halo" cx="95" cy="43" r="14" />
            <circle class="pt-circle" cx="95" cy="43" r="6" />
            <text class="pt-tag" x="107" y="40">(1, 7)</text>
          </g>

          
          <g id="pt-1" class="point-group" onclick="selectStep(1)">
            <circle class="pt-halo" cx="145" cy="97" r="14" />
            <circle class="pt-circle" cx="145" cy="97" r="6" />
            <text class="pt-tag" x="157" y="94">(2, 4)</text>
          </g>

          
          <g id="pt-2" class="point-group" onclick="selectStep(2)">
            <circle class="pt-halo" cx="195" cy="151" r="14" />
            <circle class="pt-circle" cx="195" cy="151" r="6" />
            <text class="pt-tag" x="207" y="148">(3, 1)</text>
          </g>

          
          <g id="pt-3" class="point-group" onclick="selectStep(3)">
            <circle class="pt-halo" cx="245" cy="205" r="14" />
            <circle class="pt-circle" cx="245" cy="205" r="6" />
            <text class="pt-tag" x="235" y="193" text-anchor="end">(4, −2)</text>
          </g>
        </svg>
      </div>
    </div>

    
    <div class="warning-banner">
      <span>⚠️</span>
      <span><strong>Discrete Domain:</strong> Plotted points are isolated dots and must NOT be connected with a solid line.</span>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cards = document.querySelectorAll('.calc-card');
    const buttons = document.querySelectorAll('.step-btn');
    const points = [
      document.getElementById('pt-0'),
      document.getElementById('pt-1'),
      document.getElementById('pt-2'),
      document.getElementById('pt-3')
    ];
    const playBtn = document.getElementById('playBtn');

    function selectStep(index) {
      currentStep = index;
      cards.forEach((c, i) => c.classList.toggle('active', i === index));
      buttons.forEach((b, i) => b.classList.toggle('active', i === index));
      points.forEach((p, i) => {
        if (p) p.classList.toggle('active', i === index);
      });
    }

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 10px;
    }
    .wrapper {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 660px;
      margin: 0 auto;
    }
    .probe-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .probe-title {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-right: 4px;
    }
    .btn-val {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e293b;
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn-val.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .btn-val.fraction {
      border-style: dashed;
    }
    .cards-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .panel {
      flex: 1 1 260px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .panel-header {
      text-align: center;
      margin-bottom: 8px;
    }
    .func-name {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
    }
    .domain-tag {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      color: #2563eb;
      background: #eff6ff;
      border-radius: 4px;
      padding: 2px 8px;
      margin-top: 2px;
    }
    .svg-container {
      width: 100%;
      max-width: 280px;
      aspect-ratio: 200 / 175;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .axis {
      stroke: #94a3b8;
      stroke-width: 1.5;
    }
    .tick-label {
      font-size: 10px;
      fill: #64748b;
      text-anchor: middle;
      font-family: system-ui, sans-serif;
    }
    .status-badge {
      font-size: 12px;
      font-weight: 600;
      margin-top: 6px;
      height: 20px;
      display: flex;
      align-items: center;
    }
    .status-ok { color: #2563eb; }
    .status-none { color: #dc2626; }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="probe-bar">
      <span class="probe-title">Test input:</span>
      <button class="btn-val" onclick="setProbe(1)">1</button>
      <button class="btn-val fraction active" onclick="setProbe(1.5)">1.5</button>
      <button class="btn-val" onclick="setProbe(2)">2</button>
      <button class="btn-val fraction" onclick="setProbe(2.5)">2.5</button>
      <button class="btn-val" onclick="setProbe(3)">3</button>
      <button class="btn-val" onclick="setProbe(4)">4</button>
    </div>

    <div class="cards-row">
      
      <div class="panel">
        <div class="panel-header">
          <div class="func-name">Continuous: <i>f</i>(<i>x</i>) = 2<i>x</i> + 1</div>
          <div class="domain-tag">Domain: ℝ (all real numbers)</div>
        </div>
        <div class="svg-container">
          <svg viewBox="0 0 200 175">
            
            <line class="grid-line" x1="35" y1="124" x2="185" y2="124" />
            <line class="grid-line" x1="35" y1="98" x2="185" y2="98" />
            <line class="grid-line" x1="35" y1="72" x2="185" y2="72" />
            <line class="grid-line" x1="35" y1="46" x2="185" y2="46" />
            <line class="grid-line" x1="35" y1="20" x2="185" y2="20" />
            <line class="grid-line" x1="65" y1="20" x2="65" y2="150" />
            <line class="grid-line" x1="95" y1="20" x2="95" y2="150" />
            <line class="grid-line" x1="125" y1="20" x2="125" y2="150" />
            <line class="grid-line" x1="155" y1="20" x2="155" y2="150" />

            
            <line class="axis" x1="35" y1="150" x2="185" y2="150" />
            <line class="axis" x1="35" y1="150" x2="35" y2="15" />

            
            <text class="tick-label" x="65" y="163">1</text>
            <text class="tick-label" x="95" y="163">2</text>
            <text class="tick-label" x="125" y="163">3</text>
            <text class="tick-label" x="155" y="163">4</text>
            <text class="tick-label" x="185" y="163">x</text>

            
            <text class="tick-label" x="24" y="127">2</text>
            <text class="tick-label" x="24" y="101">4</text>
            <text class="tick-label" x="24" y="75">6</text>
            <text class="tick-label" x="24" y="49">8</text>
            <text class="tick-label" x="24" y="23">10</text>

            
            <line x1="35" y1="137" x2="173.5" y2="10" stroke="#2563eb" stroke-width="3" stroke-linecap="round" />

            
            <line id="contGuideX" stroke="#2563eb" stroke-dasharray="3,3" stroke-width="1.5" x1="80" y1="150" x2="80" y2="98" />
            <circle id="contDot" cx="80" cy="98" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
          </svg>
        </div>
        <div id="contStatus" class="status-badge status-ok"><i>f</i>(1.5) = 4.0</div>
      </div>

      
      <div class="panel">
        <div class="panel-header">
          <div class="func-name">Sequence: <i>a</i><sub>n</sub> = 2<i>n</i> + 1</div>
          <div class="domain-tag">Domain: {1, 2, 3, 4, …}</div>
        </div>
        <div class="svg-container">
          <svg viewBox="0 0 200 175">
            
            <line class="grid-line" x1="35" y1="124" x2="185" y2="124" />
            <line class="grid-line" x1="35" y1="98" x2="185" y2="98" />
            <line class="grid-line" x1="35" y1="72" x2="185" y2="72" />
            <line class="grid-line" x1="35" y1="46" x2="185" y2="46" />
            <line class="grid-line" x1="35" y1="20" x2="185" y2="20" />
            <line class="grid-line" x1="65" y1="20" x2="65" y2="150" />
            <line class="grid-line" x1="95" y1="20" x2="95" y2="150" />
            <line class="grid-line" x1="125" y1="20" x2="125" y2="150" />
            <line class="grid-line" x1="155" y1="20" x2="155" y2="150" />

            
            <line class="axis" x1="35" y1="150" x2="185" y2="150" />
            <line class="axis" x1="35" y1="150" x2="35" y2="15" />

            
            <text class="tick-label" x="65" y="163">1</text>
            <text class="tick-label" x="95" y="163">2</text>
            <text class="tick-label" x="125" y="163">3</text>
            <text class="tick-label" x="155" y="163">4</text>
            <text class="tick-label" x="185" y="163">n</text>

            
            <text class="tick-label" x="24" y="127">2</text>
            <text class="tick-label" x="24" y="101">4</text>
            <text class="tick-label" x="24" y="75">6</text>
            <text class="tick-label" x="24" y="49">8</text>
            <text class="tick-label" x="24" y="23">10</text>

            
            <circle cx="65" cy="111" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
            <circle cx="95" cy="85" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
            <circle cx="125" cy="59" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />
            <circle cx="155" cy="33" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="2" />

            
            <line id="discGuideX" stroke="#dc2626" stroke-dasharray="3,3" stroke-width="1.5" x1="80" y1="150" x2="80" y2="98" />
            <g id="discMarker">
              
            </g>
          </svg>
        </div>
        <div id="discStatus" class="status-badge status-none">No value (undefined)</div>
      </div>
    </div>
  </div>

  <script>
    function setProbe(val) {
      // Update buttons
      const btns = document.querySelectorAll('.btn-val');
      btns.forEach(b => {
        if (parseFloat(b.textContent) === val) {
          b.classList.add('active');
        } else {
          b.classList.remove('active');
        }
      });

      // Coordinates mapping:
      // xPixel(v) = 35 + v * 30
      // yPixel(v) = 150 - v * 13
      const px = 35 + val * 30;
      const yVal = 2 * val + 1;
      const py = 150 - yVal * 13;

      // Update continuous side
      const contGuide = document.getElementById('contGuideX');
      const contDot = document.getElementById('contDot');
      const contStatus = document.getElementById('contStatus');

      contGuide.setAttribute('x1', px);
      contGuide.setAttribute('x2', px);
      contGuide.setAttribute('y2', py);
      contDot.setAttribute('cx', px);
      contDot.setAttribute('cy', py);
      contStatus.innerHTML = '<i>f</i>(' + val + ') = ' + (Number.isInteger(yVal) ? yVal : yVal.toFixed(1));

      // Update discrete side
      const isInteger = Number.isInteger(val) && val >= 1;
      const discGuide = document.getElementById('discGuideX');
      const discMarker = document.getElementById('discMarker');
      const discStatus = document.getElementById('discStatus');

      discGuide.setAttribute('x1', px);
      discGuide.setAttribute('x2', px);
      discGuide.setAttribute('y2', py);

      if (isInteger) {
        discGuide.setAttribute('stroke', '#2563eb');
        discMarker.innerHTML = '<circle cx="' + px + '" cy="' + py + '" r="7" fill="none" stroke="#2563eb" stroke-width="2.5" /><circle cx="' + px + '" cy="' + py + '" r="4" fill="#2563eb" />';
        discStatus.className = 'status-badge status-ok';
        discStatus.innerHTML = '<i>a</i><sub>' + val + '</sub> = ' + yVal;
      } else {
        discGuide.setAttribute('stroke', '#dc2626');
        discMarker.innerHTML = '<circle cx="' + px + '" cy="' + py + '" r="6" fill="#fff" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="2,2" /><line x1="' + (px-4) + '" y1="' + (py-4) + '" x2="' + (px+4) + '" y2="' + (py+4) + '" stroke="#dc2626" stroke-width="1.5" /><line x1="' + (px+4) + '" y1="' + (py-4) + '" x2="' + (px-4) + '" y2="' + (py+4) + '" stroke="#dc2626" stroke-width="1.5" />';
        discStatus.className = 'status-badge status-none';
        discStatus.textContent = 'No value (undefined)';
      }
    }

    // Initialize with 1.5
    setProbe(1.5);
  </script>
</body>
</html>

OGM.10.FNC.7

Aligned learning resources

Related diagrams