Tooltip
.tooltip {
position: relative;
cursor: pointer;
text-decoration: none;
border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
}
.tooltip::before {
content: attr(data-tooltip);
position: absolute;
top: -40px; /* Trochę niżej nad słowem */
left: 50%; /* Wyśrodkowanie */
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.9);
color: #333;
padding: 6px 12px;
border-radius: 8px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
font-family: ‘Arial’, sans-serif;
font-size: 14px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.tooltip:hover::before {
opacity: 1;
visibility: visible;
}
document.addEventListener(‘DOMContentLoaded’, function () {
const wordsToTooltip = {
“nervous system”: “układ nerwowy”,
“stimuli”: “bodźce”,
“central nervous system (CNS)”: “ośrodkowy układ nerwowy (OUN)”,
“brain”: “mózg”,
“spinal cord”: “rdzeń kręgowy”,
“peripheral nervous system (PNS)”: “obwodowy układ nerwowy (OUN)”,
“nerves”: “nerwy”,
“neural tissues”: “tkanki nerwowe”,
“sensory information”: “informacje sensoryczne”,
“neurons”: “neurony”,
“glial cells”: “komórki glejowe”,
“cerebrum”: “mózgowie”,
“cerebral cortex”: “kora mózgowa”,
“gyri”: “zakręty mózgowe”,
“sulci”: “bruzdy mózgowe”,
“neuronal cell bodies”: “ciała komórek nerwowych”,
“cognition”: “poznanie”,
“motor control”: “kontrola ruchowa”,
“frontal lobe”: “płat czołowy”,
“parietal lobe”: “płat ciemieniowy”,
“temporal lobe”: “płat skroniowy”,
“occipital lobe”: “płat potyliczny”,
“white matter”: “istota biała”,
“myelinated axons”: “aksony mielinowe”,
“gray matter”: “istota szara”,
“diencephalon”: “międzymózgowie”,
“thalamus”: “wzgórze”,
“motor signals”: “sygnały ruchowe”,
“hypothalamus”: “podwzgórze”,
“homeostasis”: “homeostaza”,
“pituitary gland”: “przysadka mózgowa”,
“endocrine systems”: “układy endokrynne”,
“epithalamus”: “nadwzgórze”,
“pineal gland”: “szyszynka”,
“melatonin”: “melatonina”,
“circadian rhythms”: “rytm okołodobowy”,
“brainstem”: “pień mózgu”,
“midbrain”: “śródmózgowie”,
“pons”: “most”,
“medulla oblongata”: “rdzeń przedłużony”,
“cerebellum”: “móżdżek”,
“cerebellar peduncles”: “konary móżdżku”,
“vertebral column”: “kręgosłup”,
“lumbar region”: “odcinek lędźwiowy”,
“spinal nerves”: “nerwy rdzeniowe”,
“cervical”: “szyjny”,
“thoracic”: “piersiowy”,
“lumbar”: “lędźwiowy”,
“sacral”: “krzyżowy”,
“ascending tracts”: “drogi wstępujące”,
“descending tracts”: “drogi zstępujące”,
“meninges”: “opony mózgowo-rdzeniowe”,
“dura mater”: “opona twarda”,
“arachnoid mater”: “opona pajęcza”,
“pia mater”: “opona miękka”,
“cerebrospinal fluid (CSF)”: “płyn mózgowo-rdzeniowy (PMR)”,
“choroid plexus”: “splot naczyniówkowy”,
“ventricular system”: “układ komorowy”,
“subarachnoid space”: “przestrzeń podpajęczynówkowa”,
“vascular network”: “sieć naczyniowa”,
“Circle of Willis”: “koło tętnicze mózgu Willisa”,
“ischemic injury”: “uszkodzenie niedokrwienne”,
“internal carotid arteries”: “tętnice szyjne wewnętrzne”,
“anterior cerebral artery (ACA)”: “tętnica przednia mózgu (ACA)”,
“middle cerebral artery (MCA)”: “tętnica środkowa mózgu (MCA)”,
“anterior communicating artery (ACoA)”: “tętnica łącząca przednia (ACoA)”,
“posterior cerebral arteries (PCA)”: “tętnice tylne mózgu (PCA)”,
“basilar artery”: “tętnica podstawna”,
“posterior communicating arteries (PCoA)”: “tętnice łączące tylne (PCoA)”,
“vertebral arteries”: “tętnice kręgowe”,
“blood supply”: “dopływ krwi”,
“anterior spinal artery”: “tętnica rdzeniowa przednia”,
“posterior spinal arteries”: “tętnice rdzeniowe tylne”
};
// Normalize keys in the dictionary
const normalizedWordsToTooltip = {};
for (const [key, value] of Object.entries(wordsToTooltip)) {
const cleanedKey = key.replace(/(.*?)/g, ”).trim(); // Remove anything in parentheses
normalizedWordsToTooltip[cleanedKey.toLowerCase()] = value;
}
function processNode(node) {
if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim()) {
let content = node.nodeValue;
// Regex to match only the main words (ignores parentheses)
const regex = new RegExp(
`\b(${Object.keys(normalizedWordsToTooltip).join(‘|’)})\b`,
‘gi’
);
if (regex.test(content)) {
const wrapper = document.createElement(‘span’);
wrapper.innerHTML = content.replace(regex, (match) => {
const tooltip = normalizedWordsToTooltip[match.toLowerCase().trim()];
return `
${match}`;
});
node.replaceWith(wrapper);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
Array.from(node.childNodes).forEach(processNode);
}
}
document.querySelectorAll(‘body *:not(script):not(style)’).forEach((element) => {
Array.from(element.childNodes).forEach(processNode);
});
});
Szacowany czas lekcji:
13 minut
.lesson-duration-container {
background-color: #f0f4f8; /* Szarawe tło dopasowane do reszty strony */
padding: 8px 15px; /* Wewnętrzny odstęp */
border-radius: 8px; /* Zaokrąglone rogi */
font-family: ‘Roboto’, Arial, sans-serif; /* Czcionka Roboto, jeśli dostępna */
font-size: 16px; /* Rozmiar tekstu */
color: #6c757d; /* Ciemny szary kolor tekstu */
display: inline-block; /* Wyświetlanie jako element blokowy */
margin-bottom: 20px; /* Odstęp na dole */
border: none; /* Bez obramowania */
}
.lesson-duration-label {
font-weight: 700; /* Pogrubienie dla etykiety */
color: #6c757d; /* Ciemny szary kolor dla etykiety */
margin-right: 5px; /* Odstęp od wartości */
}
.lesson-duration-value {
color: #6c757d; /* Ciemny szary kolor dla wartości */
font-weight: 700; /* Pogrubienie dla wartości */
}
Podświetlanie tekstu z notatkami
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.highlight {
background-color: #cce7ff; /* Highlight color without notes */
position: relative;
display: inline;
}
.highlight.with-note {
background-color: #ffeb3b; /* Highlight color with notes */
}
.note-box {
position: absolute;
background-color: #f9f9f9;
color: #333;
font-size: 14px;
line-height: 1.6;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
max-width: 250px;
z-index: 1000;
white-space: normal;
text-align: left;
display: none; /* Hidden by default */
}
.note-controls {
position: absolute;
top: -30px;
right: -30px;
display: flex;
gap: 10px;
z-index: 10;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
.note-controls.visible {
opacity: 1;
pointer-events: all;
}
.note-controls span {
cursor: pointer;
background-color: gray;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
}
.note-controls span:hover {
background-color: darkgray;
}
document.addEventListener(“DOMContentLoaded”, () => {
/**
* Checks if an element is a header.
*/
const isHeaderElement = (node) => {
while (node) {
if (node.nodeType === 1 && node.tagName.match(/^H[1-5]$/)) {
return true;
}
node = node.parentNode;
}
return false;
};
/**
* Checks if an element is inside a table cell.
*/
const isInsideTable = (node) => {
while (node) {
if (node.tagName === “TD” || node.tagName === “TH”) {
return node;
}
node = node.parentNode;
}
return null;
};
/**
* Checks if an element belongs to the same list item.
*/
const isWithinSameListItem = (selection) => {
if (selection.rangeCount === 0) return false;
const range = selection.getRangeAt(0);
const startContainer = range.startContainer;
const endContainer = range.endContainer;
const getClosestListItem = (node) => {
while (node) {
if (node.nodeType === 1 && node.tagName === “LI”) {
return node;
}
node = node.parentNode;
}
return null;
};
const startListItem = getClosestListItem(startContainer);
const endListItem = getClosestListItem(endContainer);
// Ensure selection is within the same list item
return startListItem === endListItem;
};
/**
* Validates the selection.
* Ensures the selection is within a single header, table cell, or list item.
*/
const isSelectionValid = (selection) => {
if (selection.rangeCount === 0) return false;
const range = selection.getRangeAt(0);
const startContainer = range.startContainer;
const endContainer = range.endContainer;
const startInHeader = isHeaderElement(startContainer);
const endInHeader = isHeaderElement(endContainer);
// Block selection spanning headers
if (startInHeader !== endInHeader) {
return false;
}
const startCell = isInsideTable(startContainer);
const endCell = isInsideTable(endContainer);
// Block selection spanning table cells
if (startCell && endCell && startCell !== endCell) {
return false;
}
// Block selection spanning multiple list items
if (!isWithinSameListItem(selection)) {
return false;
}
return true;
};
/**
* Highlights the selected text.
*/
const wrapTextWithHighlight = (range) => {
const fragment = range.extractContents();
const highlight = document.createElement(“span”);
highlight.className = “highlight”;
highlight.appendChild(fragment);
range.insertNode(highlight);
const noteControls = document.createElement(“div”);
noteControls.className = “note-controls visible”;
const editNote = document.createElement(“span”);
editNote.textContent = “✎”;
editNote.title = “Edit note”;
noteControls.appendChild(editNote);
const removeHighlight = document.createElement(“span”);
removeHighlight.textContent = “x”;
removeHighlight.title = “Remove highlight”;
noteControls.appendChild(removeHighlight);
highlight.style.position = “relative”;
highlight.appendChild(noteControls);
let noteBox = null;
const updateNotePosition = () => {
const rect = highlight.getBoundingClientRect();
if (noteBox) {
noteBox.style.top = `${rect.height}px`;
noteBox.style.left = `${rect.width / 2}px`;
}
};
const hideControlsAndNoteAfterDelay = () => {
setTimeout(() => {
noteControls.classList.remove(“visible”);
if (noteBox) noteBox.style.display = “none”;
}, 3000);
};
// Show controls for 3 seconds after highlighting
hideControlsAndNoteAfterDelay();
highlight.addEventListener(“click”, () => {
noteControls.classList.add(“visible”);
if (noteBox) noteBox.style.display = “block”;
hideControlsAndNoteAfterDelay();
});
editNote.addEventListener(“click”, () => {
const noteText = prompt(“Add or edit a note:”, noteBox?.textContent || “”);
if (noteText) {
if (!noteBox) {
noteBox = document.createElement(“div”);
noteBox.className = “note-box”;
highlight.appendChild(noteBox);
}
noteBox.textContent = noteText;
noteBox.style.display = “block”;
highlight.classList.add(“with-note”);
updateNotePosition();
hideControlsAndNoteAfterDelay();
}
});
removeHighlight.addEventListener(“click”, () => {
const parent = highlight.parentNode;
while (highlight.firstChild) {
parent.insertBefore(highlight.firstChild, highlight);
}
parent.removeChild(highlight);
if (noteBox) noteBox.remove();
});
};
/**
* Handles the mouseup event to validate and apply highlighting.
*/
document.body.addEventListener(“mouseup”, () => {
const selection = window.getSelection();
if (selection.rangeCount > 0 && selection.toString().trim()) {
if (!isSelectionValid(selection)) {
alert(“Zaznaczenie musi być w obrębie jednego akapitu, komórki tabeli lub punktu listy!”);
selection.removeAllRanges();
return;
}
const range = selection.getRangeAt(0);
wrapTextWithHighlight(range);
selection.removeAllRanges();
}
});
});
Did you know?
Your neural signals can travel faster than a Formula 1 car! While an F1 car can reach top speeds of about 370 km/h, electrical impulses in your brain can travel at speeds of up to 432 km/h. That means the speed of thought outpaces one of the fastest machines on the planet!
Structure of the Nervous System
The nervous system is a highly organized network responsible for controlling and coordinating the body’s responses to internal and external stimuli. It is divided into two primary components:
- Central Nervous System (CNS): The CNS consists of the brain and spinal cord, serving as the control center for processing information, generating thoughts, and regulating bodily functions.
- Peripheral Nervous System (PNS): The PNS includes all nerves and neural tissues outside the brain and spinal cord. It connects the CNS to the rest of the body, facilitating communication between the brain, spinal cord, and peripheral tissues.
Central Nervous System (CNS)
The CNS serves as the control center for processing sensory information and generating responses. It is composed of two main structures: the brain and the spinal cord.
Brain
The brain, housed within the skull, is a highly complex organ composed of approximately 86 billion neurons, along with supporting glial cells. It regulates nearly all bodily functions, from basic physiological processes to advanced cognitive functions. The brain’s structure is divided into distinct regions, each with specific roles in processing and integrating information.
Cerebrum
The cerebrum is the largest part of the brain, consisting of two hemispheres (left and right), each controlling the opposite side of the body. Its outer layer, the cerebral cortex, is highly folded with gyri (ridges) and sulci (grooves) to maximize surface area. This cortex contains densely packed neuronal cell bodies, essential for higher-order functions such as cognition, sensory interpretation, and motor control. The cerebrum is further divided into four distinct lobes within each hemisphere, each specializing in different functions.
Lobes of the Cerebrum
- Frontal Lobe: Located at the front of the cerebrum, the frontal lobe is crucial for voluntary movement, decision-making, and aspects of personality.
- Parietal Lobe: Positioned behind the frontal lobe, the parietal lobe processes sensory information, particularly touch and spatial awareness.
- Temporal Lobe: Situated below the lateral sulcus, the temporal lobe plays key roles in memory and auditory processing.
- Occipital Lobe: Located at the back of the brain, the occipital lobe is primarily responsible for visual processing.
White Matter and Gray Matter
Beneath the cerebral cortex, the white matter consists of myelinated axons that link various brain regions, facilitating communication. In contrast, the gray matter, located within the cortex, contains neuronal cell bodies that actively process information, enabling the brain to interpret and respond to sensory input and execute complex behaviors.
Diencephalon
The diencephalon is a central structure positioned beneath the cerebrum and connects it to the brainstem. It houses essential relay and regulatory centers that are critical for various bodily functions.
- Thalamus: Serving as a major relay center for sensory and motor signals, the thalamus directs information from the body to the cerebral cortex, where it undergoes further processing.
- Hypothalamus: Located below the thalamus, the hypothalamus manages key autonomic functions and helps maintain homeostasis. It also produces hormones that influence the pituitary gland, forming a vital link between the nervous and endocrine systems.
- Epithalamus: The epithalamus contains the pineal gland, which secretes melatonin, a hormone important for regulating circadian rhythms, including the sleep-wake cycle.
Brainstem
The brainstem is situated at the base of the brain, serving as a vital connection between the brain and spinal cord. It is composed of three primary regions—the midbrain, pons, and medulla oblongata—each crucial for transmitting information between the brain and the body.
- Midbrain: The uppermost region of the brainstem, the midbrain plays a key role in processing visual and auditory information and coordinating reflexive responses to these stimuli.
- Pons: Located below the midbrain, the pons functions as a bridge between various parts of the brain, facilitating communication and coordination. It also contains nuclei responsible for regulating respiratory rhythms.
- Medulla Oblongata: The medulla, which links the brainstem to the spinal cord, houses centers that manage essential autonomic functions, such as heart rate, blood pressure, and reflexive actions like swallowing and breathing.
Cerebellum
The cerebellum, positioned beneath the cerebrum and behind the brainstem, plays a key role in coordinating movement and maintaining balance. Though smaller in size than the cerebrum, it contains a high density of neurons. The cerebellum is organized into two hemispheres with a highly folded cortex, similar to the cerebral cortex, maximizing surface area to support intricate processing involved in motor control.
- Connections: The cerebellum is attached to the brainstem via cerebellar peduncles, which transmit sensory and motor information between the cerebellum and other brain areas.
Spinal Cord
The spinal cord is a cylindrical structure that extends from the brainstem through the vertebral column, ending around the lumbar region of the lower back. It serves as the main conduit for transmitting signals between the brain and the rest of the body.
Structure of the Spinal Cord
The spinal cord is organized into segments that correspond to the vertebrae of the spine: cervical, thoracic, lumbar, and sacral. Each spinal segment gives rise to spinal nerves that extend to different parts of the body.
- Gray Matter: Located centrally in the spinal cord, gray matter contains the cell bodies of neurons and is involved in processing and relaying sensory and motor information.
- White Matter: Surrounding the gray matter, white matter consists of myelinated axons that form ascending and descending tracts, which carry sensory signals to the brain and motor commands to the body.
Meninges
The brain and spinal cord are encased within three protective layers known as the meninges:
- Dura Mater: The tough, outermost layer that forms a strong, protective sheath around the CNS.
- Arachnoid Mater: The middle layer, featuring a web-like structure filled with cerebrospinal fluid.
- Pia Mater: The innermost layer, adhering closely to the surface of the brain and spinal cord.
Cerebrospinal Fluid (CSF)
CSF is a clear fluid that circulates within the ventricles of the brain and around the spinal cord, cushioning and protecting the CNS.
CSF is produced by the choroid plexus in the brain’s ventricles and flows through the ventricular system, eventually entering the subarachnoid space surrounding the brain and spinal cord. It serves as a shock absorber, delivers nutrients, removes waste, and maintains stable pressure within the CNS.
Blood Supply to the CNS
The central nervous system (CNS) relies on a highly organized vascular network to ensure a continuous supply of oxygen and nutrients. At the core of this network is the Circle of Willis, a circular arrangement of arteries at the base of the brain that provides an essential backup system for maintaining blood flow. If one part of the vascular pathway becomes obstructed, this structure allows blood to reroute, minimizing the risk of ischemic injury to critical areas.
Key Arteries of the Circle of Willis
- Internal Carotid Arteries: These primary vessels ascend from the common carotid arteries in the neck, entering the skull to supply extensive portions of the cerebrum. Upon entering the cranial cavity, each internal carotid artery branches to form the Anterior Cerebral Artery (ACA) and a segment of the Middle Cerebral Artery (MCA).
- Anterior Cerebral Arteries (ACA): Branching from the internal carotid arteries, the ACAs extend forward and medially to supply the medial portions of the frontal lobes and superior medial parietal lobes. The left and right ACAs are connected by the Anterior Communicating Artery (ACoA), completing the anterior portion of the Circle of Willis and facilitating blood flow between hemispheres if needed.
- Middle Cerebral Arteries (MCA): The MCAs, which branch from the internal carotid arteries outside the Circle of Willis, supply the lateral surfaces of the cerebral hemispheres. These regions include the primary motor and sensory areas responsible for movements and sensations in the face, arms, and hands, as well as language centers, making the MCA critical for essential motor, sensory, and language functions.
- Posterior Cerebral Arteries (PCA): Originating from the Basilar Artery—itself formed by the union of the two vertebral arteries—the PCAs supply the occipital lobes and inferior sections of the temporal lobes, key areas for visual processing and recognition. The Posterior Communicating Arteries (PCoA) connect the PCAs to the internal carotid arteries, completing the posterior part of the Circle of Willis and bridging anterior and posterior circulations.
- Basilar Artery: Running along the brainstem, the basilar artery, formed by the convergence of the left and right vertebral arteries, supplies blood to the brainstem, cerebellum, and portions of the occipital lobes. It divides into the two posterior cerebral arteries (PCAs), completing the posterior portion of the Circle of Willis and ensuring adequate blood flow to essential brain regions.
Blood Supply to the Spinal Cord
The spinal cord, an extension of the CNS, receives its blood supply from different sources to ensure adequate oxygenation along its length:
- Anterior Spinal Artery: Originating from branches of the vertebral arteries, this artery runs along the front of the spinal cord, supplying the anterior two-thirds of the cord.
- Posterior Spinal Arteries: These paired arteries run along the back of the spinal cord, supplying the posterior one-third.