Circuit

<!DOCTYPE html>

<head>

<title>Series Circuit Simulator</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 20px;

}

#circuit-container {

display: flex;

align-items: center;

border: 2px solid black;

padding: 20px;

width: 80%;

height: 150px;

margin-top: 20px;

position: relative;

}

.wire {

height: 5px;

background-color: rgb(211, 211, 211); /* Default (no current) color */

position: absolute;

transition: background-color 0.3s ease;

}

#wire-top { top: 72px; left: 110px; width: 680px; }

#wire-bottom { bottom: 0px; left: 0px; width: 0px; height: 0px; } /* Not needed for a simple linear series */

.component {

width: 60px;

height: 40px;

background-color: lightgray;

border: 2px solid #555;

border-radius: 5px;

display: flex;

justify-content: center;

align-items: center;

font-size: 14px;

cursor: pointer;

position: absolute;

top: 55px;

transition: background-color 0.3s ease;

}

.component:hover {

background-color: #ddd;

}

.component-label {

margin-top: -5px;

}

#battery {

width: 80px;

height: 100px;

background-color: #f0f0f0;

border: 2px solid #333;

border-radius: 10px;

display: flex;

flex-direction: column;

justify-content: space-around;

align-items: center;

font-size: 16px;

position: absolute;

left: 20px;

top: 25px;

}

#battery-positive {

font-weight: bold;

font-size: 20px;

}

#battery-negative {

font-weight: bold;

font-size: 20px;

}

.controls {

margin-top: 20px;

border-top: 1px solid #ccc;

padding-top: 10px;

}

.control-group {

margin-bottom: 10px;

}

label {

display: inline-block;

width: 180px;

font-weight: bold;

}

input[type="number"], input[type="range"] {

width: 150px;

}

#results {

margin-top: 20px;

padding: 10px;

background-color: #f9f9f9;

border: 1px solid #e0e0e0;

border-radius: 5px;

}

#current-display {

font-weight: bold;

font-size: 1.2em;

}

</style>

</head>

<body>

<h1>Interactive Series Circuit Simulator</h1>

<p>A simple simulation of a series circuit. You can change the battery voltage, the number of resistors, and the resistance of each component. Observe how the total current changes.</p>

<div style="font-size: small;">Battery</div>

</div>

</div>

<h3>Controls</h3>

<label for="voltage">Potential Difference (V):</label>

</div>

<label for="num-resistors">Number of Resistors:</label>

</div>

</div>

<button id="update-circuit">Update Circuit</button>

</div>

<h3>Circuit Analysis</h3>

<p>Total Resistance (R<sub>total</sub>): <span id="total-resistance">--</span> Ω</p>

<p>Current (I): <span id="current-display">--</span> A</p>

</div>

const voltageInput = document.getElementById('voltage');

const voltageValueDisplay = document.getElementById('voltage-value');

const numResistorsInput = document.getElementById('num-resistors');

const resistorControlsDiv = document.getElementById('resistor-controls');

const circuitContainer = document.getElementById('circuit-container');

const updateButton = document.getElementById('update-circuit');

const totalResistanceDisplay = document.getElementById('total-resistance');

const currentDisplay = document.getElementById('current-display');

const topWire = document.getElementById('wire-top');

let resistors = []; // To store resistance values

let resistorElements = []; // To store DOM elements of resistors

// Initial setup

createResistorControls();

updateCircuit();

// Event Listeners

voltageInput.addEventListener('input', () => {

voltageValueDisplay.textContent = voltageInput.value + " V";

updateCircuit();

});

numResistorsInput.addEventListener('change', () => {

// Cap the number of resistors to fit in the container visual

if (numResistorsInput.value > 10) numResistorsInput.value = 10;

if (numResistorsInput.value < 1) numResistorsInput.value = 1;

createResistorControls();

updateCircuit();

});

updateButton.addEventListener('click', updateCircuit);

function createResistorControls() {

resistorControlsDiv.innerHTML = ''; // Clear previous controls

const numResistors = parseInt(numResistorsInput.value);

resistors = []; // Reset the internal array

for (let i = 1; i <= numResistors; i++) {

const controlGroup = document.createElement('div');

controlGroup.className = 'control-group';

const label = document.createElement('label');

label.htmlFor = `resistor-${i}`;

label.innerHTML = `Resistor R<sub>${i}</sub> (Ω):`;

const input = document.createElement('input');

input.type = 'number';

input.id = `resistor-${i}`;

input.value = 10 * i; // Default value: 10, 20, 30, ...

input.min = "1";

input.max = "1000";

resistors.push(parseInt(input.value)); // Add default value

// Update internal resistance array when input changes

input.addEventListener('change', () => {

resistors[i-1] = parseInt(input.value);

updateCircuit();

});

controlGroup.appendChild(label);

controlGroup.appendChild(input);

resistorControlsDiv.appendChild(controlGroup);

}

function drawResistors() {

// Remove existing resistor DOM elements

resistorElements.forEach(el => el.remove());

resistorElements = [];

const numResistors = resistors.length;

if (numResistors === 0) return;

const startX = 130; // X position for the first resistor

const spacing = (circuitContainer.offsetWidth - 130 - 60) / (numResistors); // Calculate spacing dynamically

const cappedSpacing = Math.min(spacing, 100); // Prevent extreme overlaps on smaller screens

for (let i = 0; i < numResistors; i++) {

const component = document.createElement('div');

component.className = 'component resistor';

component.style.left = `${startX + i * cappedSpacing}px`;

component.innerHTML = `<span class="component-label">R<sub>${i+1}</sub><br>${resistors[i]} Ω</span>`;

circuitContainer.appendChild(component);

resistorElements.push(component);

}

function updateCircuit() {

const voltage = parseFloat(voltageInput.value);

// Calculate Total Resistance

const totalResistance = resistors.reduce((sum, current) => sum + current, 0);

// Calculate Current (Ohm's Law: I = V/R)

let current = 0;

if (totalResistance > 0) {

current = voltage / totalResistance;

}

// Update display results

totalResistanceDisplay.textContent = totalResistance.toFixed(2);

currentDisplay.textContent = current.toFixed(4);

drawResistors(); // Redraw resistors with new values and potentially new positions

updateVisuals(current);

}

function updateVisuals(current) {

// Visual feedback for current flow (simplified wire/component coloring)

let color;

if (current <= 0) {

color = 'rgb(211, 211, 211)'; // Light grey for no current

} else {

// Adjust color based on current. Simple: brighter = more current

// Max expected current could be around 100 V / 1 Ohm = 100 A. Let's cap visual brightness earlier.

let maxVisualCurrent = 5; // A. A small current to show glow

let brightness = 150 + Math.min((current / maxVisualCurrent) * 105, 105); // Range from 150 to 255 (yellow)

color = `rgb(${brightness}, ${brightness}, ${brightness * 0.4})`; // Yellow glow

}

topWire.style.backgroundColor = color;

resistorElements.forEach(resistor => {

resistor.style.backgroundColor = color;

});

}

</script>

</body>

</html>

Page updated

Report abuse