Структурно-логічна схема ОПП ГТБВІВТ (Навчальний план 2026)
Перейти до навігації
Перейти до пошуку
<style>
body {
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #f1f5f9;
padding: 15px;
margin: 0;
user-select: none;
}
h2 { text-align: center; color: #1e293b; margin: 0 0 5px 0; font-size: 18px; }
.subtitle { text-align: center; color: #64748b; margin-bottom: 15px; font-size: 12px; }
.matrix-wrapper {
position: relative;
width: 100%;
box-sizing: border-box;
}
.matrix {
display: flex;
gap: 8px;
position: relative;
z-index: 2;
width: 100%;
}
.column {
flex: 1;
min-width: 135px;
background: #ffffff;
border: 1px dashed #cbd5e1;
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 840px;
box-sizing: border-box;
position: relative;
padding-bottom: 45px; /* Місце для лічильника внизу */
}
.column.drag-over { background: #f8fafc; border-color: #3b82f6; }
.header {
font-weight: bold; text-align: center; padding: 6px;
background: #334155; color: white; border-radius: 4px; font-size: 12px;
pointer-events: none;
}
/* СТИЛЬ БЛОКУ ВИБІРКОВИХ КОМПОНЕНТІВ */
.elective-section {
margin-top: auto; /* Притискає блок донизу колонки */
background: #f8fafc;
border: 1.5px dashed #cbd5e1;
border-radius: 6px;
padding: 6px;
display: flex;
flex-direction: column;
gap: 8px;
min-height: 48px;
box-sizing: border-box;
}
.elective-header {
font-size: 9px;
font-weight: 700;
color: #64748b;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.4px;
padding-bottom: 3px;
border-bottom: 1px dashed #cbd5e1;
pointer-events: none;
}
.elective-empty {
font-size: 9px;
color: #94a3b8;
text-align: center;
font-style: italic;
padding: 4px 0;
pointer-events: none;
}
/* СТИЛЬ ЛІЧИЛЬНИКА КРЕДИТІВ ВНИЗУ */
.semester-summary {
position: absolute; bottom: 6px; left: 6px; right: 6px;
background: #e2e8f0; color: #1e293b; text-align: center;
font-weight: bold; font-size: 11px; padding: 6px; border-radius: 4px;
border: 1px solid #cbd5e1; pointer-events: none;
}
.block {
position: relative; border-radius: 5px; padding: 16px 6px 16px 6px;
min-height: 58px; display: flex; align-items: center; justify-content: center;
text-align: center; font-size: 10px; cursor: grab;
box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1.5px solid transparent;
box-sizing: border-box; line-height: 1.2;
}
.block:active { cursor: grabbing; }
.block.dragging { opacity: 0.3; background-color: #cbd5e1 !important; border-color: #94a3b8 !important; }
.code {
position: absolute; left: 4px; top: 2px;
font-size: 8.5px; font-weight: bold; color: rgba(0,0,0,0.4);
}
.credits {
position: absolute; right: 4px; bottom: 2px;
font-size: 8.5px; font-weight: bold; padding: 1px 2px;
background: rgba(0,0,0,0.05); border-radius: 2px; color: #475569;
}
.blue { background-color: #DCE6F1; border-color: #B4C6E7; color: #1F4E79; }
.green { background-color: #E2EFDA; border-color: #C6E0B4; color: #375623; }
.yellow { background-color: #FFF2CC; border-color: #FFE699; color: #7F6000; font-weight: bold; }
.gray { background-color: #F2F2F2; border-color: #D9D9D9; color: #595959; }
.pink { background-color: #FCE4D6; border-color: #F8CBAD; color: #C65911; font-weight: bold; }
.orange { background-color: #e5a872; border-color: #d8965f; color: #ffffff; font-weight: bold; }
.purple { background-color: #a89bc9; border-color: #9687ba; color: #ffffff; font-weight: bold; }
#arrows-svg {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 1; pointer-events: none;
}
</style>
</head> <body>
Структурно-логічна схема ОПП ГТБВІВТ (Навчальний план 2026)
Всі 8 семестрів на екрані. Кредити внизу рахуються автоматично при перетягуванні!
<svg id="arrows-svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="5" markerHeight="5" orient="auto-start-reverse">
<path d="M 0 1.5 L 7 5 L 0 8.5 z" fill="#64748b"/>
</marker>
</defs>
</svg>
Сем. 1
ОК2Іноземна мова3 кр.
ОК3Українська державність і культура4 кр.
ОК4Основи цифрових технологій3 кр.
ОК6Хімія3 кр.
ОК7Вища математика5 кр.
ОК11Метрологія і стандартизація3 кр.
ОК12Інженерна графіка3 кр.
ОК21Інженерна геодезія та геоінформатика4 кр.
Вибіркові компоненти
Не передбачено
Всього: 0 кр.
Сем. 2
ОК2Іноземна мова (прод.)3 кр.
ОК1Українська мова (за проф.)3 кр.
ОК5Екологія3 кр.
ОК8Физика3 кр.
ОК9Теоретична механіка5 кр.
ОК16Гідравліка4 кр.
ОК20Основи національного спротиву5 кр.
ОК22Навчальна практика з геодезії6 кр.
Вибіркові компоненти
Не передбачено
Всього: 0 кр.
Сем. 3
ОК2Іноземна мова (прод.)3 кр.
ОК14Інженерна геологія та гідрогеологія3.5 кр.
ОК24Механіка ґрунтів та фундаменти4 кр.
ОК25Основи раціонального природокористування та природообл...4 кр.
ОК23Будівельне матеріалознавство3 кр.
ОК16Гідравліка (продовження)5 кр.
Вибіркові компоненти
Не передбачено
СпКВ2Спецкурс за вибором3 кр.
МДМейджор6 кр.
Всього: 0 кр.
Сем. 4
ОК2Іноземна мова (завершення)3 кр.
ОК13Використання та охорона водних ресурсів3 кр.
ОК17Опір матеріалів та буд. механіка4.5 кр.
ОК27Навчальна практика за ОП3 кр.
ОК28Виробнича база будівництва3 кр.
ОК37Економіка будівництва3 кр.
Вибіркові компоненти
Не передбачено
СпКВ1Спецкурс за вибором3 кр.
МДМейджор6 кр.
Всього: 0 кр.
Сем. 5
ОК18Інженерна гідрологія та регулювання стоку5 кр.
ОК26Насоси та насосні станції4.5 кр.
ОК29Будівельні конструкції4 кр.
Вибіркові компоненти
Не передбачено
МДМейджор6 кр.
МНМайнор6 кр.
Всього: 0 кр.
Сем. 6
ОК15Філософія3 кр.
ОК30Гідротехнічні споруди6 кр.
ОК31Організація і технологія буд. робіт4 кр.
ОК36Гідроінформатика3.5 кр.
ОК19Навчальна практика з гідрології3 кр.
ОК38Виробнича практика3 кр.
Вибіркові компоненти
Не передбачено
МДМейджор6 кр.
МНМайнор6 кр.
Всього: 0 кр.
Сем. 7
ОК32Водна інженерія та водні технології5 кр.
ОК30Гідротехнічні споруди (прод.)4 кр.
ОК33Основи техн. експлуатації споруд3 кр.
Вибіркові компоненти
Не передбачено
МДМейджор12 кр.
МНМайнор6 кр.
Всього: 0 кр.
Сем. 8
ОК32Водна інженерія та технології (прод.)4 кр.
ОК33Основи техн. експлуатації (прод.)3 кр.
ОК10Охорона праці в галузі3 кр.
ОК34Організація гідротехн. будівництва5 кр.
ОК35Кошторисна вартість будівництва3 кр.
ОК39Переддипломна практика3 кр.
ОК40Кваліфікаційна бакалаврська робота9 кр.
Вибіркові компоненти
Не передбачено
Всього: 0 кр.
<script>
const connections = [
{ src: 'math1', dst: 'phys' },
{ src: 'math1', dst: 'mech1' },
{ src: 'mech1', dst: 'sopromat' },
{ src: 'chem', dst: 'materials' },
{ src: 'geom', dst: 'b16' },
{ src: 'hydr1', dst: 'hydr2' },
{ src: 'hydr2', dst: 'hydro_inf' },
{ src: 'sopromat', dst: 'struct' },
{ src: 'hydro_inf', dst: 'hydro_str1' },
{ src: 'hydro_str1', dst: 'hydro_str2' },
{ src: 'org1', dst: 'b54' },
{ src: 'b54', dst: 'diploma' }
];
function drawConnections() {
const svg = document.getElementById('arrows-svg');
svg.querySelectorAll('path').forEach(p => p.remove());
const wrapperRect = document.querySelector('.matrix-wrapper').getBoundingClientRect();
connections.forEach(conn => {
const srcEl = document.getElementById(conn.src);
const dstEl = document.getElementById(conn.dst);
if (srcEl && dstEl) {
const srcRect = srcEl.getBoundingClientRect();
const dstRect = dstEl.getBoundingClientRect();
const x_start = srcRect.right - wrapperRect.left;
const y_start = srcRect.top + srcRect.height / 2 - wrapperRect.top;
const x_end = dstRect.left - wrapperRect.left;
const y_end = dstRect.top + dstRect.height / 2 - wrapperRect.top;
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
let dStr = ;
if (x_end > x_start) {
const x_mid = x_start + (x_end - x_start) / 2;
dStr = `M ${x_start},${y_start} L ${x_mid},${y_start} L ${x_mid},${y_end} L ${x_end},${y_end}`;
} else {
const x_mid = x_start + 8;
dStr = `M ${x_start},${y_start} L ${x_mid},${y_start} L ${x_mid},${y_end + 25} L ${x_end - 8},${y_end + 25} L ${x_end - 8},${y_end} L ${x_end},${y_end}`;
}
path.setAttribute('d', dStr);
path.setAttribute('fill', 'none');
path.setAttribute('stroke', '#64748b');
path.setAttribute('stroke-width', '1.2');
path.setAttribute('marker-end', 'url(#arrow)');
svg.appendChild(path);
}
});
}
// ДИНАМІЧНИЙ ПІДРАХУНОК КРЕДИТІВ СЕМЕСТРУ ТА ПЕРЕМИКАННЯ НАПИСУ "НЕ ПЕРЕДБАЧЕНО"
function calculateCredits() {
document.querySelectorAll('.column').forEach(column => {
let total = 0;
column.querySelectorAll('.block').forEach(block => {
total += parseFloat(block.getAttribute('data-credits') || 0);
});
column.querySelector('.sem-total').innerText = total;
// Керування написом у порожній зоні вибіркових курсів
const electiveSec = column.querySelector('.elective-section');
if (electiveSec) {
const emptyMsg = electiveSec.querySelector('.elective-empty');
if (emptyMsg) {
const hasBlocks = electiveSec.querySelectorAll('.block').length > 0;
emptyMsg.style.display = hasBlocks ? 'none' : 'block';
}
}
});
}
const columns = document.querySelectorAll('.column');
document.querySelectorAll('.block').forEach(block => {
block.addEventListener('dragstart', () => block.classList.add('dragging'));
block.addEventListener('dragend', () => {
block.classList.remove('dragging');
drawConnections();
calculateCredits();
});
});
columns.forEach(column => {
column.addEventListener('dragover', (e) => {
e.preventDefault();
column.classList.add('drag-over');
const draggingBlock = document.querySelector('.dragging');
if (!draggingBlock) return;
const afterElement = getDragAfterElement(column, e.clientY);
const electiveSec = column.querySelector('.elective-section');
if (afterElement) {
// Якщо курсор знаходиться над обов'язковою зоною, але після неї є елементи вибіркової
if (electiveSec && electiveSec.contains(afterElement) && e.clientY < electiveSec.getBoundingClientRect().top) {
column.insertBefore(draggingBlock, electiveSec);
} else {
afterElement.parentNode.insertBefore(draggingBlock, afterElement);
}
} else {
if (electiveSec && e.clientY >= electiveSec.getBoundingClientRect().top) {
electiveSec.appendChild(draggingBlock);
} else if (electiveSec) {
column.insertBefore(draggingBlock, electiveSec);
} else {
column.insertBefore(draggingBlock, column.querySelector('.semester-summary'));
}
}
drawConnections();
});
column.addEventListener('dragleave', () => column.classList.remove('drag-over'));
column.addEventListener('drop', () => {
column.classList.remove('drag-over');
drawConnections();
calculateCredits();
});
});
function getDragAfterElement(column, y) {
const draggableElements = [...column.querySelectorAll('.block:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
window.addEventListener('load', () => {
setTimeout(() => {
drawConnections();
calculateCredits();
}, 300);
});
window.addEventListener('resize', () => {
drawConnections();
});
</script>