Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

If a microcontroller program managing a greenhouse valve crashes or gets trapped in an unintended loop, crops flood in minutes.

Before writing code for physical hardware, engineers map **control flow**—the exact sequence in which instructions execute on a processor—using standardized flowchart symbols.

## Standard Flowchart Symbols (ISO 5807 / BS 4058)

Microcontroller flowcharting adheres to standard **ISO 5807** and **BS 4058** conventions to clearly represent hardware interactions and program execution.

A **terminator** (oval or stadium) marks program start, end, or interrupt vectors, while a **process** block (rectangle) handles calculations and internal register operations.

An **input/output** block (parallelogram) represents port pin reads ($I/O$) and DAC/ADC operations.

A **decision** block (rhombus or diamond) controls branching, and a **predefined process** (rectangle with double vertical bars) executes modular subroutines and delay loops.

Microcontroller flowcharting adheres to standard **ISO 5807 / BS 4058** conventions so that hardware and logic operations remain universally clear.

A **Terminator** (oval or stadium) indicates program start, end, or interrupt vectors, while a **Process** (rectangle) represents internal calculations and register operations.

An **Input/Output** symbol (parallelogram) denotes port pin reads ($I/O$) and DAC/ADC operations, whereas a **Decision** symbol (rhombus or diamond) handles conditional branching.

A **Predefined Process** (rectangle with double vertical bars) encapsulates modular subroutines, reusable functions, and dedicated delay loops.

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

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .btn.active {
      background: #0ea5e9;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
    }

    .flowchart-container {
      width: 100%;
      max-width: 480px;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 380px;
      overflow: visible;
    }

    /* Flowchart Node Styles */
    .node-shape {
      fill: #ffffff;
      stroke: #64748b;
      stroke-width: 2;
      transition: stroke 0.3s ease, fill 0.3s ease, filter 0.3s ease;
    }
    .node-text {
      font-size: 11px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .edge-line {
      stroke: #94a3b8;
      stroke-width: 2;
      fill: none;
      stroke-linejoin: round;
      stroke-linecap: round;
      transition: stroke 0.3s ease;
    }
    .branch-label {
      font-size: 10px;
      font-weight: 700;
      fill: #0ea5e9;
      text-anchor: middle;
    }

    /* Active Highlight States */
    .active-node .node-shape {
      stroke: #0ea5e9;
      stroke-width: 2.5;
      fill: #e0f2fe;
      filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.45));
    }
    .active-edge {
      stroke: #0ea5e9 !important;
      stroke-width: 2.5 !important;
    }

    /* Animated Flow Marker */
    .flow-marker {
      fill: #0ea5e9;
      transition: cx 0.45s ease, cy 0.45s ease, opacity 0.3s ease;
      filter: drop-shadow(0 0 4px #0ea5e9);
    }

    .step-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .dot.active {
      background: #0ea5e9;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="toolbar">
    <button id="btnPlay" class="btn" aria-label="Toggle Auto Play">▶ Auto</button>
    <button id="btnBranch" class="btn">Branch: <span id="branchState" style="color:#0ea5e9">Yes</span></button>
    <button id="btnNext" class="btn">Step →</button>
  </div>

  
  <div class="flowchart-container">
    <svg viewBox="0 0 340 370">
      <defs>
        <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#94a3b8" id="arrPoly"/>
        </marker>
        <marker id="arrActive" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
          <polygon points="0 0, 6 3, 0 6" fill="#0ea5e9"/>
        </marker>
      </defs>

      
      <path id="edge1" class="edge-line" d="M 170 36 L 170 65" marker-end="url(#arr)" />
      <path id="edge2" class="edge-line" d="M 170 105 L 170 138" marker-end="url(#arr)" />
      
      
      <path id="edgeYes" class="edge-line" d="M 170 202 L 170 240" marker-end="url(#arr)" />
      <text x="182" y="220" class="branch-label">Yes</text>

      
      <path id="edgeNo" class="edge-line" d="M 230 170 L 275 170 L 275 240" marker-end="url(#arr)" />
      <text x="250" y="162" class="branch-label">No</text>

      
      <path id="edgeLoop" class="edge-line" d="M 170 280 L 170 320 L 45 320 L 45 85 L 105 85" marker-end="url(#arr)" />
      <path id="edgeLoopNo" class="edge-line" d="M 275 280 L 275 320 L 170 320" />

      
      <g id="node1" class="node">
        <rect class="node-shape" x="120" y="8" width="100" height="28" rx="14" />
        <text class="node-text" x="170" y="22">Start</text>
      </g>

      
      <g id="node2" class="node">
        <polygon class="node-shape" points="120,65 230,65 210,105 100,105" />
        <text class="node-text" x="165" y="85">Read Sensor</text>
      </g>

      
      <g id="node3" class="node">
        <polygon class="node-shape" points="170,138 230,170 170,202 110,170" />
        <text class="node-text" x="170" y="170">&gt; 25°C?</text>
      </g>

      
      <g id="node4Yes" class="node">
        <rect class="node-shape" x="125" y="240" width="90" height="40" rx="4" />
        <text class="node-text" x="170" y="260">Fan ON</text>
      </g>

      
      <g id="node4No" class="node">
        <rect class="node-shape" x="230" y="240" width="90" height="40" rx="4" />
        <text class="node-text" x="275" y="260">Fan OFF</text>
      </g>

      
      <circle id="marker" class="flow-marker" r="5" cx="170" cy="22" />
    </svg>
  </div>

  
  <div class="step-nav">
    <div class="dot active" data-step="0"></div>
    <div class="dot" data-step="1"></div>
    <div class="dot" data-step="2"></div>
    <div class="dot" data-step="3"></div>
    <div class="dot" data-step="4"></div>
  </div>

  <script>
    const stepsYes = [
      { node: 'node1', marker: [170, 22], edge: null },
      { node: 'node2', marker: [165, 85], edge: 'edge1' },
      { node: 'node3', marker: [170, 170], edge: 'edge2' },
      { node: 'node4Yes', marker: [170, 260], edge: 'edgeYes' },
      { node: null, marker: [45, 200], edge: 'edgeLoop' }
    ];

    const stepsNo = [
      { node: 'node1', marker: [170, 22], edge: null },
      { node: 'node2', marker: [165, 85], edge: 'edge1' },
      { node: 'node3', marker: [170, 170], edge: 'edge2' },
      { node: 'node4No', marker: [275, 260], edge: 'edgeNo' },
      { node: null, marker: [45, 200], edge: 'edgeLoop' }
    ];

    let isYesBranch = true;
    let currentStep = 0;
    let autoPlayTimer = null;

    const marker = document.getElementById('marker');
    const branchBtn = document.getElementById('btnBranch');
    const branchState = document.getElementById('branchState');
    const playBtn = document.getElementById('btnPlay');
    const nextBtn = document.getElementById('btnNext');
    const dots = document.querySelectorAll('.dot');

    function update() {
      const activeSteps = isYesBranch ? stepsYes : stepsNo;
      const cur = activeSteps[currentStep];

      // Update Nodes
      document.querySelectorAll('.node').forEach(n => n.classList.remove('active-node'));
      if (cur.node) {
        const el = document.getElementById(cur.node);
        if (el) el.classList.add('active-node');
      }

      // Update Edges
      document.querySelectorAll('.edge-line').forEach(e => {
        e.classList.remove('active-edge');
        e.removeAttribute('marker-end');
        if (e.id !== 'edgeLoopNo') e.setAttribute('marker-end', 'url(#arr)');
      });

      if (cur.edge) {
        const edgeEl = document.getElementById(cur.edge);
        if (edgeEl) {
          edgeEl.classList.add('active-edge');
          edgeEl.setAttribute('marker-end', 'url(#arrActive)');
        }
      }

      // Marker Position
      marker.setAttribute('cx', cur.marker[0]);
      marker.setAttribute('cy', cur.marker[1]);

      // Dots
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === currentStep);
      });
    }

    function goToStep(idx) {
      currentStep = (idx + 5) % 5;
      update();
    }

    function toggleAutoPlay() {
      if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
        autoPlayTimer = null;
        playBtn.classList.remove('active');
        playBtn.textContent = '▶ Auto';
      } else {
        playBtn.classList.add('active');
        playBtn.textContent = '⏸ Pause';
        autoPlayTimer = setInterval(() => {
          goToStep(currentStep + 1);
        }, 1800);
      }
    }

    // Event Listeners
    nextBtn.addEventListener('click', () => goToStep(currentStep + 1));
    playBtn.addEventListener('click', toggleAutoPlay);

    branchBtn.addEventListener('click', () => {
      isYesBranch = !isYesBranch;
      branchState.textContent = isYesBranch ? 'Yes' : 'No';
      update();
    });

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => goToStep(idx));
    });

    // Initialize
    update();
  </script>
