<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brain Signaling Interactive Learning</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1, h2 {
color: #333;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.gif-container {
width: 100%;
max-width: 400px;
margin: 20px auto;
}
.gif-container img {
width: 100%;
height: auto;
}
canvas {
border: 1px solid #ccc;
margin-top: 20px;
}
.neuron-container {
position: relative;
width: 100%;
max-width: 600px;
margin: 20px auto;
}
.neuron-container img {
width: 100%;
height: auto;
}
.hotspot {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgba(255, 0, 0, 0.5);
cursor: pointer;
}
.tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
z-index: 1;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Brain Signaling: Input/Output Mechanisms</h1>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Electrical')">Electrical Signals</button>
<button class="tablinks" onclick="openTab(event, 'ChemicalShort')">Chemical Signals (Short-range)</button>
<button class="tablinks" onclick="openTab(event, 'ChemicalLong')">Chemical Signals (Long-range)</button>
<button class="tablinks" onclick="openTab(event, 'ElectricField')">Electric Fields</button>
<button class="tablinks" onclick="openTab(event, 'Quantum')">Quantum Mechanics</button>
</div>
<div id="Electrical" class="tabcontent">
<h2>Electrical Signals: Action Potentials</h2>
<p>Action potentials are rapid, transient changes in the electrical potential across a neuron's membrane. They propagate along the axon, allowing information to be transmitted over long distances within the nervous system.</p>
<div class="gif-container">
<img src="https://miro.medium.com/v2/resize:fit:679/0*bjFL9WlfHw7tEkbE.gif" alt="Electrical Signal GIF">
</div>
</div>
<div id="ChemicalShort" class="tabcontent">
<h2>Chemical Signals: Neurotransmitters (Short-range)</h2>
<p>Neurotransmitters are chemical messengers that transmit signals across synapses, the junctions between neurons. They travel very short distances and enable communication between neurons.</p>
<div class="gif-container">
<img src="https://media3.giphy.com/media/l3vRcrVqhBVSpJte0/200w.gif?cid=6c09b9529zxr6vwud7i9elhxum1mko7pm1w5x93fn7qmarcz&ep=v1_gifs_search&rid=200w.gif&ct=g" alt="Chemical Short-range Signal GIF">
</div>
</div>
<div id="ChemicalLong" class="tabcontent">
<h2>Chemical Signals: Hormones (Long-range)</h2>
<p>Some neurotransmitters can act as hormones when released into the bloodstream. These chemical signals can travel long distances to affect distant tissues and organs.</p>
<div class="gif-container">
<img src="https://lh6.googleusercontent.com/proxy/i-SUsFrrOm8Mn-XNQrPFI1PrnP0tnXPk1hmkeZ8SmfNk9WEuZvB_S3f4-a78xk2_6CtmNoTzRSRWrI4ln03yrI6ljUr9tYYXzN8PKY3vcDDJLX0Nh_Jvp3n_L9kjh5Wf4xXVeixrA0oCTMe1anEQcA" alt="Chemical Long-range Signal GIF">
</div>
</div>
<div id="ElectricField" class="tabcontent">
<h2>Electric Fields</h2>
<p>Recent discoveries suggest that neurons working together create electric fields, which in turn can influence the behavior of the neurons that created them. This creates a feedback loop of neuronal activity and electric field interactions.</p>
<div class="gif-container">
<img src="https://i.pinimg.com/originals/a4/64/60/a46460eef9156cf9144b95fd2375cf3e.gif" alt="Electric Field GIF">
</div>
</div>
<div id="Quantum" class="tabcontent">
<h2>Quantum Mechanics in the Brain</h2>
<p>Some scientists hypothesize that quantum mechanical processes might play a role in brain function. While still controversial, this idea suggests that quantum effects could contribute to cognitive processes.</p>
<div class="gif-container">
<img src="https://d2r55xnwy6nx47.cloudfront.net/uploads/2016/11/QuantumBrain_570x320.gif" alt="Quantum Mechanics GIF">
</div>
</div>
<h2>Neuron Components</h2>
<div class="interactive-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Blausen_0657_MultipolarNeuron.png/640px-Blausen_0657_MultipolarNeuron.png" alt="Neuron Diagram" style="width:100%;">
</div>
</div>
</div>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
switch(tabName) {
case 'Electrical':
animateElectricalSignal();
break;
case 'ChemicalShort':
animateChemicalShort();
break;
case 'ChemicalLong':
animateChemicalLong();
break;
case 'ElectricField':
animateElectricField();
break;
case 'Quantum':
animateQuantum();
break;
}
}
function animateElectricalSignal() {
const canvas = document.getElementById('electricalCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
for (let i = 0; i < canvas.width; i++) {
ctx.lineTo(i, canvas.height / 2 + Math.sin((i + x) * 0.1) * 50);
}
ctx.stroke();
x += 5;
requestAnimationFrame(draw);
}
draw();
}
function animateChemicalShort() {
const canvas = document.getElementById('chemicalShortCanvas');
const ctx = canvas.getContext('2d');
const particles = [];
for (let i = 0; i < 20; i++) {
particles.push({
x: Math.random() * canvas.width,
y: 0,
speed: 1 + Math.random() * 3
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(p => {
ctx.beginPath();
ctx.arc(p.x, p.y, 3, 0, Math.PI * 2);
ctx.fill();
p.y += p.speed;
if (p.y > canvas.height) p.y = 0;
});
requestAnimationFrame(draw);
}
draw();
}
function animateChemicalLong() {
const canvas = document.getElementById('chemicalLongCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, canvas.height / 2, 10, 0, Math.PI * 2);
ctx.fill();
x += 1;
if (x > canvas.width) x = 0;
requestAnimationFrame(draw);
}
draw();
}
function animateElectricField() {
const canvas = document.getElementById('electricFieldCanvas');
const ctx = canvas.getContext('2d');
let radius = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(0, 0, 255, 0.2)';
ctx.stroke();
radius += 2;
if (radius > Math.max(canvas.width, canvas.height)) radius = 0;
requestAnimationFrame(draw);
}
draw();
}
function animateQuantum() {
const canvas = document.getElementById('quantumCanvas');
const ctx = canvas.getContext('2d');
let t = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(
canvas.width / 2 + Math.cos(t) * 50,
canvas.height / 2 + Math.sin(t * 2) * 50,
5, 0, Math.PI * 2
);
ctx.fill();
t += 0.05;
requestAnimationFrame(draw);
}
draw();
}
document.getElementsByClassName("tablinks")[0].click();
const hotspots = document.querySelectorAll('.hotspot');
const tooltip = document.querySelector('.tooltip');
const componentDetails = {
'Dendrites': 'Branched extensions that receive signals from other neurons.',
'Cell Body': 'Contains the nucleus and organelles, responsible for protein synthesis and energy production.',
'Axon': 'Long projection that conducts electrical impulses away from the cell body.',
'Synaptic Terminal': 'Specialized structures at the end of axons that release neurotransmitters.'
};
hotspots.forEach(hotspot => {
hotspot.addEventListener('mouseover', (e) => {
const component = e.target.getAttribute('data-component');
tooltip.textContent = `${component}: ${componentDetails[component]}`;
tooltip.style.display = 'block';
tooltip.style.left = `${e.pageX + 10}px`;
tooltip.style.top = `${e.pageY + 10}px`;
});
hotspot.addEventListener('mouseout', () => {
tooltip.style.display = 'none';
});
});
</script>
</body>
</html>