</body>
</html>

How many basic structures do you actually need to build every algorithm an embedded chip will ever run?

## The Three Fundamental Control Structures

In 1966, mathematicians Corrado Böhm and Giuseppe Jacopini proved that any computable logic can be written using only three structures: **sequence**, **selection**, and **iteration**.

A **sequence** executes steps one directly after another in fixed linear order.

A **selection** evaluates a **Boolean expression**—a condition that resolves strictly to `true` or `false`—to route execution down one of two alternative paths.

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

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

    .btn {
      padding: 8px 18px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
    }

    .btn:active {
      transform: scale(0.98);
    }

    .btn.active-true {
      background: #f0fdf4;
      border-color: #16a34a;
      color: #15803d;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
    }

    .btn.active-false {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    .flow-svg {
      width: 100%;
      max-width: 440px;
      height: auto;
      overflow: visible;
    }

    /* Node & line styles */
    .flow-line {
      stroke: #cbd5e1;
      stroke-width: 3;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
    }

    .flow-line.active-t {
      stroke: #16a34a;
      stroke-width: 4;
    }

    .flow-line.active-f {
      stroke: #2563eb;
      stroke-width: 4;
    }

    .pulse-dot {
      fill: #ffffff;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pulse-dot.running-t {
      opacity: 1;
      fill: #16a34a;
    }

    .pulse-dot.running-f {
      opacity: 1;
      fill: #2563eb;
    }

    .node-rect {
      fill: #f8fafc;
      stroke: #94a3b8;
      stroke-width: 2;
      rx: 8;
      transition: all 0.3s ease;
    }

    .node-diamond {
      fill: #fefce8;
      stroke: #ca8a04;
      stroke-width: 2;
      transition: all 0.3s ease;
    }

    .node-action-t {
      fill: #f8fafc;
      stroke: #cbd5e1;
      stroke-width: 2;
      rx: 8;
      transition: all 0.3s ease;
    }

    .node-action-f {
      fill: #f8fafc;
      stroke: #cbd5e1;
      stroke-width: 2;
      rx: 8;
      transition: all 0.3s ease;
    }

    .active-node-t {
      stroke: #16a34a;
      fill: #f0fdf4;
      filter: drop-shadow(0 2px 6px rgba(22, 163, 74, 0.2));
    }

    .active-node-f {
      stroke: #2563eb;
      fill: #eff6ff;
      filter: drop-shadow(0 2px 6px rgba(37, 99, 235, 0.2));
    }

    .node-text {
      font-size: 13px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }

    .branch-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .tag-true { fill: #16a34a; }
    .tag-false { fill: #2563eb; }
  </style>
</head>
<body>

  <div class="controls">
    <button id="btnTrue" class="btn active-true" onclick="setCondition(true)">
      Condition: True
    </button>
    <button id="btnFalse" class="btn" onclick="setCondition(false)">
      Condition: False
    </button>
  </div>

  <svg class="flow-svg" viewBox="0 0 400 360">
    <defs>
      <marker id="arrow-t" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1 L 8 5 L 0 9 z" fill="#16a34a" />
      </marker>
      <marker id="arrow-f" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1 L 8 5 L 0 9 z" fill="#2563eb" />
      </marker>
      <marker id="arrow-def" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1 L 8 5 L 0 9 z" fill="#cbd5e1" />
      </marker>
    </defs>

    
    <path id="pathEntry" class="flow-line active-t" marker-end="url(#arrow-def)" d="M 200 36 L 200 80" />

    
    <path id="pathTrue" class="flow-line active-t" marker-end="url(#arrow-t)" d="M 125 125 L 80 125 L 80 176" />
    <path id="pathTrueOut" class="flow-line active-t" d="M 80 234 L 80 285 L 180 285" />

    
    <path id="pathFalse" class="flow-line" marker-end="url(#arrow-def)" d="M 275 125 L 320 125 L 320 176" />
    <path id="pathFalseOut" class="flow-line" d="M 320 234 L 320 285 L 220 285" />

    
    <path id="pathExit" class="flow-line active-t" marker-end="url(#arrow-t)" d="M 200 285 L 200 316" />

    
    <circle id="pulseDot" class="pulse-dot running-t" r="5" cx="200" cy="36" />

    
    <rect class="node-rect" x="140" y="6" width="120" height="30" />
    <text class="node-text" x="200" y="21">Input: Temp</text>

    
    <polygon id="diamond" class="node-diamond" points="200,85 275,125 200,165 125,125" />
    <text class="node-text" x="200" y="125">Temp &gt; 25°C ?</text>

    
    <text class="branch-tag tag-true" x="98" y="115">TRUE</text>
    <text class="branch-tag tag-false" x="302" y="115">FALSE</text>

    
    <g id="boxTrue" class="active-node-t">
      <rect class="node-action-t" x="25" y="180" width="110" height="50" />
      <text class="node-text" x="80" y="205">Fan ON</text>
    </g>

    
    <g id="boxFalse">
      <rect class="node-action-f" x="265" y="180" width="110" height="50" />
      <text class="node-text" x="320" y="205">Fan OFF</text>
    </g>

    
    <rect class="node-rect" x="145" y="320" width="110" height="30" />
    <text class="node-text" x="200" y="335">Next Step</text>
  </svg>

  <script>
    let isTrue = true;
    let animId = null;
    let progress = 0;

    const btnTrue = document.getElementById('btnTrue');
    const btnFalse = document.getElementById('btnFalse');
    const pathEntry = document.getElementById('pathEntry');
    const pathTrue = document.getElementById('pathTrue');
    const pathTrueOut = document.getElementById('pathTrueOut');
    const pathFalse = document.getElementById('pathFalse');
    const pathFalseOut = document.getElementById('pathFalseOut');
    const pathExit = document.getElementById('pathExit');
    const boxTrue = document.getElementById('boxTrue');
    const boxFalse = document.getElementById('boxFalse');
    const pulseDot = document.getElementById('pulseDot');

    // Path waypoints for smooth particle animation
    const truePoints = [
      {x: 200, y: 36},
      {x: 200, y: 125},
      {x: 80,  y: 125},
      {x: 80,  y: 205},
      {x: 80,  y: 285},
      {x: 200, y: 285},
      {x: 200, y: 335}
    ];

    const falsePoints = [
      {x: 200, y: 36},
      {x: 200, y: 125},
      {x: 320, y: 125},
      {x: 320, y: 205},
      {x: 320, y: 285},
      {x: 200, y: 285},
      {x: 200, y: 335}
    ];

    function getInterpolatedPoint(pts, t) {
      const totalSegments = pts.length - 1;
      const scaledT = t * totalSegments;
      const index = Math.min(Math.floor(scaledT), totalSegments - 1);
      const segmentT = scaledT - index;
      
      const p1 = pts[index];
      const p2 = pts[index + 1];
      
      return {
        x: p1.x + (p2.x - p1.x) * segmentT,
        y: p1.y + (p2.y - p1.y) * segmentT
      };
    }

    function animate() {
      progress += 0.007;
      if (progress > 1) progress = 0;

      const currentRoute = isTrue ? truePoints : falsePoints;
      const pt = getInterpolatedPoint(currentRoute, progress);

      pulseDot.setAttribute('cx', pt.x);
      pulseDot.setAttribute('cy', pt.y);

      animId = requestAnimationFrame(animate);
    }

    function setCondition(val) {
      isTrue = val;
      progress = 0;

      if (isTrue) {
        btnTrue.className = 'btn active-true';
        btnFalse.className = 'btn';

        pathEntry.className = 'flow-line active-t';
        pathTrue.className = 'flow-line active-t';
        pathTrue.setAttribute('marker-end', 'url(#arrow-t)');
        pathTrueOut.className = 'flow-line active-t';

        pathFalse.className = 'flow-line';
        pathFalse.setAttribute('marker-end', 'url(#arrow-def)');
        pathFalseOut.className = 'flow-line';

        pathExit.className = 'flow-line active-t';
        pathExit.setAttribute('marker-end', 'url(#arrow-t)');

        boxTrue.setAttribute('class', 'active-node-t');
        boxFalse.removeAttribute('class');

        pulseDot.setAttribute('class', 'pulse-dot running-t');
      } else {
        btnTrue.className = 'btn';
        btnFalse.className = 'btn active-false';

        pathEntry.className = 'flow-line active-f';
        pathTrue.className = 'flow-line';
        pathTrue.setAttribute('marker-end', 'url(#arrow-def)');
        pathTrueOut.className = 'flow-line';

        pathFalse.className = 'flow-line active-f';
        pathFalse.setAttribute('marker-end', 'url(#arrow-f)');
        pathFalseOut.className = 'flow-line active-f';

        pathExit.className = 'flow-line active-f';
        pathExit.setAttribute('marker-end', 'url(#arrow-f)');

        boxTrue.removeAttribute('class');
        boxFalse.setAttribute('class', 'active-node-f');

        pulseDot.setAttribute('class', 'pulse-dot running-f');
      }
    }

    // Start loop
    animate();
  </script>
</body>
</html>

Embedded chips rarely shut down after one sequence—so how do they run constantly without stopping?

**Iteration** repeats a sequence of instructions based on a controlling condition, either pre-tested before the block runs or post-tested after.

In embedded systems, firmware relies on an infinite loop called a **super-loop** to continuously poll sensors and update actuator outputs.

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

    .toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
      z-index: 10;
    }

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 14px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .btn:active { background: #e2e8f0; }

    .stepper-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }
    .dot.active {
      background: #10b981;
      transform: scale(1.25);
    }

    .diagram-svg {
      width: 100%;
      max-width: 480px;
      height: auto;
      flex-grow: 1;
    }

    /* SVG styling */
    .flow-line {
      stroke: #cbd5e1;
      stroke-width: 2.5;
      fill: none;
      transition: stroke 0.3s;
    }
    .flow-line.active {
      stroke: #10b981;
      stroke-width: 3.5;
    }

    .node {
      fill: #ffffff;
      stroke: #94a3b8;
      stroke-width: 2;
      transition: stroke 0.3s, fill 0.3s, filter 0.3s;
      cursor: pointer;
    }
    .node.active {
      stroke: #10b981;
      stroke-width: 2.5;
      fill: #ecfdf5;
      filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.35));
    }

    .node-text {
      font-size: 13px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }
    .branch-text {
      font-size: 11px;
      font-weight: 700;
      fill: #64748b;
      dominant-baseline: central;
    }

    /* Animated pulse token */
    #pulseToken {
      fill: #10b981;
      transition: transform 0.4s ease-out;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button class="btn" id="playBtn">⏸ Pause</button>
    <button class="btn" id="stepBtn">Step →</button>
    <div class="stepper-dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
      <div class="dot" data-step="4"></div>
    </div>
  </div>

  <svg class="diagram-svg" viewBox="0 0 360 380">
    <defs>
      <marker id="arrow" viewBox="0 0 10 10" refX="6" 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="#94a3b8" id="arrowHead" />
      </marker>
      <marker id="arrow-active" viewBox="0 0 10 10" refX="6" 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>

    
    <path id="line-loop" class="flow-line" d="M 180 340 L 40 340 L 40 105 L 170 105" marker-end="url(#arrow)" />
    
    
    <path id="line-0" class="flow-line" d="M 180 50 L 180 85" marker-end="url(#arrow)" />
    
    
    <path id="line-1" class="flow-line" d="M 180 125 L 180 160" marker-end="url(#arrow)" />
    
    
    <path id="line-2-yes" class="flow-line" d="M 235 200 L 290 200 L 290 250" marker-end="url(#arrow)" />
    
    
    <path id="line-2-no" class="flow-line" d="M 125 200 L 180 200 L 180 250" marker-end="url(#arrow)" />
    
    
    <path id="line-3-join" class="flow-line" d="M 290 290 L 290 340 L 180 340" />
    <path id="line-4-join" class="flow-line" d="M 180 290 L 180 340" />

    
    <text class="branch-text" x="248" y="190">YES</text>
    <text class="branch-text" x="145" y="190">NO</text>
    <text class="branch-text" x="48" y="210" style="font-size: 10px; fill: #10b981;">SUPER-LOOP</text>

    
    <g id="step-0" onclick="setStep(0)">
      <rect class="node active" x="120" y="15" width="120" height="35" rx="17.5" />
      <text class="node-text" x="180" y="32">Init / Setup</text>
    </g>

    
    <g id="step-1" onclick="setStep(1)">
      <polygon class="node" points="130,85 240,85 220,125 110,125" />
      <text class="node-text" x="175" y="105">Read Sensor</text>
    </g>

    
    <g id="step-2" onclick="setStep(2)">
      <polygon class="node" points="180,160 235,200 180,240 125,200" />
      <text class="node-text" x="180" y="200">Value &gt; Ref?</text>
    </g>

    
    <g id="step-3" onclick="setStep(3)">
      <rect class="node" x="240" y="250" width="100" height="40" rx="6" />
      <text class="node-text" x="290" y="270">Actuator ON</text>
    </g>

    
    <g id="step-4" onclick="setStep(4)">
      <rect class="node" x="130" y="250" width="100" height="40" rx="6" />
      <text class="node-text" x="180" y="270">Actuator OFF</text>
    </g>

    
    <circle id="pulseToken" cx="180" cy="32" r="5" />
  </svg>

  <script>
    const steps = [
      { id: 0, x: 180, y: 32, lines: ['line-0'] },
      { id: 1, x: 175, y: 105, lines: ['line-1'] },
      { id: 2, x: 180, y: 200, lines: ['line-2-yes', 'line-2-no'] },
      { id: 3, x: 290, y: 270, lines: ['line-3-join', 'line-loop'] },
      { id: 4, x: 180, y: 270, lines: ['line-4-join', 'line-loop'] }
    ];

    // Sequence flow: 0 -> 1 -> 2 -> 3 -> 1 -> 2 -> 4 -> 1 ...
    const executionPath = [0, 1, 2, 3, 1, 2, 4];
    let pathIndex = 0;
    let playing = true;
    let timer = null;

    const playBtn = document.getElementById('playBtn');
    const stepBtn = document.getElementById('stepBtn');
    const token = document.getElementById('pulseToken');
    const dots = document.querySelectorAll('.dot');

    function updateView(stepId) {
      // Highlight nodes
      document.querySelectorAll('.node').forEach(n => n.classList.remove('active'));
      const activeGroup = document.getElementById(`step-${stepId}`);
      if (activeGroup) {
        activeGroup.querySelector('.node').classList.add('active');
      }

      // Highlight lines
      document.querySelectorAll('.flow-line').forEach(l => {
        l.classList.remove('active');
        l.removeAttribute('marker-end');
        if (l.id !== 'line-3-join' && l.id !== 'line-4-join') {
          l.setAttribute('marker-end', 'url(#arrow)');
        }
      });

      const currentStepObj = steps.find(s => s.id === stepId);
      if (currentStepObj) {
        currentStepObj.lines.forEach(lid => {
          const l = document.getElementById(lid);
          if (l) {
            l.classList.add('active');
            if (l.id !== 'line-3-join' && l.id !== 'line-4-join') {
              l.setAttribute('marker-end', 'url(#arrow-active)');
            }
          }
        });
        token.setAttribute('cx', currentStepObj.x);
        token.setAttribute('cy', currentStepObj.y);
      }

      // Update dots
      dots.forEach((d, i) => {
        d.classList.toggle('active', i === stepId);
      });
    }

    function advance() {
      pathIndex = (pathIndex + 1) % executionPath.length;
      updateView(executionPath[pathIndex]);
    }

    function setStep(stepId) {
      const idx = executionPath.indexOf(stepId);
      pathIndex = idx !== -1 ? idx : 0;
      updateView(stepId);
    }

    function togglePlay() {
      playing = !playing;
      playBtn.textContent = playing ? '⏸ Pause' : '▶ Play';
      if (playing) {
        timer = setInterval(advance, 2200);
      } else {
        clearInterval(timer);
      }
    }

    playBtn.addEventListener('click', togglePlay);
    stepBtn.addEventListener('click', () => {
      if (playing) togglePlay();
      advance();
    });

    dots.forEach(d => {
      d.addEventListener('click', () => {
        if (playing) togglePlay();
        setStep(parseInt(d.dataset.step, 10));
      });
    });

    // Start auto loop
    timer = setInterval(advance, 2200);
  </script>
</body>
</html>

Let's combine all three structures into a complete hardware control algorithm.

## Worked Example: Automated Irrigation System

Our controller must monitor an analog moisture sensor on pin A0. If moisture drops below 30%, it must open a water valve on pin 8 for 3 seconds; otherwise, it keeps the valve closed.

<!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: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      user-select: none;
    }

    /* Controls Header */
    .controls-bar {
      width: 100%;
      max-width: 580px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      background: #ffffff;
      padding: 8px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      flex: 1;
    }

    .slider-wrap input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
    }

    .val-badge {
      min-width: 44px;
      text-align: right;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      color: #0284c7;
    }

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

    button {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s, border-color 0.15s;
    }

    button:hover {
      background: #e2e8f0;
    }

    button.primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    button.primary:hover {
      background: #0369a1;
    }

    /* Flowchart Container */
    .svg-container {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

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

    /* Flowchart Elements */
    .flow-shape {
      fill: #ffffff;
      stroke: #94a3b8;
      stroke-width: 1.8;
      transition: stroke 0.3s, fill 0.3s, filter 0.3s;
    }

    .flow-line {
      stroke: #cbd5e1;
      stroke-width: 2;
      fill: none;
      transition: stroke 0.3s;
    }

    .flow-text {
      font-size: 12px;
      font-weight: 600;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }

    .sub-text {
      font-size: 10px;
      font-weight: 500;
      fill: #64748b;
    }

    .branch-label {
      font-size: 11px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Active Highlight States */
    .active-node .flow-shape {
      stroke: #0284c7;
      stroke-width: 2.5;
      fill: #f0f9ff;
      filter: drop-shadow(0 0 5px rgba(2, 132, 199, 0.35));
    }

    .active-line {
      stroke: #0284c7 !important;
      stroke-width: 2.8 !important;
    }

    /* Status indicator */
    .status-bar {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .pin-pill {
      padding: 2px 8px;
      border-radius: 12px;
      background: #e2e8f0;
      color: #475569;
      font-family: monospace;
      font-size: 11px;
      transition: background 0.3s, color 0.3s;
    }
    .pin-pill.on {
      background: #38bdf8;
      color: #0c4a6e;
      font-weight: bold;
    }
  </style>
</head>
<body>

  
  <div class="controls-bar">
    <div class="slider-wrap">
      <span>Moisture (A0):</span>
      <input type="range" id="moistSlider" min="5" max="80" value="20">
      <span class="val-badge" id="moistVal">20%</span>
    </div>
    <div class="btn-group">
      <button id="stepBtn">Step →</button>
      <button id="playBtn" class="primary">▶ Auto</button>
    </div>
  </div>

  
  <div class="svg-container">
    <svg viewBox="0 0 460 360">
      <defs>
        <marker id="arrow" viewBox="0 0 10 10" refX="7" 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="#94a3b8" id="arrowHead" />
        </marker>
        <marker id="arrowActive" viewBox="0 0 10 10" refX="7" 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="#0284c7" />
        </marker>
      </defs>

      
      
      <path id="line1" class="flow-line" d="M 230,36 L 230,62" marker-end="url(#arrow)" />
      
      <path id="line2" class="flow-line" d="M 230,102 L 230,132" marker-end="url(#arrow)" />
      
      
      <path id="lineYes" class="flow-line" d="M 170,170 L 120,170 L 120,202" marker-end="url(#arrow)" />
      
      <path id="lineDelay" class="flow-line" d="M 120,242 L 120,268" marker-end="url(#arrow)" />
      
      
      <path id="lineNo" class="flow-line" d="M 290,170 L 340,170 L 340,222" marker-end="url(#arrow)" />

      
      <path id="lineLoopYes" class="flow-line" d="M 120,308 L 120,336 L 230,336 L 230,36" />
      
      <path id="lineLoopNo" class="flow-line" d="M 340,262 L 340,336 L 230,336" />

      
      <g id="node1" class="flow-node active-node">
        <rect x="180" y="8" width="100" height="28" rx="14" class="flow-shape" />
        <text x="230" y="22" class="flow-text">Main Loop</text>
      </g>

      
      <g id="node2" class="flow-node">
        <polygon points="172,102 298,102 288,62 162,62" class="flow-shape" />
        <text x="230" y="77" class="flow-text">Read Sensor</text>
        <text x="230" y="91" class="flow-text sub-text">Pin A0 → moisture</text>
      </g>

      
      <g id="node3" class="flow-node">
        <polygon points="230,132 290,170 230,208 170,170" class="flow-shape" />
        <text x="230" y="164" class="flow-text">moisture &lt; 30%?</text>
        <text x="230" y="178" class="flow-text sub-text" id="node3Val">(20% &lt; 30%)</text>
      </g>

      
      <text x="142" y="162" class="branch-label" fill="#0284c7">YES</text>
      <text x="316" y="162" class="branch-label" fill="#64748b">NO</text>

      
      <g id="node4" class="flow-node">
        <rect x="65" y="202" width="110" height="40" rx="4" class="flow-shape" />
        <text x="120" y="217" class="flow-text">Valve OPEN</text>
        <text x="120" y="231" class="flow-text sub-text">Pin 8 = HIGH</text>
      </g>

      
      <g id="node5" class="flow-node">
        <rect x="65" y="268" width="110" height="40" rx="4" class="flow-shape" />
        <text x="120" y="283" class="flow-text">Wait 3s</text>
        <text x="120" y="297" class="flow-text sub-text">Valve CLOSE (0)</text>
      </g>

      
      <g id="node6" class="flow-node">
        <rect x="285" y="222" width="110" height="40" rx="4" class="flow-shape" />
        <text x="340" y="237" class="flow-text">Valve CLOSED</text>
        <text x="340" y="251" class="flow-text sub-text">Pin 8 = LOW</text>
      </g>
    </svg>
  </div>

  
  <div class="status-bar">
    <span>Hardware Status:</span>
    <span class="pin-pill" id="pinA0">A0: 20%</span>
    <span class="pin-pill" id="pin8">Pin 8: OFF</span>
  </div>

  <script>
    const slider = document.getElementById('moistSlider');
    const moistVal = document.getElementById('moistVal');
    const node3Val = document.getElementById('node3Val');
    const pinA0 = document.getElementById('pinA0');
    const pin8 = document.getElementById('pin8');
    const stepBtn = document.getElementById('stepBtn');
    const playBtn = document.getElementById('playBtn');

    let currentStep = 0;
    let timer = null;

    function getMoisture() {
      return parseInt(slider.value, 10);
    }

    function updateSliderDisplay() {
      const v = getMoisture();
      moistVal.textContent = v + '%';
      node3Val.textContent = `(${v}% < 30%)`;
      pinA0.textContent = `A0: ${v}%`;
    }

    slider.addEventListener('input', () => {
      updateSliderDisplay();
    });

    // Sequence definitions
    // 0: Start -> 1: Read Sensor -> 2: Decision
    // If < 30: 3: Valve ON -> 4: Wait 3s -> Loop
    // If >= 30: 5: Valve OFF -> Loop
    function getSequence() {
      const isDry = getMoisture() < 30;
      if (isDry) {
        return [
          { node: 'node1', line: null, p8: false },
          { node: 'node2', line: 'line1', p8: false },
          { node: 'node3', line: 'line2', p8: false },
          { node: 'node4', line: 'lineYes', p8: true },
          { node: 'node5', line: 'lineDelay', p8: true }
        ];
      } else {
        return [
          { node: 'node1', line: null, p8: false },
          { node: 'node2', line: 'line1', p8: false },
          { node: 'node3', line: 'line2', p8: false },
          { node: 'node6', line: 'lineNo', p8: false }
        ];
      }
    }

    function renderState() {
      const seq = getSequence();
      if (currentStep >= seq.length) currentStep = 0;
      const cur = seq[currentStep];

      // Clear all active nodes
      document.querySelectorAll('.flow-node').forEach(n => n.classList.remove('active-node'));
      document.querySelectorAll('.flow-line').forEach(l => {
        l.classList.remove('active-line');
        if (l.getAttribute('marker-end')) l.setAttribute('marker-end', 'url(#arrow)');
      });

      // Set active node
      const activeEl = document.getElementById(cur.node);
      if (activeEl) activeEl.classList.add('active-node');

      // Set active incoming line
      if (cur.line) {
        const lineEl = document.getElementById(cur.line);
        if (lineEl) {
          lineEl.classList.add('active-line');
          if (lineEl.getAttribute('marker-end')) {
            lineEl.setAttribute('marker-end', 'url(#arrowActive)');
          }
        }
      }

      // Update Pin 8 display
      if (cur.p8) {
        pin8.textContent = 'Pin 8: HIGH (Watering)';
        pin8.classList.add('on');
      } else {
        pin8.textContent = 'Pin 8: LOW (Off)';
        pin8.classList.remove('on');
      }
    }

    function step() {
      const seq = getSequence();
      currentStep = (currentStep + 1) % seq.length;
      renderState();
    }

    function togglePlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
        playBtn.textContent = '▶ Auto';
        playBtn.classList.add('primary');
      } else {
        step();
        timer = setInterval(step, 1400);
        playBtn.textContent = '⏸ Pause';
        playBtn.classList.remove('primary');
      }
    }

    stepBtn.addEventListener('click', () => {
      if (timer) togglePlay();
      step();
    });

    playBtn.addEventListener('click', togglePlay);

    // Initial display
    updateSliderDisplay();
    renderState();
  </script>
</body>
</html>

Here is how this exact structured logic translates into standard JavaScript code running on an embedded interpreter:

<!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: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .layout {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 12px;
      align-items: center;
    }
    @media (max-width: 480px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px;
      position: relative;
    }
    .panel-header {
      font-size: 12px;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      text-transform: uppercase;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
    }
    /* Flowchart Shape Styles */
    .flow-node {
      fill: #ffffff;
      stroke: #cbd5e1;
      stroke-width: 2;
      transition: stroke 0.3s ease, fill 0.3s ease, filter 0.3s ease;
    }
    .flow-text {
      font-family: monospace;
      font-size: 11px;
      fill: #1e2945;
      font-weight: 600;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .flow-line {
      stroke: #94a3b8;
      stroke-width: 1.75;
      fill: none;
      transition: stroke 0.3s ease;
    }
    .flow-label {
      font-size: 10px;
      fill: #64748b;
      font-weight: 700;
      text-anchor: middle;
    }

    /* Active Highlight States */
    .active-shape {
      stroke: #2563eb !important;
      stroke-width: 2.5 !important;
      fill: #eff6ff !important;
      filter: drop-shadow(0 2px 4px rgba(37,99,235,0.15));
    }
    .active-line {
      stroke: #2563eb !important;
      stroke-width: 2.5 !important;
    }

    /* Code View */
    .code-box {
      font-family: "SFMono-Regular", Consolas, Menlo, monospace;
      font-size: 12px;
      line-height: 1.6;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 8px 10px;
    }
    .code-line {
      padding: 2px 6px;
      border-radius: 4px;
      transition: background 0.3s ease;
      white-space: pre;
    }
    .code-line.active {
      background: #dbeafe;
      font-weight: 600;
    }
    .kw { color: #2563eb; }
    .fn { color: #0284c7; }
    .num { color: #d97706; }
    .op { color: #64748b; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 2px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
    }
    .ctrl-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      cursor: pointer;
      color: #1e2945;
      font-weight: 600;
    }
    .ctrl-btn:hover {
      background: #eff6ff;
      border-color: #93c5fd;
    }
    .step-dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
    }
    .dot.active {
      background: #2563eb;
      box-shadow: 0 0 0 2px #bfdbfe;
    }
  </style>
</head>
<body>

  <div class="layout">
    
    <div class="panel">
      <div class="panel-header">Structured Flowchart</div>
      <svg viewBox="0 0 240 230">
        <defs>
          <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <polygon points="0 0, 6 3, 0 6" fill="#94a3b8" id="arrow-head"/>
          </marker>
        </defs>

        
        <rect id="shape-0" class="flow-node" x="70" y="8" width="100" height="26" rx="13"/>
        <text class="flow-text" x="120" y="21">count = 0</text>

        
        <line id="line-0" class="flow-line" x1="120" y1="34" x2="120" y2="52" marker-end="url(#arrow)"/>

        
        <polygon id="shape-1" class="flow-node" points="120,54 180,78 120,102 60,78"/>
        <text class="flow-text" x="120" y="78">count &lt; 3</text>

        
        <line id="line-1" class="flow-line" x1="120" y1="102" x2="120" y2="124" marker-end="url(#arrow)"/>
        <text class="flow-label" x="134" y="114">YES</text>

        
        <rect id="shape-2" class="flow-node" x="65" y="126" width="110" height="30" rx="3"/>
        <text class="flow-text" x="120" y="141">readSensor()</text>

        
        <path id="line-loop" class="flow-line" d="M 65 141 L 30 141 L 30 78 L 56 78" marker-end="url(#arrow)"/>

        
        <path id="line-exit" class="flow-line" d="M 180 78 L 210 78 L 210 185 L 174 185" marker-end="url(#arrow)"/>
        <text class="flow-label" x="194" y="70">NO</text>

        
        <rect id="shape-3" class="flow-node" x="65" y="172" width="110" height="26" rx="13"/>
        <text class="flow-text" x="120" y="185">HALT</text>
      </svg>
    </div>

    
    <div class="panel">
      <div class="panel-header">Structured JavaScript</div>
      <div class="code-box">
        <div class="code-line" id="code-0"><span class="kw">let</span> count <span class="op">=</span> <span class="num">0</span>;</div>
        <div class="code-line" id="code-1"><span class="kw">while</span> (count <span class="op">&lt;</span> <span class="num">3</span>) {</div>
        <div class="code-line" id="code-2">  <span class="fn">readSensor</span>();</div>
        <div class="code-line" id="code-2b">  count<span class="op">++</span>;</div>
        <div class="code-line" id="code-1b">}</div>
        <div class="code-line" id="code-3"><span class="fn">halt</span>();</div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button class="ctrl-btn" id="prevBtn">‹</button>
      <button class="ctrl-btn" id="playBtn">⏸</button>
      <button class="ctrl-btn" id="nextBtn">›</button>
    </div>
    <div class="step-dots">
      <button class="dot active" title="Step 1"></button>
      <button class="dot" title="Step 2"></button>
      <button class="dot" title="Step 3"></button>
      <button class="dot" title="Step 4"></button>
    </div>
  </div>

  <script>
    const steps = [
      {
        shapes: ['shape-0'],
        lines: ['line-0'],
        code: ['code-0']
      },
      {
        shapes: ['shape-1'],
        lines: ['line-1'],
        code: ['code-1', 'code-1b']
      },
      {
        shapes: ['shape-2'],
        lines: ['line-loop'],
        code: ['code-2', 'code-2b']
      },
      {
        shapes: ['shape-3'],
        lines: ['line-exit'],
        code: ['code-3']
      }
    ];

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

    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');

    function showStep(idx) {
      current = (idx + steps.length) % steps.length;

      // Update Flowchart shapes
      document.querySelectorAll('.flow-node').forEach(el => el.classList.remove('active-shape'));
      document.querySelectorAll('.flow-line').forEach(el => el.classList.remove('active-line'));
      document.querySelectorAll('.code-line').forEach(el => el.classList.remove('active'));
      dots.forEach((d, i) => d.classList.toggle('active', i === current));

      const step = steps[current];
      step.shapes.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.add('active-shape');
      });
      step.lines.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.add('active-line');
      });
      step.code.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.classList.add('active');
      });
    }

    function play() {
      playing = true;
      playBtn.textContent = '⏸';
      clearInterval(timer);
      timer = setInterval(() => {
        showStep(current + 1);
      }, 3000);
    }

    function pause() {
      playing = false;
      playBtn.textContent = '▶';
      clearInterval(timer);
    }

    document.getElementById('playBtn').addEventListener('click', () => {
      if (playing) pause();
      else play();
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      pause();
      showStep(current + 1);
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      pause();
      showStep(current - 1);
    });

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

    // Start
    showStep(0);
    play();
  </script>
</body>
</html>

A frequent mistake on exams is drawing decision diamonds with only one exit arrow or forgetting to label which branch is **True** and which is **False**.

Another trap is drawing feedback loop lines that re-enter inside an active branch instead of cleanly targeting a collector node before the next cycle begins.

Always ensure every decision diamond has exactly two labeled exit paths and that all branched paths recombine before exiting the structure.

electronics

Flowchart Symbols and Structured Control Flow. Construct standard flowchart representations for sequence, selection (decision), and iteration (loops) in embedded microcontroller control.

Flowcharts, Program Design, and Control Structures (Sequence, Selection, Iteration)

Designing Algorithms: Flowcharts and Microcontroller Control

A-Level Electronics: Component 2 Microcontrollers and Flowchart Programming Guidance

When teaching flowchart algorithms for microcontrollers at Year 13 (A2 Level), emphasise that flowcharts are formal engineering blueprints, not informal sketches. Have students write trace tables alongside their flowcharts to track register values ($C$, $\text{PORTA}$, $\text{PORTB}$) step by step. Explicitly enforce standard conventions: exactly one incoming and one outgoing line for process and I/O blocks, exactly one incoming and two outgoing labelled lines for decision diamonds, and the use of infinite superloops to reflect embedded bare-metal architecture execution.