Maxim Dolgolyov
033c941b02
- js/textbook-xp-widget.js: shared модуль (monkey-patch addXp + para-pill auto-award для учебников без addXp) - physics8_thermal/electro/optics: добавлены теги /js/xp.js и /js/textbook-xp-widget.js — теперь все 74 addXp-хука пробрасываются в глобальный gamification (через self-award endpoint с дебаунсом) - chemistry_9 + physics_9: те же теги. Каждый первый клик по .para-pill даёт +5 XP в систему (без правок 23000 LOC) - Изначальный XP в учебниках не теряется — localStorage остаётся кешем, сервер — источник правды
10659 lines
840 KiB
HTML
10659 lines
840 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Химия 9 — §1–60</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
|
||
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
|
||
onload="renderMathInElement(document.body,{delimiters:[{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true}],throwOnError:false})"></script>
|
||
<script src="/js/xp.js" defer></script>
|
||
<script src="/js/textbook-xp-widget.js" defer></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
--pri:#b45309; --pri2:#92400e;
|
||
--acc:#d97706;
|
||
--ok:#10b981; --ok-bg:#d1fae5;
|
||
--fail:#ef4444; --fail-bg:#fee2e2;
|
||
--warn:#f59e0b; --warn-bg:#fef3c7;
|
||
--bg:#fffbeb; --card:#fff;
|
||
--text:#1c1917; --muted:#78716c;
|
||
--border:#fde68a;
|
||
--sh:0 2px 10px rgba(180,83,9,.08)
|
||
}
|
||
.dark{--bg:#1c1917;--card:#292524;--text:#e7e5e4;--muted:#a8a29e;--border:#44403c}
|
||
.ico{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex-shrink:0}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html,body{height:100%;overflow:hidden}
|
||
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}
|
||
|
||
.hdr{background:linear-gradient(110deg,#7c2d12 0%,#b45309 55%,#d97706 100%);color:#fff;padding:22px 20px 18px;position:relative;overflow:hidden;border-bottom:2px solid rgba(255,180,50,.13)}
|
||
.hdr::before{content:'МЕТАЛЛЫ';position:absolute;right:-6px;top:-8%;font-size:clamp(4rem,16vw,12rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,220,100,.07);line-height:1;pointer-events:none;user-select:none;z-index:0}
|
||
.hdr h1{font-size:1.45rem;font-weight:900;position:relative;z-index:1;letter-spacing:-.01em}
|
||
.hdr p{font-size:.8rem;opacity:.7;margin-top:6px;position:relative;z-index:1}
|
||
|
||
/* ── Para-selector grid (like physics) ── */
|
||
.para-selector{margin-bottom:24px}
|
||
.psel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
|
||
@media(max-width:560px){.psel-grid{grid-template-columns:repeat(2,1fr)}}
|
||
.psel-card{position:relative;overflow:hidden;border-radius:14px;padding:14px 14px 12px;border:1.5px solid transparent;transition:box-shadow .25s,transform .2s,border-color .25s}
|
||
.psel-card:hover{transform:translateY(-3px)}
|
||
.psel-card::before{position:absolute;top:-4px;right:9px;font-size:3.8rem;font-weight:900;line-height:1;pointer-events:none;opacity:.07;z-index:0;letter-spacing:-.02em}
|
||
.psel-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:14px 14px 0 0}
|
||
.psel-card-hdr{position:relative;z-index:1;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
|
||
.psel-card-title{display:block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
|
||
.psel-card-sub{display:block;font-size:.6rem;font-weight:500;color:var(--muted);opacity:.85}
|
||
.psel-card-pills{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:4px}
|
||
.psel-card .para-pill{width:30px;height:27px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;font-size:.67rem;font-weight:700;border-radius:7px;transition:transform .15s,box-shadow .15s,background .15s,color .15s}
|
||
.psel-card .para-pill:hover{transform:scale(1.15);z-index:2}
|
||
/* I — Строение и свойства — amber */
|
||
.psel-c1{background:linear-gradient(135deg,rgba(180,83,9,.05),rgba(180,83,9,.01));border-color:rgba(180,83,9,.18)}
|
||
.psel-c1:hover{border-color:rgba(180,83,9,.38);box-shadow:0 6px 24px rgba(180,83,9,.12)}
|
||
.psel-c1::before{content:'I';color:#b45309}.psel-c1::after{background:linear-gradient(90deg,#b45309,#d97706)}
|
||
.psel-c1 .psel-card-title{color:#b45309}
|
||
.psel-c1 .para-pill:hover{box-shadow:0 2px 10px rgba(180,83,9,.25)}
|
||
.psel-c1 .para-pill.active{background:#b45309;border-color:#b45309;color:#fff;box-shadow:0 2px 8px rgba(180,83,9,.35)}
|
||
/* II — Al и Fe (обзор) — deep orange */
|
||
.psel-c2{background:linear-gradient(135deg,rgba(194,65,12,.05),rgba(194,65,12,.01));border-color:rgba(194,65,12,.18)}
|
||
.psel-c2:hover{border-color:rgba(194,65,12,.38);box-shadow:0 6px 24px rgba(194,65,12,.12)}
|
||
.psel-c2::before{content:'II';color:#c2410c}.psel-c2::after{background:linear-gradient(90deg,#c2410c,#f97316)}
|
||
.psel-c2 .psel-card-title{color:#c2410c}
|
||
.psel-c2 .para-pill:hover{box-shadow:0 2px 10px rgba(194,65,12,.25)}
|
||
.psel-c2 .para-pill.active{background:#c2410c;border-color:#c2410c;color:#fff;box-shadow:0 2px 8px rgba(194,65,12,.35)}
|
||
/* III — Электролиз — blue */
|
||
.psel-c3{background:linear-gradient(135deg,rgba(29,78,216,.05),rgba(29,78,216,.01));border-color:rgba(29,78,216,.18)}
|
||
.psel-c3:hover{border-color:rgba(29,78,216,.38);box-shadow:0 6px 24px rgba(29,78,216,.12)}
|
||
.psel-c3::before{content:'III';color:#1d4ed8}.psel-c3::after{background:linear-gradient(90deg,#1d4ed8,#60a5fa)}
|
||
.psel-c3 .psel-card-title{color:#1d4ed8}
|
||
.psel-c3 .para-pill:hover{box-shadow:0 2px 10px rgba(29,78,216,.25)}
|
||
.psel-c3 .para-pill.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:0 2px 8px rgba(29,78,216,.35)}
|
||
/* IV — Mg и Ca — green */
|
||
.psel-c4{background:linear-gradient(135deg,rgba(5,150,105,.05),rgba(5,150,105,.01));border-color:rgba(5,150,105,.18)}
|
||
.psel-c4:hover{border-color:rgba(5,150,105,.38);box-shadow:0 6px 24px rgba(5,150,105,.12)}
|
||
.psel-c4::before{content:'IV';color:#059669}.psel-c4::after{background:linear-gradient(90deg,#059669,#34d399)}
|
||
.psel-c4 .psel-card-title{color:#059669}
|
||
.psel-c4 .para-pill:hover{box-shadow:0 2px 10px rgba(5,150,105,.25)}
|
||
.psel-c4 .para-pill.active{background:#059669;border-color:#059669;color:#fff;box-shadow:0 2px 8px rgba(5,150,105,.35)}
|
||
/* V — Алюминий — teal */
|
||
.psel-c5{background:linear-gradient(135deg,rgba(8,145,178,.05),rgba(8,145,178,.01));border-color:rgba(8,145,178,.18)}
|
||
.psel-c5:hover{border-color:rgba(8,145,178,.38);box-shadow:0 6px 24px rgba(8,145,178,.12)}
|
||
.psel-c5::before{content:'V';color:#0891b2}.psel-c5::after{background:linear-gradient(90deg,#0891b2,#22d3ee)}
|
||
.psel-c5 .psel-card-title{color:#0891b2}
|
||
.psel-c5 .para-pill:hover{box-shadow:0 2px 10px rgba(8,145,178,.25)}
|
||
.psel-c5 .para-pill.active{background:#0891b2;border-color:#0891b2;color:#fff;box-shadow:0 2px 8px rgba(8,145,178,.35)}
|
||
/* VI — Железо — red */
|
||
.psel-c6{background:linear-gradient(135deg,rgba(220,38,38,.05),rgba(220,38,38,.01));border-color:rgba(220,38,38,.18)}
|
||
.psel-c6:hover{border-color:rgba(220,38,38,.38);box-shadow:0 6px 24px rgba(220,38,38,.12)}
|
||
.psel-c6::before{content:'VI';color:#dc2626}.psel-c6::after{background:linear-gradient(90deg,#dc2626,#f87171)}
|
||
.psel-c6 .psel-card-title{color:#dc2626}
|
||
.psel-c6 .para-pill:hover{box-shadow:0 2px 10px rgba(220,38,38,.25)}
|
||
.psel-c6 .para-pill.active{background:#dc2626;border-color:#dc2626;color:#fff;box-shadow:0 2px 8px rgba(220,38,38,.35)}
|
||
/* dark overrides */
|
||
.dark .psel-c1{background:linear-gradient(135deg,rgba(180,83,9,.09),rgba(180,83,9,.02))}.dark .psel-c1::before{color:#d97706}.dark .psel-c1 .psel-card-title{color:#d97706}
|
||
.dark .psel-c2{background:linear-gradient(135deg,rgba(194,65,12,.09),rgba(194,65,12,.02))}.dark .psel-c2::before{color:#f97316}.dark .psel-c2 .psel-card-title{color:#f97316}
|
||
.dark .psel-c3{background:linear-gradient(135deg,rgba(29,78,216,.09),rgba(29,78,216,.02))}.dark .psel-c3::before{color:#60a5fa}.dark .psel-c3 .psel-card-title{color:#60a5fa}
|
||
.dark .psel-c4{background:linear-gradient(135deg,rgba(5,150,105,.09),rgba(5,150,105,.02))}.dark .psel-c4::before{color:#34d399}.dark .psel-c4 .psel-card-title{color:#34d399}
|
||
.dark .psel-c5{background:linear-gradient(135deg,rgba(8,145,178,.09),rgba(8,145,178,.02))}.dark .psel-c5::before{color:#22d3ee}.dark .psel-c5 .psel-card-title{color:#22d3ee}
|
||
.dark .psel-c6{background:linear-gradient(135deg,rgba(220,38,38,.09),rgba(220,38,38,.02))}.dark .psel-c6::before{color:#f87171}.dark .psel-c6 .psel-card-title{color:#f87171}
|
||
|
||
/* ── ТЭД §1-13 (синий) ── */
|
||
.psel-ted{background:linear-gradient(135deg,rgba(29,78,216,.05),rgba(29,78,216,.01));border-color:rgba(29,78,216,.18)}
|
||
.psel-ted:hover{border-color:rgba(29,78,216,.38);box-shadow:0 6px 24px rgba(29,78,216,.12)}
|
||
.psel-ted::after{background:linear-gradient(90deg,#1d4ed8,#60a5fa)}
|
||
.psel-ted .psel-card-title{color:#1d4ed8}
|
||
.psel-ted .para-pill.active{background:#1d4ed8;border-color:#1d4ed8;color:#fff;box-shadow:0 2px 8px rgba(29,78,216,.35)}
|
||
/* ── ОВР §14-21 (фиолетовый) ── */
|
||
.psel-ovr{background:linear-gradient(135deg,rgba(124,58,237,.05),rgba(124,58,237,.01));border-color:rgba(124,58,237,.18)}
|
||
.psel-ovr:hover{border-color:rgba(124,58,237,.38);box-shadow:0 6px 24px rgba(124,58,237,.12)}
|
||
.psel-ovr::after{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
|
||
.psel-ovr .psel-card-title{color:#7c3aed}
|
||
.psel-ovr .para-pill.active{background:#7c3aed;border-color:#7c3aed;color:#fff;box-shadow:0 2px 8px rgba(124,58,237,.35)}
|
||
/* ── Неметаллы C,Si §22-30 (зелёный) ── */
|
||
.psel-csi{background:linear-gradient(135deg,rgba(5,150,105,.05),rgba(5,150,105,.01));border-color:rgba(5,150,105,.18)}
|
||
.psel-csi:hover{border-color:rgba(5,150,105,.38);box-shadow:0 6px 24px rgba(5,150,105,.12)}
|
||
.psel-csi::after{background:linear-gradient(90deg,#059669,#34d399)}
|
||
.psel-csi .psel-card-title{color:#059669}
|
||
.psel-csi .para-pill.active{background:#059669;border-color:#059669;color:#fff;box-shadow:0 2px 8px rgba(5,150,105,.35)}
|
||
/* ── Галогены/сера/азот §31-39 (циановый) ── */
|
||
.psel-hal{background:linear-gradient(135deg,rgba(8,145,178,.05),rgba(8,145,178,.01));border-color:rgba(8,145,178,.18)}
|
||
.psel-hal:hover{border-color:rgba(8,145,178,.38);box-shadow:0 6px 24px rgba(8,145,178,.12)}
|
||
.psel-hal::after{background:linear-gradient(90deg,#0891b2,#22d3ee)}
|
||
.psel-hal .psel-card-title{color:#0891b2}
|
||
.psel-hal .para-pill.active{background:#0891b2;border-color:#0891b2;color:#fff;box-shadow:0 2px 8px rgba(8,145,178,.35)}
|
||
/* ── Органика §53-60 (розовый) ── */
|
||
.psel-org{background:linear-gradient(135deg,rgba(225,29,72,.05),rgba(225,29,72,.01));border-color:rgba(225,29,72,.18)}
|
||
.psel-org:hover{border-color:rgba(225,29,72,.38);box-shadow:0 6px 24px rgba(225,29,72,.12)}
|
||
.psel-org::after{background:linear-gradient(90deg,#e11d48,#fb7185)}
|
||
.psel-org .psel-card-title{color:#e11d48}
|
||
.psel-org .para-pill.active{background:#e11d48;border-color:#e11d48;color:#fff;box-shadow:0 2px 8px rgba(225,29,72,.35)}
|
||
/* dark overrides for new themes */
|
||
.dark .psel-ted .psel-card-title{color:#60a5fa}
|
||
.dark .psel-ovr .psel-card-title{color:#a78bfa}
|
||
.dark .psel-csi .psel-card-title{color:#34d399}
|
||
.dark .psel-hal .psel-card-title{color:#22d3ee}
|
||
.dark .psel-org .psel-card-title{color:#fb7185}
|
||
|
||
.tabs{display:flex;gap:4px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
|
||
.tabs::-webkit-scrollbar{display:none}
|
||
.tab{padding:8px 14px;border:2px solid var(--border);border-radius:10px;font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s;background:var(--card);color:var(--muted);flex-shrink:0}
|
||
.tab:hover{border-color:var(--pri);color:var(--pri)}
|
||
.tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
|
||
.content{max-width:800px;margin:0 auto;padding:16px 14px;display:none}
|
||
.content.active{display:block}
|
||
|
||
.section-title{font-size:1.05rem;font-weight:800;margin-bottom:12px;color:var(--pri);display:flex;align-items:center;gap:8px}
|
||
.section-title i{opacity:.7}
|
||
|
||
.formula-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
|
||
@media(max-width:560px){.formula-grid{grid-template-columns:1fr}}
|
||
.fcard{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--sh)}
|
||
.fcard.highlight{border-color:var(--pri);background:linear-gradient(135deg,rgba(180,83,9,.04),rgba(217,119,6,.04))}
|
||
.fcard h3{font-size:.8rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
|
||
.fcard .main-f{font-size:1.05rem;font-weight:700;text-align:center;margin:8px 0;padding:10px;background:rgba(180,83,9,.06);border-radius:9px;font-family:'JetBrains Mono',monospace}
|
||
.fcard p{font-size:.83rem;color:var(--muted);line-height:1.7;margin-top:6px}
|
||
.fcard ul{font-size:.83rem;color:var(--muted);line-height:1.8;padding-left:18px;margin-top:6px}
|
||
|
||
.eq-box{background:var(--card);border:2px solid var(--border);border-left:5px solid var(--pri);border-radius:12px;padding:14px 18px;margin-bottom:14px;box-shadow:var(--sh)}
|
||
.eq-box h3{font-size:.88rem;font-weight:700;color:var(--pri);margin-bottom:8px}
|
||
.eq{display:block;font-family:'JetBrains Mono',monospace;font-size:.93rem;font-weight:600;background:rgba(180,83,9,.06);border-radius:8px;padding:7px 14px;margin:5px 0;line-height:1.7}
|
||
.eq-note{font-size:.79rem;color:var(--muted);margin-top:6px;line-height:1.65;padding-left:4px}
|
||
|
||
.tbl{width:100%;border-collapse:collapse;font-size:.82rem;margin:10px 0 18px;border-radius:10px;overflow:hidden}
|
||
.tbl th{background:var(--pri);color:#fff;padding:9px 10px;text-align:left;font-weight:700}
|
||
.tbl td{padding:8px 10px;border-bottom:1px solid var(--border)}
|
||
.tbl tr:last-child td{border-bottom:none}
|
||
.tbl tr:hover td{background:rgba(180,83,9,.04)}
|
||
|
||
.q-list{font-size:.85rem;line-height:1.9;color:var(--muted);padding-left:20px}
|
||
.q-list li{margin-bottom:4px}
|
||
.def-box{background:rgba(180,83,9,.07);border:2px solid rgba(180,83,9,.25);border-radius:12px;padding:14px 18px;margin-bottom:16px;font-size:.88rem;line-height:1.7}
|
||
.def-box strong{color:var(--pri)}
|
||
hr.divider{border:none;border-top:1px solid var(--border);margin:20px 0}
|
||
|
||
/* ── Ряд активности ── */
|
||
.act-wrap{margin-bottom:20px}
|
||
.act-title{font-size:.78rem;font-weight:700;color:var(--muted);text-align:center;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
|
||
.act-series{display:flex;border-radius:12px;overflow:hidden;border:2px solid var(--border);margin-bottom:6px}
|
||
.az{flex:1;padding:10px 8px;text-align:center;min-width:0}
|
||
.az-active{background:#d1fae5}
|
||
.az-medium{background:#fef3c7}
|
||
.az-h2{background:#f5f5f4;flex:0 0 50px;display:flex;align-items:center;justify-content:center}
|
||
.az-inactive{background:#fee2e2}
|
||
.az-lbl{font-size:.67rem;font-weight:700;text-transform:uppercase;margin-bottom:4px;opacity:.7}
|
||
.az-active .az-lbl{color:#065f46}
|
||
.az-medium .az-lbl{color:#92400e}
|
||
.az-inactive .az-lbl{color:#991b1b}
|
||
.az-metals{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:700;line-height:1.9}
|
||
.az-active .az-metals{color:#065f46}
|
||
.az-medium .az-metals{color:#92400e}
|
||
.az-h2 .az-metals{color:#44403c;font-size:.9rem}
|
||
.az-inactive .az-metals{color:#991b1b}
|
||
.az-note{font-size:.7rem;margin-top:4px;opacity:.75;line-height:1.4}
|
||
.act-arrow{font-size:.75rem;color:var(--muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
|
||
.act-arrow-line{flex:1;height:1px;background:var(--border)}
|
||
|
||
/* ── Диаграмма температур плавления ── */
|
||
.melt-chart{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:20px;box-shadow:var(--sh)}
|
||
.melt-chart h3{font-size:.8rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
|
||
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px}
|
||
.bar-metal{width:28px;font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;color:var(--pri);flex-shrink:0;text-align:right}
|
||
.bar-track{flex:1;background:rgba(180,83,9,.1);border-radius:4px;height:20px;position:relative;overflow:visible}
|
||
.bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--pri),var(--acc));display:flex;align-items:center;padding-left:6px;min-width:32px;position:relative}
|
||
.bar-fill.cold{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
|
||
.bar-temp{font-size:.7rem;font-weight:700;color:#fff;white-space:nowrap}
|
||
.bar-temp.outside{color:var(--muted);position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
|
||
|
||
/* ── Задачи и тест ── */
|
||
.score-bar{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:14px;font-size:.85rem;font-weight:600}
|
||
.chip{padding:5px 14px;border-radius:50px;display:flex;align-items:center;gap:5px}
|
||
.chip-ok{background:var(--ok-bg);color:#065f46}
|
||
.chip-tot{background:var(--card);color:var(--muted);border:1px solid var(--border)}
|
||
.prog-wrap{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:16px}
|
||
.prog-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:3px;transition:width .4s}
|
||
|
||
.task-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:var(--sh);margin-bottom:12px}
|
||
.task-num{font-size:.72rem;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
|
||
.task-text{font-size:.97rem;font-weight:700;line-height:1.85;margin-bottom:14px}
|
||
.task-hint{font-size:.8rem;color:var(--muted);margin-bottom:12px;display:flex;align-items:flex-start;gap:6px}
|
||
.task-hint i{margin-top:2px;color:var(--acc);flex-shrink:0}
|
||
|
||
.ans-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||
.ans-inp{width:110px;padding:11px 10px;border:2px solid var(--border);border-radius:10px;font-size:1.05rem;font-family:'JetBrains Mono',monospace;text-align:center;outline:none;background:var(--card);color:var(--text);transition:.18s}
|
||
.ans-inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(180,83,9,.12)}
|
||
.unit-lbl{font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
|
||
.btn{padding:11px 20px;border:none;border-radius:10px;font-weight:700;font-size:.84rem;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
|
||
.btn:active{transform:scale(.96)}
|
||
.btn-pri{background:var(--pri);color:#fff}.btn-pri:hover{background:var(--pri2)}
|
||
.btn-ghost{background:transparent;border:2px solid var(--border);color:var(--muted)}.btn-ghost:hover{border-color:var(--pri);color:var(--pri)}
|
||
.btn-next{background:var(--ok);color:#fff}.btn-next:hover{filter:brightness(1.1)}
|
||
|
||
.feedback{padding:13px 18px;border-radius:11px;font-size:.87rem;font-weight:600;display:none;line-height:1.7;margin-top:10px}
|
||
.feedback.show{display:block;animation:pop .28s ease}
|
||
.fb-ok{background:var(--ok-bg);color:#065f46}
|
||
.fb-fail{background:var(--fail-bg);color:#991b1b}
|
||
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
|
||
|
||
/* ── MCQ ── */
|
||
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
|
||
@media(max-width:500px){.opts-grid{grid-template-columns:1fr}}
|
||
.opt-btn{padding:12px 14px;border:2px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);font-size:.85rem;font-weight:600;cursor:pointer;text-align:left;transition:.18s;line-height:1.5;font-family:'Inter',sans-serif}
|
||
.opt-btn:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
|
||
.opt-btn.opt-correct{background:var(--ok-bg)!important;border-color:var(--ok)!important;color:#065f46!important}
|
||
.opt-btn.opt-wrong{background:var(--fail-bg)!important;border-color:var(--fail)!important;color:#991b1b!important}
|
||
.opt-btn:disabled{cursor:default}
|
||
|
||
/* ── Итог ── */
|
||
.summary{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center;box-shadow:var(--sh);display:none}
|
||
.summary.show{display:block;animation:pop .35s ease}
|
||
.summary h2{font-size:1.2rem;font-weight:800;margin-bottom:8px}
|
||
.big-score{font-size:3.5rem;font-weight:900;color:var(--pri);line-height:1;margin:10px 0}
|
||
.sum-grade{color:var(--muted);font-size:.9rem;margin-bottom:20px}
|
||
.sum-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
|
||
|
||
/* ── Навигация по задачам ── */
|
||
.nav-dots{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
|
||
.nav-dot{min-width:30px;height:30px;padding:0 6px;border-radius:7px;border:2px solid var(--border);background:var(--card);font-size:.72rem;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:.15s;color:var(--muted);font-family:'JetBrains Mono',monospace}
|
||
.nav-dot:hover{border-color:var(--pri);color:var(--pri)}
|
||
.nav-dot.nd-cur{background:var(--pri);border-color:var(--pri);color:#fff}
|
||
.nav-dot.nd-ok{background:var(--ok-bg);border-color:var(--ok);color:#065f46}
|
||
.nav-dot.nd-fail{background:var(--fail-bg);border-color:var(--fail);color:#991b1b}
|
||
|
||
/* ── Плавающий справочник ── */
|
||
.ref-toggle{position:fixed;bottom:16px;left:16px;z-index:60;width:46px;height:46px;border-radius:13px;background:var(--pri);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 4px 14px rgba(180,83,9,.3)}
|
||
.ref-panel{position:fixed;bottom:72px;left:16px;z-index:60;width:300px;max-height:72vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:0 8px 30px rgba(0,0,0,.15);display:none;font-size:.8rem;line-height:1.85;scrollbar-width:thin}
|
||
.ref-panel.show{display:block;animation:pop .2s ease}
|
||
.ref-panel h3{font-size:.84rem;font-weight:700;color:var(--pri);margin:12px 0 4px}.ref-panel h3:first-child{margin-top:0}
|
||
.ref-panel .rf{background:rgba(180,83,9,.07);border-radius:8px;padding:5px 10px;margin:3px 0;font-family:'JetBrains Mono',monospace;font-size:.78rem}
|
||
|
||
/* ── Тема ── */
|
||
.theme-btn{position:fixed;top:12px;right:12px;z-index:60;width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--border);cursor:pointer;display:grid;place-items:center;font-size:1rem;box-shadow:var(--sh);color:var(--text)}
|
||
|
||
/* ── Misc ── */
|
||
.dark .ans-inp{background:#1c1917;color:#e7e5e4}
|
||
.dark .fcard,.dark .eq-box,.dark .melt-chart{background:#292524}
|
||
.dark .opt-btn{background:#292524}
|
||
.katex{font-size:1em!important}
|
||
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:rgba(217,119,6,.15);color:#92400e;margin-left:6px}
|
||
.info-row{display:flex;align-items:flex-start;gap:10px;background:rgba(180,83,9,.05);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:.84rem;line-height:1.7;border:1px solid rgba(180,83,9,.12)}
|
||
.info-row i{color:var(--acc);margin-top:2px;flex-shrink:0}
|
||
|
||
/* ── ОВР-схемы ── */
|
||
.ovr-card{background:var(--card);border:2px solid var(--border);border-radius:13px;padding:13px 17px;margin-bottom:10px;box-shadow:var(--sh)}
|
||
.ovr-eq{font-family:'JetBrains Mono',monospace;font-size:.9rem;font-weight:700;background:rgba(180,83,9,.07);border-radius:8px;padding:7px 12px;margin-bottom:9px}
|
||
.ovr-ox{background:#d1fae5;border-left:4px solid #10b981;border-radius:0 7px 7px 0;padding:6px 12px;font-size:.79rem;font-family:'JetBrains Mono',monospace;color:#065f46;margin-bottom:4px}
|
||
.ovr-red{background:#dbeafe;border-left:4px solid #3b82f6;border-radius:0 7px 7px 0;padding:6px 12px;font-size:.79rem;font-family:'JetBrains Mono',monospace;color:#1e3a8a}
|
||
/* ── Применение ── */
|
||
.use-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px;margin-bottom:20px}
|
||
.use-card{background:var(--card);border:2px solid var(--border);border-radius:13px;padding:13px 13px;box-shadow:var(--sh)}
|
||
.use-sym{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:900;color:var(--pri);line-height:1;margin-bottom:3px}
|
||
.use-name{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:7px}
|
||
.use-card ul{font-size:.77rem;color:var(--text);line-height:1.85;padding-left:16px;margin:0}
|
||
/* ── Мнемоника ── */
|
||
.mnem-card{background:linear-gradient(135deg,rgba(180,83,9,.07),rgba(217,119,6,.04));border:2px solid rgba(180,83,9,.18);border-radius:14px;padding:16px 18px;margin-bottom:16px}
|
||
/* ── Интерактивный ряд ── */
|
||
.act-btn-row{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 6px}
|
||
.act-btn{min-width:36px;height:36px;padding:0 7px;border:2px solid var(--border);border-radius:8px;background:var(--card);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.82rem;cursor:pointer;transition:.14s;color:var(--muted)}
|
||
.act-btn:hover:not(.ab-h){border-color:var(--pri);color:var(--pri)}
|
||
.act-btn.ab-a{background:#d1fae5;border-color:#10b981;color:#065f46}
|
||
.act-btn.ab-b{background:#fef3c7;border-color:#f59e0b;color:#92400e}
|
||
.act-btn.ab-h{background:var(--border);color:var(--muted);cursor:default;font-size:.7rem;opacity:.75}
|
||
.act-result{padding:11px 15px;border-radius:10px;font-size:.84rem;font-weight:600;line-height:1.75;margin-top:8px;display:none}
|
||
.act-result.show{display:block;animation:pop .22s ease}
|
||
.act-result.ar-ok{background:#d1fae5;color:#065f46;border:1px solid #10b981}
|
||
.act-result.ar-fail{background:#fee2e2;color:#991b1b;border:1px solid #ef4444}
|
||
.act-mode-btn.active{background:var(--pri)!important;color:#fff!important;border-color:var(--pri)!important}
|
||
/* ── Параграф-фильтр ── */
|
||
.para-pill{padding:6px 13px;border:2px solid var(--border);border-radius:10px;font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s;background:var(--card);color:var(--muted)}
|
||
.para-pill:hover{border-color:var(--pri);color:var(--pri)}
|
||
.para-pill.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
|
||
/* ── §45 Ion animation ── */
|
||
.cell-wrap{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px;margin-bottom:20px;box-shadow:var(--sh)}
|
||
.ion{position:absolute;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:800;font-family:'JetBrains Mono',monospace}
|
||
.ion-na{background:#fed7aa;color:#c2410c;border:2px solid #f97316;animation:s45DL 2.2s ease-in infinite;animation-play-state:paused}
|
||
.ion-cl{background:#bbf7d0;color:#065f46;border:2px solid #10b981;animation:s45DR 2.2s ease-in infinite;animation-play-state:paused}
|
||
.cell-active .ion-na{animation-play-state:running}
|
||
.cell-active .ion-cl{animation-play-state:running}
|
||
@keyframes s45DL{0%{transform:translateX(0);opacity:1}78%{opacity:.9}93%{transform:translateX(-150px);opacity:0}100%{transform:translateX(-150px);opacity:0}}
|
||
@keyframes s45DR{0%{transform:translateX(0);opacity:1}78%{opacity:.9}93%{transform:translateX(150px);opacity:0}100%{transform:translateX(150px);opacity:0}}
|
||
/* ── §45 Step cards ── */
|
||
.step-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;background:var(--card);box-shadow:var(--sh)}
|
||
.step-num{min-width:26px;height:26px;background:var(--pri);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;flex-shrink:0;margin-right:10px}
|
||
.step-row{display:flex;align-items:flex-start}
|
||
/* ── §45 Electrode cards ── */
|
||
.el-card{border-radius:14px;padding:18px;box-shadow:var(--sh)}
|
||
.cathode-card{border:2px solid #3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(37,99,235,.04))}
|
||
.anode-card{border:2px solid #ef4444;background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(220,38,38,.04))}
|
||
.el-sign{font-size:2.8rem;font-weight:900;line-height:1;margin-bottom:8px}
|
||
.cathode-card .el-sign{color:#3b82f6}.anode-card .el-sign{color:#ef4444}
|
||
.el-title{font-size:1rem;font-weight:800;margin-bottom:6px}
|
||
.cathode-card .el-title{color:#1d4ed8}.anode-card .el-title{color:#dc2626}
|
||
.el-process{font-size:.82rem;border-radius:8px;padding:8px 12px;font-family:'JetBrains Mono',monospace;margin:8px 0;font-weight:600}
|
||
.cathode-card .el-process{background:#dbeafe;color:#1e3a8a}
|
||
.anode-card .el-process{background:#fee2e2;color:#991b1b}
|
||
.dark .step-card,.dark .el-card{background:#292524}
|
||
/* ── §46 Mg и ЩЗМ ── */
|
||
.g2bar{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
|
||
.g2cell{border-radius:12px;padding:10px 5px;text-align:center;background:var(--card);border:2px solid var(--border);transition:.2s;cursor:default}
|
||
.g2cell:hover{border-color:var(--pri);transform:translateY(-2px);box-shadow:var(--sh)}
|
||
.g2sym{font-size:1.3rem;font-weight:900;color:var(--pri);line-height:1.1}
|
||
.g2num{font-size:.6rem;color:var(--muted);margin-top:1px}
|
||
.g2cfg{font-size:.59rem;color:#6b7280;font-family:'JetBrains Mono',monospace;margin-top:2px}
|
||
.rxn46{background:var(--card);border-radius:12px;padding:12px 14px;margin-bottom:8px;border-left:4px solid #16a34a;box-shadow:var(--sh)}
|
||
.rxn46-lbl{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#15803d;margin-bottom:5px}
|
||
.rxn46-eq{font-family:'JetBrains Mono',monospace;font-size:.82rem;background:rgba(22,163,74,.07);padding:5px 9px;border-radius:6px;margin:2px 0;line-height:1.7}
|
||
.dark .g2cell,.dark .rxn46{background:#292524}
|
||
.dark .rxn46-eq{background:rgba(255,255,255,.05)}
|
||
/* ── §47/§48 интерактивы ── */
|
||
.cmpd47-wrap,.ion48-row,.hard48-row{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
|
||
.cmpd47-btn,.ion48-btn,.hard48-btn{padding:6px 14px;border:1.5px solid var(--border);border-radius:20px;background:none;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--muted);transition:.2s}
|
||
.cmpd47-btn.active,.ion48-btn.sel,.hard48-btn.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
.cmpd47-rxn,.hard48-res{display:none;background:rgba(180,83,9,.05);border-left:3px solid var(--pri);border-radius:0 8px 8px 0;padding:9px 12px;margin:6px 0;font-size:.79rem;line-height:1.9}
|
||
.cmpd47-rxn.show,.hard48-res.show{display:block}
|
||
.ion48-result{min-height:44px;border-radius:10px;padding:10px 13px;margin:8px 0;font-size:.8rem;line-height:1.75;display:none}
|
||
.ion48-result.show{display:block}
|
||
.ion48-ok{background:rgba(5,150,105,.08);border:1.5px solid rgba(5,150,105,.3);color:#065f46}
|
||
.ion48-fail{background:rgba(239,68,68,.07);border:1.5px solid rgba(239,68,68,.25);color:#991b1b}
|
||
@keyframes fadeIn47{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
|
||
.cmpd47-rxn.show,.ion48-result.show,.hard48-res.show{animation:fadeIn47 .25s ease}
|
||
/* §47 flame glow */
|
||
@keyframes flicker47{0%,100%{filter:brightness(1)}45%{filter:brightness(1.2) saturate(1.25)}75%{filter:brightness(.93)}}
|
||
@keyframes glowRed47{0%,100%{box-shadow:0 0 10px rgba(220,38,38,.3),0 0 20px rgba(220,38,38,.1)}50%{box-shadow:0 0 26px rgba(220,38,38,.7),0 0 46px rgba(220,38,38,.28)}}
|
||
@keyframes glowMag47{0%,100%{box-shadow:0 0 10px rgba(190,18,60,.3),0 0 20px rgba(190,18,60,.1)}50%{box-shadow:0 0 26px rgba(190,18,60,.7),0 0 46px rgba(190,18,60,.28)}}
|
||
@keyframes glowGrn47{0%,100%{box-shadow:0 0 10px rgba(101,163,13,.28),0 0 20px rgba(101,163,13,.1)}50%{box-shadow:0 0 22px rgba(101,163,13,.55),0 0 40px rgba(101,163,13,.22)}}
|
||
.f47ca{animation:glowRed47 2s ease-in-out infinite}
|
||
.f47sr{animation:glowMag47 2s ease-in-out infinite .6s}
|
||
.f47ba{animation:glowGrn47 2.5s ease-in-out infinite 1.2s}
|
||
.f47ico{display:inline-block;animation:flicker47 1.5s ease-in-out infinite}
|
||
/* §47 CO₂ tube */
|
||
@keyframes sedDown47{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
|
||
.co2tube47{width:56px;height:112px;border:3px solid #9ca3af;border-top:none;border-radius:0 0 28px 28px;position:relative;overflow:hidden;background:#fff;box-shadow:inset 0 0 10px rgba(0,0,0,.07)}
|
||
.co2liq47{position:absolute;bottom:0;left:0;right:0;height:80%;background:rgba(219,234,254,.55);border-radius:0 0 25px 25px;transition:background .8s}
|
||
.co2liq47.co2-cloudy{background:rgba(226,226,230,.9)}
|
||
.co2liq47.co2-clear2{background:rgba(208,240,252,.35)}
|
||
.co2sed47{position:absolute;left:50%;transform:translateX(-50%);width:68%;height:12px;background:rgba(230,232,236,.95);border-radius:3px 3px 0 0;bottom:3px;opacity:0;transition:opacity .6s .3s}
|
||
.co2sed47.show{opacity:1}
|
||
/* §47 CaO demo */
|
||
@keyframes steamUp47{0%{opacity:0;transform:translateY(2px) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translateY(-38px) scale(1.6)}}
|
||
.steam47p{position:absolute;pointer-events:none;font-size:1.2rem;animation:steamUp47 1.5s ease-out forwards}
|
||
/* §48 tube visual */
|
||
@keyframes tubePrec48{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
|
||
.tube48{width:48px;height:98px;border:2.5px solid #9ca3af;border-top:none;border-radius:0 0 24px 24px;position:relative;overflow:hidden;background:#fff;box-shadow:inset 0 0 8px rgba(0,0,0,.06)}
|
||
.tube48-liq{position:absolute;bottom:0;left:0;right:0;height:82%;background:rgba(219,234,254,.4);border-radius:0 0 22px 22px;transition:background .4s}
|
||
.tube48-sed{position:absolute;left:50%;transform:translateX(-50%);width:70%;height:12px;border-radius:3px 3px 0 0;bottom:2px;display:none}
|
||
.tube48-sed.show{display:block;animation:tubePrec48 .5s ease-out}
|
||
/* §48 water cards */
|
||
@keyframes bubUp48{0%{transform:translateY(0);opacity:.7}100%{transform:translateY(-24px);opacity:0}}
|
||
.hw48c{background:var(--card);border:2px solid var(--border);border-radius:13px;padding:13px 12px;box-shadow:var(--sh);text-align:center;position:relative;overflow:hidden}
|
||
.hw48bub{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(147,197,253,.75);background:rgba(191,219,254,.3);position:absolute;animation:bubUp48 1.5s ease-out infinite}
|
||
@keyframes scaleGrow48{from{transform:scaleX(0)}to{transform:scaleX(1)}}
|
||
.hw48scale{height:8px;background:linear-gradient(90deg,#d1d5db,#9ca3af,#d1d5db);border-radius:2px;transform-origin:left;animation:scaleGrow48 .9s ease-out both}
|
||
|
||
/* ══════════════════════════════════════════
|
||
§49 — АЛЮМИНИЙ
|
||
══════════════════════════════════════════ */
|
||
.rxn49-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
|
||
@media(max-width:560px){.rxn49-grid{grid-template-columns:repeat(2,1fr)}}
|
||
.rxn49-btn{padding:10px 6px;border:2px solid var(--border);border-radius:12px;background:var(--card);font-size:.76rem;font-weight:700;cursor:pointer;transition:.18s;text-align:center;color:var(--muted);line-height:1.3}
|
||
.rxn49-btn:hover{border-color:var(--pri);color:var(--pri)}
|
||
.rxn49-btn.sel{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
.rxn49-res{margin-top:14px;padding:14px 16px;background:var(--card);border:2px solid var(--border);border-left:5px solid var(--pri);border-radius:12px;display:none;animation:popIn49 .3s ease}
|
||
.rxn49-res.show{display:block}
|
||
@keyframes popIn49{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
|
||
@keyframes sparkle49{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1.4) rotate(120deg)}}
|
||
.sp49{display:inline-block;animation:sparkle49 1.1s ease-in-out infinite;margin:0 2px}
|
||
.al49-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:8px 0}
|
||
.al49-block{width:80px;height:32px;background:linear-gradient(135deg,#d1d5db,#9ca3af);border-radius:8px;border:2px solid #6b7280;position:relative;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.85rem;color:#374151;font-family:'JetBrains Mono',monospace}
|
||
.al49-film{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.1));border-radius:6px;border:1px solid rgba(255,255,255,.7)}
|
||
|
||
/* ══════════════════════════════════════════
|
||
§50 — СОЕДИНЕНИЯ Al
|
||
══════════════════════════════════════════ */
|
||
.amp50-wrap{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin:14px 0}
|
||
.amp50-tube-area{display:flex;flex-direction:column;align-items:center;gap:6px}
|
||
.amp50-tube{width:56px;height:120px;border:3px solid #94a3b8;border-top:none;border-radius:0 0 12px 12px;position:relative;overflow:hidden;background:rgba(248,250,252,.5)}
|
||
.amp50-liq{position:absolute;bottom:0;left:0;right:0;height:65%;border-radius:0 0 9px 9px;background:rgba(229,231,235,.9);transition:background .8s,height .5s}
|
||
.amp50-sed{position:absolute;bottom:0;left:0;right:0;height:0;border-radius:0 0 9px 9px;background:rgba(229,231,235,.95);transition:height .6s}
|
||
.amp50-sed.show{height:30%}
|
||
.amp50-ctrls{flex:1;min-width:200px}
|
||
.amp50-btn{display:block;width:100%;padding:9px 14px;border:2px solid var(--border);border-radius:10px;font-size:.78rem;font-weight:700;cursor:pointer;transition:.18s;background:var(--card);color:var(--muted);margin-bottom:8px;text-align:left}
|
||
.amp50-btn:hover{border-color:var(--pri);color:var(--pri)}
|
||
.amp50-btn.acid:hover,.amp50-btn.acid.sel{border-color:#dc2626;background:#dc2626;color:#fff}
|
||
.amp50-btn.base:hover,.amp50-btn.base.sel{border-color:#1d4ed8;background:#1d4ed8;color:#fff}
|
||
.amp50-btn.heat:hover,.amp50-btn.heat.sel{border-color:#f59e0b;background:#f59e0b;color:#fff}
|
||
.amp50-stat{font-size:.82rem;margin-top:6px;line-height:1.6;min-height:48px}
|
||
.amp50-eq-box{font-family:'JetBrains Mono',monospace;font-size:.78rem;padding:6px 10px;background:rgba(180,83,9,.06);border-radius:8px;margin-top:6px;display:none;line-height:1.6}
|
||
.amp50-eq-box.show{display:block}
|
||
|
||
/* ══════════════════════════════════════════
|
||
§51 — ЖЕЛЕЗО
|
||
══════════════════════════════════════════ */
|
||
.fe51-demo{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0}
|
||
.fe51-bar{width:140px;height:36px;border-radius:8px;background:linear-gradient(135deg,#d1d5db,#9ca3af);border:2px solid #6b7280;position:relative;overflow:hidden;transition:background 2s,border-color 2s;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#374151}
|
||
.fe51-bar.rusting{background:linear-gradient(135deg,#b45309,#92400e);border-color:#78350f;color:#fff}
|
||
@keyframes rustPulse51{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
|
||
.fe51-bar.rusting{animation:rustPulse51 2s ease-in-out infinite}
|
||
.fe51-cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
|
||
.fe51-crd{padding:12px;border-radius:12px;border:2px solid var(--border);background:var(--card);font-size:.78rem;line-height:1.65}
|
||
.fe51-crd h4{font-size:.8rem;font-weight:700;margin-bottom:6px}
|
||
.fe51-crd.cl2{border-color:rgba(220,38,38,.4);background:rgba(254,226,226,.3)}
|
||
.dark .fe51-crd.cl2{background:rgba(127,29,29,.15)}
|
||
.fe51-crd.o2{border-color:rgba(217,119,6,.4);background:rgba(254,243,199,.3)}
|
||
.dark .fe51-crd.o2{background:rgba(78,33,0,.15)}
|
||
|
||
/* ══════════════════════════════════════════
|
||
§52 — СОЕДИНЕНИЯ Fe
|
||
══════════════════════════════════════════ */
|
||
.feoh52-demo{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0}
|
||
.feoh52-tube{width:54px;height:120px;border:3px solid #94a3b8;border-top:none;border-radius:0 0 12px 12px;overflow:hidden;position:relative;background:rgba(248,250,252,.5);margin:0 auto}
|
||
.feoh52-liq{position:absolute;bottom:0;left:0;right:0;height:65%;border-radius:0 0 9px 9px;background:rgba(229,231,235,.95);transition:background 1.6s}
|
||
.feoh52-liq.grey{background:rgba(156,163,175,.85)}
|
||
.feoh52-liq.brown{background:rgba(180,83,9,.45)}
|
||
@keyframes feOhPulse52{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
|
||
.feoh52-liq.brown{animation:feOhPulse52 2s ease-in-out infinite}
|
||
.qual52-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
|
||
.qual52-card{padding:12px;border:2px solid var(--border);border-radius:12px;background:var(--card);text-align:center}
|
||
.qual52-card h4{font-size:.79rem;font-weight:700;margin-bottom:8px;color:var(--pri)}
|
||
.qual52-tube-v{width:40px;height:80px;border:2px solid #94a3b8;border-top:none;border-radius:0 0 8px 8px;overflow:hidden;position:relative;background:rgba(248,250,252,.5);margin:0 auto 8px}
|
||
.qual52-liq52{position:absolute;bottom:0;left:0;right:0;height:60%;border-radius:0 0 6px 6px;transition:background .8s}
|
||
.qual52-sed52{position:absolute;bottom:0;left:0;right:0;height:0;border-radius:0 0 6px 6px;transition:height .6s}
|
||
.qual52-sed52.show{height:30%}
|
||
.qual52-rbtn{padding:7px 10px;border:2px solid var(--border);border-radius:8px;font-size:.72rem;font-weight:700;cursor:pointer;background:var(--card);color:var(--muted);transition:.18s;width:100%;margin-top:4px}
|
||
.qual52-rbtn:hover,.qual52-rbtn.sel{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
.fe52-oxides{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
|
||
@media(max-width:500px){.fe52-oxides{grid-template-columns:1fr 1fr}}
|
||
|
||
/* ════ SIDEBAR LAYOUT ════ */
|
||
.hdr{flex-shrink:0}
|
||
.page-layout{display:grid;grid-template-columns:220px 1fr;flex:1;min-height:0;overflow:hidden}
|
||
.sidebar{background:rgba(28,14,4,.97);border-right:1px solid rgba(251,191,36,.12);overflow-y:auto;display:flex;flex-direction:column;flex-shrink:0;padding-bottom:20px}
|
||
.sidebar::-webkit-scrollbar{width:4px}
|
||
.sidebar::-webkit-scrollbar-thumb{background:rgba(251,191,36,.2);border-radius:2px}
|
||
.main-content{overflow-y:auto;height:100%;min-width:0}
|
||
.sb-brand{padding:16px 14px 12px;border-bottom:1px solid rgba(251,191,36,.1);margin-bottom:4px}
|
||
.sb-title{font-size:.95rem;font-weight:800;color:#fbbf24;display:block;line-height:1.2}
|
||
.sb-sub{font-size:.68rem;color:rgba(251,191,36,.45);display:block;margin-top:2px}
|
||
.ch-bar{padding:2px 0}
|
||
.ch-btn{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;border-left:2.5px solid transparent;padding:9px 12px;cursor:pointer;color:rgba(251,191,36,.55);transition:all .18s;text-align:left;font-family:inherit}
|
||
.ch-btn:hover{background:rgba(251,191,36,.06);color:rgba(251,191,36,.85)}
|
||
.ch-btn.active{border-left-color:#f59e0b;background:rgba(251,191,36,.09);color:#fbbf24}
|
||
.ch-icon{font-size:.82rem;min-width:18px;text-align:center}
|
||
.ch-label{font-size:.73rem;font-weight:600;flex:1;line-height:1.3}
|
||
.ch-roman{font-size:.6rem;font-family:'JetBrains Mono',monospace;opacity:.5;background:rgba(251,191,36,.12);padding:1px 5px;border-radius:3px;flex-shrink:0}
|
||
.sec-group{display:none;flex-direction:column;gap:0;background:rgba(0,0,0,.18)}
|
||
.sec-group.show{display:flex}
|
||
.sidebar .tab{color:rgba(251,191,36,.55);border-radius:0;padding:5px 10px 5px 26px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px;border:none;border-left:2px solid transparent;font-size:.78rem;background:none;white-space:normal}
|
||
.sidebar .tab:hover{background:rgba(251,191,36,.07);color:rgba(251,191,36,.9)}
|
||
.sidebar .tab.active{background:rgba(251,191,36,.12)!important;border-left-color:#f59e0b!important;color:#fbbf24!important}
|
||
.tab-num{font-family:'JetBrains Mono',monospace;font-size:.6rem;min-width:30px;opacity:.65;flex-shrink:0}
|
||
.tab-name{font-size:.71rem;line-height:1.3}
|
||
.page-layout .tabs{display:none}
|
||
@media(max-width:700px){
|
||
html,body{height:auto;overflow:visible}
|
||
body{display:block}
|
||
.page-layout{grid-template-columns:1fr;flex:none;overflow:visible}
|
||
.sidebar{display:none}
|
||
.main-content{height:auto;overflow-y:visible}
|
||
.page-layout .tabs{display:flex}
|
||
}
|
||
|
||
/* ══ §1–39 Interactive Styles ══ */
|
||
.ch-stat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
|
||
.ch-stat-card{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center}
|
||
.ch-stat-card .big{font-size:1.6rem;font-weight:900;color:var(--pri)}
|
||
.ch-stat-card .lbl{font-size:.75rem;color:var(--muted);margin-top:4px}
|
||
.inter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:14px 0}
|
||
.inter-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;transition:.2s}
|
||
.inter-card:hover{border-color:var(--pri);background:var(--bg2,#fef3c7)}
|
||
.inter-card.active{border-color:var(--pri);background:#fef3c7}
|
||
.inter-card .ic-q{font-size:.85rem;font-weight:600;margin-bottom:6px}
|
||
.inter-card .ic-a{font-size:.78rem;color:var(--pri);display:none}
|
||
.inter-card.active .ic-a{display:block}
|
||
.quiz-wrap{margin:14px 0}
|
||
.quiz-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;align-items:center}
|
||
.quiz-row .qlbl{font-size:.85rem;min-width:180px;font-weight:600}
|
||
.quiz-opt{background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:7px 14px;cursor:pointer;font-size:.82rem;transition:.2s}
|
||
.quiz-opt:hover{border-color:var(--pri)}
|
||
.quiz-opt.ok{border-color:#16a34a;background:#dcfce7;color:#16a34a;font-weight:700}
|
||
.quiz-opt.err{border-color:#dc2626;background:#fee2e2;color:#dc2626}
|
||
.econf-wrap{margin:14px 0}
|
||
.econf-select{padding:8px 14px;border-radius:8px;border:1.5px solid var(--border);background:var(--card);font-size:.88rem;margin-right:10px;color:var(--text)}
|
||
.econf-box{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:14px;margin-top:10px;display:none}
|
||
.econf-box.vis{display:block}
|
||
.orb-row{display:flex;gap:6px;align-items:center;margin:6px 0;flex-wrap:wrap}
|
||
.orb-lbl{font-size:.78rem;width:28px;font-weight:700;color:var(--pri)}
|
||
.orb{width:28px;height:28px;border-radius:50%;border:2px solid var(--pri);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:var(--card)}
|
||
.orb.filled{background:var(--pri);color:#fff}
|
||
.orb.half{background:linear-gradient(90deg,var(--pri) 50%,transparent 50%);color:var(--pri)}
|
||
.bond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
|
||
.bond-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;transition:.2s}
|
||
.bond-card:hover{border-color:var(--pri)}
|
||
.bond-card .bc-formula{font-size:1.1rem;font-weight:800;margin-bottom:6px}
|
||
.bond-card .bc-type{font-size:.75rem;color:var(--muted)}
|
||
.bond-card .bc-ans{font-size:.78rem;color:var(--pri);font-weight:700;display:none;margin-top:6px}
|
||
.bond-card.revealed .bc-ans{display:block}
|
||
.bond-card.revealed .bc-type{display:none}
|
||
.sox-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.83rem}
|
||
.sox-table th{background:var(--pri);color:#fff;padding:7px 10px;text-align:left}
|
||
.sox-table td{padding:6px 10px;border-bottom:1px solid var(--border)}
|
||
.sox-table tr:hover td{background:var(--bg2,#fef3c7)}
|
||
.latt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
|
||
@media(min-width:600px){.latt-grid{grid-template-columns:repeat(4,1fr)}}
|
||
.latt-card{background:var(--card);border:2px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer;transition:.2s}
|
||
.latt-card:hover{border-color:var(--pri)}
|
||
.latt-card.picked{border-color:var(--pri);background:#fef3c7}
|
||
.latt-card .lc-name{font-weight:800;font-size:.9rem;color:var(--pri);margin-bottom:6px}
|
||
.latt-card .lc-detail{font-size:.75rem;color:var(--muted);display:none}
|
||
.latt-card.picked .lc-detail{display:block;color:var(--text)}
|
||
.mix-scenario{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px}
|
||
.mix-scenario .ms-q{font-weight:700;margin-bottom:8px;font-size:.88rem}
|
||
.mix-btns{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
|
||
.mix-btn{padding:6px 13px;border-radius:8px;border:1.5px solid var(--border);background:var(--card);cursor:pointer;font-size:.8rem;transition:.2s}
|
||
.mix-btn:hover{border-color:var(--pri)}
|
||
.mix-btn.ok{border-color:#16a34a;background:#dcfce7;font-weight:700}
|
||
.mix-btn.err{border-color:#dc2626;background:#fee2e2}
|
||
.disp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
|
||
.disp-col{background:var(--card);border:2px solid var(--border);border-radius:12px;padding:12px}
|
||
.disp-col .dc-head{font-weight:800;font-size:.88rem;color:var(--pri);margin-bottom:8px;text-align:center}
|
||
.disp-ex{background:var(--bg2,#fef3c7);border-radius:7px;padding:5px 8px;font-size:.78rem;margin:4px 0;cursor:pointer;transition:.2s}
|
||
.disp-ex:hover{background:var(--pri);color:#fff}
|
||
.val-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:9px;margin:12px 0}
|
||
.val-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:10px;text-align:center;cursor:pointer;transition:.2s}
|
||
.val-card:hover{border-color:var(--pri)}
|
||
.val-card .vc-sym{font-size:1.3rem;font-weight:900;color:var(--pri)}
|
||
.val-card .vc-name{font-size:.72rem;color:var(--muted)}
|
||
.val-card .vc-val{font-size:.82rem;font-weight:700;display:none;margin-top:5px;color:#16a34a}
|
||
.val-card.shown .vc-val{display:block}
|
||
.krat-tabs{display:flex;gap:8px;margin-bottom:12px}
|
||
.krat-tab{padding:7px 18px;border-radius:20px;border:1.5px solid var(--border);cursor:pointer;font-size:.83rem;font-weight:700;transition:.2s}
|
||
.krat-tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
|
||
.krat-panel{display:none}
|
||
.krat-panel.active{display:block}
|
||
.krat-scheme{display:flex;align-items:center;gap:10px;padding:12px;background:var(--card);border-radius:10px;border:1.5px solid var(--border);margin:8px 0}
|
||
.krat-atom{width:40px;height:40px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem}
|
||
.krat-bond{display:flex;flex-direction:column;gap:3px;align-items:center}
|
||
.krat-bond-line{width:30px;height:3px;background:var(--pri);border-radius:2px}
|
||
.gen-row{display:flex;align-items:center;gap:6px;margin:8px 0;flex-wrap:wrap}
|
||
.gen-box{background:var(--card);border:2px solid var(--pri);border-radius:10px;padding:8px 14px;font-weight:700;font-size:.85rem;text-align:center;min-width:80px}
|
||
.gen-arrow{color:var(--pri);font-size:1.2rem;font-weight:700}
|
||
.gen-eq{font-size:.75rem;color:var(--muted);margin-left:4px}
|
||
|
||
/* ══ Phase A: Animation Foundations ══ */
|
||
:root {
|
||
--anim-fast: .25s; --anim-med: .6s; --anim-slow: 1.2s;
|
||
--ease-bounce: cubic-bezier(.68,-.55,.27,1.55);
|
||
--ease-smooth: cubic-bezier(.4,0,.2,1);
|
||
--hud-bg: #1e293b; --hud-txt: #f8fafc; --hud-acc: #38bdf8;
|
||
}
|
||
|
||
|
||
@keyframes orbit { to { transform: rotate(360deg); } }
|
||
@keyframes pulseGlow { 0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.6)} 50%{box-shadow:0 0 0 14px rgba(59,130,246,0)} }
|
||
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
|
||
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
|
||
@keyframes flashGreen { 0%{background:#bbf7d0} 100%{background:transparent} }
|
||
@keyframes flashRed { 0%{background:#fecaca} 100%{background:transparent} }
|
||
@keyframes drawLine { to { stroke-dashoffset: 0; } }
|
||
@keyframes rotate3d { from{transform:rotateY(0)} to{transform:rotateY(360deg)} }
|
||
@keyframes rise { 0%{transform:translateY(0) scale(1);opacity:.9} 100%{transform:translateY(-80px) scale(.4);opacity:0} }
|
||
@keyframes fillUp { from{height:0} to{height:var(--fill-h,100%)} }
|
||
@keyframes bounceBack { 0%{transform:translateX(30px)} 50%{transform:translateX(-8px)} 100%{transform:translateX(0)} }
|
||
to{transform:none;opacity:1} }
|
||
}
|
||
@keyframes approach { from{transform:translateX(var(--from-x,0))} to{transform:translateX(0)} }
|
||
@keyframes driftLeft { from{transform:translateX(60px);opacity:0} to{transform:none;opacity:1} }
|
||
@keyframes driftRight { from{transform:translateX(-60px);opacity:0} to{transform:none;opacity:1} }
|
||
@keyframes eFlow { 0%{offset-distance:0%} 100%{offset-distance:100%} }
|
||
@keyframes colorShift { from{background:var(--cs-from,#7c3aed)} to{background:var(--cs-to,#b45309)} }
|
||
@keyframes spinFast { to{transform:rotate(360deg)} }
|
||
@keyframes popIn { 0%{transform:scale(0)} 80%{transform:scale(1.15)} 100%{transform:scale(1)} }
|
||
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
|
||
@keyframes bubble { 0%{transform:translateY(0) scale(1);opacity:.8} 80%{opacity:.4} 100%{transform:translateY(-60px) scale(.2);opacity:0} }
|
||
@keyframes pitting { from{opacity:0} to{opacity:1} }
|
||
@keyframes growUp { from{transform:scaleY(0);transform-origin:bottom} to{transform:scaleY(1);transform-origin:bottom} }
|
||
|
||
.interactive { user-select:none; cursor:pointer; transition:transform var(--anim-fast) var(--ease-smooth); }
|
||
.interactive:hover { transform:translateY(-2px); }
|
||
.reveal-on-view { opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth); }
|
||
.reveal-on-view.in { opacity:1; transform:none; }
|
||
.correct-flash { animation:flashGreen .8s ease-out; }
|
||
.wrong-shake { animation:shake .4s; }
|
||
.pop-in { animation:popIn .4s var(--ease-bounce) forwards; }
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ── Bohr Atom (§1) ── */
|
||
.atom-stage-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; margin:16px 0; }
|
||
.atom-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center; }
|
||
.atom-controls label { font-size:13px; color:#475569; }
|
||
.atom-controls input[type=range] { width:140px; }
|
||
.atom-stage {
|
||
position:relative; width:280px; height:280px;
|
||
display:flex; align-items:center; justify-content:center;
|
||
}
|
||
.a-nucleus {
|
||
position:absolute; width:40px; height:40px; border-radius:50%;
|
||
background:radial-gradient(circle,#f97316,#dc2626);
|
||
display:flex; align-items:center; justify-content:center;
|
||
color:#fff; font-size:10px; font-weight:700; text-align:center;
|
||
z-index:10; animation:pulseGlow 2s infinite;
|
||
box-shadow:0 0 12px rgba(249,115,22,.6);
|
||
}
|
||
.a-shell {
|
||
position:absolute; border-radius:50%;
|
||
border:1.5px dashed rgba(99,102,241,.5);
|
||
}
|
||
.a-electron {
|
||
position:absolute; width:10px; height:10px; border-radius:50%;
|
||
background:radial-gradient(circle,#60a5fa,#2563eb);
|
||
box-shadow:0 0 6px #60a5fa;
|
||
transform-origin:center;
|
||
}
|
||
.atom-info-box {
|
||
background:#f1f5f9; border-radius:12px; padding:12px 20px;
|
||
font-size:13px; min-width:200px; text-align:center;
|
||
}
|
||
.atom-info-box b { font-size:22px; color:#1e40af; }
|
||
|
||
/* ── Electron config (§2) ── */
|
||
.sublevel-grid { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
|
||
.subl-box {
|
||
background:#f1f5f9; border:2px solid #e2e8f0; border-radius:8px;
|
||
padding:6px 10px; text-align:center; font-size:12px; min-width:50px;
|
||
transition:all .3s; position:relative;
|
||
}
|
||
.subl-box.filled { background:#dbeafe; border-color:#3b82f6; }
|
||
.subl-box.active { background:#fef9c3; border-color:#eab308; }
|
||
.subl-name { font-weight:700; font-size:11px; color:#475569; }
|
||
.subl-orbs { display:flex; gap:3px; margin-top:4px; justify-content:center; }
|
||
.s-orb { width:16px; height:20px; border:1px solid #94a3b8; border-radius:3px; position:relative; background:#fff; }
|
||
.s-orb .e-up, .s-orb .e-dn {
|
||
position:absolute; width:12px; font-size:14px; line-height:1;
|
||
text-align:center; font-weight:900;
|
||
}
|
||
.s-orb .e-up { top:0; left:2px; color:#2563eb; }
|
||
.s-orb .e-dn { bottom:0; left:2px; color:#dc2626; transform:rotate(180deg); }
|
||
|
||
/* ── Bond Polarity (§4) ── */
|
||
.eo-scene { display:flex; align-items:center; gap:0; margin:16px auto; max-width:420px; position:relative; height:80px; }
|
||
.eo-atom { width:70px; height:70px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:700; font-size:18px; border:3px solid; transition:all .5s; }
|
||
.eo-connector { flex:1; height:12px; border-radius:6px; position:relative; transition:background .6s; }
|
||
.eo-delta { position:absolute; font-size:12px; font-weight:700; color:#7c3aed; top:-20px; }
|
||
.eo-delta.plus { left:4px; }
|
||
.eo-delta.minus { right:4px; }
|
||
.eo-class-tag { text-align:center; font-size:13px; font-weight:600; margin-top:8px; padding:4px 12px; border-radius:20px; display:inline-block; }
|
||
.eo-nonpolar { background:#dcfce7; color:#166534; }
|
||
.eo-polar { background:#dbeafe; color:#1e40af; }
|
||
.eo-ionic { background:#fce7f3; color:#9d174d; }
|
||
.eo-heatmap { display:flex; flex-wrap:wrap; gap:2px; margin:12px 0; }
|
||
.eo-cell {
|
||
width:32px; height:32px; border-radius:4px; font-size:10px; font-weight:700;
|
||
display:flex; align-items:center; justify-content:center; cursor:pointer;
|
||
color:#fff; transition:transform .2s; position:relative;
|
||
}
|
||
.eo-cell:hover { transform:scale(1.3); z-index:5; }
|
||
.eo-tooltip { position:absolute; bottom:110%; left:50%; translate:-50% 0; background:#1e293b; color:#fff; font-size:10px; padding:3px 6px; border-radius:4px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .2s; }
|
||
.eo-cell:hover .eo-tooltip { opacity:1; }
|
||
|
||
/* ── Ionic bond animation (§6) ── */
|
||
.ion-scene { display:flex; align-items:center; justify-content:center; gap:30px; margin:20px 0; position:relative; height:130px; }
|
||
.ion-atom { width:80px; height:80px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:22px; font-weight:700; border:3px solid; cursor:default; transition:all .6s; position:relative; }
|
||
.ion-atom .shell-e { position:absolute; width:12px; height:12px; border-radius:50%; background:#60a5fa; box-shadow:0 0 6px #60a5fa; top:-6px; left:50%; translate:-50% 0; transition:all .8s; }
|
||
.ion-charge { position:absolute; top:-8px; right:-8px; font-size:13px; font-weight:900; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:all .4s; }
|
||
.ion-arrow { font-size:28px; color:#64748b; }
|
||
|
||
/* ── 3D Lattice (§8) ── */
|
||
.lattice-scene { perspective:600px; display:flex; justify-content:center; margin:16px 0; }
|
||
.lattice-cube { width:120px; height:120px; transform-style:preserve-3d; animation:rotate3d 12s linear infinite; position:relative; }
|
||
.lattice-cube:hover { animation-play-state:paused; }
|
||
.l-node { position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#fff; }
|
||
.l-node.pos { background:radial-gradient(circle,#f97316,#dc2626); }
|
||
.l-node.neg { background:radial-gradient(circle,#60a5fa,#2563eb); }
|
||
.l-node.met { background:radial-gradient(circle,#a3a3a3,#525252); }
|
||
.l-node.mol { background:radial-gradient(circle,#86efac,#16a34a); }
|
||
.l-node.atom-c{ background:radial-gradient(circle,#c4b5fd,#7c3aed); }
|
||
.lattice-tabs { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:8px; }
|
||
.latt-tab-btn { padding:5px 12px; border-radius:20px; border:2px solid #e2e8f0; background:#fff; cursor:pointer; font-size:12px; font-weight:600; transition:all .25s; }
|
||
.latt-tab-btn.active { background:#1e40af; color:#fff; border-color:#1e40af; }
|
||
.latt-caption { text-align:center; font-size:12px; color:#475569; margin-top:8px; }
|
||
|
||
/* ── pH Meter (§22) ── */
|
||
.ph-meter-wrap { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin:16px 0; }
|
||
.ph-strip { width:40px; height:300px; border-radius:8px; position:relative; cursor:pointer;
|
||
background:linear-gradient(to bottom,
|
||
#dc2626 0%,#ea580c 7%,#f97316 14%,#fbbf24 21%,
|
||
#facc15 28%,#a3e635 35%,#4ade80 42%,#34d399 49%,
|
||
#2dd4bf 56%,#38bdf8 63%,#60a5fa 70%,#818cf8 77%,
|
||
#a78bfa 84%,#c084fc 91%,#e879f9 100%);
|
||
box-shadow:0 0 12px rgba(0,0,0,.2); }
|
||
.ph-slider-thumb { position:absolute; left:-8px; width:56px; height:4px; background:#1e293b; border-radius:2px; cursor:grab; transition:top .3s; }
|
||
.ph-slider-thumb::after { content:attr(data-ph); position:absolute; left:64px; top:-8px; font-size:13px; font-weight:700; white-space:nowrap; color:#1e293b; }
|
||
.ph-indicators { display:flex; flex-direction:column; gap:16px; }
|
||
.ph-tube { display:flex; flex-direction:column; align-items:center; gap:4px; }
|
||
.ph-tube-body { width:32px; height:80px; border-radius:0 0 16px 16px; border:2px solid #94a3b8; overflow:hidden; }
|
||
.ph-tube-fill { height:100%; transition:background .4s; }
|
||
.ph-tube-label { font-size:10px; color:#475569; text-align:center; }
|
||
.ph-info { background:#f8fafc; border-radius:12px; padding:12px; font-size:12px; min-width:160px; }
|
||
.ph-examples { margin-top:8px; font-size:11px; color:#64748b; }
|
||
.ph-example { padding:2px 0; border-bottom:1px solid #e2e8f0; }
|
||
.ph-example.active { background:#fef9c3; font-weight:600; color:#1e293b; border-radius:3px; padding:2px 4px; }
|
||
|
||
/* ── Galvanic pair / Corrosion (§23) ── */
|
||
.galv-scene { position:relative; margin:16px auto; max-width:400px; height:220px; }
|
||
.galv-beaker { position:absolute; bottom:0; left:50%; translate:-50% 0; width:300px; height:160px; border:3px solid #94a3b8; border-top:none; border-radius:0 0 12px 12px; overflow:visible; }
|
||
.galv-liquid { position:absolute; bottom:0; left:0; right:0; height:110px; background:rgba(148,163,184,.25); border-radius:0 0 9px 9px; }
|
||
.galv-metal { position:absolute; bottom:40px; width:36px; height:120px; border-radius:4px; display:flex; align-items:flex-start; justify-content:center; padding-top:4px; font-size:11px; font-weight:700; color:#fff; }
|
||
.galv-metal.anode { left:30px; background:linear-gradient(180deg,#6b7280,#374151); }
|
||
.galv-metal.cathode { right:30px; background:linear-gradient(180deg,#dc2626,#991b1b); }
|
||
.galv-wire { position:absolute; top:0; left:66px; right:66px; height:40px; border:2px solid #374151; border-bottom:none; border-radius:12px 12px 0 0; }
|
||
.galv-e { position:absolute; width:8px; height:8px; border-radius:50%; background:#60a5fa; box-shadow:0 0 6px #60a5fa; }
|
||
.galv-bubble { position:absolute; width:7px; height:7px; border-radius:50%; border:1.5px solid rgba(96,165,250,.7); animation:bubble 2s infinite; }
|
||
.galv-pit { position:absolute; width:5px; height:5px; border-radius:50%; background:rgba(0,0,0,.4); animation:pitting .5s forwards; }
|
||
.galv-labels { display:flex; justify-content:space-around; font-size:12px; font-weight:600; margin-top:4px; }
|
||
|
||
/* ── Electrolysis (§24) ── */
|
||
.electro-scene { position:relative; margin:16px auto; max-width:420px; }
|
||
.electro-cell { display:flex; gap:0; align-items:stretch; }
|
||
.electro-half { flex:1; border:2px solid #94a3b8; padding:10px; position:relative; min-height:160px; overflow:hidden; }
|
||
.electro-half.an { border-radius:12px 0 0 12px; border-right:1px dashed #94a3b8; }
|
||
.electro-half.ca { border-radius:0 12px 12px 0; border-left:1px dashed #94a3b8; }
|
||
.electro-electrode { width:24px; height:100px; margin:0 auto; border-radius:4px; display:block; }
|
||
.electro-electrode.anode-e { background:linear-gradient(180deg,#6b7280,#374151); }
|
||
.electro-electrode.cathode-e { background:linear-gradient(180deg,#dc2626,#991b1b); }
|
||
.electro-label { text-align:center; font-size:11px; font-weight:700; margin-bottom:6px; }
|
||
.electro-ion { position:absolute; font-size:11px; font-weight:700; padding:2px 5px; border-radius:10px; transition:all .4s; }
|
||
.electro-product { position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:11px; font-weight:700; color:#166534; }
|
||
.electro-wire { position:absolute; top:-50px; left:50%; translate:-50% 0; width:60%; height:40px; border:2px solid #374151; border-bottom:none; border-radius:8px 8px 0 0; }
|
||
.electro-source { position:absolute; top:-70px; left:50%; translate:-50% 0; background:#1e293b; color:#fff; border-radius:6px; padding:4px 10px; font-size:11px; font-weight:700; }
|
||
.electro-controls { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; justify-content:center; }
|
||
.electro-controls select { padding:4px 8px; border-radius:6px; border:1px solid #e2e8f0; font-size:12px; }
|
||
|
||
/* ── Energy diagram (§25) ── */
|
||
.energy-scene { margin:16px 0; }
|
||
.energy-svg-wrap { display:flex; justify-content:center; }
|
||
.energy-svg path.e-curve { stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1.2s var(--ease-smooth); }
|
||
.energy-svg path.e-curve.drawn { stroke-dashoffset:0; }
|
||
.energy-controls { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:8px; }
|
||
.energy-toggle { display:flex; background:#f1f5f9; border-radius:20px; padding:3px; }
|
||
.energy-toggle button { padding:6px 14px; border-radius:17px; border:none; font-size:12px; font-weight:600; cursor:pointer; transition:all .25s; }
|
||
.energy-toggle button.active { background:#1e40af; color:#fff; }
|
||
|
||
/* ── Dissociation (§11) ── */
|
||
.dissoc-scene { position:relative; margin:16px auto; max-width:300px; height:200px; background:linear-gradient(180deg,rgba(219,234,254,.3),rgba(219,234,254,.6)); border-radius:12px; border:2px solid #bfdbfe; overflow:hidden; }
|
||
.dissoc-molecule { position:absolute; font-size:14px; font-weight:700; padding:4px 8px; border-radius:8px; background:#fff; border:1.5px solid #94a3b8; cursor:default; transition:all .6s; }
|
||
.dissoc-ion { position:absolute; font-size:12px; font-weight:700; padding:3px 7px; border-radius:20px; opacity:0; transition:all .6s; }
|
||
.dissoc-ion.cat { background:#fef3c7; color:#92400e; border:1.5px solid #fbbf24; }
|
||
.dissoc-ion.ani { background:#dbeafe; color:#1e40af; border:1.5px solid #60a5fa; }
|
||
.dissoc-water { position:absolute; font-size:18px; opacity:.4; }
|
||
.dissoc-controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
|
||
.dissoc-controls select, .dissoc-controls button { padding:5px 10px; border-radius:6px; border:1px solid #e2e8f0; font-size:12px; cursor:pointer; }
|
||
|
||
/* ── MU→PIU→KIU (§12) ── */
|
||
.ieu-scene { margin:16px 0; }
|
||
.ieu-step { padding:10px 16px; border-radius:10px; background:#f8fafc; border:2px solid #e2e8f0; margin-bottom:8px; font-size:13px; transition:all .4s; }
|
||
.ieu-step.active { background:#dbeafe; border-color:#3b82f6; }
|
||
.ieu-term { display:inline-block; padding:2px 6px; border-radius:4px; transition:all .5s; }
|
||
.ieu-term.spectator { opacity:.25; text-decoration:line-through; }
|
||
.ieu-term.highlight { background:#fef9c3; }
|
||
.ieu-nav { display:flex; gap:8px; margin-top:10px; }
|
||
.ieu-nav button { padding:6px 16px; border-radius:8px; border:2px solid #3b82f6; background:#fff; color:#1e40af; font-weight:600; cursor:pointer; font-size:13px; transition:all .25s; }
|
||
.ieu-nav button:hover { background:#3b82f6; color:#fff; }
|
||
.ieu-nav button:disabled { opacity:.4; cursor:default; }
|
||
|
||
/* ── Genetic row builder (§18) ── */
|
||
.genrow-wrap { margin:16px 0; }
|
||
.genrow-pool { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; padding:10px; background:#f8fafc; border-radius:10px; border:1px dashed #cbd5e1; }
|
||
.genrow-chip { padding:6px 14px; border-radius:20px; background:#fff; border:2px solid #94a3b8; font-size:13px; font-weight:600; cursor:grab; user-select:none; transition:all .25s; }
|
||
.genrow-chip:hover { border-color:#3b82f6; transform:scale(1.05); }
|
||
.genrow-chip.used { opacity:.35; cursor:default; pointer-events:none; }
|
||
.genrow-slots { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
|
||
.genrow-slot { width:90px; height:44px; border-radius:10px; border:2px dashed #cbd5e1; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#f8fafc; transition:all .3s; }
|
||
.genrow-slot.filled { border-color:#22c55e; background:#dcfce7; animation:flashGreen .6s; }
|
||
.genrow-slot.wrong { border-color:#ef4444; animation:shake .4s; }
|
||
.genrow-arrow { font-size:20px; color:#64748b; }
|
||
.genrow-tabs { display:flex; gap:6px; margin-bottom:10px; }
|
||
.genrow-tab { padding:5px 14px; border-radius:20px; border:2px solid #e2e8f0; background:#fff; cursor:pointer; font-size:12px; font-weight:600; transition:all .25s; }
|
||
.genrow-tab.active { background:#1e40af; color:#fff; border-color:#1e40af; }
|
||
|
||
/* ── Electron balance stepper (§20) ── */
|
||
.ebal-scene { margin:16px 0; }
|
||
.ebal-step { padding:12px 16px; border-radius:10px; background:#f8fafc; border-left:4px solid #e2e8f0; margin-bottom:8px; transition:all .4s; display:none; }
|
||
.ebal-step.active { display:block; background:#eff6ff; border-color:#3b82f6; animation:fadeUp .4s; }
|
||
.ebal-half { font-family:monospace; font-size:14px; margin:6px 0; }
|
||
.ebal-half .e-chip { display:inline-block; background:#dbeafe; color:#1e40af; border-radius:4px; padding:1px 5px; font-weight:700; }
|
||
.ebal-half .so-before { color:#dc2626; }
|
||
.ebal-half .so-after { color:#16a34a; }
|
||
.ebal-nav { display:flex; gap:8px; margin-top:10px; align-items:center; }
|
||
.ebal-progress { flex:1; height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden; }
|
||
.ebal-progress-fill { height:100%; background:#3b82f6; border-radius:3px; transition:width .4s; }
|
||
.ebal-eq-select { padding:5px 10px; border-radius:6px; border:1px solid #e2e8f0; font-size:12px; }
|
||
|
||
/* ── NH3 3D pyramid (§27) ── */
|
||
.nh3-scene { display:flex; justify-content:center; margin:16px 0; }
|
||
.nh3-pyramid { perspective:400px; }
|
||
.nh3-inner { width:120px; height:120px; transform-style:preserve-3d; animation:rotate3d 10s linear infinite; position:relative; }
|
||
.nh3-inner:hover { animation-play-state:paused; }
|
||
.nh3-atom { position:absolute; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; }
|
||
.nh3-atom.N { width:40px; height:40px; background:radial-gradient(circle,#3b82f6,#1e40af); left:40px; top:10px; box-shadow:0 0 12px rgba(59,130,246,.6); }
|
||
.nh3-atom.H { width:26px; height:26px; background:radial-gradient(circle,#86efac,#16a34a); }
|
||
.nh3-lone { position:absolute; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle,rgba(253,224,71,.8),rgba(234,179,8,.4)); top:-8px; left:50px; animation:pulseGlow 2s infinite; box-shadow:0 0 10px rgba(234,179,8,.6); }
|
||
.nh3-bond { position:absolute; background:#94a3b8; border-radius:2px; transform-origin:0 50%; }
|
||
|
||
/* ── Reaction playground (§15/§16) ── */
|
||
.react-scene { position:relative; max-width:400px; margin:16px auto; }
|
||
.beaker-pair { display:flex; gap:20px; justify-content:center; }
|
||
.beaker { position:relative; width:80px; height:100px; }
|
||
.beaker-body { position:absolute; bottom:0; left:0; right:0; top:0; border:2px solid #94a3b8; border-top:none; border-radius:0 0 10px 10px; overflow:hidden; }
|
||
.beaker-liquid { position:absolute; bottom:0; left:0; right:0; border-radius:0 0 8px 8px; transition:height .8s var(--ease-smooth); }
|
||
.beaker-label { text-align:center; font-size:11px; font-weight:600; margin-bottom:4px; }
|
||
.beaker-product { position:relative; width:120px; height:100px; }
|
||
.pour-arrow { font-size:28px; color:#64748b; align-self:center; animation:orbit 2s linear infinite; width:30px; text-align:center; }
|
||
.bubble { position:absolute; border-radius:50%; border:1.5px solid rgba(96,165,250,.7); animation:bubble 2s var(--d,0s) infinite; }
|
||
|
||
/* ── Tyndall (§10) ── */
|
||
.tyndall-scene { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:16px 0; }
|
||
.tyndall-beaker { width:80px; height:120px; border:2px solid #94a3b8; border-top:none; border-radius:0 0 12px 12px; position:relative; overflow:hidden; }
|
||
.tyndall-liquid { height:100%; }
|
||
.tyndall-laser { position:absolute; top:50%; left:0; right:0; height:3px; border-radius:2px; transform:translateY(-50%); transition:all .4s; }
|
||
.tyndall-label { text-align:center; font-size:10px; color:#475569; margin-top:4px; }
|
||
.tyndall-particle { position:absolute; border-radius:50%; animation:rise var(--dur,3s) var(--d,0s) infinite; }
|
||
|
||
/* ── Redox vocabulary pairs (§19) ── */
|
||
.vocab-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0; }
|
||
.vocab-card { height:70px; cursor:pointer; perspective:400px; }
|
||
.vocab-inner { width:100%; height:100%; transform-style:preserve-3d; transition:transform .5s; border-radius:10px; }
|
||
.vocab-card.flipped .vocab-inner { transform:rotateY(180deg); }
|
||
.vocab-face { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; padding:4px; }
|
||
.vocab-front { background:#dbeafe; border:2px solid #93c5fd; color:#1e40af; font-weight:700; }
|
||
.vocab-back { background:#dcfce7; border:2px solid #86efac; color:#166534; transform:rotateY(180deg); }
|
||
.vocab-card.matched .vocab-inner { box-shadow:0 0 0 3px #22c55e; }
|
||
|
||
/* ── KMnO4 environments (§21) ── */
|
||
.kmno4-scene { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:16px 0; }
|
||
.kmno4-beaker { width:90px; text-align:center; }
|
||
.kmno4-body { height:100px; border:2px solid #94a3b8; border-top:none; border-radius:0 0 12px 12px; position:relative; overflow:hidden; }
|
||
.kmno4-liquid { height:100%; transition:background 1.2s; }
|
||
.kmno4-label { font-size:10px; color:#475569; margin-top:4px; }
|
||
.kmno4-product { font-size:11px; font-weight:700; margin-top:4px; }
|
||
|
||
/* ── §9 Separation ── */
|
||
.sep-scene { position:relative; height:160px; }
|
||
.sep-particle { position:absolute; border-radius:50%; }
|
||
.sep-filter { width:100%; height:3px; background:#8b5e3c; position:absolute; }
|
||
|
||
/* ── Enthalpy cards ── */
|
||
.enth-card { border-radius:10px; padding:12px; text-align:center; cursor:pointer; transition:all .3s; }
|
||
.enth-card.exo { background:linear-gradient(135deg,#fef3c7,#fde68a); border:2px solid #fbbf24; }
|
||
.enth-card.endo { background:linear-gradient(135deg,#dbeafe,#bfdbfe); border:2px solid #60a5fa; }
|
||
.enth-card:hover { transform:scale(1.04); }
|
||
|
||
/* ── §32 Dilution safety ── */
|
||
.dilute-scene { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:16px 0; }
|
||
.dilute-demo { text-align:center; width:120px; }
|
||
.dilute-label { font-size:12px; font-weight:700; margin-bottom:6px; }
|
||
.dilute-label.wrong { color:#dc2626; }
|
||
.dilute-label.right { color:#16a34a; }
|
||
.dilute-beaker { width:80px; height:100px; border:2px solid #94a3b8; border-top:none; border-radius:0 0 12px 12px; position:relative; margin:0 auto; overflow:hidden; }
|
||
.dilute-liquid { position:absolute; bottom:0; left:0; right:0; transition:height .6s; }
|
||
.splatter { position:absolute; border-radius:50%; background:#fde047; animation:rise .6s forwards; }
|
||
|
||
/* ── Carbon allotropes (§34) ── */
|
||
.allotrope-scene { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin:16px 0; }
|
||
.allotrope-card { text-align:center; }
|
||
.allotrope-3d { perspective:300px; width:80px; height:80px; margin:0 auto; }
|
||
.allotrope-inner { width:100%; height:100%; transform-style:preserve-3d; animation:rotate3d 8s linear infinite; position:relative; }
|
||
.allotrope-inner:hover { animation-play-state:paused; }
|
||
.allotrope-node { position:absolute; border-radius:50%; background:radial-gradient(circle,#6b7280,#1f2937); width:14px; height:14px; }
|
||
.allotrope-name { font-size:11px; font-weight:700; margin-top:6px; color:#1e293b; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<button class="theme-btn" id="themeBtn"><i class="fas fa-moon"></i></button>
|
||
<button class="ref-toggle" id="refToggle" title="Справочник"><i class="fas fa-flask"></i></button>
|
||
|
||
<!-- ══ ПЛАВАЮЩИЙ СПРАВОЧНИК ══ -->
|
||
<div class="ref-panel" id="refPanel">
|
||
|
||
<!-- Шапка панели с кнопкой закрытия -->
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)">
|
||
<span style="font-size:.82rem;font-weight:800;color:var(--pri)">📋 Справочник · §40–53</span>
|
||
<button onclick="document.getElementById('refPanel').classList.remove('show')"
|
||
style="background:none;border:none;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:2px 4px;border-radius:5px"
|
||
title="Закрыть">✕</button>
|
||
</div>
|
||
|
||
<!-- Ряд активности — цветные плашки -->
|
||
<h3>⚡ Ряд активности</h3>
|
||
<div style="display:flex;gap:3px;flex-wrap:wrap;margin:5px 0 3px">
|
||
<span style="background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">K</span>
|
||
<span style="background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Ba</span>
|
||
<span style="background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Ca</span>
|
||
<span style="background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Na</span>
|
||
<span style="background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Mg</span>
|
||
<span style="background:#d1fae5;color:#065f46;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Al</span>
|
||
<span style="background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Zn</span>
|
||
<span style="background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Fe</span>
|
||
<span style="background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Ni</span>
|
||
<span style="background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Sn</span>
|
||
<span style="background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Pb</span>
|
||
<span style="background:#e5e7eb;color:#374151;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">(H₂)</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Cu</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Hg</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Ag</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Pt</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:2px 7px;border-radius:5px;font-size:.7rem;font-family:'JetBrains Mono',monospace;font-weight:700">Au</span>
|
||
</div>
|
||
<div style="display:flex;gap:8px;font-size:.67rem;margin-bottom:2px">
|
||
<span style="color:#065f46">■ активные</span>
|
||
<span style="color:#92400e">■ средние</span>
|
||
<span style="color:#991b1b">■ малоактивные</span>
|
||
</div>
|
||
|
||
<!-- Быстрая шпаргалка: что реагирует? -->
|
||
<h3>📊 Что реагирует?</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>H₂O:</strong> <span style="color:#065f46">K–Al ✔</span> · <span style="color:#92400e">Zn–Pb ⚠пар</span> · <span style="color:#991b1b">Cu–Au ✗</span></div>
|
||
<div><strong>HCl разб.:</strong> <span style="color:#065f46">K–Pb ✔</span> · <span style="color:#991b1b">Cu–Au ✗</span></div>
|
||
<div><strong>р-р соли:</strong> если стоит <em>левее</em> в ряду</div>
|
||
<div><strong>Fe, Al + конц. H₂SO₄:</strong> <span style="color:#991b1b">пассивация ✗</span></div>
|
||
</div>
|
||
|
||
<!-- Реакции с O₂ -->
|
||
<h3>🔥 + O₂</h3>
|
||
<div class="rf">2Mg + O₂ → 2MgO</div>
|
||
<div class="rf">4Al + 3O₂ → 2Al₂O₃</div>
|
||
<div class="rf">3Fe + 2O₂ → Fe₃O₄ (в O₂)</div>
|
||
<div class="rf">2Na + Cl₂ = 2NaCl</div>
|
||
|
||
<!-- Реакции с водой -->
|
||
<h3>💧 + H₂O</h3>
|
||
<div class="rf">2Na + 2H₂O = 2NaOH + H₂↑</div>
|
||
<div class="rf">Ca + 2H₂O = Ca(OH)₂ + H₂↑</div>
|
||
<div class="rf">3Fe + 4H₂O(пар) = Fe₃O₄ + 4H₂↑</div>
|
||
|
||
<!-- Реакции с кислотами -->
|
||
<h3>🧪 + кислота (разб.)</h3>
|
||
<div class="rf">Fe + 2HCl = FeCl₂ + H₂↑</div>
|
||
<div class="rf">Zn + H₂SO₄ = ZnSO₄ + H₂↑</div>
|
||
<div class="rf">2Al + 6HCl = 2AlCl₃ + 3H₂↑</div>
|
||
|
||
<!-- Реакции со щёлочью -->
|
||
<h3>🔬 + щёлочь (Al — амфотерный!)</h3>
|
||
<div class="rf">2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑</div>
|
||
<div style="font-size:.69rem;color:var(--muted);margin:2px 0 4px 2px;line-height:1.6">Fe и Zn со щелочью НЕ реагируют (в отличие от Al)</div>
|
||
|
||
<!-- Реакции с солями -->
|
||
<h3>⚗️ + раствор соли</h3>
|
||
<div class="rf">Fe + CuSO₄ = FeSO₄ + Cu↓</div>
|
||
<div class="rf">Cu + 2AgNO₃ = Cu(NO₃)₂ + 2Ag↓</div>
|
||
<div class="rf">Zn + CuSO₄ = ZnSO₄ + Cu↓</div>
|
||
|
||
<!-- Конц. кислоты -->
|
||
<h3>⚠️ Конц. кислоты</h3>
|
||
<div class="rf">Cu + 2H₂SO₄(к.) → CuSO₄ + SO₂↑ + 2H₂O</div>
|
||
<div class="rf">Cu + 4HNO₃(к.) → Cu(NO₃)₂ + 2NO₂↑ + 2H₂O</div>
|
||
<div style="font-size:.69rem;background:rgba(239,68,68,.08);border-radius:6px;padding:4px 8px;margin:3px 0;color:#991b1b;line-height:1.6">⚠ Fe и Al — пассивируются в конц. H₂SO₄ и HNO₃ (оксидная плёнка)</div>
|
||
|
||
<!-- Железо -->
|
||
<h3>🔩 Железо: два иона</h3>
|
||
<div class="rf">Fe⁰ − 2e⁻ → Fe²⁺ (HCl, H₂SO₄ разб.)</div>
|
||
<div class="rf">Fe⁰ − 3e⁻ → Fe³⁺ (Cl₂, конц. HNO₃)</div>
|
||
<div class="rf">Fe²⁺ + 2OH⁻ → Fe(OH)₂↓ (белый)</div>
|
||
<div class="rf">Fe³⁺ + 3OH⁻ → Fe(OH)₃↓ (бурый)</div>
|
||
<div class="rf">4Fe(OH)₂ + O₂ + 2H₂O → 4Fe(OH)₃</div>
|
||
|
||
<!-- Амфотерность Al -->
|
||
<h3>🔀 Амфотерность Al₂O₃ и Al(OH)₃</h3>
|
||
<div class="rf">Al₂O₃ + 6HCl = 2AlCl₃ + 3H₂O</div>
|
||
<div class="rf">Al₂O₃ + 2NaOH = 2NaAlO₂ + H₂O</div>
|
||
<div class="rf">Al(OH)₃ + 3HCl = AlCl₃ + 3H₂O</div>
|
||
<div class="rf">Al(OH)₃ + NaOH = NaAlO₂ + 2H₂O</div>
|
||
|
||
<!-- Алюминотермия -->
|
||
<h3>🔄 Алюминотермия</h3>
|
||
<div class="rf">Fe₂O₃ + 2Al = Al₂O₃ + 2Fe</div>
|
||
<div class="rf">3CuO + 2Al = Al₂O₃ + 3Cu</div>
|
||
|
||
<!-- Качественные реакции -->
|
||
<h3>🔎 Качественные реакции</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>Fe³⁺:</strong> KSCN → <span style="color:#dc2626">кроваво-красный</span> цвет</div>
|
||
<div><strong>Fe²⁺:</strong> K₄[Fe(CN)₆] → <span style="color:#1d4ed8">синий</span> осадок</div>
|
||
<div><strong>Al³⁺:</strong> NH₃·H₂O → <span style="color:#4b5563">белый студенистый</span> Al(OH)₃↓</div>
|
||
<div><strong>Na⁺:</strong> пламя → <span style="color:#f59e0b">жёлтый</span> цвет</div>
|
||
<div><strong>Cu²⁺:</strong> NaOH → <span style="color:#059669">голубой</span> Cu(OH)₂↓</div>
|
||
</div>
|
||
|
||
<!-- Оксиды металлов -->
|
||
<h3>🧱 Оксиды и гидроксиды Fe</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>FeO</strong> — чёрный, основный оксид (Fe²⁺)</div>
|
||
<div><strong>Fe₂O₃</strong> — красно-бурый, основный (Fe³⁺)</div>
|
||
<div><strong>Fe₃O₄</strong> — чёрный, смешанный FeO·Fe₂O₃</div>
|
||
<div><strong>Fe(OH)₂</strong> — белый (на воздухе → бурый)</div>
|
||
<div><strong>Fe(OH)₃</strong> — бурый осадок</div>
|
||
</div>
|
||
|
||
<!-- Молярные массы -->
|
||
<h3>🔢 Молярные массы (г/моль)</h3>
|
||
<div class="rf">Al=27 · Fe=56 · Na=23 · Ca=40</div>
|
||
<div class="rf">Mg=24 · Zn=65 · Cu=64 · Pb=207</div>
|
||
<div class="rf">Al₂O₃=102 · Fe₂O₃=160 · Fe₃O₄=232</div>
|
||
<div class="rf">NaOH=40 · AlCl₃=133,5 · FeCl₂=127</div>
|
||
|
||
<!-- Плотность -->
|
||
<h3>⚖️ Плотность и t°пл.</h3>
|
||
<div class="rf">Li 0,53 · Na 0,97 · Al 2,7 · Fe 7,87</div>
|
||
<div class="rf">Cu 8,9 · Pb 11,3 · Os 22,6 (макс.)</div>
|
||
<div class="rf">t°пл: Na 98 · Al 660 · Cu 1085 · Fe 1539</div>
|
||
<div style="font-size:.69rem;color:var(--muted);margin:2px 0 0 2px">Лёгкие ρ < 5 · Тяжёлые ρ > 5 г/см³</div>
|
||
|
||
<!-- Расчёты -->
|
||
<h3>📐 Расчёты</h3>
|
||
<div class="rf">n = m / M</div>
|
||
<div class="rf">m = n · M</div>
|
||
<div class="rf">V = n · Vₘ (Vₘ = 22,4 дм³/моль)</div>
|
||
<div class="rf">ω = m(компон.) / m(сплава)</div>
|
||
<div class="rf">m(Me) = m(сплава) · ω</div>
|
||
<div class="rf">η = m(практ.) / m(теор.) · 100%</div>
|
||
|
||
<h3>🪨 §46 Mg и ЩЗМ</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div>Группа IIA: <strong>Be · Mg · Ca · Sr · Ba · Ra</strong></div>
|
||
<div>ЩЗМ = Ca, Sr, Ba, Ra (Mg и Be — <em>не</em> ЩЗМ!)</div>
|
||
<div>Конфигурация: <strong>ns²</strong> · С.О. <strong>+2</strong></div>
|
||
<div>Me⁰ − 2e⁻ = Me²⁺ | Mg→Ra: активность ↑</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">+ неметаллы</div>
|
||
<div class="rf">2Mg + O₂ = 2MgO 2Ca + O₂ = 2CaO</div>
|
||
<div class="rf">Mg + I₂ = MgI₂ Sr + S = SrS</div>
|
||
<div class="rf">3Mg + N₂ →(t) Mg₃N₂ (нитрид, N: −3)</div>
|
||
<div class="rf">3Ca + 2P →(t) Ca₃P₂ (фосфид, P: −3)</div>
|
||
<div class="rf">Ca + H₂ →(t) CaH₂ (гидрид)</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">+ вода</div>
|
||
<div class="rf">Mg + 2H₂O →(t) Mg(OH)₂↓ + H₂↑</div>
|
||
<div class="rf">Ca + 2H₂O = Ca(OH)₂ + H₂↑ (н.у.!)</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">+ кислоты</div>
|
||
<div class="rf">Mg + H₂SO₄(разб.) = MgSO₄ + H₂↑</div>
|
||
<div class="rf">Ca + 2HCl = CaCl₂ + H₂↑</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Молярные массы (г/моль)</div>
|
||
<div class="rf">Mg=24 · Ca=40 · Sr=88 · Ba=137 · Ra=226</div>
|
||
<div class="rf">MgO=40 · CaO=56 · Mg(OH)₂=58 · Ca(OH)₂=74</div>
|
||
<div class="rf">Ba(OH)₂=171 · MgCO₃=84 · CaCO₃=100</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Минералы Ca и Mg</div>
|
||
<div style="font-size:.69rem;line-height:1.75;background:rgba(180,83,9,.05);border-radius:6px;padding:4px 8px;margin:2px 0">
|
||
<div>CaCO₃ — кальцит (мел, мрамор)</div>
|
||
<div>MgCO₃·CaCO₃ — доломит</div>
|
||
<div>CaSO₄·2H₂O — гипс</div>
|
||
<div>Ca₃(PO₄)₂ — фосфорит</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Биороль</div>
|
||
<div style="font-size:.69rem;line-height:1.75;background:rgba(180,83,9,.05);border-radius:6px;padding:4px 8px;margin:2px 0">
|
||
<div>Mg ≈ 70 г — хлорофилл, кости, зубы</div>
|
||
<div>Ca ≈ 1700 г — кости (≈1680 г), мышцы, кровь</div>
|
||
</div>
|
||
|
||
<h3>🔮 §47 Соединения Mg и Ca</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>MgO</strong> — белый, тугоплавкий. <strong>CaO</strong> — негашёная известь</div>
|
||
<div>CaO + H₂O = Ca(OH)₂ + Q (бурная реакция)</div>
|
||
<div><strong>Ca(OH)₂</strong> — гашёная известь (щёлочь)</div>
|
||
<div><strong>Mg(OH)₂</strong> — нерастворим, слабое основание</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Соли Ca</div>
|
||
<div class="rf">CaCO₃ — мел, мрамор (нерастворим)</div>
|
||
<div class="rf">CaSO₄·2H₂O — гипс | 2CaSO₄·H₂O — алебастр</div>
|
||
<div class="rf">Ca₃(PO₄)₂ — фосфорит | Ca(HCO₃)₂ — растворим</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Гипс ⇌ Алебастр</div>
|
||
<div class="rf">2CaSO₄·2H₂O →(t) 2CaSO₄·H₂O + 3H₂O↑</div>
|
||
<div class="rf">2CaSO₄·H₂O + 3H₂O → 2CaSO₄·2H₂O (схватывание)</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Цвета пламени</div>
|
||
<div style="font-size:.69rem;line-height:1.75;background:rgba(180,83,9,.05);border-radius:6px;padding:4px 8px;margin:2px 0">
|
||
<div>Ca²⁺ — <span style="color:#dc2626">кирпично-красное</span></div>
|
||
<div>Sr²⁺ — <span style="color:#b91c1c">малиново-красное</span></div>
|
||
<div>Ba²⁺ — <span style="color:#65a30d">жёлто-зелёное</span></div>
|
||
</div>
|
||
|
||
<h3>🔍 §48 Качественные реакции. Жёсткость</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>Ca²⁺</strong>: + CO₃²⁻ → CaCO₃↓ (белый)</div>
|
||
<div><strong>Ba²⁺</strong>: + SO₄²⁻ → BaSO₄↓ (белый, не раств. в к-тах!)</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Жёсткость воды</div>
|
||
<div style="font-size:.69rem;line-height:1.75;background:rgba(180,83,9,.05);border-radius:6px;padding:4px 8px;margin:2px 0">
|
||
<div><strong>Временная</strong>: Ca(HCO₃)₂, Mg(HCO₃)₂ — кипячением</div>
|
||
<div><strong>Постоянная</strong>: CaSO₄, MgCl₂ — содой Na₂CO₃</div>
|
||
</div>
|
||
<div class="rf">Ca(HCO₃)₂ →(t) CaCO₃↓ + H₂O + CO₂↑</div>
|
||
<div class="rf">CaSO₄ + Na₂CO₃ = CaCO₃↓ + Na₂SO₄</div>
|
||
<div class="rf">Ca(HCO₃)₂ + Ca(OH)₂ = 2CaCO₃↓ + 2H₂O</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Молярные массы (г/моль)</div>
|
||
<div class="rf">Ca(HCO₃)₂=162 · CaCO₃=100 · CaSO₄=136</div>
|
||
<div class="rf">Na₂CO₃=106 · BaSO₄=233 · Ba(NO₃)₂=261</div>
|
||
|
||
<h3>⚡ §45 Электролиз</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong style="color:#1d4ed8">Катод (−)</strong> — восстановление</div>
|
||
<div><strong style="color:#dc2626">Анод (+)</strong> — окисление</div>
|
||
</div>
|
||
<div class="rf">Катод: Na⁺ + 1e⁻ → Na⁰</div>
|
||
<div class="rf">Анод: 2Cl⁻ − 2e⁻ → Cl₂↑</div>
|
||
<div class="rf">2NaCl→<sup>ток</sup>2Na + Cl₂↑</div>
|
||
<div class="rf">CaF₂→Ca + F₂↑ | 2KBr→2K+Br₂↑</div>
|
||
<div style="font-size:.69rem;line-height:1.75;margin:4px 0">
|
||
M(NaCl)=58,5 · M(Na)=23 · M(Cl₂)=71
|
||
</div>
|
||
|
||
<h3>✨ §49 Алюминий</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div>Группа IIIA, период 3. Конфиг: [Ne]3s²3p¹. С.О. <strong>+3</strong></div>
|
||
<div>ρ=2,7 г/см³ · t°пл=660°C · серебристо-белый лёгкий металл</div>
|
||
<div><strong>Оксидная плёнка Al₂O₃</strong> защищает от воды и кислорода</div>
|
||
<div><strong>Пассивация</strong>: конц. H₂SO₄ и конц. HNO₃ — Al не реагирует</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Реакции</div>
|
||
<div class="rf">4Al + 3O₂ = 2Al₂O₃</div>
|
||
<div class="rf">2Al + 3Cl₂ = 2AlCl₃ (+3!)</div>
|
||
<div class="rf">2Al + 6HCl = 2AlCl₃ + 3H₂↑</div>
|
||
<div class="rf">2Al + 3H₂SO₄(разб.) = Al₂(SO₄)₃ + 3H₂↑</div>
|
||
<div class="rf">2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑</div>
|
||
<div class="rf">2Al + 3CuCl₂ = 2AlCl₃ + 3Cu↓</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Алюминотермия</div>
|
||
<div class="rf">Fe₂O₃ + 2Al = Al₂O₃ + 2Fe (термит)</div>
|
||
<div class="rf">8Al + 3Fe₃O₄ = 4Al₂O₃ + 9Fe</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Производство</div>
|
||
<div class="rf">2Al₂O₃ →(ток, криолит, 960°C) 4Al + 3O₂↑</div>
|
||
<div class="rf">M(Al)=27 · M(Al₂O₃)=102 · M(AlCl₃)=133,5</div>
|
||
|
||
<h3>🧊 §50 Соединения Al</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>Al₂O₃</strong> — корунд, белый, tугоплавкий (2050°C), <strong>амфотерный оксид</strong></div>
|
||
<div><strong>Al(OH)₃</strong> — белый студенистый осадок, <strong>амфотерный гидроксид</strong></div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Al₂O₃</div>
|
||
<div class="rf">Al₂O₃ + 6HCl = 2AlCl₃ + 3H₂O</div>
|
||
<div class="rf">Al₂O₃ + 2NaOH(сплавл.) = 2NaAlO₂ + H₂O</div>
|
||
<div class="rf">Al₂O₃ + 2NaOH(р-р) + 3H₂O = 2Na[Al(OH)₄]</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Al(OH)₃</div>
|
||
<div class="rf">Al(OH)₃ + 3HCl = AlCl₃ + 3H₂O</div>
|
||
<div class="rf">Al(OH)₃ + NaOH(конц.) = NaAlO₂ + 2H₂O</div>
|
||
<div class="rf">Al(OH)₃ + NaOH(р-р) = Na[Al(OH)₄]</div>
|
||
<div class="rf">2Al(OH)₃ →(t) Al₂O₃ + 3H₂O</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Получение Al(OH)₃</div>
|
||
<div class="rf">AlCl₃ + 3NaOH(недост.) = Al(OH)₃↓ + 3NaCl</div>
|
||
<div class="rf">AlCl₃ + 4NaOH(избыток) = Na[Al(OH)₄] + 3NaCl</div>
|
||
<div class="rf">M(NaAlO₂)=82 · M(Al(OH)₃)=78 · M(AlCl₃)=133,5</div>
|
||
|
||
<h3>⚙️ §51 Железо</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div>Группа VIIIB, период 4. Конфиг: [Ar]3d⁶4s². С.О. <strong>+2, +3</strong></div>
|
||
<div>ρ=7,87 г/см³ · t°пл=1535°C</div>
|
||
<div>С кислотами разб. и солями → Fe²⁺ | с Cl₂, O₂ → Fe³⁺</div>
|
||
<div><strong>Пассивация</strong>: конц. HNO₃, конц. H₂SO₄ — Fe не реагирует</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Реакции</div>
|
||
<div class="rf">2Fe + 3Cl₂ = 2FeCl₃ (с.о. +3!)</div>
|
||
<div class="rf">3Fe + 2O₂ = Fe₃O₄ (горение в O₂)</div>
|
||
<div class="rf">Fe + S = FeS</div>
|
||
<div class="rf">Fe + 2HCl = FeCl₂ + H₂↑</div>
|
||
<div class="rf">Fe + H₂SO₄(разб.) = FeSO₄ + H₂↑</div>
|
||
<div class="rf">Fe + CuCl₂ = FeCl₂ + Cu↓</div>
|
||
<div class="rf">3Fe + 4H₂O(пар) = Fe₃O₄ + 4H₂↑</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Коррозия</div>
|
||
<div class="rf">4Fe + 3O₂ + 6H₂O = 4Fe(OH)₃ (ржавчина)</div>
|
||
<div class="rf">3Fe + 2O₂ → Fe₃O₄ (окалина, при t°)</div>
|
||
<div class="rf">M(Fe)=56 · M(FeCl₂)=127 · M(FeCl₃)=162,5</div>
|
||
|
||
<h3>🧱 §52 Соединения Fe</h3>
|
||
<div style="font-size:.7rem;line-height:1.85;background:rgba(180,83,9,.05);border-radius:8px;padding:6px 9px;margin:3px 0">
|
||
<div><strong>FeO</strong> — чёрный, Fe²⁺ (восстановитель!)</div>
|
||
<div><strong>Fe₂O₃</strong> — красно-бурый, Fe³⁺</div>
|
||
<div><strong>Fe₃O₄</strong> = FeO·Fe₂O₃ — чёрный, магнит</div>
|
||
<div><strong>Fe(OH)₂</strong> — белый/серо-зел. → буреет на воздухе</div>
|
||
<div><strong>Fe(OH)₃</strong> — красно-бурый</div>
|
||
</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Реакции оксидов</div>
|
||
<div class="rf">FeO + 2HCl = FeCl₂ + H₂O</div>
|
||
<div class="rf">6FeO + O₂ = 2Fe₃O₄ (FeO — восстановитель)</div>
|
||
<div class="rf">Fe₂O₃ + 6HNO₃ = 2Fe(NO₃)₃ + 3H₂O</div>
|
||
<div class="rf">Fe₂O₃ + 2Al = Al₂O₃ + 2Fe (термит)</div>
|
||
<div class="rf">Fe₃O₄ + 8HCl = FeCl₂ + 2FeCl₃ + 4H₂O</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Гидроксиды</div>
|
||
<div class="rf">Fe(OH)₂ + 2HCl = FeCl₂ + 2H₂O</div>
|
||
<div class="rf">4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃</div>
|
||
<div class="rf">Fe(OH)₃ + 3HCl = FeCl₃ + 3H₂O</div>
|
||
<div class="rf">2Fe(OH)₃ →(t) Fe₂O₃ + 3H₂O</div>
|
||
<div style="font-size:.69rem;font-weight:700;color:var(--muted);margin:5px 0 2px 1px">Качественные реакции</div>
|
||
<div style="font-size:.69rem;line-height:1.75;background:rgba(180,83,9,.05);border-radius:6px;padding:4px 8px;margin:2px 0">
|
||
<div><strong>Fe²⁺</strong>: NaOH → <span style="color:#6b7280">серо-зелёный</span> Fe(OH)₂↓ (→ буреет)</div>
|
||
<div><strong>Fe³⁺</strong>: NaOH → <span style="color:#92400e">красно-бурый</span> Fe(OH)₃↓</div>
|
||
<div><strong>Fe³⁺</strong>: KSCN → <span style="color:#dc2626">кроваво-красный</span> р-р</div>
|
||
</div>
|
||
<div class="rf">M(Fe₃O₄)=232 · M(Fe(OH)₂)=90 · M(Fe(OH)₃)=107</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ ШАПКА ══ -->
|
||
<div class="hdr">
|
||
<h1><i class="fas fa-flask"></i> Химия 9 — §1–53</h1>
|
||
<p>Интерактивный справочник · Химия 9 кл — полный курс</p>
|
||
</div>
|
||
|
||
<div class="page-layout">
|
||
<aside class="sidebar">
|
||
<div class="sb-brand">
|
||
<span class="sb-title"><i class="fas fa-flask"></i> Металлы</span>
|
||
<span class="sb-sub">Химия 9 класс</span>
|
||
</div>
|
||
<div class="ch-bar">
|
||
<button class="ch-btn" data-ch="A"><span class="ch-icon"><i class="fas fa-atom"></i></span><span class="ch-label">Строение вещества §1–10</span><span class="ch-roman" style="color:#1d4ed8">I</span></button>
|
||
<div class="sec-group" data-chg="A">
|
||
<div class="tab" data-tab="ref1"><span class="tab-num">§1</span><span class="tab-name">Строение атома. Ядро</span></div>
|
||
<div class="tab" data-tab="ref2"><span class="tab-num">§2</span><span class="tab-name">Электронные оболочки</span></div>
|
||
<div class="tab" data-tab="ref3"><span class="tab-num">§3</span><span class="tab-name">Валентность</span></div>
|
||
<div class="tab" data-tab="ref4"><span class="tab-num">§4</span><span class="tab-name">Ковалентная связь</span></div>
|
||
<div class="tab" data-tab="ref5"><span class="tab-num">§5</span><span class="tab-name">Кратные связи. Д-А</span></div>
|
||
<div class="tab" data-tab="ref6"><span class="tab-num">§6</span><span class="tab-name">Ионная связь</span></div>
|
||
<div class="tab" data-tab="ref7"><span class="tab-num">§7</span><span class="tab-name">Степень окисления</span></div>
|
||
<div class="tab" data-tab="ref8"><span class="tab-num">§8</span><span class="tab-name">Кристалл. решётки</span></div>
|
||
<div class="tab" data-tab="ref9"><span class="tab-num">§9</span><span class="tab-name">Смеси. Разделение</span></div>
|
||
<div class="tab" data-tab="ref10"><span class="tab-num">§10</span><span class="tab-name">Дисперсные системы</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="B"><span class="ch-icon"><i class="fas fa-flask"></i></span><span class="ch-label">Растворы и классы §11–18</span><span class="ch-roman" style="color:#7c3aed">II</span></button>
|
||
<div class="sec-group" data-chg="B">
|
||
<div class="tab" data-tab="ref11"><span class="tab-num">§11</span><span class="tab-name">Растворы. ТЭД</span></div>
|
||
<div class="tab" data-tab="ref12"><span class="tab-num">§12</span><span class="tab-name">Ионный обмен</span></div>
|
||
<div class="tab" data-tab="ref13"><span class="tab-num">§13</span><span class="tab-name">Гидролиз солей</span></div>
|
||
<div class="tab" data-tab="ref14"><span class="tab-num">§14</span><span class="tab-name">Оксиды</span></div>
|
||
<div class="tab" data-tab="ref15"><span class="tab-num">§15</span><span class="tab-name">Основания</span></div>
|
||
<div class="tab" data-tab="ref16"><span class="tab-num">§16</span><span class="tab-name">Кислоты</span></div>
|
||
<div class="tab" data-tab="ref17"><span class="tab-num">§17</span><span class="tab-name">Соли</span></div>
|
||
<div class="tab" data-tab="ref18"><span class="tab-num">§18</span><span class="tab-name">Обобщение классов</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="C"><span class="ch-icon"><i class="fas fa-fire"></i></span><span class="ch-label">ОВР §19–25</span><span class="ch-roman" style="color:#059669">III</span></button>
|
||
<div class="sec-group" data-chg="C">
|
||
<div class="tab" data-tab="ref19"><span class="tab-num">§19</span><span class="tab-name">ОВР. Основные понятия</span></div>
|
||
<div class="tab" data-tab="ref20"><span class="tab-num">§20</span><span class="tab-name">Степень окисления</span></div>
|
||
<div class="tab" data-tab="ref21"><span class="tab-num">§21</span><span class="tab-name">Окислители. Восст.</span></div>
|
||
<div class="tab" data-tab="ref22"><span class="tab-num">§22</span><span class="tab-name">Электронный баланс</span></div>
|
||
<div class="tab" data-tab="ref23"><span class="tab-num">§23</span><span class="tab-name">Важнейшие ОВ</span></div>
|
||
<div class="tab" data-tab="ref24"><span class="tab-num">§24</span><span class="tab-name">Полуреакции</span></div>
|
||
<div class="tab" data-tab="ref25"><span class="tab-num">§25</span><span class="tab-name">Обобщение ОВР</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="D"><span class="ch-icon"><i class="fas fa-vial"></i></span><span class="ch-label">Неметаллы §26–39</span><span class="ch-roman" style="color:#0891b2">IV</span></button>
|
||
<div class="sec-group" data-chg="D">
|
||
<div class="tab" data-tab="ref26"><span class="tab-num">§26</span><span class="tab-name">Азот. N₂</span></div>
|
||
<div class="tab" data-tab="ref27"><span class="tab-num">§27</span><span class="tab-name">Аммиак</span></div>
|
||
<div class="tab" data-tab="ref28"><span class="tab-num">§28</span><span class="tab-name">Соли аммония</span></div>
|
||
<div class="tab" data-tab="ref29"><span class="tab-num">§29</span><span class="tab-name">HNO₃</span></div>
|
||
<div class="tab" data-tab="ref30"><span class="tab-num">§30</span><span class="tab-name">Нитраты</span></div>
|
||
<div class="tab" data-tab="ref31"><span class="tab-num">§31</span><span class="tab-name">Фосфор</span></div>
|
||
<div class="tab" data-tab="ref32"><span class="tab-num">§32</span><span class="tab-name">Соединения P</span></div>
|
||
<div class="tab" data-tab="ref33"><span class="tab-num">§33</span><span class="tab-name">Минер. удобрения</span></div>
|
||
<div class="tab" data-tab="ref34"><span class="tab-num">§34</span><span class="tab-name">Углерод. Аллотропия</span></div>
|
||
<div class="tab" data-tab="ref35"><span class="tab-num">§35</span><span class="tab-name">Оксиды углерода</span></div>
|
||
<div class="tab" data-tab="ref36"><span class="tab-num">§36</span><span class="tab-name">Угольная кислота</span></div>
|
||
<div class="tab" data-tab="ref37"><span class="tab-num">§37</span><span class="tab-name">Кремний</span></div>
|
||
<div class="tab" data-tab="ref38"><span class="tab-num">§38</span><span class="tab-name">SiO₂. Силикаты</span></div>
|
||
<div class="tab" data-tab="ref39"><span class="tab-num">§39</span><span class="tab-name">Строит. материалы</span></div>
|
||
</div>
|
||
<button class="ch-btn active" data-ch="1"><span class="ch-icon"><i class="fas fa-atom"></i></span><span class="ch-label">Строение и свойства</span><span class="ch-roman">I</span></button>
|
||
<div class="sec-group show" data-chg="1">
|
||
<div class="tab active" data-tab="ref40"><span class="tab-num">§40</span><span class="tab-name">Строение металлов</span></div>
|
||
<div class="tab" data-tab="ref41"><span class="tab-num">§41</span><span class="tab-name">Физические свойства</span></div>
|
||
<div class="tab" data-tab="ref42"><span class="tab-num">§42</span><span class="tab-name">Химические реакции</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="2"><span class="ch-icon"><i class="fas fa-flask"></i></span><span class="ch-label">Al и Fe — основы</span><span class="ch-roman">II</span></button>
|
||
<div class="sec-group" data-chg="2">
|
||
<div class="tab" data-tab="ref43"><span class="tab-num">§43</span><span class="tab-name">Алюминий</span></div>
|
||
<div class="tab" data-tab="ref44"><span class="tab-num">§44</span><span class="tab-name">Железо</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="3"><span class="ch-icon"><i class="fas fa-bolt"></i></span><span class="ch-label">Электролиз</span><span class="ch-roman">III</span></button>
|
||
<div class="sec-group" data-chg="3">
|
||
<div class="tab" data-tab="ref45"><span class="tab-num">§45</span><span class="tab-name">Электролиз расплавов</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="4"><span class="ch-icon"><i class="fas fa-mountain"></i></span><span class="ch-label">Mg, Ca и ЩЗМ</span><span class="ch-roman">IV</span></button>
|
||
<div class="sec-group" data-chg="4">
|
||
<div class="tab" data-tab="ref46"><span class="tab-num">§46</span><span class="tab-name">Mg и ЩЗМ</span></div>
|
||
<div class="tab" data-tab="ref47"><span class="tab-num">§47</span><span class="tab-name">Соед. Mg и Ca</span></div>
|
||
<div class="tab" data-tab="ref48"><span class="tab-num">§48</span><span class="tab-name">Жёсткость воды</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="5"><span class="ch-icon"><i class="fas fa-atom"></i></span><span class="ch-label">Алюминий углублённо</span><span class="ch-roman">V</span></button>
|
||
<div class="sec-group" data-chg="5">
|
||
<div class="tab" data-tab="ref49"><span class="tab-num">§49</span><span class="tab-name">Алюминий. Общая хар-ка</span></div>
|
||
<div class="tab" data-tab="ref50"><span class="tab-num">§50</span><span class="tab-name">Оксид и гидроксид Al</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="6"><span class="ch-icon"><i class="fas fa-tools"></i></span><span class="ch-label">Железо углублённо</span><span class="ch-roman">VI</span></button>
|
||
<div class="sec-group" data-chg="6">
|
||
<div class="tab" data-tab="ref51"><span class="tab-num">§51</span><span class="tab-name">Железо. Коррозия</span></div>
|
||
<div class="tab" data-tab="ref52"><span class="tab-num">§52</span><span class="tab-name">Соединения железа</span></div>
|
||
<div class="tab" data-tab="ref53"><span class="tab-num">§53</span><span class="tab-name">Получение железа</span></div>
|
||
</div>
|
||
<button class="ch-btn" data-ch="Z"><span class="ch-icon"><i class="fas fa-book-open"></i></span><span class="ch-label">Все задачи</span><span class="ch-roman">ВСЕ</span></button>
|
||
<div class="sec-group" data-chg="Z">
|
||
<div class="tab" data-tab="tasks"><span class="tab-num"><i class="fas fa-book-open"></i></span><span class="tab-name">Все задачи §1–53</span></div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
<div class="main-content">
|
||
|
||
<!-- ══ ТАБЫ ══ -->
|
||
<div class="tabs">
|
||
<div class="tab" data-tab="ref1">⚛️ §1 Строение атома</div>
|
||
<div class="tab" data-tab="ref2">🔢 §2 Электрон. оболочки</div>
|
||
<div class="tab" data-tab="ref3">🔗 §3 Валентность</div>
|
||
<div class="tab" data-tab="ref4">🔗 §4 Ковалентная связь</div>
|
||
<div class="tab" data-tab="ref5">🔗 §5 Кратные связи</div>
|
||
<div class="tab" data-tab="ref6">🔗 §6 Ионная связь</div>
|
||
<div class="tab" data-tab="ref7">🔢 §7 Степень окисл.</div>
|
||
<div class="tab" data-tab="ref8">💎 §8 Кристалл. решётки</div>
|
||
<div class="tab" data-tab="ref9">🧪 §9 Смеси</div>
|
||
<div class="tab" data-tab="ref10">💧 §10 Дисп. системы</div>
|
||
<div class="tab" data-tab="ref11">⚡ §11 Растворы. ТЭД</div>
|
||
<div class="tab" data-tab="ref12">🔄 §12 Ионный обмен</div>
|
||
<div class="tab" data-tab="ref13">💦 §13 Гидролиз</div>
|
||
<div class="tab" data-tab="ref14">🔬 §14 Оксиды</div>
|
||
<div class="tab" data-tab="ref15">🧫 §15 Основания</div>
|
||
<div class="tab" data-tab="ref16">🧪 §16 Кислоты</div>
|
||
<div class="tab" data-tab="ref17">🧂 §17 Соли</div>
|
||
<div class="tab" data-tab="ref18">📋 §18 Обобщение</div>
|
||
<div class="tab" data-tab="ref19">🔥 §19 ОВР понятия</div>
|
||
<div class="tab" data-tab="ref20">🔢 §20 Степень ок.</div>
|
||
<div class="tab" data-tab="ref21">⚡ §21 Окислители</div>
|
||
<div class="tab" data-tab="ref22">⚖️ §22 Эл. баланс</div>
|
||
<div class="tab" data-tab="ref23">🔥 §23 Важн. ОВ</div>
|
||
<div class="tab" data-tab="ref24">🧲 §24 Полуреакции</div>
|
||
<div class="tab" data-tab="ref25">📋 §25 Итог ОВР</div>
|
||
<div class="tab" data-tab="ref26">💨 §26 Азот. N₂</div>
|
||
<div class="tab" data-tab="ref27">💧 §27 Аммиак</div>
|
||
<div class="tab" data-tab="ref28">🧂 §28 Соли аммония</div>
|
||
<div class="tab" data-tab="ref29">🌡️ §29 HNO₃</div>
|
||
<div class="tab" data-tab="ref30">🌱 §30 Нитраты</div>
|
||
<div class="tab" data-tab="ref31">🌿 §31 Фосфор</div>
|
||
<div class="tab" data-tab="ref32">🏭 §32 Соединения P</div>
|
||
<div class="tab" data-tab="ref33">🌾 §33 Удобрения</div>
|
||
<div class="tab" data-tab="ref34">💎 §34 Углерод</div>
|
||
<div class="tab" data-tab="ref35">💨 §35 Оксиды C</div>
|
||
<div class="tab" data-tab="ref36">🌊 §36 H₂CO₃</div>
|
||
<div class="tab" data-tab="ref37">🪨 §37 Кремний</div>
|
||
<div class="tab" data-tab="ref38">🏭 §38 SiO₂</div>
|
||
<div class="tab" data-tab="ref39">🏗️ §39 Строит. матер.</div>
|
||
<div class="tab active" data-tab="ref40">⚛️ §40 Строение</div>
|
||
<div class="tab" data-tab="ref41">🔬 §41 Свойства</div>
|
||
<div class="tab" data-tab="ref42">⚗️ §42 Реакции</div>
|
||
<div class="tab" data-tab="ref43">🧪 §43 Алюминий</div>
|
||
<div class="tab" data-tab="ref44">⚙️ §44 Железо</div>
|
||
<div class="tab" data-tab="ref45">⚡ §45 Электролиз</div>
|
||
<div class="tab" data-tab="ref46">🪨 §46 Mg и ЩЗМ</div>
|
||
<div class="tab" data-tab="ref47">🔮 §47 Соед. Mg,Ca</div>
|
||
<div class="tab" data-tab="ref48">🔍 §48 Жёсткость</div>
|
||
<div class="tab" data-tab="ref49">✨ §49 Алюминий</div>
|
||
<div class="tab" data-tab="ref50">🧊 §50 Соед. Al</div>
|
||
<div class="tab" data-tab="ref51">⚙️ §51 Железо</div>
|
||
<div class="tab" data-tab="ref52">🧱 §52 Соед. Fe</div>
|
||
<div class="tab" data-tab="ref53">🏭 §53 Получение Fe</div>
|
||
<div class="tab" data-tab="tasks">✏️ Задачи §1–53</div>
|
||
</div>
|
||
|
||
<!-- ══ §1 — ЭЛЕКТРОЛИТЫ И НЕЭЛЕКТРОЛИТЫ ══ -->
|
||
<div class="content" id="tab-ref1">
|
||
<div class="section-title"><i class="fas fa-atom"></i> §1. Строение атома. Ядро</div>
|
||
<div class="ch-stat">
|
||
<div class="ch-stat-card"><div class="big">Z</div><div class="lbl">порядковый номер = число протонов = число электронов</div></div>
|
||
<div class="ch-stat-card"><div class="big">A</div><div class="lbl">массовое число = протоны + нейтроны (A = Z + N)</div></div>
|
||
<div class="ch-stat-card"><div class="big">N</div><div class="lbl">число нейтронов = A − Z</div></div>
|
||
</div>
|
||
<div class="def-box"><strong>Атом</strong> — электронейтральная частица: ядро (p⁺ + n⁰) + электронные оболочки (e⁻). Число протонов = числу электронов → атом нейтрален.</div>
|
||
<div class="def-box"><strong>Изотопы</strong> — атомы <em>одного</em> элемента с одинаковым Z, но разным числом нейтронов N (→ разное A).</div>
|
||
<table class="tbl" style="margin:14px 0">
|
||
<thead><tr><th>Элемент</th><th>Обознач.</th><th>Z</th><th>A</th><th>N = A−Z</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Водород</td><td>¹H</td><td>1</td><td>1</td><td>0</td></tr>
|
||
<tr><td>Дейтерий</td><td>²H</td><td>1</td><td>2</td><td>1</td></tr>
|
||
<tr><td>Тритий</td><td>³H</td><td>1</td><td>3</td><td>2</td></tr>
|
||
<tr><td>Углерод-12</td><td>¹²C</td><td>6</td><td>12</td><td>6</td></tr>
|
||
<tr><td>Углерод-14</td><td>¹⁴C</td><td>6</td><td>14</td><td>8</td></tr>
|
||
<tr><td>Хлор-35</td><td>³⁵Cl</td><td>17</td><td>35</td><td>18</td></tr>
|
||
<tr><td>Хлор-37</td><td>³⁷Cl</td><td>17</td><td>37</td><td>20</td></tr>
|
||
<tr><td>Железо-56</td><td>⁵⁶Fe</td><td>26</td><td>56</td><td>30</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Интерактив: выбери элемент</div>
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px">
|
||
<select class="econf-select" id="atom1sel" onchange="atom1Show()">
|
||
<option value="">— элемент —</option>
|
||
<option value="H,1,1">Водород H (Z=1, A=1)</option>
|
||
<option value="He,2,4">Гелий He (Z=2, A=4)</option>
|
||
<option value="Li,3,7">Литий Li (Z=3, A=7)</option>
|
||
<option value="C,6,12">Углерод C (Z=6, A=12)</option>
|
||
<option value="N,7,14">Азот N (Z=7, A=14)</option>
|
||
<option value="O,8,16">Кислород O (Z=8, A=16)</option>
|
||
<option value="Na,11,23">Натрий Na (Z=11, A=23)</option>
|
||
<option value="Cl,17,35">Хлор Cl (Z=17, A=35)</option>
|
||
<option value="Ca,20,40">Кальций Ca (Z=20, A=40)</option>
|
||
<option value="Fe,26,56">Железо Fe (Z=26, A=56)</option>
|
||
</select>
|
||
</div>
|
||
<div class="econf-box" id="atom1box">
|
||
<div class="formula-grid" id="atom1res" style="grid-template-columns:repeat(3,1fr);gap:10px"></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">⚛️ Интерактивная модель атома Бора</div>
|
||
<div class="atom-stage-wrap reveal-on-view">
|
||
<div class="atom-controls">
|
||
<label>Z: <input type="range" id="atom1-z" min="1" max="20" value="11" oninput="atom1Render()"></label>
|
||
<span id="atom1-zlabel" style="font-weight:700;font-size:16px;color:#1e40af">Na (Z=11)</span>
|
||
<label style="margin-left:12px">A: <input type="range" id="atom1-a" min="1" max="40" value="23" oninput="atom1Render()"></label>
|
||
<span id="atom1-alabel" style="font-size:13px;color:#475569">A=23</span>
|
||
</div>
|
||
<div class="atom-stage" id="atom1-stage"></div>
|
||
<div class="atom-info-box" id="atom1-info"></div>
|
||
<div style="font-size:12px;color:#94a3b8;text-align:center">Попробуй 5+ элементов для бонуса!</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §2 — МЕХАНИЗМ ЭЛЕКТРОЛИТИЧЕСКОЙ ДИССОЦИАЦИИ ══ -->
|
||
<div class="content" id="tab-ref2">
|
||
<div class="section-title"><i class="fas fa-layer-group"></i> §2. Электронные оболочки атомов</div>
|
||
<div class="def-box"><strong>Принцип Паули:</strong> на одной орбитали не более 2 электронов с противоположными спинами (↑↓).</div>
|
||
<div class="def-box"><strong>Правило Хунда:</strong> электроны сначала занимают каждую орбиталь подуровня по одному (↑), затем спариваются.</div>
|
||
<div class="def-box"><strong>Макс. e⁻ на уровне n:</strong> 2n² (n=1: 2; n=2: 8; n=3: 18; n=4: 32)</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Уровень n</th><th>Подуровни</th><th>Орбиталей</th><th>Макс. e⁻</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>1</td><td>1s</td><td>1</td><td>2</td></tr>
|
||
<tr><td>2</td><td>2s, 2p</td><td>1+3=4</td><td>8</td></tr>
|
||
<tr><td>3</td><td>3s, 3p, 3d</td><td>1+3+5=9</td><td>18</td></tr>
|
||
<tr><td>4</td><td>4s, 4p, 4d, 4f</td><td>1+3+5+7=16</td><td>32</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Электронная конфигурация</div>
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px">
|
||
<select class="econf-select" id="econf2sel" onchange="econf2Show()">
|
||
<option value="">— элемент —</option>
|
||
<option value="H,1,1s¹">H (Z=1)</option>
|
||
<option value="He,2,1s²">He (Z=2)</option>
|
||
<option value="Li,3,1s²2s¹">Li (Z=3)</option>
|
||
<option value="Be,4,1s²2s²">Be (Z=4)</option>
|
||
<option value="B,5,1s²2s²2p¹">B (Z=5)</option>
|
||
<option value="C,6,1s²2s²2p²">C (Z=6)</option>
|
||
<option value="N,7,1s²2s²2p³">N (Z=7)</option>
|
||
<option value="O,8,1s²2s²2p⁴">O (Z=8)</option>
|
||
<option value="F,9,1s²2s²2p⁵">F (Z=9)</option>
|
||
<option value="Ne,10,1s²2s²2p⁶">Ne (Z=10)</option>
|
||
<option value="Na,11,1s²2s²2p⁶3s¹">Na (Z=11)</option>
|
||
<option value="Mg,12,1s²2s²2p⁶3s²">Mg (Z=12)</option>
|
||
<option value="Al,13,1s²2s²2p⁶3s²3p¹">Al (Z=13)</option>
|
||
<option value="Si,14,1s²2s²2p⁶3s²3p²">Si (Z=14)</option>
|
||
<option value="P,15,1s²2s²2p⁶3s²3p³">P (Z=15)</option>
|
||
<option value="S,16,1s²2s²2p⁶3s²3p⁴">S (Z=16)</option>
|
||
<option value="Cl,17,1s²2s²2p⁶3s²3p⁵">Cl (Z=17)</option>
|
||
<option value="Ar,18,1s²2s²2p⁶3s²3p⁶">Ar (Z=18)</option>
|
||
<option value="K,19,1s²2s²2p⁶3s²3p⁶4s¹">K (Z=19)</option>
|
||
<option value="Ca,20,1s²2s²2p⁶3s²3p⁶4s²">Ca (Z=20)</option>
|
||
</select>
|
||
</div>
|
||
<div class="econf-box" id="econf2box">
|
||
<div id="econf2res"></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🔬 Заполнение подуровней (правило Клечковского)</div>
|
||
<div class="reveal-on-view" style="margin:12px 0">
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px">
|
||
<select id="econf2-sel" onchange="econf2Anim()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:13px">
|
||
<option value="1">H (Z=1)</option><option value="2">He (Z=2)</option>
|
||
<option value="3">Li (Z=3)</option><option value="4">Be (Z=4)</option>
|
||
<option value="5">B (Z=5)</option><option value="6">C (Z=6)</option>
|
||
<option value="7">N (Z=7)</option><option value="8">O (Z=8)</option>
|
||
<option value="9">F (Z=9)</option><option value="10">Ne (Z=10)</option>
|
||
<option value="11" selected>Na (Z=11)</option><option value="12">Mg (Z=12)</option>
|
||
<option value="13">Al (Z=13)</option><option value="14">Si (Z=14)</option>
|
||
<option value="15">P (Z=15)</option><option value="16">S (Z=16)</option>
|
||
<option value="17">Cl (Z=17)</option><option value="18">Ar (Z=18)</option>
|
||
<option value="19">K (Z=19)</option><option value="20">Ca (Z=20)</option>
|
||
</select>
|
||
<button onclick="econf2Anim()" style="padding:5px 14px;border-radius:8px;border:none;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px">▶ Заполнить</button>
|
||
<button onclick="econf2Reset()" style="padding:5px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:13px">↺ Сброс</button>
|
||
</div>
|
||
<div class="sublevel-grid" id="econf2-grid"></div>
|
||
<div id="econf2-result" style="font-family:monospace;font-size:14px;margin-top:8px;padding:8px 12px;background:#f8fafc;border-radius:8px;min-height:30px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §3 — СИЛЬНЫЕ И СЛАБЫЕ ЭЛЕКТРОЛИТЫ ══ -->
|
||
<div class="content" id="tab-ref3">
|
||
<div class="section-title"><i class="fas fa-link"></i> §3. Валентность атомов в свете электронной теории</div>
|
||
<div class="def-box"><strong>Валентность</strong> — число ковалентных связей, которые атом образует. В основном состоянии = числу неспаренных электронов. В возбуждённом — больше (за счёт перехода электронов).</div>
|
||
<div class="def-box">⚠ Азот N <strong>не имеет d-орбиталей</strong> на 2-м уровне → максимальная валентность IV (через д-а механизм). Сера и фосфор — могут возбуждаться до VI и V.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Элемент</th><th>Осн. сост.</th><th>Возб. сост.</th><th>Валентности</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>H</td><td>1s¹ → 1 неспар.</td><td>—</td><td>I</td></tr>
|
||
<tr><td>C</td><td>2s²2p² → 2 неспар.</td><td>2s¹2p³ → 4 неспар.</td><td>II, IV</td></tr>
|
||
<tr><td>N</td><td>2s²2p³ → 3 неспар.</td><td>нет d-орб. → IV (д-а)</td><td>III, IV</td></tr>
|
||
<tr><td>O</td><td>2s²2p⁴ → 2 неспар.</td><td>—</td><td>II</td></tr>
|
||
<tr><td>S</td><td>3s²3p⁴ → 2 неспар.</td><td>3s¹3p³3d² → 6 неспар.</td><td>II, IV, VI</td></tr>
|
||
<tr><td>P</td><td>3s²3p³ → 3 неспар.</td><td>3s¹3p³3d¹ → 5 неспар.</td><td>III, V</td></tr>
|
||
<tr><td>Cl</td><td>3s²3p⁵ → 1 неспар.</td><td>до 3d → I, III, V, VII</td><td>I, III, V, VII</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми элемент — узнай валентности</div>
|
||
<div class="val-grid">
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">H</div><div class="vc-name">Водород</div><div class="vc-val">Валентность: I</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">C</div><div class="vc-name">Углерод</div><div class="vc-val">Валентности: II, IV<br>Возбуждение: 2s¹2p³</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">N</div><div class="vc-name">Азот</div><div class="vc-val">Валентности: III, IV<br>Нет d-орбит. на 2 уровне!</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">O</div><div class="vc-name">Кислород</div><div class="vc-val">Валентность: II<br>Нет d-орбит., не возбуждается</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">S</div><div class="vc-name">Сера</div><div class="vc-val">Валентности: II, IV, VI<br>Макс. → 3s¹3p³3d²</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">P</div><div class="vc-name">Фосфор</div><div class="vc-val">Валентности: III, V<br>Макс. → 3s¹3p³3d¹</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">Cl</div><div class="vc-name">Хлор</div><div class="vc-val">Валентности: I,III,V,VII<br>d-орбит. доступны</div></div>
|
||
<div class="val-card" onclick="this.classList.toggle('shown')"><div class="vc-sym">Si</div><div class="vc-name">Кремний</div><div class="vc-val">Валентности: II, IV<br>Наиболее устойчива IV</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §4 — КИСЛОТЫ В СВЕТЕ ТЭД ══ -->
|
||
<div class="content" id="tab-ref4">
|
||
<div class="section-title"><i class="fas fa-share-nodes"></i> §4. Ковалентная связь. Электроотрицательность</div>
|
||
<div class="def-box"><strong>Ковалентная связь</strong> — образована за счёт обобществления пары электронов двумя атомами. Чем больше разность ЭО — тем более полярная связь.</div>
|
||
<div class="def-box"><strong>ЭО по возрастанию:</strong> Cs < K < Na < Li < Mg < Al < <strong>H</strong> < P < C < S < <strong>N</strong> < <strong>Cl</strong> < <strong>O</strong> < <strong>F</strong></div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Тип связи</th><th>Условие</th><th>Примеры</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Неполярная ковалентная</td><td>ΔЭО = 0 (одинаковые атомы)</td><td>H₂, O₂, N₂, Cl₂, F₂</td></tr>
|
||
<tr><td>Полярная ковалентная</td><td>0 < ΔЭО < 1,7</td><td>HCl, H₂O, NH₃, CO₂, CH₄</td></tr>
|
||
<tr><td>Ионная</td><td>ΔЭО > 1,7</td><td>NaCl, KBr, MgO, CaF₂</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми молекулу — узнай тип связи</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">H₂</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Неполярная ковалентная<br>ΔЭО = 0</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">HCl</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Полярная ковалентная<br>ΔЭО = 3,16−2,20 = 0,96; Hδ⁺–Clδ⁻</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">H₂O</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Полярная ковалентная<br>ΔЭО(O−H) = 1,40; Hδ⁺–Oδ⁻–Hδ⁺</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NaCl</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Ионная<br>ΔЭО = 3,16−0,93 = 2,23</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">N₂</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Неполярная ковалентная<br>ΔЭО = 0; тройная N≡N</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NH₃</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Полярная ковалентная<br>ΔЭО(N−H) = 0,84</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CO₂</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Полярная ков. (O=C=O)<br>Молекула линейная → неполярная в целом</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">MgO</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Ионная<br>ΔЭО = 3,44−1,31 = 2,13</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Cl₂</div><div class="bc-type">Какой тип?</div><div class="bc-ans">Неполярная ковалентная<br>ΔЭО = 0</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🌡️ Сравнение ЭО и полярность связи</div>
|
||
<div class="reveal-on-view" style="margin:12px 0">
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px">
|
||
<select id="eo4-a" onchange="eo4Update()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:13px">
|
||
<option value="H,2.20">H</option><option value="Li,0.98">Li</option>
|
||
<option value="Na,0.93">Na</option><option value="K,0.82">K</option>
|
||
<option value="Mg,1.31">Mg</option><option value="Al,1.61">Al</option>
|
||
<option value="C,2.55">C</option><option value="N,3.04">N</option>
|
||
<option value="O,3.44" selected>O</option>
|
||
<option value="F,3.98">F</option><option value="Cl,3.16">Cl</option>
|
||
<option value="S,2.58">S</option><option value="P,2.19">P</option>
|
||
</select>
|
||
<span style="font-size:18px">—</span>
|
||
<select id="eo4-b" onchange="eo4Update()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:13px">
|
||
<option value="H,2.20" selected>H</option><option value="Li,0.98">Li</option>
|
||
<option value="Na,0.93">Na</option><option value="K,0.82">K</option>
|
||
<option value="Mg,1.31">Mg</option><option value="Al,1.61">Al</option>
|
||
<option value="C,2.55">C</option><option value="N,3.04">N</option>
|
||
<option value="O,3.44">O</option>
|
||
<option value="F,3.98">F</option><option value="Cl,3.16">Cl</option>
|
||
<option value="S,2.58">S</option><option value="P,2.19">P</option>
|
||
</select>
|
||
</div>
|
||
<div class="eo-scene" id="eo4-scene">
|
||
<div class="eo-atom" id="eo4-a-atom">O</div>
|
||
<div class="eo-connector" id="eo4-conn">
|
||
<span class="eo-delta plus" id="eo4-dp">δ+</span>
|
||
<span class="eo-delta minus" id="eo4-dm">δ−</span>
|
||
</div>
|
||
<div class="eo-atom" id="eo4-b-atom">H</div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:6px">
|
||
<span id="eo4-class" class="eo-class-tag eo-polar">Полярная ковалентная</span>
|
||
<span id="eo4-delta-val" style="margin-left:10px;font-size:13px;color:#475569"></span>
|
||
</div>
|
||
<div class="section-title" style="font-size:13px;margin-top:16px">Тепловая карта ЭО (по Полингу)</div>
|
||
<div class="eo-heatmap" id="eo4-heatmap"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §5 — ОСНОВАНИЯ В СВЕТЕ ТЭД ══ -->
|
||
<div class="content" id="tab-ref5">
|
||
<div class="section-title"><i class="fas fa-code-branch"></i> §5. Кратные связи. Донорно-акцепторный механизм</div>
|
||
<div class="def-box"><strong>σ-связь</strong> — осевое перекрывание орбиталей вдоль линии связи. Первая связь между атомами — всегда σ.</div>
|
||
<div class="def-box"><strong>π-связь</strong> — боковое перекрывание p-орбиталей выше и ниже оси. Образует дополнительные (кратные) связи.</div>
|
||
<div class="def-box"><strong>Донорно-акцепторный механизм:</strong> донор предоставляет готовую пару электронов → акцептор принимает на свободную орбиталь. Связь равноценна обменной.
|
||
<br>NH₃ (донор: неподелённая пара) + H⁺ (акцептор: пустая 1s) → <strong>NH₄⁺</strong></div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Молекула</th><th>Тип</th><th>σ-связей</th><th>π-связей</th><th>Кратность</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>H–H</td><td>Одинарная</td><td>1</td><td>0</td><td>1</td></tr>
|
||
<tr><td>O=O</td><td>Двойная</td><td>1</td><td>1</td><td>2</td></tr>
|
||
<tr><td>N≡N</td><td>Тройная</td><td>1</td><td>2</td><td>3</td></tr>
|
||
<tr><td>H₂C=CH₂</td><td>C=C двойная</td><td>5</td><td>1</td><td>—</td></tr>
|
||
<tr><td>HC≡CH</td><td>C≡C тройная</td><td>3</td><td>2</td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Переключи кратность</div>
|
||
<div class="krat-tabs">
|
||
<div class="krat-tab active" onclick="krat5Show('one',this)">Одинарная</div>
|
||
<div class="krat-tab" onclick="krat5Show('two',this)">Двойная</div>
|
||
<div class="krat-tab" onclick="krat5Show('three',this)">Тройная</div>
|
||
<div class="krat-tab" onclick="krat5Show('da',this)">Д-А механизм</div>
|
||
</div>
|
||
<div class="krat-panel active" id="krat5-one">
|
||
<div class="krat-scheme">
|
||
<div class="krat-atom">H</div>
|
||
<div class="krat-bond"><div class="krat-bond-line"></div></div>
|
||
<div class="krat-atom">H</div>
|
||
<div style="margin-left:14px;font-size:.82rem"><b>H–H:</b> 1 σ-связь. Пример: H₂, Cl₂, F₂, одинарные C–C в алканах.</div>
|
||
</div>
|
||
</div>
|
||
<div class="krat-panel" id="krat5-two">
|
||
<div class="krat-scheme">
|
||
<div class="krat-atom">O</div>
|
||
<div class="krat-bond"><div class="krat-bond-line"></div><div class="krat-bond-line" style="background:rgba(180,83,9,.4)"></div></div>
|
||
<div class="krat-atom">O</div>
|
||
<div style="margin-left:14px;font-size:.82rem"><b>O=O:</b> 1σ + 1π. Пример: O₂, C=O (CO₂), C=C (этилен).<br>π-связь слабее σ → двойная связь реакционноспособна.</div>
|
||
</div>
|
||
</div>
|
||
<div class="krat-panel" id="krat5-three">
|
||
<div class="krat-scheme">
|
||
<div class="krat-atom">N</div>
|
||
<div class="krat-bond"><div class="krat-bond-line"></div><div class="krat-bond-line" style="background:rgba(180,83,9,.4)"></div><div class="krat-bond-line" style="background:rgba(180,83,9,.4)"></div></div>
|
||
<div class="krat-atom">N</div>
|
||
<div style="margin-left:14px;font-size:.82rem"><b>N≡N:</b> 1σ + 2π. Энергия 946 кДж/моль → N₂ очень инертен.<br>Пример: N₂, C≡C (ацетилен), C≡N (цианид).</div>
|
||
</div>
|
||
</div>
|
||
<div class="krat-panel" id="krat5-da">
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">1</span> NH₃ имеет <b>неподелённую пару</b> электронов на N → выступает <b>донором</b></div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">2</span> H⁺ имеет <b>пустую орбиталь</b> → выступает <b>акцептором</b></div>
|
||
<div class="step-card"><span class="step-num">3</span> NH₃ + H⁺ → <b>NH₄⁺</b> — ион аммония; все 4 связи N–H равноценны</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §6 — СОЛИ В СВЕТЕ ТЭД ══ -->
|
||
<div class="content" id="tab-ref6">
|
||
<div class="section-title"><i class="fas fa-magnet"></i> §6. Ионная связь. Металлическая связь</div>
|
||
<div class="def-box"><strong>Ионная связь</strong> — электростатическое притяжение между разноимённо заряженными ионами. Образуется при передаче электронов от металла к неметаллу.</div>
|
||
<div class="def-box"><strong>Металлическая связь</strong> — катионы металла удерживаются «электронным газом» (делокализованные электроны). Объясняет: электропроводность, теплопроводность, пластичность.</div>
|
||
<div style="margin:12px 0;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px">
|
||
<div style="font-weight:700;margin-bottom:8px">Образование NaCl:</div>
|
||
<div class="gen-row">
|
||
<div class="gen-box">Na⁰<br><small>2,8,1</small></div>
|
||
<div class="gen-arrow">→ −e⁻</div>
|
||
<div class="gen-box" style="border-color:#16a34a;color:#16a34a">Na⁺<br><small>2,8</small></div>
|
||
<span style="font-size:1.5rem;margin:0 8px">+</span>
|
||
<div class="gen-box">Cl⁰<br><small>2,8,7</small></div>
|
||
<div class="gen-arrow">→ +e⁻</div>
|
||
<div class="gen-box" style="border-color:#dc2626;color:#dc2626">Cl⁻<br><small>2,8,8</small></div>
|
||
<div class="gen-arrow">→</div>
|
||
<div class="gen-box" style="border-color:var(--pri)">Na⁺Cl⁻<br><small>NaCl</small></div>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Тип</th><th>В узлах</th><th>Связь</th><th>Свойства</th><th>Примеры</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Ионная</td><td>Ионы</td><td>Кулоновское притяжение</td><td>Высокая т.пл., хрупкость, электролит в р-ре</td><td>NaCl, KOH, MgO</td></tr>
|
||
<tr><td>Металлическая</td><td>Катионы + e⁻ газ</td><td>Металлическая</td><td>Пластичность, электро- и теплопроводность</td><td>Fe, Cu, Al, Na</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Определи тип связи</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">KCl</div><div class="bc-type">Тип связи?</div><div class="bc-ans">Ионная<br>K⁺ + Cl⁻</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe</div><div class="bc-type">Тип связи?</div><div class="bc-ans">Металлическая<br>Fe²⁺/Fe³⁺ + e⁻ газ</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CaO</div><div class="bc-type">Тип связи?</div><div class="bc-ans">Ионная<br>Ca²⁺ + O²⁻</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Al</div><div class="bc-type">Тип связи?</div><div class="bc-ans">Металлическая<br>Al³⁺ + е⁻ газ</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₂O</div><div class="bc-type">Тип связи?</div><div class="bc-ans">Ионная<br>2Na⁺ + O²⁻</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Cu</div><div class="bc-type">Тип связи?</div><div class="bc-ans">Металлическая<br>Cu²⁺ + e⁻ газ → пластична</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">⚡ Анимация образования ионной связи</div>
|
||
<div class="reveal-on-view" style="margin:12px 0;text-align:center">
|
||
<div class="ion-scene" id="ion6-scene">
|
||
<div class="ion-atom" id="ion6-na" style="background:#fef9c3;border-color:#fbbf24;color:#92400e">
|
||
Na<br><span style="font-size:10px">Z=11</span>
|
||
<div class="shell-e" id="ion6-e"></div>
|
||
<div class="ion-charge" id="ion6-na-charge" style="background:#f97316;color:#fff">+</div>
|
||
</div>
|
||
<div class="ion-arrow">→</div>
|
||
<div class="ion-atom" id="ion6-cl" style="background:#dcfce7;border-color:#86efac;color:#166534">
|
||
Cl<br><span style="font-size:10px">Z=17</span>
|
||
<div class="ion-charge" id="ion6-cl-charge" style="background:#3b82f6;color:#fff">−</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px">
|
||
<button onclick="ion6Play()" style="padding:7px 20px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer">▶ Показать перенос e⁻</button>
|
||
<button onclick="ion6Reset()" style="padding:7px 20px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer">↺ Сброс</button>
|
||
</div>
|
||
<div id="ion6-eq" style="margin-top:12px;font-size:13px;font-family:monospace;min-height:24px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §7 — РЕАКЦИИ ИОННОГО ОБМЕНА ══ -->
|
||
<div class="content" id="tab-ref7">
|
||
<div class="section-title"><i class="fas fa-superscript"></i> §7. Степень окисления</div>
|
||
<div class="def-box"><strong>Степень окисления (СО)</strong> — условный заряд атома при допущении, что все общие пары электронов смещены к более электроотрицательному атому.</div>
|
||
<div class="formula-grid" style="margin:12px 0">
|
||
<div class="fcard highlighted"><b>Правила определения СО:</b><br>
|
||
1. В простых веществах: СО = 0 (H₂, Fe, O₂)<br>
|
||
2. H обычно <b>+1</b> (кроме гидридов: NaH → H = −1)<br>
|
||
3. O обычно <b>−2</b> (кроме: H₂O₂ → O = −1; OF₂ → O = +2)<br>
|
||
4. Сумма СО всех атомов в молекуле = 0 (в ионе = заряду иона)
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Вещество</th><th>Алгоритм</th><th>СО элемента</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>H₂SO₄</td><td>2(+1) + S + 4(−2) = 0 → S = +6</td><td>S = <b>+6</b></td></tr>
|
||
<tr><td>KMnO₄</td><td>(+1) + Mn + 4(−2) = 0 → Mn = +7</td><td>Mn = <b>+7</b></td></tr>
|
||
<tr><td>HNO₃</td><td>(+1) + N + 3(−2) = 0 → N = +5</td><td>N = <b>+5</b></td></tr>
|
||
<tr><td>H₃PO₄</td><td>3(+1) + P + 4(−2) = 0 → P = +5</td><td>P = <b>+5</b></td></tr>
|
||
<tr><td>Na₂Cr₂O₇</td><td>2(+1) + 2Cr + 7(−2) = 0 → Cr = +6</td><td>Cr = <b>+6</b></td></tr>
|
||
<tr><td>NH₄⁺</td><td>N + 4(+1) = +1 → N = −3</td><td>N = <b>−3</b></td></tr>
|
||
<tr><td>Fe₃O₄</td><td>3Fe + 4(−2) = 0 → Fe = +8/3 ≈ 2,67 (смешанная)</td><td>Fe = <b>+8/3</b></td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Найди СО — нажми правильный ответ</div>
|
||
<div class="quiz-wrap" id="sox7-quiz"></div>
|
||
</div>
|
||
|
||
<!-- ══ §8 — УСЛОВИЯ ПРОТЕКАНИЯ РИО ══ -->
|
||
<div class="content" id="tab-ref8">
|
||
<div class="section-title"><i class="fas fa-cubes"></i> §8. Кристаллические решётки</div>
|
||
<div class="def-box">Тип кристаллической решётки определяет <strong>все физические свойства</strong> вещества: твёрдость, температуру плавления, электропроводность, растворимость.</div>
|
||
<div class="latt-grid">
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Атомная</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">💎</div>
|
||
<div class="lc-detail">В узлах: атомы<br>Связь: ковалентная (очень прочная)<br>Свойства: очень твёрдые, высокая т.пл., нелетучие, нерастворимы<br>Примеры: алмаз, графит, SiO₂, Si</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Молекулярная</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">❄️</div>
|
||
<div class="lc-detail">В узлах: молекулы<br>Связь между узлами: ван-дер-Ваальс (слабая)<br>Свойства: мягкие, низкая т.пл., летучие<br>Примеры: лёд H₂O, CO₂ (сухой лёд), I₂, HCl</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Ионная</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">🧂</div>
|
||
<div class="lc-detail">В узлах: ионы (+/−)<br>Связь: кулоновское притяжение<br>Свойства: твёрдые, хрупкие, высокая т.пл., электролиты в р-ре<br>Примеры: NaCl, KBr, MgO, CaF₂</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Металлическая</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">⚙️</div>
|
||
<div class="lc-detail">В узлах: катионы металла + «e⁻ газ»<br>Связь: металлическая (делокализованные e⁻)<br>Свойства: пластичность, электро- и теплопроводность, блеск<br>Примеры: Fe, Cu, Al, Na, Pb</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми на решётку — увидишь свойства. Определи тип для веществ:</div>
|
||
<div class="quiz-wrap" id="latt8-quiz"></div>
|
||
|
||
<div class="section-title" style="margin-top:24px">💎 3D-модели кристаллических решёток</div>
|
||
<div class="reveal-on-view">
|
||
<div class="lattice-tabs">
|
||
<button class="latt-tab-btn active" onclick="latt8Show('ionic',this)">Ионная (NaCl)</button>
|
||
<button class="latt-tab-btn" onclick="latt8Show('atomic',this)">Атомная (алмаз)</button>
|
||
<button class="latt-tab-btn" onclick="latt8Show('molecular',this)">Молекулярная (I₂)</button>
|
||
<button class="latt-tab-btn" onclick="latt8Show('metallic',this)">Металлическая (Fe)</button>
|
||
</div>
|
||
<div class="lattice-scene"><div class="lattice-cube" id="latt8-cube"></div></div>
|
||
<div class="latt-caption" id="latt8-caption"></div>
|
||
<div id="latt8-props" style="display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;font-size:12px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §9 — ГИДРОЛИЗ СОЛЕЙ ══ -->
|
||
<div class="content" id="tab-ref9">
|
||
<div class="section-title"><i class="fas fa-filter"></i> §9. Смеси. Способы разделения</div>
|
||
<div class="def-box"><strong>Смесь</strong> — система из двух и более веществ без химического взаимодействия. Состав произволен. Делятся на <b>однородные</b> (гомогенные, нет границы раздела) и <b>неоднородные</b> (гетерогенные).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Метод</th><th>Принцип</th><th>Применяется для</th><th>Пример</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><b>Фильтрование</b></td><td>Размер частиц</td><td>Нерастворимый осадок + жидкость</td><td>Мел в воде, песок в воде</td></tr>
|
||
<tr><td><b>Отстаивание</b></td><td>Плотность</td><td>Несмешив. жидкости или осадок</td><td>Нефть + вода, муть в воде</td></tr>
|
||
<tr><td><b>Перегонка</b> (дистилляция)</td><td>Разные t кипения</td><td>Смешивающиеся жидкости</td><td>Вода + спирт, нефтепродукты</td></tr>
|
||
<tr><td><b>Кристаллизация</b></td><td>Растворимость</td><td>Твёрдое вещество из раствора</td><td>NaCl из рассола, сахар</td></tr>
|
||
<tr><td><b>Магнит</b></td><td>Магнитные свойства</td><td>Смесь с железом</td><td>Fe + S, опилки Fe в песке</td></tr>
|
||
<tr><td><b>Делительная воронка</b></td><td>Несмешиваемость</td><td>Две жидкости разной плотности</td><td>Бензин + вода</td></tr>
|
||
<tr><td><b>Хроматография</b></td><td>Адсорбция</td><td>Красители, аминокислоты</td><td>Разделение пигментов листа</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Выбери правильный метод разделения</div>
|
||
<div id="mix9-wrap">
|
||
<div class="mix-scenario"><div class="ms-q">1. Смесь Fe-опилок и серы S:</div>
|
||
<div class="mix-btns">
|
||
<div class="mix-btn" onclick="mix9Check(this,true)">Магнит</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Фильтрование</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Перегонка</div>
|
||
</div>
|
||
</div>
|
||
<div class="mix-scenario"><div class="ms-q">2. Вода + спирт (оба жидкие, смешиваются):</div>
|
||
<div class="mix-btns">
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Отстаивание</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,true)">Перегонка (дистилляция)</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Фильтрование</div>
|
||
</div>
|
||
</div>
|
||
<div class="mix-scenario"><div class="ms-q">3. NaCl растворён в воде, нужно получить кристаллы соли:</div>
|
||
<div class="mix-btns">
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Фильтрование</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Перегонка</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,true)">Кристаллизация (упарка)</div>
|
||
</div>
|
||
</div>
|
||
<div class="mix-scenario"><div class="ms-q">4. Бензин + вода (не смешиваются):</div>
|
||
<div class="mix-btns">
|
||
<div class="mix-btn" onclick="mix9Check(this,true)">Делительная воронка / отстаивание</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Перегонка</div>
|
||
<div class="mix-btn" onclick="mix9Check(this,false)">Фильтрование</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §10 — ПРАКТИЧЕСКАЯ РАБОТА ══ -->
|
||
<div class="content" id="tab-ref10">
|
||
<div class="section-title"><i class="fas fa-cloud"></i> §10. Дисперсные системы</div>
|
||
<div class="def-box"><strong>Дисперсная система</strong> = дисперсионная среда (сплошная) + дисперсная фаза (раздроблённая). Классифицируют по <b>размеру частиц</b> дисперсной фазы.</div>
|
||
<div class="disp-grid">
|
||
<div class="disp-col">
|
||
<div class="dc-head">Истинные растворы<br><1 нм</div>
|
||
<div class="disp-ex">Раствор NaCl</div>
|
||
<div class="disp-ex">Раствор сахара</div>
|
||
<div class="disp-ex">Раствор HCl</div>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:6px">✓ Прозрачны<br>✓ Нет эффекта Тиндаля<br>✓ Не оседают<br>✓ Проходят через фильтр и мембрану</div>
|
||
</div>
|
||
<div class="disp-col">
|
||
<div class="dc-head">Коллоидные растворы<br>1–100 нм</div>
|
||
<div class="disp-ex">Молоко (эмульсия)</div>
|
||
<div class="disp-ex">Туман (аэрозоль)</div>
|
||
<div class="disp-ex">Дым</div>
|
||
<div class="disp-ex">Кровь, желатин</div>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:6px">✓ Опалесценция<br>✓ Эффект Тиндаля ✓<br>✓ Не оседают<br>✗ Не проходят через мембрану</div>
|
||
</div>
|
||
<div class="disp-col">
|
||
<div class="dc-head">Взвеси<br>>100 нм</div>
|
||
<div class="disp-ex">Мел в воде (сусп.)</div>
|
||
<div class="disp-ex">Речной ил</div>
|
||
<div class="disp-ex">Масло в воде (эм.)</div>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:6px">✓ Непрозрачны<br>✓ Частицы видны<br>✗ Быстро оседают<br>✗ Задерживаются фильтром</div>
|
||
</div>
|
||
</div>
|
||
<div class="def-box"><strong>Эффект Тиндаля</strong> — рассеивание пучка света коллоидными частицами (1–100 нм). Луч виден как светящийся конус (туман в лесу, дым в луче фонаря).</div>
|
||
<div class="def-box"><strong>Коагуляция</strong> — укрупнение коллоидных частиц при добавлении электролита (нейтрализация зарядов) → выпадение осадка.</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми на пример — узнай тип</div>
|
||
<div class="quiz-wrap" id="disp10-quiz"></div>
|
||
|
||
<div class="section-title" style="margin-top:24px">💡 Эффект Тиндаля — интерактивная демонстрация</div>
|
||
<div class="reveal-on-view" style="text-align:center">
|
||
<div class="tyndall-scene" id="tyndall10-scene">
|
||
<div style="text-align:center">
|
||
<div class="tyndall-label">Истинный р-р (NaCl)</div>
|
||
<div class="tyndall-beaker" id="tyn-true">
|
||
<div class="tyndall-liquid" style="background:rgba(219,234,254,0.3)"></div>
|
||
<div class="tyndall-laser" id="tyn-true-laser" style="background:rgba(255,255,0,0.3)"></div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center">
|
||
<div class="tyndall-label">Коллоид (молоко)</div>
|
||
<div class="tyndall-beaker" id="tyn-colloid">
|
||
<div class="tyndall-liquid" style="background:rgba(250,250,240,0.7)"></div>
|
||
<div class="tyndall-laser" id="tyn-col-laser" style="background:rgba(255,255,0,0.1)"></div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center">
|
||
<div class="tyndall-label">Суспензия (мел/H₂O)</div>
|
||
<div class="tyndall-beaker" id="tyn-susp">
|
||
<div class="tyndall-liquid" style="background:rgba(200,200,200,0.5)"></div>
|
||
<div class="tyndall-laser" id="tyn-susp-laser" style="background:rgba(255,255,0,0.05)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button onclick="tyndall10Play()" style="padding:7px 20px;border-radius:8px;border:none;background:#fbbf24;color:#1e293b;font-weight:700;cursor:pointer;margin-top:10px">🔦 Включить лазер</button>
|
||
<button onclick="tyndall10Reset()" style="padding:7px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:8px">↺</button>
|
||
<div id="tyndall10-result" style="margin-top:10px;font-size:12px;color:#475569;max-width:360px;margin:10px auto 0;text-align:left"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §11 — РЕШЕНИЕ ЗАДАЧ ПО ТЭД ══ -->
|
||
<div class="content" id="tab-ref11">
|
||
<div class="section-title"><i class="fas fa-water"></i> §11. Растворы. Теория электролитической диссоциации</div>
|
||
<div class="def-box"><strong>ТЭД (Аррениус, 1887):</strong> электролиты при растворении (или плавлении) распадаются на ионы — <b>катионы</b> (+) и <b>анионы</b> (−), которые движутся независимо.</div>
|
||
<div class="formula-grid" style="margin:12px 0">
|
||
<div class="fcard highlighted">Кислоты → H⁺ + анион кислотного остатка<br>HCl → H⁺ + Cl⁻ | H₂SO₄ → 2H⁺ + SO₄²⁻</div>
|
||
<div class="fcard highlighted">Основания → катион металла + OH⁻<br>NaOH → Na⁺ + OH⁻ | Ca(OH)₂ → Ca²⁺ + 2OH⁻</div>
|
||
<div class="fcard highlighted">Соли → катион металла + анион кислотного остатка<br>Na₂SO₄ → 2Na⁺ + SO₄²⁻ | CaCl₂ → Ca²⁺ + 2Cl⁻</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th></th><th>Сильные электролиты (α ≈ 1)</th><th>Слабые электролиты (α ≪ 1)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><b>Кислоты</b></td><td>HCl, HBr, HI, HNO₃, H₂SO₄, HClO₄</td><td>H₂CO₃, H₂S, HF, CH₃COOH, H₃PO₄</td></tr>
|
||
<tr><td><b>Основания</b></td><td>NaOH, KOH, Ca(OH)₂, Ba(OH)₂</td><td>NH₃·H₂O, Fe(OH)₂, Cu(OH)₂</td></tr>
|
||
<tr><td><b>Соли</b></td><td>Почти все растворимые соли</td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми — узнай уравнение диссоциации</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">H₂SO₄</div><div class="bc-type">Диссоциация?</div><div class="bc-ans">H₂SO₄ → 2H⁺ + SO₄²⁻<br>(сильная, полная)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₃PO₄</div><div class="bc-type">Диссоциация?</div><div class="bc-ans">Na₃PO₄ → 3Na⁺ + PO₄³⁻<br>(сильный электролит)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Al₂(SO₄)₃</div><div class="bc-type">Диссоциация?</div><div class="bc-ans">Al₂(SO₄)₃ → 2Al³⁺ + 3SO₄²⁻<br>5 ионов на 1 ф.е.</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CH₃COOH</div><div class="bc-type">Диссоциация?</div><div class="bc-ans">CH₃COOH ⇌ CH₃COO⁻ + H⁺<br>(слабая, обратимая)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Ca(OH)₂</div><div class="bc-type">Диссоциация?</div><div class="bc-ans">Ca(OH)₂ → Ca²⁺ + 2OH⁻<br>(щёлочь, полная)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe₂(SO₄)₃</div><div class="bc-type">Диссоциация?</div><div class="bc-ans">Fe₂(SO₄)₃ → 2Fe³⁺ + 3SO₄²⁻<br>5 ионов на 1 ф.е.</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">💧 Анимация диссоциации</div>
|
||
<div class="reveal-on-view">
|
||
<div class="dissoc-controls">
|
||
<select id="dissoc11-sel" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:12px">
|
||
<option value="HCl,H+,Cl-,1">HCl (сильная кислота)</option>
|
||
<option value="NaOH,Na+,OH-,1">NaOH (сильное основание)</option>
|
||
<option value="NaCl,Na+,Cl-,1">NaCl (сильный электролит)</option>
|
||
<option value="CH3COOH,CH3COO-,H+,0.013">CH₃COOH (слабая, α=1.3%)</option>
|
||
<option value="H2O,H+,OH-,0.00001">H₂O (α→0)</option>
|
||
</select>
|
||
<button onclick="dissoc11Play()" style="padding:5px 14px;border-radius:8px;border:none;background:#3b82f6;color:#fff;cursor:pointer;font-size:12px">▶ Диссоциировать</button>
|
||
<button onclick="dissoc11Reset()" style="padding:5px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:12px">↺</button>
|
||
</div>
|
||
<div class="dissoc-scene" id="dissoc11-scene"></div>
|
||
<div id="dissoc11-eq" style="margin-top:8px;font-family:monospace;font-size:13px;text-align:center;min-height:22px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §12 — ОБОБЩЕНИЕ ТЭД ══ -->
|
||
<div class="content" id="tab-ref12">
|
||
<div class="section-title"><i class="fas fa-exchange-alt"></i> §12. Реакции ионного обмена (РИО)</div>
|
||
<div class="def-box"><strong>РИО идут до конца</strong>, если образуется:<br>
|
||
▸ <b>Осадок ↓</b> (нерастворимое вещество)<br>
|
||
▸ <b>Газ ↑</b> (CO₂, NH₃, H₂S…)<br>
|
||
▸ <b>Слабый электролит</b> (H₂O, CH₃COOH, NH₃·H₂O…)</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">1</span><b>МУ</b> — молекулярное уравнение: BaCl₂ + Na₂SO₄ → BaSO₄↓ + 2NaCl</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">2</span><b>ПИУ</b> — все сильные электролиты разбиваем на ионы:<br>Ba²⁺ + 2Cl⁻ + 2Na⁺ + SO₄²⁻ → BaSO₄↓ + 2Na⁺ + 2Cl⁻</div>
|
||
<div class="step-card" style="margin-bottom:14px"><span class="step-num">3</span><b>КИУ</b> — сокращаем одинаковые ионы:<br><b>Ba²⁺ + SO₄²⁻ → BaSO₄↓</b></div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми — увидишь КИУ</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NaOH + HCl</div><div class="bc-type">КИУ?</div><div class="bc-ans">H⁺ + OH⁻ → H₂O<br>(нейтрализация)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₂CO₃ + HCl</div><div class="bc-type">КИУ?</div><div class="bc-ans">CO₃²⁻ + 2H⁺ → H₂O + CO₂↑<br>(газ)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">AgNO₃ + NaCl</div><div class="bc-type">КИУ?</div><div class="bc-ans">Ag⁺ + Cl⁻ → AgCl↓<br>(белый осадок)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">KCl + NaNO₃</div><div class="bc-type">КИУ?</div><div class="bc-ans">Реакция НЕ ИДЁТ<br>(все продукты растворимы)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CuSO₄ + NaOH</div><div class="bc-type">КИУ?</div><div class="bc-ans">Cu²⁺ + 2OH⁻ → Cu(OH)₂↓<br>(синий осадок)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₂S + HCl</div><div class="bc-type">КИУ?</div><div class="bc-ans">S²⁻ + 2H⁺ → H₂S↑<br>(газ с запахом)</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">⚗️ Пошаговое составление ионных уравнений</div>
|
||
<div class="reveal-on-view">
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px">
|
||
<select id="ieu12-sel" onchange="ieu12Load()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:12px">
|
||
<option value="0">NaOH + HCl → NaCl + H₂O</option>
|
||
<option value="1">Na₂SO₄ + BaCl₂ → BaSO₄↓ + NaCl</option>
|
||
<option value="2">CuSO₄ + NaOH → Cu(OH)₂↓ + Na₂SO₄</option>
|
||
<option value="3">AgNO₃ + NaCl → AgCl↓ + NaNO₃</option>
|
||
</select>
|
||
</div>
|
||
<div class="ieu-scene" id="ieu12-scene">
|
||
<div class="ieu-step" id="ieu12-mu"><b>МУ:</b> <span id="ieu12-mu-txt"></span></div>
|
||
<div class="ieu-step" id="ieu12-piu"><b>ПИУ:</b> <span id="ieu12-piu-txt"></span></div>
|
||
<div class="ieu-step" id="ieu12-kiu"><b>КИУ:</b> <span id="ieu12-kiu-txt"></span></div>
|
||
</div>
|
||
<div class="ieu-nav">
|
||
<button id="ieu12-prev" onclick="ieu12Step(-1)" disabled>← Назад</button>
|
||
<span id="ieu12-stepnum" style="font-size:13px;color:#475569">Шаг 0/3</span>
|
||
<button id="ieu12-next" onclick="ieu12Step(1)">Вперёд →</button>
|
||
</div>
|
||
<div id="ieu12-hint" style="margin-top:8px;font-size:12px;color:#475569;min-height:20px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §14 — СТЕПЕНЬ ОКИСЛЕНИЯ ══ -->
|
||
<div class="content" id="tab-ref14">
|
||
<div class="section-title"><i class="fas fa-circle-half-stroke"></i> §14. Оксиды</div>
|
||
<div class="def-box"><strong>Оксид</strong> — бинарное соединение элемента с кислородом. Делятся на: <b>основные</b> (оксиды металлов: Na₂O, CaO), <b>кислотные</b> (оксиды неметаллов: SO₃, CO₂), <b>амфотерные</b> (Al₂O₃, ZnO), <b>несолеобразующие</b> (CO, NO).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Тип</th><th>Реагирует с</th><th>Уравнения</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><b>Основной</b> (Na₂O, CaO)</td><td>Кислота, кислотный оксид, H₂O (акт.)</td><td>Na₂O + H₂SO₄ → Na₂SO₄ + H₂O<br>CaO + H₂O → Ca(OH)₂</td></tr>
|
||
<tr><td><b>Кислотный</b> (SO₃, CO₂, P₂O₅)</td><td>Основание, основной оксид, H₂O</td><td>SO₃ + 2NaOH → Na₂SO₄ + H₂O<br>CO₂ + H₂O → H₂CO₃</td></tr>
|
||
<tr><td><b>Амфотерный</b> (Al₂O₃, ZnO)</td><td>И кислоты, и основания</td><td>Al₂O₃ + 6HCl → 2AlCl₃ + 3H₂O<br>Al₂O₃ + 2NaOH + 3H₂O → 2Na[Al(OH)₄]</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми оксид — узнай тип</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₂O</div><div class="bc-type">Тип?</div><div class="bc-ans">Основной<br>+ H₂O → 2NaOH (щёлочь)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">SO₃</div><div class="bc-type">Тип?</div><div class="bc-ans">Кислотный<br>+ H₂O → H₂SO₄</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Al₂O₃</div><div class="bc-type">Тип?</div><div class="bc-ans">Амфотерный<br>+ HCl → AlCl₃; + NaOH → Na[Al(OH)₄]</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CO₂</div><div class="bc-type">Тип?</div><div class="bc-ans">Кислотный<br>+ Ca(OH)₂ → CaCO₃↓ + H₂O</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">ZnO</div><div class="bc-type">Тип?</div><div class="bc-ans">Амфотерный<br>+ HCl → ZnCl₂; + NaOH → Na₂ZnO₂ + H₂O</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CO</div><div class="bc-type">Тип?</div><div class="bc-ans">Несолеобразующий<br>Не образует кислоты/соли, восстановитель</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §15 — ПОНЯТИЕ ОВР ══ -->
|
||
<div class="content" id="tab-ref15">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §15. Основания</div>
|
||
<div class="def-box"><strong>Основания</strong> — электролиты, диссоциирующие с образованием OH⁻. <b>Щёлочи</b> — растворимые основания (NaOH, KOH, Ca(OH)₂, Ba(OH)₂).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th><th>Условие</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Основание + кислота</td><td>NaOH + HCl → NaCl + H₂O</td><td>Всегда (нейтрализация)</td></tr>
|
||
<tr><td>Основание + кислотный оксид</td><td>2NaOH + CO₂ → Na₂CO₃ + H₂O</td><td>Всегда</td></tr>
|
||
<tr><td>Щёлочь + соль</td><td>2NaOH + CuSO₄ → Cu(OH)₂↓ + Na₂SO₄</td><td>Если выпадает осадок</td></tr>
|
||
<tr><td>Нагрев нераств. основания</td><td>Cu(OH)₂ → CuO + H₂O</td><td>t°</td></tr>
|
||
<tr><td>Щёлочь + амфотерный оксид</td><td>2NaOH + ZnO → Na₂ZnO₂ + H₂O</td><td>—</td></tr>
|
||
<tr><td>Щёлочь + амф. гидроксид</td><td>NaOH + Al(OH)₃ → Na[Al(OH)₄]</td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Реакция идёт или нет?</div>
|
||
<div class="quiz-wrap" id="base15-quiz"></div>
|
||
</div>
|
||
|
||
<!-- ══ §16 — ОКИСЛИТЕЛИ И ВОССТАНОВИТЕЛИ ══ -->
|
||
<div class="content" id="tab-ref16">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §16. Кислоты</div>
|
||
<div class="def-box"><strong>Кислоты</strong> — электролиты, диссоциирующие с образованием H⁺. Классифицируют по: числу H⁺ (одно-/двух-/трёхосновные), наличию O (кисл./бескисл.), силе (сильные/слабые).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th><th>Условие</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Кислота + основание</td><td>HCl + NaOH → NaCl + H₂O</td><td>Нейтрализация, всегда</td></tr>
|
||
<tr><td>Кислота + основной оксид</td><td>H₂SO₄ + CuO → CuSO₄ + H₂O</td><td>Всегда</td></tr>
|
||
<tr><td>Кислота + металл (до H₂)</td><td>Zn + 2HCl → ZnCl₂ + H₂↑</td><td>Металл до H₂ в ряду активности</td></tr>
|
||
<tr><td>Кислота + соль</td><td>Na₂CO₃ + 2HCl → 2NaCl + H₂O + CO₂↑</td><td>Если образуется ↓, ↑ или слабый эл-т</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box">⚠ <b>Конц. H₂SO₄ и HNO₃</b> — особые окислители: реагируют с металлами иначе (не выделяют H₂!). Пассивируют Fe, Al, Cr.</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Реагирует металл с кислотой?</div>
|
||
<div class="quiz-wrap" id="acid16-quiz"></div>
|
||
</div>
|
||
|
||
<!-- ══ §17 — МЕТОД ЭЛЕКТРОННОГО БАЛАНСА ══ -->
|
||
<div class="content" id="tab-ref17">
|
||
<div class="section-title"><i class="fas fa-cubes"></i> §17. Соли</div>
|
||
<div class="def-box"><strong>Соли</strong> — электролиты, диссоциирующие на катион металла (или NH₄⁺) и анион кислотного остатка. <b>Средние</b> (NaCl), <b>кислые</b> (NaHCO₃, NaH₂PO₄), <b>основные</b> (FeOHCl).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th><th>Условие</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Соль + кислота (сильная)</td><td>Na₂CO₃ + 2HCl → 2NaCl + H₂O + CO₂↑</td><td>Если более слабая кислота вытесняется</td></tr>
|
||
<tr><td>Соль + щёлочь</td><td>CuSO₄ + 2NaOH → Cu(OH)₂↓ + Na₂SO₄</td><td>Если осадок</td></tr>
|
||
<tr><td>Соль + соль</td><td>BaCl₂ + Na₂SO₄ → BaSO₄↓ + 2NaCl</td><td>Если осадок</td></tr>
|
||
<tr><td>Соль + металл (акт.)</td><td>Fe + CuSO₄ → FeSO₄ + Cu↓</td><td>Если металл активнее металла в соли</td></tr>
|
||
<tr><td>Соль (термолиз)</td><td>CaCO₃ → CaO + CO₂↑</td><td>При нагреве</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Назови анион — нажми формулу</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NaCl</div><div class="bc-type">Анион?</div><div class="bc-ans">Хлорид Cl⁻<br>→ хлорид натрия</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">CaSO₄</div><div class="bc-type">Анион?</div><div class="bc-ans">Сульфат SO₄²⁻<br>→ сульфат кальция</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">K₂CO₃</div><div class="bc-type">Анион?</div><div class="bc-ans">Карбонат CO₃²⁻<br>→ карбонат калия</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe(NO₃)₃</div><div class="bc-type">Анион?</div><div class="bc-ans">Нитрат NO₃⁻<br>→ нитрат железа(III)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₃PO₄</div><div class="bc-type">Анион?</div><div class="bc-ans">Фосфат PO₄³⁻<br>→ фосфат натрия</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NaHCO₃</div><div class="bc-type">Тип соли?</div><div class="bc-ans">Кислая соль<br>Гидрокарбонат натрия (HCO₃⁻)</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §18 — ТИПИЧНЫЕ ОКИСЛИТЕЛИ ══ -->
|
||
<div class="content" id="tab-ref18">
|
||
<div class="section-title"><i class="fas fa-sitemap"></i> §18. Обобщение классов неорганических соединений</div>
|
||
<div class="def-box"><strong>Генетический ряд</strong> — последовательность взаимных превращений веществ одного элемента, связывающая все классы неорганических соединений.</div>
|
||
<div style="margin:14px 0;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px">
|
||
<div style="font-weight:700;margin-bottom:10px">Генетический ряд металла (Na):</div>
|
||
<div class="gen-row">
|
||
<div class="gen-box">Na</div><div class="gen-arrow">+O₂ →</div>
|
||
<div class="gen-box">Na₂O</div><div class="gen-arrow">+H₂O →</div>
|
||
<div class="gen-box">NaOH</div><div class="gen-arrow">+HCl →</div>
|
||
<div class="gen-box">NaCl</div>
|
||
</div>
|
||
<div style="font-weight:700;margin:10px 0 6px">Генетический ряд неметалла (S):</div>
|
||
<div class="gen-row">
|
||
<div class="gen-box">S</div><div class="gen-arrow">+O₂ →</div>
|
||
<div class="gen-box">SO₂</div><div class="gen-arrow">+H₂O →</div>
|
||
<div class="gen-box">H₂SO₃</div><div class="gen-arrow">+NaOH →</div>
|
||
<div class="gen-box">Na₂SO₃</div>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.8rem">
|
||
<thead><tr><th>Класс</th><th>Пример</th><th>Связь с другими классами</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Металл</td><td>Na, Ca, Al</td><td>→ осн. оксид (+O₂); → соль (+кислота)</td></tr>
|
||
<tr><td>Основной оксид</td><td>Na₂O, CaO</td><td>→ основание (+H₂O); → соль (+к-та или кисл. окс.)</td></tr>
|
||
<tr><td>Основание</td><td>NaOH, Ca(OH)₂</td><td>→ соль (+кислота); → оксид (+t, нераств.)</td></tr>
|
||
<tr><td>Кислота</td><td>HCl, H₂SO₄</td><td>→ соль (+основание/осн.окс./металл)</td></tr>
|
||
<tr><td>Кислотный оксид</td><td>SO₃, CO₂</td><td>→ кислота (+H₂O); → соль (+основание/осн.окс.)</td></tr>
|
||
<tr><td>Соль</td><td>NaCl, CuSO₄</td><td>→ основание (+щёлочь); → кислота (+сильная к-та)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box"><strong>Амфотерные вещества</strong> (Al₂O₃, Al(OH)₃, ZnO, Zn(OH)₂) реагируют и с кислотами, и с щёлочами.</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🏗️ Построй генетический ряд</div>
|
||
<div class="reveal-on-view">
|
||
<div class="genrow-tabs">
|
||
<button class="genrow-tab active" onclick="genrow18Switch(0,this)">Na (металл)</button>
|
||
<button class="genrow-tab" onclick="genrow18Switch(1,this)">S (неметалл)</button>
|
||
</div>
|
||
<div class="genrow-pool" id="genrow18-pool"></div>
|
||
<div class="genrow-slots" id="genrow18-slots"></div>
|
||
<div style="display:flex;gap:8px;margin-top:10px">
|
||
<button onclick="genrow18Check()" style="padding:6px 18px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer;font-size:13px">Проверить</button>
|
||
<button onclick="genrow18Reset()" style="padding:6px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:13px">↺</button>
|
||
</div>
|
||
<div id="genrow18-result" style="margin-top:8px;font-size:13px;min-height:22px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §19 — ПРИМЕНЕНИЕ ОВР ══ -->
|
||
<div class="content" id="tab-ref19">
|
||
<div class="section-title"><i class="fas fa-bolt"></i> §19. Окислительно-восстановительные реакции. Понятие</div>
|
||
<div class="def-box"><strong>ОВР</strong> — реакции с изменением степеней окисления атомов (перенос электронов от восстановителя к окислителю).</div>
|
||
<div class="formula-grid" style="margin:12px 0">
|
||
<div class="fcard highlighted"><b>Окисление</b> — отдача e⁻ → СО повышается<br>Восстановитель отдаёт e⁻ и <u>окисляется</u></div>
|
||
<div class="fcard highlighted"><b>Восстановление</b> — приём e⁻ → СО понижается<br>Окислитель принимает e⁻ и <u>восстанавливается</u></div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Окислитель</th><th>Восстановитель</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>2Mg + O₂ → 2MgO</td><td>O₂ (O⁰ → O²⁻)</td><td>Mg (Mg⁰ → Mg²⁺)</td></tr>
|
||
<tr><td>Zn + 2HCl → ZnCl₂ + H₂↑</td><td>H⁺ (H⁺ → H⁰)</td><td>Zn (Zn⁰ → Zn²⁺)</td></tr>
|
||
<tr><td>Fe + S → FeS</td><td>S (S⁰ → S²⁻)</td><td>Fe (Fe⁰ → Fe²⁺)</td></tr>
|
||
<tr><td>2Fe₂O₃ + 3C → 4Fe + 3CO₂</td><td>Fe³⁺ (Fe³⁺ → Fe⁰)</td><td>C (C⁰ → C⁴⁺)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми — определи окислитель и восстановитель</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">2Na + Cl₂ → 2NaCl</div><div class="bc-type">Окисл. / Восст.?</div><div class="bc-ans">Окислитель: Cl₂ (Cl⁰→Cl⁻)<br>Восстановитель: Na (Na⁰→Na⁺)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Cu + 2AgNO₃ → Cu(NO₃)₂ + 2Ag</div><div class="bc-type">Окисл. / Восст.?</div><div class="bc-ans">Окислитель: Ag⁺ (→Ag⁰)<br>Восстановитель: Cu (Cu⁰→Cu²⁺)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">2H₂O₂ → 2H₂O + O₂</div><div class="bc-type">Диспропорц.?</div><div class="bc-ans">Да! O⁻¹→O²⁻ (окисл.) и O⁻¹→O⁰ (восст.)<br>H₂O₂ — и окислитель, и восстановитель</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🎴 Мемо-игра: термины ОВР</div>
|
||
<div class="reveal-on-view">
|
||
<div class="vocab-grid" id="vocab19-grid"></div>
|
||
<div style="display:flex;gap:8px;margin-top:8px;align-items:center">
|
||
<button onclick="vocab19Init()" style="padding:6px 16px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer;font-size:12px">↺ Новая игра</button>
|
||
<span id="vocab19-score" style="font-size:13px;color:#475569"></span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §20 — ЗАДАЧИ ОВР ══ -->
|
||
<div class="content" id="tab-ref20">
|
||
<div class="section-title"><i class="fas fa-balance-scale"></i> §20. Метод электронного баланса (МЭБ)</div>
|
||
<div class="def-box"><strong>Суть МЭБ:</strong> число электронов, отданных восстановителем = числу электронов, принятых окислителем.</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">1</span>Расставить СО всем атомам → найти изменяющиеся</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">2</span>Написать полуреакции окисления и восстановления</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">3</span>Найти НОК → коэффициенты перед восстановителем и окислителем</div>
|
||
<div class="step-card" style="margin-bottom:14px"><span class="step-num">4</span>Расставить остальные коэффициенты, проверить баланс атомов</div>
|
||
<div style="background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px;margin:10px 0">
|
||
<div style="font-weight:700;margin-bottom:8px">Пример: Fe + Cl₂ → FeCl₃</div>
|
||
<div class="formula-grid">
|
||
<div class="fcard">Fe⁰ − 3e⁻ → Fe³⁺ |×2<br>(восстановитель, окисляется)</div>
|
||
<div class="fcard">Cl₂⁰ + 2e⁻ → 2Cl⁻ |×3<br>(окислитель, восстанавливается)</div>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:.88rem">НОК(3,2) = 6: Fe×2, Cl₂×3<br><b>Ответ: 2Fe + 3Cl₂ → 2FeCl₃</b></div>
|
||
</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Разбор реакций пошагово — нажми</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Cu + H₂SO₄(конц)</div><div class="bc-type">МЭБ →?</div><div class="bc-ans">Cu⁰−2e⁻→Cu²⁺ (×1)<br>S⁺⁶+2e⁻→S⁺⁴ (×1)<br>Cu+2H₂SO₄→CuSO₄+SO₂↑+2H₂O</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Zn + HNO₃(разб)</div><div class="bc-type">МЭБ →?</div><div class="bc-ans">Zn⁰−2e⁻→Zn²⁺ (×4)<br>N⁺⁵+8e⁻→N⁻³ (×1)<br>4Zn+10HNO₃(разб)→4Zn(NO₃)₂+NH₄NO₃+3H₂O</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">MnO₂ + HCl</div><div class="bc-type">МЭБ →?</div><div class="bc-ans">Mn⁺⁴+2e⁻→Mn²⁺ (×1)<br>Cl⁻−1e⁻→Cl⁰ (×2)<br>MnO₂+4HCl→MnCl₂+Cl₂↑+2H₂O</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">⚖️ Метод электронного баланса: пошаговый разбор</div>
|
||
<div class="reveal-on-view">
|
||
<select class="ebal-eq-select" id="ebal20-sel" onchange="ebal20Load()">
|
||
<option value="0">KMnO₄ + HCl (конц.) → KCl + MnCl₂ + Cl₂ + H₂O</option>
|
||
<option value="1">Cu + HNO₃ (разб.) → Cu(NO₃)₂ + NO + H₂O</option>
|
||
<option value="2">Al + O₂ → Al₂O₃</option>
|
||
<option value="3">Na + H₂O → NaOH + H₂</option>
|
||
</select>
|
||
<div class="ebal-scene" id="ebal20-scene"></div>
|
||
<div class="ebal-nav">
|
||
<button onclick="ebal20Go(-1)" style="padding:6px 14px;border-radius:8px;border:2px solid #3b82f6;background:#fff;color:#1e40af;font-weight:600;cursor:pointer">← Назад</button>
|
||
<div class="ebal-progress"><div class="ebal-progress-fill" id="ebal20-fill"></div></div>
|
||
<button onclick="ebal20Go(1)" style="padding:6px 14px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer">Вперёд →</button>
|
||
</div>
|
||
<div id="ebal20-stepname" style="text-align:center;font-size:12px;color:#475569;margin-top:4px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §31 — ГАЛОГЕНЫ ══ -->
|
||
<div class="content" id="tab-ref31">
|
||
<div class="section-title"><i class="fas fa-fire"></i> §31. Фосфор. Аллотропия</div>
|
||
<div class="def-box"><strong>Три аллотропии фосфора:</strong> белый P₄ (ядовит, самовоспламеняется), красный (полимер, менее ядовит), чёрный (слоистый, полупроводник).</div>
|
||
<div class="latt-grid">
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Белый P₄</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">⚠️</div>
|
||
<div class="lc-detail">Молекулы P₄ (тетраэдры)<br>t°всп ≈ 34°C — самовоспламеняется!<br>Ядовит, хранят под водой<br>Светится в темноте</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Красный P</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">🔴</div>
|
||
<div class="lc-detail">Полимерная структура<br>Нет чёткой t°пл, t°восп ≈ 260°C<br>Менее ядовит<br>Применение: коробки спичек (тёрка)</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Чёрный P</div>
|
||
<div style="font-size:1.5rem;margin:6px 0">⬛</div>
|
||
<div class="lc-detail">Слоистая структура (как графит)<br>Полупроводник<br>Наиболее термодинамически стабилен<br>Получают при высоком давлении</div>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция P</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Горение (изб. O₂)</td><td>4P + 5O₂ → 2P₂O₅</td></tr>
|
||
<tr><td>С хлором (нед. Cl₂)</td><td>2P + 3Cl₂ → 2PCl₃</td></tr>
|
||
<tr><td>С хлором (изб. Cl₂)</td><td>2P + 5Cl₂ → 2PCl₅</td></tr>
|
||
<tr><td>С металлами</td><td>3Ca + 2P → Ca₃P₂ (фосфид)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ══ §32 — ХЛОР ══ -->
|
||
<div class="content" id="tab-ref32">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §32. Соединения фосфора. H₃PO₄</div>
|
||
<div class="def-box"><strong>P₂O₅ + 3H₂O → 2H₃PO₄</strong> — ортофосфорная кислота, трёхосновная, средней силы. Не летучая, нет окислительных свойств при обычной t.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Нейтрализация H₃PO₄</th><th>Соль</th><th>Пример</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Полная (3 OH⁻ на 1 H₃PO₄)</td><td>Ортофосфат (PO₄³⁻)</td><td>3NaOH + H₃PO₄ → Na₃PO₄ + 3H₂O</td></tr>
|
||
<tr><td>2/3 (2 OH⁻)</td><td>Гидрофосфат (HPO₄²⁻)</td><td>2NaOH + H₃PO₄ → Na₂HPO₄ + 2H₂O</td></tr>
|
||
<tr><td>1/3 (1 OH⁻)</td><td>Дигидрофосфат (H₂PO₄⁻)</td><td>NaOH + H₃PO₄ → NaH₂PO₄ + H₂O</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box"><b>Качественная реакция на PO₄³⁻:</b> 3Ag⁺ + PO₄³⁻ → Ag₃PO₄↓ (жёлтый осадок)</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми — узнай соль</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">P₂O₅ + H₂O</div><div class="bc-type">Продукт?</div><div class="bc-ans">P₂O₅ + 3H₂O → 2H₃PO₄<br>Ортофосфорная кислота</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Ca₃(PO₄)₂ + H₂SO₄</div><div class="bc-type">Продукт?</div><div class="bc-ans">Ca₃(PO₄)₂ + 3H₂SO₄ → 3CaSO₄ + 2H₃PO₄<br>Суперфосфат</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Ag⁺ + H₃PO₄</div><div class="bc-type">Осадок?</div><div class="bc-ans">3Ag⁺ + PO₄³⁻ → Ag₃PO₄↓<br>Жёлтый осадок — кач. р-я на PO₄³⁻</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">⚠️ Правило разбавления H₂SO₄</div>
|
||
<div class="reveal-on-view">
|
||
<div class="dilute-scene">
|
||
<div class="dilute-demo">
|
||
<div class="dilute-label wrong">✗ Воду в кислоту</div>
|
||
<div class="dilute-beaker" id="dil-wrong">
|
||
<div class="dilute-liquid" style="position:absolute;bottom:0;left:0;right:0;height:50px;background:rgba(219,234,254,0.5)"></div>
|
||
<div id="dil-wrong-acid" style="position:absolute;bottom:50px;left:0;right:0;height:0;background:rgba(220,38,38,0.5);transition:height .5s"></div>
|
||
</div>
|
||
<div id="dil-wrong-result" style="font-size:10px;color:#dc2626;margin-top:4px;min-height:24px"></div>
|
||
</div>
|
||
<div class="dilute-demo">
|
||
<div class="dilute-label right">✓ Кислоту в воду</div>
|
||
<div class="dilute-beaker" id="dil-right">
|
||
<div class="dilute-liquid" style="position:absolute;bottom:0;left:0;right:0;height:50px;background:rgba(219,234,254,0.5)"></div>
|
||
<div id="dil-right-acid" style="position:absolute;bottom:0;left:0;right:0;height:0;background:rgba(59,130,246,0.3);transition:height .8s"></div>
|
||
</div>
|
||
<div id="dil-right-result" style="font-size:10px;color:#16a34a;margin-top:4px;min-height:24px"></div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;margin:8px 0">
|
||
<button onclick="dil32Play()" style="padding:7px 18px;border-radius:8px;border:none;background:#dc2626;color:#fff;font-weight:700;cursor:pointer">▶ Демонстрация</button>
|
||
<button onclick="dil32Reset()" style="padding:7px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:8px">↺</button>
|
||
</div>
|
||
</div>
|
||
<div class="section-title" style="margin-top:20px">🍬 Обугливание сахара конц. H₂SO₄</div>
|
||
<div class="reveal-on-view" style="text-align:center;margin:12px 0">
|
||
<div style="position:relative;display:inline-block;width:80px;height:80px">
|
||
<div id="sugar-cube" style="width:60px;height:60px;background:#fef9c3;border:2px solid #fbbf24;border-radius:6px;margin:0 auto;display:flex;align-items:center;justify-content:center;font-size:11px;color:#92400e;font-weight:700;transition:background .8s">C₁₂H₂₂O₁₁</div>
|
||
<div id="sugar-column" style="position:absolute;bottom:62px;left:50%;translate:-50% 0;width:30px;height:0;background:linear-gradient(180deg,#1f2937,#374151);border-radius:4px 4px 0 0;transition:height 1.5s;transform-origin:bottom"></div>
|
||
</div>
|
||
<div style="margin-top:8px">
|
||
<button onclick="sugar32Play()" style="padding:7px 16px;border-radius:8px;border:none;background:#7c3aed;color:#fff;font-weight:700;cursor:pointer">💧 Добавить H₂SO₄</button>
|
||
<button onclick="sugar32Reset()" style="padding:7px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:8px">↺</button>
|
||
</div>
|
||
<div id="sugar-eq" style="margin-top:8px;font-size:12px;font-family:monospace;min-height:18px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §33 — ХЛОРОВОДОРОД И СОЛЯНАЯ КИСЛОТА ══ -->
|
||
<div class="content" id="tab-ref33">
|
||
<div class="section-title"><i class="fas fa-seedling"></i> §33. Минеральные удобрения</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Группа</th><th>Удобрение</th><th>Формула</th><th>% N/P/K</th></tr></thead>
|
||
<tbody>
|
||
<tr><td rowspan="3"><b>Азотные</b></td><td>Аммиачная селитра</td><td>NH₄NO₃</td><td>34% N</td></tr>
|
||
<tr><td>Мочевина (карбамид)</td><td>CO(NH₂)₂</td><td>46% N</td></tr>
|
||
<tr><td>Сульфат аммония</td><td>(NH₄)₂SO₄</td><td>21% N</td></tr>
|
||
<tr><td rowspan="2"><b>Фосфорные</b></td><td>Суперфосфат простой</td><td>Ca(H₂PO₄)₂ + CaSO₄</td><td>~20% P₂O₅</td></tr>
|
||
<tr><td>Двойной суперфосфат</td><td>Ca(H₂PO₄)₂</td><td>~45% P₂O₅</td></tr>
|
||
<tr><td rowspan="2"><b>Калийные</b></td><td>Хлорид калия</td><td>KCl</td><td>~60% K₂O</td></tr>
|
||
<tr><td>Сульфат калия</td><td>K₂SO₄</td><td>~54% K₂O</td></tr>
|
||
<tr><td><b>Комплексные</b></td><td>Нитрофоска, нитроаммофоска</td><td>N+P+K</td><td>NPK</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box"><b>Известкование почвы:</b> CaCO₃ (известняк) или Ca(OH)₂ вносят для нейтрализации кислых почв: Ca(OH)₂ + 2H⁺ → Ca²⁺ + 2H₂O</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми — узнай удобрение</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NH₄NO₃</div><div class="bc-type">Группа?</div><div class="bc-ans">Азотное — аммиачная селитра<br>34% N, широко применяется</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">KCl</div><div class="bc-type">Группа?</div><div class="bc-ans">Калийное — хлорид калия<br>Из природного сильвинита KCl·NaCl</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Ca(H₂PO₄)₂</div><div class="bc-type">Группа?</div><div class="bc-ans">Фосфорное — суперфосфат<br>Ca₃(PO₄)₂ + 2H₂SO₄ → Ca(H₂PO₄)₂ + 2CaSO₄</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §34 — СЕРА ══ -->
|
||
<div class="content" id="tab-ref34">
|
||
<div class="section-title"><i class="fas fa-gem"></i> §34. Углерод. Аллотропия</div>
|
||
<div class="latt-grid">
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Алмаз</div><div style="font-size:1.5rem;margin:6px 0">💎</div>
|
||
<div class="lc-detail">Атомная решётка; каждый C — 4 связи<br>Твёрдость 10 (Моос)<br>Не проводит ток<br>Применение: режущие инструменты, ювелирное дело</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Графит</div><div style="font-size:1.5rem;margin:6px 0">✏️</div>
|
||
<div class="lc-detail">Слоистая структура (гексагон. сетки)<br>Слои слабо связаны (ван-дер-Ваальс)<br>Мягкий, электропроводен<br>Применение: карандаши, электроды, смазки</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Фуллерен C₆₀</div><div style="font-size:1.5rem;margin:6px 0">⚽</div>
|
||
<div class="lc-detail">60 атомов C — «футбольный мяч»<br>12 пятиугольников + 20 шестиугольников<br>Открыт в 1985 г.<br>Молекулярная решётка</div>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция C</th><th>Уравнение</th><th>Роль C</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Горение (изб. O₂)</td><td>C + O₂ → CO₂</td><td>Восстановитель</td></tr>
|
||
<tr><td>Горение (нед. O₂)</td><td>2C + O₂ → 2CO</td><td>Восстановитель</td></tr>
|
||
<tr><td>Восстановление оксидов</td><td>2CuO + C → 2Cu + CO₂</td><td>Восстановитель (металлургия)</td></tr>
|
||
<tr><td>Адсорбция</td><td>—</td><td>Активированный уголь поглощает газы</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="section-title" style="margin-top:24px">💎 3D-галерея аллотропных модификаций углерода</div>
|
||
<div class="allotrope-scene reveal-on-view" id="allot34-scene">
|
||
<!-- Cards generated by JS -->
|
||
</div>
|
||
<div id="allot34-detail" style="margin-top:10px;padding:12px;background:#f8fafc;border-radius:12px;border:1px solid #e2e8f0;font-size:13px;min-height:60px;transition:all .3s"></div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §35 — СЕРНАЯ КИСЛОТА ══ -->
|
||
<div class="content" id="tab-ref35">
|
||
<div class="section-title"><i class="fas fa-wind"></i> §35. Оксиды углерода CO и CO₂</div>
|
||
<div class="formula-grid" style="margin:12px 0">
|
||
<div class="fcard highlighted"><b>CO — угарный газ</b><br>Бесцветный, без запаха, ядовит (блокирует гемоглобин → COHb)<br>Несолеобразующий оксид<br>Горит: 2CO + O₂ → 2CO₂<br>Восстановитель: Fe₂O₃ + 3CO → 2Fe + 3CO₂</div>
|
||
<div class="fcard highlighted"><b>CO₂ — углекислый газ</b><br>Кислотный оксид; тяжелее воздуха<br>+ H₂O → H₂CO₃<br>+ Ca(OH)₂ → CaCO₃↓ + H₂O (кач. р-я!)<br>Парниковый эффект (поглощает ИК)</div>
|
||
</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> CO или CO₂? — нажми</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Ядовит, блокирует Hb</div><div class="bc-type">CO или CO₂?</div><div class="bc-ans">CO (угарный газ)<br>COHb прочнее OHb → нарушение О₂ переноса</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Мутит известковую воду</div><div class="bc-type">CO или CO₂?</div><div class="bc-ans">CO₂<br>CO₂ + Ca(OH)₂ → CaCO₃↓ + H₂O</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Восстанавливает Fe из Fe₂O₃</div><div class="bc-type">CO или CO₂?</div><div class="bc-ans">CO<br>Fe₂O₃ + 3CO → 2Fe + 3CO₂ (доменная печь)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Парниковый эффект</div><div class="bc-type">CO или CO₂?</div><div class="bc-ans">CO₂<br>Поглощает ИК-излучение → нагрев атмосферы</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §36 — АЗОТ И АММИАК ══ -->
|
||
<div class="content" id="tab-ref36">
|
||
<div class="section-title"><i class="fas fa-droplet"></i> §36. Угольная кислота. Жёсткость воды</div>
|
||
<div class="def-box"><strong>H₂CO₃</strong> — слабая двухосновная кислота; существует только в растворе: CO₂ + H₂O ⇌ H₂CO₃. Соли: <b>карбонаты</b> (CO₃²⁻) и <b>гидрокарбонаты</b> (HCO₃⁻).</div>
|
||
<div class="ch-stat">
|
||
<div class="ch-stat-card"><div class="big">Врем.</div><div class="lbl">Ca(HCO₃)₂, Mg(HCO₃)₂ — устраняется кипячением</div></div>
|
||
<div class="ch-stat-card"><div class="big">Пост.</div><div class="lbl">CaSO₄, MgSO₄ — не устраняется кипячением</div></div>
|
||
<div class="ch-stat-card"><div class="big">Полная</div><div class="lbl">временная + постоянная жёсткость</div></div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Тип жёсткости</th><th>Причина</th><th>Устранение</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Временная</td><td>Ca(HCO₃)₂, Mg(HCO₃)₂</td><td>Кипячение</td><td>Ca(HCO₃)₂ → CaCO₃↓ + H₂O + CO₂↑</td></tr>
|
||
<tr><td>Постоянная</td><td>CaSO₄, MgSO₄</td><td>Na₂CO₃ или Na₃PO₄</td><td>Ca²⁺ + CO₃²⁻ → CaCO₃↓</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Как устранить жёсткость?</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Временная жёсткость</div><div class="bc-type">Метод?</div><div class="bc-ans">Кипячение:<br>Ca(HCO₃)₂ → CaCO₃↓ + H₂O + CO₂↑</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Постоянная жёсткость</div><div class="bc-type">Метод?</div><div class="bc-ans">Добавить Na₂CO₃:<br>Ca²⁺ + CO₃²⁻ → CaCO₃↓</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Na₂CO₃ + HCl</div><div class="bc-type">Продукты?</div><div class="bc-ans">Na₂CO₃ + 2HCl → 2NaCl + H₂O + CO₂↑</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">💧 Демонстрация жёсткости воды</div>
|
||
<div class="reveal-on-view">
|
||
<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:12px 0">
|
||
<div style="text-align:center;width:120px">
|
||
<div style="font-size:12px;font-weight:700;color:#1e40af;margin-bottom:6px">Мягкая вода</div>
|
||
<div style="position:relative;width:80px;height:100px;margin:0 auto;border:2px solid #94a3b8;border-top:none;border-radius:0 0 10px 10px;overflow:hidden">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:rgba(219,234,254,0.5)"></div>
|
||
<div id="foam-soft" style="position:absolute;bottom:70px;left:0;right:0;height:0;background:linear-gradient(180deg,rgba(255,255,255,0.9),rgba(241,245,249,0.7));transition:height .8s;border-radius:4px"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:#475569;margin-top:4px">Много пены 🫧</div>
|
||
</div>
|
||
<div style="text-align:center;width:120px">
|
||
<div style="font-size:12px;font-weight:700;color:#dc2626;margin-bottom:6px">Жёсткая вода</div>
|
||
<div style="position:relative;width:80px;height:100px;margin:0 auto;border:2px solid #94a3b8;border-top:none;border-radius:0 0 10px 10px;overflow:hidden">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;height:70px;background:rgba(229,231,235,0.5)"></div>
|
||
<div id="scum-hard" style="position:absolute;bottom:70px;left:0;right:0;height:0;background:rgba(209,213,219,0.8);transition:height .8s"></div>
|
||
<div id="scale-hard" style="position:absolute;bottom:0;left:0;right:0;height:0;background:rgba(191,219,254,0.6);transition:height 1s;border-top:2px solid #93c5fd"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:#475569;margin-top:4px">Накипь + осадок 🪨</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center">
|
||
<button onclick="hard36Soap()" style="padding:6px 14px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer;font-size:12px">🧼 Добавить мыло</button>
|
||
<button onclick="hard36Boil()" style="padding:6px 14px;border-radius:8px;border:2px solid #f97316;background:#fff;color:#c2410c;font-weight:600;cursor:pointer;font-size:12px;margin-left:6px">🔥 Кипятить</button>
|
||
<button onclick="hard36Reset()" style="padding:6px 10px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:6px;font-size:12px">↺</button>
|
||
</div>
|
||
<div id="hard36-info" style="margin-top:8px;font-size:12px;text-align:center;min-height:30px;font-family:monospace"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §37 — АЗОТНАЯ КИСЛОТА ══ -->
|
||
<div class="content" id="tab-ref37">
|
||
<div class="section-title"><i class="fas fa-microchip"></i> §37. Кремний Si</div>
|
||
<div class="def-box"><strong>Si</strong> — полупроводник (между металлом и диэлектриком). Атомная решётка (как алмаз). В природе: SiO₂, силикаты — самые распространённые минералы земной коры.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция Si</th><th>Уравнение</th><th>Особенность</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>С O₂</td><td>Si + O₂ → SiO₂</td><td>При нагреве</td></tr>
|
||
<tr><td>С HF (единств. кислота!)</td><td>Si + 4HF → SiF₄↑ + 2H₂↑</td><td>HF — единственная кислота, растворяющая Si</td></tr>
|
||
<tr><td>Со щёлочами</td><td>Si + 2NaOH + H₂O → Na₂SiO₃ + 2H₂↑</td><td>Амфотерные свойства</td></tr>
|
||
<tr><td>С металлами</td><td>2Ca + Si → Ca₂Si (силицид)</td><td>При нагреве</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box"><b>Применение Si:</b> полупроводниковая электроника (транзисторы, процессоры), солнечные батареи, оптоволокно (SiO₂).</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми — реакция Si</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Si + HF</div><div class="bc-type">Реакция?</div><div class="bc-ans">Si + 4HF → SiF₄↑ + 2H₂↑<br>Только HF растворяет Si (и SiO₂)!</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Si + NaOH</div><div class="bc-type">Реакция?</div><div class="bc-ans">Si + 2NaOH + H₂O → Na₂SiO₃ + 2H₂↑<br>Амфотерный характер Si</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Si + HCl(конц.)</div><div class="bc-type">Реакция?</div><div class="bc-ans">Реакция не идёт!<br>Si устойчив к большинству кислот</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §38 — ФОСФОР ══ -->
|
||
<div class="content" id="tab-ref38">
|
||
<div class="section-title"><i class="fas fa-industry"></i> §38. SiO₂ и силикаты</div>
|
||
<div class="def-box"><strong>SiO₂</strong> — кислотный оксид; очень твёрдый (атомная решётка), t°пл ≈ 1700°C. <b>Не реагирует с водой</b>, но реагирует с щёлочами и HF.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция SiO₂</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>+ NaOH (расплав/р-р)</td><td>SiO₂ + 2NaOH → Na₂SiO₃ + H₂O</td></tr>
|
||
<tr><td>+ Na₂CO₃ (сплавление)</td><td>SiO₂ + Na₂CO₃ → Na₂SiO₃ + CO₂↑</td></tr>
|
||
<tr><td>+ HF</td><td>SiO₂ + 4HF → SiF₄↑ + 2H₂O (травление стекла)</td></tr>
|
||
<tr><td>С H₂O</td><td>Реакция НЕ ИДЁТ</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="formula-grid" style="margin:10px 0">
|
||
<div class="fcard highlighted"><b>Na₂SiO₃</b> — «жидкое стекло»: р-р в воде; огнезащитное покрытие, клей.</div>
|
||
<div class="fcard highlighted"><b>H₂SiO₃</b> — слабее H₂CO₃; белый гель; H₂SiO₃ → SiO₂ + H₂O при нагреве.</div>
|
||
<div class="fcard highlighted"><b>Стекло:</b> Na₂CO₃ + CaCO₃ + SiO₂ → Na₂O·CaO·6SiO₂ (сплавление).</div>
|
||
</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Реагирует ли SiO₂?</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">SiO₂ + HF</div><div class="bc-type">Реакция?</div><div class="bc-ans">Да! SiO₂ + 4HF → SiF₄↑ + 2H₂O<br>Травление стекла, обработка Si</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">SiO₂ + H₂O</div><div class="bc-type">Реакция?</div><div class="bc-ans">Нет реакции<br>SiO₂ не растворяется в воде</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">SiO₂ + NaOH</div><div class="bc-type">Реакция?</div><div class="bc-ans">SiO₂ + 2NaOH → Na₂SiO₃ + H₂O<br>«Жидкое стекло»</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">SiO₂ + HCl</div><div class="bc-type">Реакция?</div><div class="bc-ans">Нет реакции<br>(только HF реагирует с SiO₂)</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §39 — ОБОБЩЕНИЕ НЕМЕТАЛЛЫ ══ -->
|
||
<div class="content" id="tab-ref39">
|
||
<div class="section-title"><i class="fas fa-building"></i> §39. Строительные материалы на основе силикатов</div>
|
||
<div class="def-box"><strong>Силикатная промышленность</strong> производит стекло, цемент, керамику (кирпич, фарфор, фаянс) — основные строительные материалы.</div>
|
||
<div class="latt-grid">
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Известь</div><div style="font-size:1.5rem;margin:6px 0">🪨</div>
|
||
<div class="lc-detail">CaCO₃ → CaO + CO₂ (обжиг, ~1000°C)<br>CaO + H₂O → Ca(OH)₂ + Q (гашение)<br>Ca(OH)₂ → «гашёная известь», «пушонка»<br>Известковый раствор затвердевает: Ca(OH)₂+CO₂→CaCO₃</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Цемент</div><div style="font-size:1.5rem;margin:6px 0">🏗️</div>
|
||
<div class="lc-detail">Сырьё: CaCO₃ (известняк) + Al₂Si₂O₅(OH)₄ (глина)<br>Обжиг → Ca-алюмосиликаты<br>+ вода → гидратация → твердение<br>Бетон = цемент + песок + гравий + вода</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Стекло</div><div style="font-size:1.5rem;margin:6px 0">🪟</div>
|
||
<div class="lc-detail">Na₂CO₃ + CaCO₃ + SiO₂ (1500°C)<br>→ Na₂SiO₃ + CaSiO₃ + 2CO₂<br>Состав: Na₂O·CaO·6SiO₂<br>HF травит стекло!</div>
|
||
</div>
|
||
<div class="latt-card" onclick="this.classList.toggle('picked')">
|
||
<div class="lc-name">Керамика</div><div style="font-size:1.5rem;margin:6px 0">🏺</div>
|
||
<div class="lc-detail">Сырьё: каолин Al₂Si₂O₅(OH)₄<br>+ полевой шпат + кварц<br>Обжиг 1300–1400°C → фарфор (плотный)<br>Кирпич: более низкий обжиг</div>
|
||
</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Обжиг известняка</td><td>CaCO₃ → CaO + CO₂↑ (~1000°C)</td></tr>
|
||
<tr><td>Гашение извести</td><td>CaO + H₂O → Ca(OH)₂ + Q</td></tr>
|
||
<tr><td>Карбонизация</td><td>Ca(OH)₂ + CO₂ → CaCO₃↓ + H₂O</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="section-title" style="margin-top:24px">🏭 Производство силикатных материалов</div>
|
||
<div class="reveal-on-view">
|
||
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
|
||
<button class="genrow-tab active" onclick="factory39Show('glass',this)">Стекло</button>
|
||
<button class="genrow-tab" onclick="factory39Show('cement',this)">Цемент</button>
|
||
<button class="genrow-tab" onclick="factory39Show('ceramics',this)">Керамика</button>
|
||
</div>
|
||
<div id="factory39-flow" style="display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:center;margin:12px 0"></div>
|
||
<div id="factory39-detail" style="font-size:12px;background:#f8fafc;border-radius:10px;padding:10px;min-height:50px;border:1px solid #e2e8f0"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §22 — ОБЩАЯ ХАРАКТЕРИСТИКА НЕМЕТАЛЛОВ ══ -->
|
||
<div class="content" id="tab-ref22">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §22. ОВР в водных растворах. Влияние среды</div>
|
||
<div class="def-box">Среда реакции (кислая / нейтральная / щелочная) <strong>определяет продукты</strong> восстановления сильных окислителей — KMnO₄, K₂Cr₂O₇.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.81rem">
|
||
<thead><tr><th>Реакция</th><th>Особенности</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Cu + HNO₃ конц.</td><td>N⁺⁵ → N⁺⁴ (NO₂)</td><td>Cu + 4HNO₃(к) → Cu(NO₃)₂ + 2NO₂↑ + 2H₂O</td></tr>
|
||
<tr><td>Cu + HNO₃ разб.</td><td>N⁺⁵ → N⁺² (NO)</td><td>3Cu + 8HNO₃(р) → 3Cu(NO₃)₂ + 2NO↑ + 4H₂O</td></tr>
|
||
<tr><td>Fe + HNO₃ разб.</td><td>Fe⁰ → Fe³⁺ (избыток к-ты)</td><td>Fe + 4HNO₃(р) → Fe(NO₃)₃ + NO↑ + 2H₂O</td></tr>
|
||
<tr><td>Fe + конц. H₂SO₄ / HNO₃ (хол.)</td><td>Пассивация!</td><td>Реакции не идут</td></tr>
|
||
<tr><td>Zn + H₂SO₄ конц.</td><td>S⁺⁶ → S⁺⁴ (SO₂)</td><td>Zn + 2H₂SO₄(к) → ZnSO₄ + SO₂↑ + 2H₂O</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Выбери металл + кислоту — узнай продукт</div>
|
||
<div class="quiz-wrap" id="med22-quiz"></div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🧪 Интерактивный pH-метр</div>
|
||
<div class="reveal-on-view">
|
||
<div class="ph-meter-wrap">
|
||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px">
|
||
<div style="font-size:11px;font-weight:700;color:#475569">pH 0–14</div>
|
||
<div style="position:relative">
|
||
<div class="ph-strip" id="ph22-strip">
|
||
<div class="ph-slider-thumb" id="ph22-thumb" data-ph="7" style="top:50%"></div>
|
||
</div>
|
||
</div>
|
||
<input type="range" id="ph22-slider" min="0" max="14" step="0.1" value="7"
|
||
oninput="ph22Update()" style="width:40px;transform:rotate(-90deg);margin:60px 0;cursor:pointer">
|
||
</div>
|
||
<div class="ph-indicators">
|
||
<div class="ph-tube">
|
||
<div class="ph-tube-body"><div class="ph-tube-fill" id="ph22-litmus"></div></div>
|
||
<div class="ph-tube-label">Лакмус</div>
|
||
</div>
|
||
<div class="ph-tube">
|
||
<div class="ph-tube-body"><div class="ph-tube-fill" id="ph22-mo"></div></div>
|
||
<div class="ph-tube-label">Метилоранж</div>
|
||
</div>
|
||
<div class="ph-tube">
|
||
<div class="ph-tube-body"><div class="ph-tube-fill" id="ph22-ph"></div></div>
|
||
<div class="ph-tube-label">Фенолфталеин</div>
|
||
</div>
|
||
</div>
|
||
<div class="ph-info">
|
||
<div style="font-size:22px;font-weight:800;text-align:center" id="ph22-val">7.0</div>
|
||
<div style="font-size:12px;text-align:center" id="ph22-medium"></div>
|
||
<div style="font-size:11px;margin-top:6px" id="ph22-conc"></div>
|
||
<div class="ph-examples" id="ph22-examples"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §23 — НЕМЕТАЛЛЫ В ПС ══ -->
|
||
<div class="content" id="tab-ref23">
|
||
<div class="section-title"><i class="fas fa-bolt"></i> §23. Электрохимическая коррозия металлов</div>
|
||
<div class="def-box"><strong>Электрохимическая коррозия</strong> возникает при контакте двух разных металлов в присутствии электролита. Образуется гальваническая пара: более активный металл — <b>анод</b> (разрушается), менее активный — <b>катод</b>.</div>
|
||
<div style="margin:12px 0;background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px">
|
||
<div style="font-weight:700;margin-bottom:8px">Пара Fe–Cu в растворе электролита:</div>
|
||
<div class="formula-grid">
|
||
<div class="fcard">Анод (−): <b>Fe⁰ − 2e⁻ → Fe²⁺</b><br>(Fe активнее Cu → разрушается)</div>
|
||
<div class="fcard">Катод (+): <b>O₂ + 2H₂O + 4e⁻ → 4OH⁻</b><br>(в нейтральной среде)</div>
|
||
</div>
|
||
<div style="margin-top:8px;font-size:.82rem">Fe²⁺ + 2OH⁻ → Fe(OH)₂ → [+O₂] → Fe(OH)₃ → Fe₂O₃·nH₂O (ржавчина)</div>
|
||
</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Метод защиты</th><th>Суть</th><th>Пример</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Покрытие (анодное)</td><td>Покрытие более активным Me (жертва)</td><td>Оцинкованное железо (Zn)</td></tr>
|
||
<tr><td>Покрытие (катодное)</td><td>Покрытие менее активным Me</td><td>Луженое железо (Sn), никелирование</td></tr>
|
||
<tr><td>Протекторная защита</td><td>Прикрепление более активного Me</td><td>Zn-протектор для Fe-трубы</td></tr>
|
||
<tr><td>Катодная защита</td><td>Внешний ток делает объект катодом</td><td>Трубопроводы</td></tr>
|
||
<tr><td>Легирование</td><td>Сплав с Cr, Ni → нержавеющая сталь</td><td>Нержавейка (18% Cr, 8% Ni)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Кто разрушится — нажми пару</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe–Cu</div><div class="bc-type">Анод (разруш.)?</div><div class="bc-ans">Анод: Fe (активнее)<br>Катод: Cu</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe–Zn</div><div class="bc-type">Анод (разруш.)?</div><div class="bc-ans">Анод: Zn (активнее Fe)<br>Катод: Fe → Fe защищено!</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Al–Fe</div><div class="bc-type">Анод (разруш.)?</div><div class="bc-ans">Анод: Al (активнее Fe)<br>Катод: Fe → Fe защищено!</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe–Sn</div><div class="bc-type">Анод (разруш.)?</div><div class="bc-ans">Анод: Fe (активнее Sn)<br>Катод: Sn → Fe быстро ржавеет при повреждении покрытия</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🔋 Симулятор гальванической пары</div>
|
||
<div class="reveal-on-view">
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px">
|
||
<select id="galv23-a" onchange="galv23Init()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:13px">
|
||
<option value="Zn,-0.76">Zn (−0.76 В)</option>
|
||
<option value="Fe,-0.44">Fe (−0.44 В)</option>
|
||
<option value="Ni,-0.25">Ni (−0.25 В)</option>
|
||
<option value="Pb,-0.13">Pb (−0.13 В)</option>
|
||
</select>
|
||
<span style="font-size:18px;color:#94a3b8">+</span>
|
||
<select id="galv23-b" onchange="galv23Init()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:13px">
|
||
<option value="Cu,+0.34">Cu (+0.34 В)</option>
|
||
<option value="Ag,+0.80">Ag (+0.80 В)</option>
|
||
<option value="Au,+1.50">Au (+1.50 В)</option>
|
||
<option value="H,0.00">H (0.00 В)</option>
|
||
</select>
|
||
<button onclick="galv23Start()" style="padding:6px 16px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer">▶ Запустить</button>
|
||
<button onclick="galv23Stop()" style="padding:6px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer">⏹</button>
|
||
</div>
|
||
<div class="galv-scene" id="galv23-scene">
|
||
<div class="galv-wire" id="galv23-wire"></div>
|
||
<div class="galv-beaker">
|
||
<div class="galv-liquid" id="galv23-liquid"></div>
|
||
<div class="galv-metal anode" id="galv23-anode" style="color:#fff;font-size:10px;text-align:center">—</div>
|
||
<div class="galv-metal cathode" id="galv23-cathode" style="color:#fff;font-size:10px;text-align:center">—</div>
|
||
</div>
|
||
</div>
|
||
<div class="galv-labels">
|
||
<span id="galv23-a-lbl" style="color:#374151">Анод (−)</span>
|
||
<span id="galv23-emf" style="font-weight:700;color:#1e40af;font-size:14px">ЭДС = ?</span>
|
||
<span id="galv23-c-lbl" style="color:#991b1b">Катод (+)</span>
|
||
</div>
|
||
<div id="galv23-reactions" style="margin-top:8px;font-size:12px;font-family:monospace;text-align:center;min-height:36px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §24 — УГЛЕРОД: АЛЛОТРОПИЯ ══ -->
|
||
<div class="content" id="tab-ref24">
|
||
<div class="section-title"><i class="fas fa-plug"></i> §24. Электролиз</div>
|
||
<div class="def-box"><strong>Электролиз</strong> — разложение вещества под действием постоянного тока. <b>Катод (−)</b>: восстановление катионов. <b>Анод (+)</b>: окисление анионов.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Система</th><th>Катод (−)</th><th>Анод (+)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Расплав NaCl</td><td>Na⁺+e⁻→Na (металл)</td><td>2Cl⁻−2e⁻→Cl₂↑</td></tr>
|
||
<tr><td>Раствор CuSO₄</td><td>Cu²⁺+2e⁻→Cu↓</td><td>2H₂O−4e⁻→O₂↑+4H⁺</td></tr>
|
||
<tr><td>Раствор NaCl</td><td>2H₂O+2e⁻→H₂↑+2OH⁻</td><td>2Cl⁻−2e⁻→Cl₂↑</td></tr>
|
||
<tr><td>Раствор H₂SO₄</td><td>2H⁺+2e⁻→H₂↑</td><td>2H₂O−4e⁻→O₂↑+4H⁺</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box"><b>Применения:</b> рафинирование Cu и Au; получение Al (электролиз расплава Al₂O₃); получение Cl₂ и NaOH (электролиз р-ра NaCl); гальванопластика.</div>
|
||
<div class="def-box"><b>Закон Фарадея:</b> m = (M · I · t) / (n · F), где F = 96485 Кл/моль, n — число e⁻.</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Что выделяется на электродах?</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Расплав AlCl₃</div><div class="bc-type">Катод / Анод?</div><div class="bc-ans">Катод: Al³⁺+3e⁻→Al<br>Анод: 2Cl⁻−2e⁻→Cl₂↑</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Р-р AgNO₃</div><div class="bc-type">Катод / Анод?</div><div class="bc-ans">Катод: Ag⁺+e⁻→Ag↓ (серебрение)<br>Анод: 2H₂O→O₂↑+4H⁺+4e⁻</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Р-р Na₂SO₄</div><div class="bc-type">Катод / Анод?</div><div class="bc-ans">Катод: 2H₂O+2e⁻→H₂↑+2OH⁻<br>Анод: 2H₂O→O₂↑+4H⁺+4e⁻</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">⚡ Симулятор электролиза</div>
|
||
<div class="reveal-on-view">
|
||
<div class="electro-controls">
|
||
<select id="elec24-sel" onchange="elec24Load()" style="padding:5px 10px;border-radius:8px;border:1px solid #e2e8f0;font-size:12px">
|
||
<option value="0">NaCl (расплав)</option>
|
||
<option value="1">NaCl (р-р водный)</option>
|
||
<option value="2">CuSO₄ (р-р)</option>
|
||
<option value="3">H₂O + H₂SO₄</option>
|
||
</select>
|
||
<button onclick="elec24Start()" style="padding:6px 14px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer;font-size:12px">▶ Старт</button>
|
||
<button onclick="elec24Stop()" style="padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:12px">⏹</button>
|
||
</div>
|
||
<div style="position:relative;margin-top:10px">
|
||
<div style="position:absolute;top:-55px;left:50%;translate:-50% 0;background:#1e293b;color:#fff;border-radius:6px;padding:4px 12px;font-size:11px;font-weight:700">~ Источник тока</div>
|
||
<div style="position:absolute;top:-30px;left:30%;font-size:11px;font-weight:700;color:#1e40af">− Анод</div>
|
||
<div style="position:absolute;top:-30px;right:25%;font-size:11px;font-weight:700;color:#dc2626">+ Катод</div>
|
||
</div>
|
||
<div class="electro-cell" id="elec24-cell">
|
||
<div class="electro-half an">
|
||
<div class="electro-label">Анод (−)</div>
|
||
<div class="electro-electrode anode-e"></div>
|
||
<div id="elec24-an-ions"></div>
|
||
<div class="electro-product" id="elec24-an-prod"></div>
|
||
</div>
|
||
<div style="width:60px;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:11px;color:#0369a1;text-align:center;padding:4px">
|
||
<div id="elec24-electrolyte">электролит</div>
|
||
</div>
|
||
<div class="electro-half ca">
|
||
<div class="electro-label">Катод (+)</div>
|
||
<div class="electro-electrode cathode-e"></div>
|
||
<div id="elec24-ca-ions"></div>
|
||
<div class="electro-product" id="elec24-ca-prod"></div>
|
||
</div>
|
||
</div>
|
||
<div id="elec24-eqs" style="margin-top:10px;font-size:12px;font-family:monospace;text-align:center;min-height:40px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §25 — ХИМИЧЕСКИЕ СВОЙСТВА УГЛЕРОДА ══ -->
|
||
<div class="content" id="tab-ref25">
|
||
<div class="section-title"><i class="fas fa-fire"></i> §25. Тепловой эффект химических реакций</div>
|
||
<div class="def-box"><strong>Тепловой эффект (ΔH)</strong> — теплота, поглощаемая или выделяемая в ходе реакции.<br>
|
||
<b>Экзотермические:</b> ΔH < 0 (тепло выделяется)<br>
|
||
<b>Эндотермические:</b> ΔH > 0 (тепло поглощается)</div>
|
||
<div class="def-box"><strong>Закон Гесса:</strong> тепловой эффект реакции не зависит от пути (промежуточных стадий), а определяется только начальным и конечным состоянием системы.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>ΔH, кДж/моль</th><th>Тип</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>C + O₂ → CO₂</td><td>−393,5</td><td>Экзо</td></tr>
|
||
<tr><td>2H₂ + O₂ → 2H₂O(ж)</td><td>−572</td><td>Экзо</td></tr>
|
||
<tr><td>CH₄ + 2O₂ → CO₂ + 2H₂O</td><td>−890</td><td>Экзо</td></tr>
|
||
<tr><td>N₂ + O₂ → 2NO</td><td>+180</td><td>Эндо</td></tr>
|
||
<tr><td>CaCO₃ → CaO + CO₂</td><td>+178</td><td>Эндо</td></tr>
|
||
<tr><td>H⁺ + OH⁻ → H₂O</td><td>−57,3</td><td>Экзо (нейтрализация)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Экзо или эндо? — нажми реакцию</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Горение угля</div><div class="bc-type">Тип?</div><div class="bc-ans">Экзотермическая (ΔH < 0)<br>Тепло выделяется</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Разложение H₂O</div><div class="bc-type">Тип?</div><div class="bc-ans">Эндотермическая (ΔH > 0)<br>Требует энергии (электролиз)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NaOH + HCl</div><div class="bc-type">Тип?</div><div class="bc-ans">Экзотермическая<br>ΔH = −57,3 кДж/моль H₂O</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Синтез NH₃</div><div class="bc-type">Тип?</div><div class="bc-ans">Экзотермическая<br>N₂+3H₂→2NH₃, ΔH = −92 кДж</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Обжиг CaCO₃</div><div class="bc-type">Тип?</div><div class="bc-ans">Эндотермическая<br>CaCO₃→CaO+CO₂, ΔH = +178 кДж</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Горение H₂</div><div class="bc-type">Тип?</div><div class="bc-ans">Экзотермическая<br>2H₂+O₂→2H₂O, ΔH = −572 кДж</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🔥 Энергетическая диаграмма реакции</div>
|
||
<div class="energy-scene reveal-on-view">
|
||
<div class="energy-controls">
|
||
<div class="energy-toggle">
|
||
<button id="en25-exo" class="active" onclick="en25Switch('exo')">Экзотермическая (−ΔH)</button>
|
||
<button id="en25-endo" onclick="en25Switch('endo')">Эндотермическая (+ΔH)</button>
|
||
</div>
|
||
<label style="font-size:13px">ΔH: <input type="range" id="en25-dh" min="10" max="500" value="178" oninput="en25Draw()" style="width:100px"> <span id="en25-dhval">178</span> кДж/моль</label>
|
||
<button onclick="en25Animate()" style="padding:6px 14px;border-radius:8px;border:none;background:#3b82f6;color:#fff;cursor:pointer;font-size:12px">▶ Анимировать</button>
|
||
</div>
|
||
<div class="energy-svg-wrap" id="en25-wrap">
|
||
<svg id="en25-svg" width="420" height="220" viewBox="0 0 420 220">
|
||
<defs>
|
||
<marker id="arr" markerWidth="8" markerHeight="8" refX="4" refY="4" orient="auto">
|
||
<path d="M0,0 L0,8 L8,4 Z" fill="#64748b"/>
|
||
</marker>
|
||
</defs>
|
||
<!-- Axes -->
|
||
<line x1="30" y1="200" x2="400" y2="200" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arr)"/>
|
||
<line x1="30" y1="200" x2="30" y2="10" stroke="#94a3b8" stroke-width="1.5" marker-end="url(#arr)"/>
|
||
<text x="210" y="218" text-anchor="middle" font-size="11" fill="#94a3b8">Координата реакции</text>
|
||
<text x="12" y="110" text-anchor="middle" font-size="11" fill="#94a3b8" transform="rotate(-90,12,110)">Энергия</text>
|
||
<!-- Curve placeholder -->
|
||
<path id="en25-curve" d="" fill="none" stroke="#3b82f6" stroke-width="2.5"
|
||
stroke-dasharray="600" stroke-dashoffset="600"/>
|
||
<!-- Labels -->
|
||
<rect id="en25-react-bg" x="35" y="140" width="70" height="22" rx="4" fill="#dbeafe" opacity="0"/>
|
||
<text id="en25-react-lbl" x="70" y="155" text-anchor="middle" font-size="11" fill="#1e40af" opacity="0">Реагенты</text>
|
||
<rect id="en25-prod-bg" x="315" y="140" width="70" height="22" rx="4" fill="#dcfce7" opacity="0"/>
|
||
<text id="en25-prod-lbl" x="350" y="155" text-anchor="middle" font-size="11" fill="#166534" opacity="0">Продукты</text>
|
||
<text id="en25-dh-lbl" x="350" y="80" text-anchor="middle" font-size="12" font-weight="700" fill="#dc2626" opacity="0"></text>
|
||
<line id="en25-dh-line" x1="0" y1="0" x2="0" y2="0" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="4,3" opacity="0"/>
|
||
<text id="en25-ea-lbl" x="210" y="40" text-anchor="middle" font-size="11" fill="#7c3aed" opacity="0">Ea</text>
|
||
</svg>
|
||
</div>
|
||
<div id="en25-eq" style="text-align:center;font-size:13px;font-family:monospace;margin-top:8px;min-height:20px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §26 — ОКСИДЫ УГЛЕРОДА ══ -->
|
||
<div class="content" id="tab-ref26">
|
||
<div class="section-title"><i class="fas fa-wind"></i> §26. Азот. Строение N₂. Свойства</div>
|
||
<div class="ch-stat">
|
||
<div class="ch-stat-card"><div class="big">78%</div><div class="lbl">N₂ в воздухе</div></div>
|
||
<div class="ch-stat-card"><div class="big">N≡N</div><div class="lbl">тройная связь, E = 946 кДж/моль</div></div>
|
||
<div class="ch-stat-card"><div class="big">−3→+5</div><div class="lbl">диапазон степеней окисления</div></div>
|
||
</div>
|
||
<div class="def-box"><strong>N₂</strong> — бесцветный газ без запаха; химически инертен при н.у. из-за прочной тройной связи. Реагирует только при высоких t°, давлении или с очень активными металлами.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th><th>Условия</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>С O₂</td><td>N₂ + O₂ ⇌ 2NO</td><td>>2000°C или электрическая дуга</td></tr>
|
||
<tr><td>С H₂ (синтез NH₃)</td><td>N₂ + 3H₂ ⇌ 2NH₃</td><td>Fe-кат., 450°C, 150–200 атм</td></tr>
|
||
<tr><td>С активными Ме</td><td>3Mg + N₂ → Mg₃N₂ 6Li + N₂ → 2Li₃N</td><td>При нагреве</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Нажми реакцию — условия и уравнение</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">N₂ + O₂</div><div class="bc-type">Условия?</div><div class="bc-ans">N₂ + O₂ ⇌ 2NO<br>>2000°C (молния, дуга)<br>СО азота: 0 → +2</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">N₂ + H₂</div><div class="bc-type">Условия?</div><div class="bc-ans">N₂ + 3H₂ ⇌ 2NH₃<br>Fe-кат., 450°C, 200 атм<br>СО N: 0 → −3</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">N₂ + Mg</div><div class="bc-type">Условия?</div><div class="bc-ans">3Mg + N₂ → Mg₃N₂<br>При нагреве. Нитрид магния.</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §27 — УГОЛЬНАЯ КИСЛОТА И КАРБОНАТЫ ══ -->
|
||
<div class="content" id="tab-ref27">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §27. Аммиак NH₃</div>
|
||
<div class="ch-stat">
|
||
<div class="ch-stat-card"><div class="big">−33°C</div><div class="lbl">температура кипения NH₃</div></div>
|
||
<div class="ch-stat-card"><div class="big">700:1</div><div class="lbl">объёмов NH₃ растворяется в 1 объёме H₂O</div></div>
|
||
<div class="ch-stat-card"><div class="big">−3</div><div class="lbl">степень окисления N в NH₃</div></div>
|
||
</div>
|
||
<div class="def-box"><strong>Получение:</strong> в лаборатории — нагрев NH₄Cl + Ca(OH)₂; в промышленности — синтез Габера: N₂ + 3H₂ ⇌ 2NH₃ (Fe, 450°C, 200 атм).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th><th>Роль NH₃</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>С водой</td><td>NH₃ + H₂O ⇌ NH₄⁺ + OH⁻</td><td>Слабое основание (донор)</td></tr>
|
||
<tr><td>С кислотами</td><td>NH₃ + HCl → NH₄Cl↓ (белый дым)</td><td>Основание</td></tr>
|
||
<tr><td>Горение (без кат.)</td><td>4NH₃ + 3O₂ → 2N₂ + 6H₂O</td><td>Восстановитель</td></tr>
|
||
<tr><td>Окисление с кат. (Pt)</td><td>4NH₃ + 5O₂ → 4NO + 6H₂O</td><td>Восстановитель; производство HNO₃</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Свойства NH₃ — нажми реакцию</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NH₃ + HNO₃</div><div class="bc-type">Продукт?</div><div class="bc-ans">NH₃ + HNO₃ → NH₄NO₃<br>Нитрат аммония — удобрение</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NH₃ + H₂SO₄</div><div class="bc-type">Продукт?</div><div class="bc-ans">2NH₃ + H₂SO₄ → (NH₄)₂SO₄<br>Сульфат аммония — удобрение</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NH₃ + Pt + O₂</div><div class="bc-type">Продукт?</div><div class="bc-ans">4NH₃ + 5O₂ → 4NO + 6H₂O<br>Первая стадия получения HNO₃</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NH₃ + H₂O</div><div class="bc-type">Среда р-ра?</div><div class="bc-ans">NH₃·H₂O ⇌ NH₄⁺ + OH⁻<br>Щелочная (слабое основание)</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🔵 3D-модель молекулы NH₃ (пирамидальная)</div>
|
||
<div class="reveal-on-view" style="text-align:center">
|
||
<div class="nh3-scene">
|
||
<div class="nh3-pyramid">
|
||
<div class="nh3-inner" id="nh3-27-inner">
|
||
<!-- N central -->
|
||
<div class="nh3-atom N" style="left:40px;top:20px">N</div>
|
||
<!-- Lone pair -->
|
||
<div class="nh3-lone" id="nh3-lone"></div>
|
||
<!-- 3 H atoms -->
|
||
<div class="nh3-atom H" style="left:10px;top:75px">H</div>
|
||
<div class="nh3-atom H" style="left:50px;top:90px">H</div>
|
||
<div class="nh3-atom H" style="left:85px;top:70px">H</div>
|
||
<!-- SVG bonds overlay -->
|
||
<svg style="position:absolute;top:0;left:0;width:120px;height:120px;pointer-events:none">
|
||
<line x1="55" y1="33" x2="23" y2="82" stroke="#94a3b8" stroke-width="2.5"/>
|
||
<line x1="55" y1="33" x2="63" y2="97" stroke="#94a3b8" stroke-width="2.5"/>
|
||
<line x1="55" y1="33" x2="98" y2="83" stroke="#94a3b8" stroke-width="2.5"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:12px;color:#475569;max-width:280px;margin:0 auto">
|
||
Жёлтое облако — <b>неподелённая пара e⁻</b> азота.<br>
|
||
Нажми на неё → реакция с H⁺!
|
||
</div>
|
||
<div id="nh3-donor-scene" style="margin-top:10px;min-height:30px;font-size:13px;text-align:center"></div>
|
||
<div style="display:flex;gap:8px;justify-content:center;margin-top:8px">
|
||
<button onclick="nh3DonorPlay()" style="padding:6px 16px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer;font-size:12px">NH₃ + H⁺ → NH₄⁺</button>
|
||
<button onclick="document.getElementById('nh3-27-inner').style.animationPlayState='running'" style="padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:12px">▶ Вращение</button>
|
||
<button onclick="document.getElementById('nh3-27-inner').style.animationPlayState='paused'" style="padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:12px">⏸</button>
|
||
</div>
|
||
</div>
|
||
<div class="section-title" style="margin-top:24px">⛲ Опыт «Фонтан аммиака»</div>
|
||
<div class="reveal-on-view" style="text-align:center">
|
||
<div style="position:relative;display:inline-block;height:200px;width:200px">
|
||
<div id="nh3-flask" style="position:absolute;top:0;left:30px;width:140px;height:100px;border-radius:50% 50% 0 0 / 60% 60% 0 0;border:3px solid #94a3b8;overflow:hidden;background:rgba(219,234,254,0.2)">
|
||
<div id="nh3-gas" style="position:absolute;inset:0;background:rgba(219,234,254,0.4);display:flex;align-items:center;justify-content:center;font-size:11px;color:#1e40af;font-weight:700">NH₃</div>
|
||
</div>
|
||
<div style="position:absolute;top:97px;left:97px;width:6px;background:#94a3b8;height:60px;border-radius:3px"></div>
|
||
<div id="nh3-beaker" style="position:absolute;bottom:0;left:20px;width:160px;height:70px;border:3px solid #94a3b8;border-top:none;border-radius:0 0 12px 12px;overflow:hidden">
|
||
<div id="nh3-water" style="position:absolute;bottom:0;left:0;right:0;height:50px;background:rgba(219,234,254,0.5);transition:all .4s">
|
||
<div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#1e40af">H₂O (инд.)</div>
|
||
</div>
|
||
</div>
|
||
<div id="nh3-fountain" style="position:absolute;bottom:72px;left:97px;width:6px;background:rgba(147,197,253,0);border-radius:3px;height:0;transition:all .8s"></div>
|
||
</div>
|
||
<div style="margin-top:8px">
|
||
<button onclick="nh3Fountain()" style="padding:7px 20px;border-radius:8px;border:none;background:#3b82f6;color:#fff;font-weight:600;cursor:pointer">💦 Запустить фонтан</button>
|
||
<button onclick="nh3FountainReset()" style="padding:7px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:8px">↺</button>
|
||
</div>
|
||
<div id="nh3-fountain-eq" style="font-size:12px;margin-top:6px;font-family:monospace;min-height:18px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §28 — КРЕМНИЙ ══ -->
|
||
<div class="content" id="tab-ref28">
|
||
<div class="section-title"><i class="fas fa-vial"></i> §28. Соли аммония</div>
|
||
<div class="def-box"><strong>Соли аммония</strong> (NH₄⁺) — все растворимы в воде. Гидролиз по катиону → кислая среда (pH < 7).</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реакция</th><th>Уравнение</th><th>Применение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>+ щёлочь (нагрев)</td><td>NH₄Cl + NaOH → NaCl + NH₃↑ + H₂O</td><td>Качественная реакция на NH₄⁺</td></tr>
|
||
<tr><td>Разложение NH₄Cl</td><td>NH₄Cl → NH₃↑ + HCl↑ (возгонка)</td><td>Пары вновь соединяются</td></tr>
|
||
<tr><td>Разложение NH₄NO₃</td><td>NH₄NO₃ → N₂O↑ + 2H₂O (умеренн. нагрев)</td><td>«Веселящий газ»</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<table class="tbl" style="margin:10px 0;font-size:.82rem">
|
||
<thead><tr><th>Соль</th><th>Формула</th><th>Удобрение / применение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Нитрат аммония (аммиачная селитра)</td><td>NH₄NO₃</td><td>34% N, азотное удобрение</td></tr>
|
||
<tr><td>Сульфат аммония</td><td>(NH₄)₂SO₄</td><td>21% N, удобрение</td></tr>
|
||
<tr><td>Хлорид аммония (нашатырь)</td><td>NH₄Cl</td><td>Пайка, медицина</td></tr>
|
||
<tr><td>Карбонат аммония</td><td>(NH₄)₂CO₃</td><td>Разрыхлитель (выпечка)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Качественная реакция на NH₄⁺</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">1</span>Добавить NaOH и нагреть</div>
|
||
<div class="step-card" style="margin-bottom:8px"><span class="step-num">2</span>NH₄⁺ + OH⁻ → NH₃↑ + H₂O — выделяется аммиак</div>
|
||
<div class="step-card"><span class="step-num">3</span>Влажная лакмусовая бумажка синеет → NH₃ обнаружен!</div>
|
||
</div>
|
||
|
||
<!-- ══ §29 — СИЛИКАТНАЯ ПРОМЫШЛЕННОСТЬ ══ -->
|
||
<div class="content" id="tab-ref29">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §29. Азотная кислота HNO₃</div>
|
||
<div class="ch-stat">
|
||
<div class="ch-stat-card"><div class="big">+5</div><div class="lbl">СО азота в HNO₃</div></div>
|
||
<div class="ch-stat-card"><div class="big">NO₂</div><div class="lbl">продукт с конц. HNO₃</div></div>
|
||
<div class="ch-stat-card"><div class="big">NO</div><div class="lbl">продукт с разб. HNO₃</div></div>
|
||
</div>
|
||
<div class="def-box"><strong>Получение (3 стадии):</strong><br>
|
||
1) 4NH₃ + 5O₂ → 4NO + 6H₂O (Pt, 800°C)<br>
|
||
2) 2NO + O₂ → 2NO₂<br>
|
||
3) 3NO₂ + H₂O → 2HNO₃ + NO</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Реагент</th><th>Конц. HNO₃</th><th>Разб. HNO₃</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Cu, Ag (неакт. Ме)</td><td>Cu+4HNO₃→Cu(NO₃)₂+2NO₂+2H₂O</td><td>3Cu+8HNO₃→3Cu(NO₃)₂+2NO+4H₂O</td></tr>
|
||
<tr><td>Zn (акт. Ме)</td><td>Zn+4HNO₃→Zn(NO₃)₂+2NO₂+2H₂O</td><td>4Zn+10HNO₃→4Zn(NO₃)₂+NH₄NO₃+3H₂O</td></tr>
|
||
<tr><td>Fe, Al, Cr</td><td colspan="2">Пассивация (оксидная плёнка, реакции нет)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Конц. или разб.? — нажми</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Cu + конц. HNO₃</div><div class="bc-type">Продукт N?</div><div class="bc-ans">NO₂↑ (бурый газ)<br>N: +5 → +4</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Cu + разб. HNO₃</div><div class="bc-type">Продукт N?</div><div class="bc-ans">NO↑ (бесцветный, синеет на воздухе)<br>N: +5 → +2</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe + конц. HNO₃</div><div class="bc-type">Реакция?</div><div class="bc-ans">Пассивация! Реакции нет.<br>(Al, Cr — аналогично)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Zn + оч. разб. HNO₃</div><div class="bc-type">Продукт N?</div><div class="bc-ans">NH₄⁺ (N: +5 → −3)<br>4Zn+10HNO₃→4Zn(NO₃)₂+NH₄NO₃+3H₂O</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🧪 HNO₃ конц. vs разб. — реакция с Cu</div>
|
||
<div class="reveal-on-view">
|
||
<div style="display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin:12px 0">
|
||
<div style="text-align:center;width:140px">
|
||
<div style="font-size:12px;font-weight:700;color:#dc2626;margin-bottom:6px">Конц. HNO₃ (хол.)</div>
|
||
<div style="position:relative;height:120px;width:80px;margin:0 auto;border:2px solid #94a3b8;border-top:none;border-radius:0 0 10px 10px;overflow:hidden">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;height:80px;background:rgba(219,234,254,0.4)"></div>
|
||
<div id="p29-cu1" style="position:absolute;left:30px;bottom:20px;width:20px;height:60px;background:linear-gradient(180deg,#f97316,#c2410c);border-radius:3px;transition:all .8s"></div>
|
||
<div id="p29-gas1" style="position:absolute;top:0;left:0;right:0;height:0;background:rgba(146,91,14,0.5);transition:height 1s;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:#475569;margin-top:4px">Cu не реагирует<br>(пассивация!)</div>
|
||
</div>
|
||
<div style="text-align:center;width:140px">
|
||
<div style="font-size:12px;font-weight:700;color:#dc2626;margin-bottom:6px">Конц. HNO₃ (гор.)</div>
|
||
<div style="position:relative;height:120px;width:80px;margin:0 auto;border:2px solid #94a3b8;border-top:none;border-radius:0 0 10px 10px;overflow:hidden">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;height:80px;background:rgba(219,234,254,0.4)"></div>
|
||
<div id="p29-cu2" style="position:absolute;left:30px;bottom:20px;width:20px;height:60px;background:linear-gradient(180deg,#f97316,#c2410c);border-radius:3px;transition:all 1.2s"></div>
|
||
<div id="p29-gas2" style="position:absolute;top:0;left:0;right:0;height:0;background:rgba(146,91,14,0.7);transition:height 1.2s;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:#475569;margin-top:4px">NO₂ бурый газ<br>Cu(NO₃)₂ р-р синий</div>
|
||
</div>
|
||
<div style="text-align:center;width:140px">
|
||
<div style="font-size:12px;font-weight:700;color:#1e40af;margin-bottom:6px">Разб. HNO₃</div>
|
||
<div style="position:relative;height:120px;width:80px;margin:0 auto;border:2px solid #94a3b8;border-top:none;border-radius:0 0 10px 10px;overflow:hidden">
|
||
<div style="position:absolute;bottom:0;left:0;right:0;height:80px;background:rgba(219,234,254,0.4)"></div>
|
||
<div id="p29-cu3" style="position:absolute;left:30px;bottom:20px;width:20px;height:60px;background:linear-gradient(180deg,#f97316,#c2410c);border-radius:3px;transition:all 1.5s"></div>
|
||
<div id="p29-bub3" style="position:absolute;bottom:0;left:0;right:0;height:0;overflow:hidden"></div>
|
||
</div>
|
||
<div style="font-size:10px;color:#475569;margin-top:4px">NO (бесцветн.) газ<br>Cu(NO₃)₂ синий р-р</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center">
|
||
<button onclick="p29Play()" style="padding:7px 18px;border-radius:8px;border:none;background:#dc2626;color:#fff;font-weight:700;cursor:pointer">▶ Запустить реакции</button>
|
||
<button onclick="p29Reset()" style="padding:7px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:8px">↺</button>
|
||
</div>
|
||
<div id="p29-eqs" style="margin-top:10px;font-size:11px;font-family:monospace;text-align:center;min-height:40px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §30 — ОБОБЩЕНИЕ C и Si ══ -->
|
||
<div class="content" id="tab-ref30">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §30. Нитраты</div>
|
||
<div class="def-box"><strong>Все нитраты растворимы</strong> в воде. При нагреве разлагаются — продукты зависят от положения металла в ряду активности.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Группа металлов</th><th>Продукты разложения</th><th>Пример</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Активные (Li, Na, K, Ca)</td><td>Нитрит + O₂</td><td>2KNO₃ → 2KNO₂ + O₂↑</td></tr>
|
||
<tr><td>Средней активности (Mg…Cu)</td><td>Оксид металла + NO₂ + O₂</td><td>2Cu(NO₃)₂ → 2CuO + 4NO₂↑ + O₂↑</td></tr>
|
||
<tr><td>Малоактивные (Ag, Hg, Au)</td><td>Металл + NO₂ + O₂</td><td>2AgNO₃ → 2Ag + 2NO₂↑ + O₂↑</td></tr>
|
||
<tr><td>NH₄NO₃</td><td>N₂O + H₂O</td><td>NH₄NO₃ → N₂O↑ + 2H₂O</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="def-box"><b>Применение нитратов:</b> азотные удобрения (NH₄NO₃ — аммиачная селитра, NaNO₃ — натриевая, KNO₃ — калийная), пищевые добавки E249–252, порох (KNO₃+C+S).</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Продукты разложения — нажми</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">NaNO₃ (t)</div><div class="bc-type">Продукты?</div><div class="bc-ans">2NaNO₃ → 2NaNO₂ + O₂↑<br>(Na — активный металл)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">Fe(NO₃)₃ (t)</div><div class="bc-type">Продукты?</div><div class="bc-ans">4Fe(NO₃)₃ → 2Fe₂O₃ + 12NO₂↑ + 3O₂↑<br>(Fe — средней акт.)</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">AgNO₃ (t)</div><div class="bc-type">Продукты?</div><div class="bc-ans">2AgNO₃ → 2Ag + 2NO₂↑ + O₂↑<br>(Ag — малоактивный)</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ §21 — ОБОБЩЕНИЕ ОВР ══ -->
|
||
<div class="content" id="tab-ref21">
|
||
<div class="section-title"><i class="fas fa-flask"></i> §21. Типичные окислители и восстановители</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.81rem">
|
||
<thead><tr><th>Окислитель</th><th>Продукт восстановления</th><th>Зависит от среды</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>KMnO₄ (Mn⁺⁷)</td><td>Mn²⁺ (кисл.) / MnO₂ (нейтр.) / MnO₄²⁻ (щелочн.)</td><td>Да (сильно)</td></tr>
|
||
<tr><td>K₂Cr₂O₇ (Cr⁺⁶)</td><td>Cr³⁺</td><td>Обычно кислая среда</td></tr>
|
||
<tr><td>HNO₃ конц.</td><td>NO₂</td><td>Нет</td></tr>
|
||
<tr><td>HNO₃ разб.</td><td>NO (активн. Me: N₂O, N₂, NH₄⁺)</td><td>Зависит от Me</td></tr>
|
||
<tr><td>H₂SO₄ конц.</td><td>SO₂</td><td>Нет</td></tr>
|
||
<tr><td>Cl₂, Br₂</td><td>Cl⁻, Br⁻</td><td>Нет</td></tr>
|
||
<tr><td>O₂</td><td>O²⁻</td><td>Нет</td></tr>
|
||
<tr><td>H₂O₂</td><td>H₂O или O₂ (двойная роль)</td><td>—</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<table class="tbl" style="margin:12px 0;font-size:.81rem">
|
||
<thead><tr><th>Восстановитель</th><th>Продукт окисления</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Металлы (Zn, Fe, Na…)</td><td>Катионы Zn²⁺, Fe²⁺/³⁺, Na⁺</td></tr>
|
||
<tr><td>H₂</td><td>H⁺ (H₂O)</td></tr>
|
||
<tr><td>C, CO</td><td>CO₂</td></tr>
|
||
<tr><td>H₂S (S²⁻)</td><td>S⁰ или SO₂ (S⁴⁺)</td></tr>
|
||
<tr><td>HI, HBr</td><td>I₂, Br₂</td></tr>
|
||
<tr><td>SO₂ (S⁴⁺)</td><td>SO₃ или SO₄²⁻ (S⁶⁺)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> KMnO₄ в разных средах — нажми</div>
|
||
<div class="bond-grid">
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">KMnO₄ + H₂SO₄</div><div class="bc-type">Кислая среда</div><div class="bc-ans">MnO₄⁻ + 8H⁺ + 5e⁻ → Mn²⁺ + 4H₂O<br>Раствор обесцвечивается</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">KMnO₄ (нейтр.)</div><div class="bc-type">Нейтральная среда</div><div class="bc-ans">MnO₄⁻ + 2H₂O + 3e⁻ → MnO₂↓ + 4OH⁻<br>Бурый осадок MnO₂</div></div>
|
||
<div class="bond-card" onclick="this.classList.toggle('revealed')"><div class="bc-formula">KMnO₄ + KOH</div><div class="bc-type">Щелочная среда</div><div class="bc-ans">MnO₄⁻ + e⁻ → MnO₄²⁻<br>Зелёный манганат</div></div>
|
||
</div>
|
||
|
||
<div class="section-title" style="margin-top:24px">🟣 KMnO₄ в разных средах</div>
|
||
<div class="reveal-on-view">
|
||
<div class="kmno4-scene" id="kmno4-21-scene">
|
||
<div class="kmno4-beaker">
|
||
<div class="kmno4-body"><div class="kmno4-liquid" id="km-acid" style="background:#7c3aed"></div></div>
|
||
<div class="kmno4-label">Кислая среда (H⁺)</div>
|
||
<div class="kmno4-product" id="km-acid-p">→ Mn²⁺ (бесцветный)</div>
|
||
</div>
|
||
<div class="kmno4-beaker">
|
||
<div class="kmno4-body"><div class="kmno4-liquid" id="km-neut" style="background:#7c3aed"></div></div>
|
||
<div class="kmno4-label">Нейтральная</div>
|
||
<div class="kmno4-product" id="km-neut-p">→ MnO₂ (бурый)</div>
|
||
</div>
|
||
<div class="kmno4-beaker">
|
||
<div class="kmno4-body"><div class="kmno4-liquid" id="km-base" style="background:#7c3aed"></div></div>
|
||
<div class="kmno4-label">Щелочная (OH⁻)</div>
|
||
<div class="kmno4-product" id="km-base-p">→ MnO₄²⁻ (зелёный)</div>
|
||
</div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:8px">
|
||
<button onclick="kmno4Animate()" style="padding:6px 18px;border-radius:8px;border:none;background:#7c3aed;color:#fff;font-weight:600;cursor:pointer">▶ Добавить восстановитель</button>
|
||
<button onclick="kmno4Reset()" style="padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;margin-left:6px">↺</button>
|
||
</div>
|
||
<div id="kmno4-eqs" style="margin-top:10px;font-size:11px;font-family:monospace;text-align:center;min-height:36px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ══ §13 — ИТОГОВЫЙ ТЕСТ ТЭД ══ -->
|
||
<div class="content" id="tab-ref13">
|
||
<div class="section-title"><i class="fas fa-vial"></i> §13. Гидролиз солей</div>
|
||
<div class="def-box"><strong>Гидролиз</strong> — реакция ионов соли с водой, приводящая к изменению pH раствора. Происходит, если кислота или основание, образующие соль, — слабые.</div>
|
||
<table class="tbl" style="margin:12px 0;font-size:.82rem">
|
||
<thead><tr><th>Состав соли</th><th>Гидролиз</th><th>Среда</th><th>Пример</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Сл. кислота + Сил. основание</td><td>По аниону</td><td>Щелочная (pH > 7)</td><td>Na₂CO₃, CH₃COONa, Na₂S</td></tr>
|
||
<tr><td>Сил. кислота + Сл. основание</td><td>По катиону</td><td>Кислая (pH < 7)</td><td>NH₄Cl, AlCl₃, FeCl₃, ZnSO₄</td></tr>
|
||
<tr><td>Оба сильные</td><td>Не гидролизуется</td><td>Нейтральная (pH = 7)</td><td>NaCl, KNO₃, Na₂SO₄</td></tr>
|
||
<tr><td>Оба слабые</td><td>Полный гидролиз</td><td>≈ нейтральная</td><td>Al₂S₃ + H₂O → Al(OH)₃ + H₂S</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="formula-grid" style="margin:12px 0">
|
||
<div class="fcard highlighted">CH₃COO⁻ + H₂O ⇌ CH₃COOH + OH⁻ → <b>щелочная среда</b></div>
|
||
<div class="fcard highlighted">NH₄⁺ + H₂O ⇌ NH₃·H₂O + H⁺ → <b>кислая среда</b></div>
|
||
<div class="fcard highlighted">Al³⁺ + H₂O ⇌ AlOH²⁺ + H⁺ → <b>кислая среда</b></div>
|
||
</div>
|
||
<div class="section-title" style="font-size:.9rem"><i class="fas fa-hand-pointer"></i> Определи среду раствора соли</div>
|
||
<div class="quiz-wrap" id="hyd13-quiz"></div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
§40 — ОБЩАЯ ХАРАКТЕРИСТИКА ЭЛЕМЕНТОВ
|
||
══════════════════════════════════════════ -->
|
||
<div class="content active" id="tab-ref40">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#7c2d12,#b45309);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:2rem;font-weight:900;line-height:1">95</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">из 118 элементов</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">— металлы</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#92400e,#d97706);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:2rem;font-weight:900;line-height:1">~25%</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">массы земной коры</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">— металлы</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#b45309,#f59e0b);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:1.3rem;font-weight:900;line-height:1.2">Al</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">алюминий</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">самый распространённый</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-table-cells"></i> Положение металлов в периодической системе</div>
|
||
|
||
<div class="formula-grid" style="margin-bottom:14px">
|
||
<div class="fcard highlight" style="position:relative;overflow:hidden">
|
||
<div style="position:absolute;top:0;right:0;background:#fbbf24;color:#78350f;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:0 10px 0 8px">I А / II А</div>
|
||
<h3 style="margin-right:54px">А-группы</h3>
|
||
<div class="main-f">27 металлов</div>
|
||
<p style="margin:6px 0 4px;font-size:.78rem">Группы <strong>IA</strong> (кроме H), <strong>IIA</strong> + элементы IIIA–VIA <em>левее ступенчатой линии</em></p>
|
||
<div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Na</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">K</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Ca</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Mg</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Al</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Pb</span>
|
||
</div>
|
||
<p style="font-size:.72rem;color:var(--muted);margin-top:6px">Конфигурация: <strong>ns¹⁻²</strong>, <strong>ns²np¹</strong></p>
|
||
</div>
|
||
<div class="fcard highlight" style="position:relative;overflow:hidden">
|
||
<div style="position:absolute;top:0;right:0;background:#f59e0b;color:#78350f;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:0 10px 0 8px">I–VIII Б</div>
|
||
<h3 style="margin-right:62px">Б-группы (переходные)</h3>
|
||
<div class="main-f">68 металлов</div>
|
||
<p style="margin:6px 0 4px;font-size:.78rem">Все элементы групп <strong>IB–VIIIB</strong>. Все металлы, начиная с <em>4-го периода</em></p>
|
||
<div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:6px">
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Fe</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Cu</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Zn</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Au</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Ag</span>
|
||
<span style="background:#fde68a;color:#78350f;border-radius:4px;padding:2px 6px;font-size:.72rem;font-weight:700">Cr</span>
|
||
</div>
|
||
<p style="font-size:.72rem;color:var(--muted);margin-top:6px">d-блок: конфигурация <strong>(n−1)d¹⁻¹⁰ns⁰⁻²</strong></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Схема ПС -->
|
||
<div class="fcard" style="margin-bottom:20px;padding:14px 12px">
|
||
<h3>Схема периодической системы: металлы и неметаллы</h3>
|
||
<svg viewBox="0 0 440 172" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:440px;display:block;margin:8px auto;font-family:Inter,system-ui,sans-serif">
|
||
<rect width="440" height="172" fill="#f8fafc" rx="4"/>
|
||
<!-- s-block metals: groups 1–2, periods 2–7 -->
|
||
<rect x="14" y="34" width="22" height="119" fill="#fde68a"/>
|
||
<rect x="37" y="34" width="22" height="119" fill="#fde68a"/>
|
||
<!-- d-block metals: groups 3–12, periods 4–7 -->
|
||
<rect x="60" y="74" width="229" height="79" fill="#fde68a"/>
|
||
<!-- p-block background (groups 13–18) = nonmetals by default -->
|
||
<rect x="290" y="14" width="137" height="139" fill="#dbeafe"/>
|
||
<!-- p-block metal overrides (amber) -->
|
||
<rect x="290" y="54" width="22" height="99" fill="#fde68a"/><!-- Al,Ga,In,Tl,Nh -->
|
||
<rect x="313" y="94" width="22" height="59" fill="#fde68a"/><!-- Sn,Pb,Fl -->
|
||
<rect x="336" y="114" width="22" height="39" fill="#fde68a"/><!-- Bi,Mc -->
|
||
<rect x="359" y="114" width="22" height="39" fill="#fde68a"/><!-- Po,Lv -->
|
||
<!-- Metalloids (yellow) -->
|
||
<rect x="290" y="34" width="22" height="19" fill="#fef08a"/><!-- B -->
|
||
<rect x="313" y="54" width="22" height="19" fill="#fef08a"/><!-- Si -->
|
||
<rect x="313" y="74" width="22" height="19" fill="#fef08a"/><!-- Ge -->
|
||
<rect x="336" y="74" width="22" height="19" fill="#fef08a"/><!-- As -->
|
||
<rect x="336" y="94" width="22" height="19" fill="#fef08a"/><!-- Sb -->
|
||
<rect x="359" y="94" width="22" height="19" fill="#fef08a"/><!-- Te -->
|
||
<rect x="382" y="114" width="22" height="19" fill="#fef08a"/><!-- At -->
|
||
<!-- H special -->
|
||
<rect x="14" y="14" width="22" height="19" fill="#e2e8f0"/>
|
||
<!-- Stepped boundary line B→Og -->
|
||
<polyline points="312,14 312,53 335,53 335,93 358,93 358,113 381,113 404,113 404,133 427,133 427,153"
|
||
fill="none" stroke="#1d4ed8" stroke-width="2.5" stroke-linecap="square" stroke-linejoin="miter"/>
|
||
<!-- Period labels -->
|
||
<text x="7" y="26" text-anchor="middle" font-size="6" fill="#94a3b8">1</text>
|
||
<text x="7" y="46" text-anchor="middle" font-size="6" fill="#94a3b8">2</text>
|
||
<text x="7" y="66" text-anchor="middle" font-size="6" fill="#94a3b8">3</text>
|
||
<text x="7" y="86" text-anchor="middle" font-size="6" fill="#94a3b8">4</text>
|
||
<text x="7" y="106" text-anchor="middle" font-size="6" fill="#94a3b8">5</text>
|
||
<text x="7" y="126" text-anchor="middle" font-size="6" fill="#94a3b8">6</text>
|
||
<text x="7" y="146" text-anchor="middle" font-size="6" fill="#94a3b8">7</text>
|
||
<!-- Group labels -->
|
||
<text x="25" y="10" text-anchor="middle" font-size="6" fill="#64748b" font-weight="600">IA</text>
|
||
<text x="48" y="10" text-anchor="middle" font-size="6" fill="#64748b" font-weight="600">IIA</text>
|
||
<text x="174" y="10" text-anchor="middle" font-size="6" fill="#64748b" font-weight="600">I–VIII Б</text>
|
||
<text x="301" y="10" text-anchor="middle" font-size="6" fill="#64748b" font-weight="600">IIIA…</text>
|
||
<!-- Element symbols -->
|
||
<text x="25" y="26" text-anchor="middle" font-size="7.5" font-weight="700" fill="#475569">H</text>
|
||
<text x="25" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Li</text>
|
||
<text x="48" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Be</text>
|
||
<text x="301" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">B</text>
|
||
<text x="324" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#1e3a8a">C</text>
|
||
<text x="347" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#1e3a8a">N</text>
|
||
<text x="370" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#1e3a8a">O</text>
|
||
<text x="393" y="46" text-anchor="middle" font-size="7.5" font-weight="700" fill="#1e3a8a">F</text>
|
||
<text x="25" y="66" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Na</text>
|
||
<text x="48" y="66" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Mg</text>
|
||
<text x="301" y="66" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Al</text>
|
||
<text x="324" y="66" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Si</text>
|
||
<text x="25" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">K</text>
|
||
<text x="48" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Ca</text>
|
||
<text x="186" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Fe</text>
|
||
<text x="255" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Cu</text>
|
||
<text x="278" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Zn</text>
|
||
<text x="301" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Ga</text>
|
||
<text x="324" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Ge</text>
|
||
<text x="347" y="86" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">As</text>
|
||
<text x="255" y="106" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Ag</text>
|
||
<text x="324" y="106" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Sn</text>
|
||
<text x="347" y="106" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Sb</text>
|
||
<text x="370" y="106" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Te</text>
|
||
<text x="255" y="126" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Au</text>
|
||
<text x="324" y="126" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Pb</text>
|
||
<text x="347" y="126" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">Bi</text>
|
||
<text x="393" y="126" text-anchor="middle" font-size="7.5" font-weight="700" fill="#78350f">At</text>
|
||
<!-- МЕТАЛЛЫ label in d-block area -->
|
||
<text x="150" y="116" text-anchor="middle" font-size="9" font-weight="700" fill="#92400e" opacity=".7">МЕТАЛЛЫ</text>
|
||
<text x="150" y="128" text-anchor="middle" font-size="7" fill="#92400e" opacity=".55">95 элементов</text>
|
||
<!-- НЕМЕТАЛЛЫ label in upper p-block area -->
|
||
<text x="375" y="66" text-anchor="middle" font-size="7.5" font-weight="700" fill="#1e40af" opacity=".75">НЕ-</text>
|
||
<text x="375" y="76" text-anchor="middle" font-size="7.5" font-weight="700" fill="#1e40af" opacity=".75">МЕТАЛЛЫ</text>
|
||
<!-- f-block strip -->
|
||
<rect x="60" y="158" width="229" height="7" rx="2" fill="#fde68a" opacity=".65"/>
|
||
<text x="174" y="169" text-anchor="middle" font-size="6.5" fill="#92400e">f-элементы (лантаниды, актиниды)</text>
|
||
</svg>
|
||
<div style="display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;font-size:.72rem;color:var(--text)">
|
||
<span style="display:flex;align-items:center;gap:4px"><span style="width:11px;height:11px;background:#fde68a;border-radius:2px;display:inline-block"></span>Металлы (95)</span>
|
||
<span style="display:flex;align-items:center;gap:4px"><span style="width:11px;height:11px;background:#fef08a;border:1px solid #ca8a04;border-radius:2px;display:inline-block"></span>Полуметаллы (7)</span>
|
||
<span style="display:flex;align-items:center;gap:4px"><span style="width:11px;height:11px;background:#dbeafe;border-radius:2px;display:inline-block"></span>Неметаллы (16)</span>
|
||
<span style="display:flex;align-items:center;gap:4px"><span style="width:11px;height:11px;background:#e2e8f0;border-radius:2px;display:inline-block"></span>Водород H</span>
|
||
</div>
|
||
<p style="font-size:.78rem;color:var(--muted);text-align:center;margin-top:8px">Синяя линия — ступенчатая граница <strong>B→Og</strong>; металлы расположены левее и ниже</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-atom"></i> Строение атомов металлов</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard">
|
||
<h3>Валентные электроны</h3>
|
||
<div class="main-f">1, 2 или 3 e⁻</div>
|
||
<p>На внешнем уровне у большинства металлов 1–3 электрона. Их связь с ядром <strong>ослаблена</strong> из-за большого радиуса атома.</p>
|
||
</div>
|
||
<div class="fcard highlight">
|
||
<h3>Главное свойство</h3>
|
||
<div class="main-f">Me⁰ − ne⁻ = Meⁿ⁺</div>
|
||
<p>Атомы металлов <strong>отдают</strong> валентные электроны → образуют положительно заряженные ионы (катионы).</p>
|
||
<p>Примеры: K⁰ − 1e⁻ → K⁺; Mg⁰ − 2e⁻ → Mg²⁺; Fe⁰ − 3e⁻ → Fe³⁺</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin:14px 0 4px;font-size:.79rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap">
|
||
<span><svg width="11" height="11" style="vertical-align:middle;margin-right:3px"><circle cx="5.5" cy="5.5" r="5" fill="#92400e"/></svg>электрон</span>
|
||
<span><svg width="13" height="13" style="vertical-align:middle;margin-right:3px"><circle cx="6.5" cy="6.5" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/></svg>валентный электрон</span>
|
||
<span style="opacity:.65">— — — орбита (энергетический уровень)</span>
|
||
</div>
|
||
<div class="formula-grid" style="margin-bottom:4px">
|
||
<div class="fcard" style="padding:13px 10px;text-align:center">
|
||
<h3>Натрий Na <span style="font-weight:400;text-transform:none;color:var(--muted)">(Z=11)</span></h3>
|
||
<svg viewBox="0 0 160 160" style="width:100%;max-width:148px;display:block;margin:6px auto">
|
||
<circle cx="80" cy="80" r="22" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="42" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="60" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="13" fill="#b45309"/>
|
||
<text x="80" y="78" text-anchor="middle" font-size="9" font-weight="700" fill="#fff" font-family="Inter">Na</text>
|
||
<text x="80" y="88" text-anchor="middle" font-size="7.5" fill="#fde68a" font-family="Inter">11⁺</text>
|
||
<circle cx="80" cy="58" r="4" fill="#92400e"/><circle cx="80" cy="102" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="38" r="4" fill="#92400e"/><circle cx="110" cy="50" r="4" fill="#92400e"/>
|
||
<circle cx="122" cy="80" r="4" fill="#92400e"/><circle cx="110" cy="110" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="122" r="4" fill="#92400e"/><circle cx="50" cy="110" r="4" fill="#92400e"/>
|
||
<circle cx="38" cy="80" r="4" fill="#92400e"/><circle cx="50" cy="50" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="20" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
</svg>
|
||
<div style="font-size:.73rem;color:var(--muted)">K₁=2   K₂=8   <span style="color:#ef4444;font-weight:700">K₃=1</span></div>
|
||
<div style="font-size:.76rem;margin-top:5px;font-family:'JetBrains Mono',monospace;background:rgba(180,83,9,.07);border-radius:6px;padding:4px 8px">Na⁰ − 1e⁻ → Na⁺</div>
|
||
</div>
|
||
<div class="fcard" style="padding:13px 10px;text-align:center">
|
||
<h3>Магний Mg <span style="font-weight:400;text-transform:none;color:var(--muted)">(Z=12)</span></h3>
|
||
<svg viewBox="0 0 160 160" style="width:100%;max-width:148px;display:block;margin:6px auto">
|
||
<circle cx="80" cy="80" r="22" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="42" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="60" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="13" fill="#b45309"/>
|
||
<text x="80" y="78" text-anchor="middle" font-size="9" font-weight="700" fill="#fff" font-family="Inter">Mg</text>
|
||
<text x="80" y="88" text-anchor="middle" font-size="7.5" fill="#fde68a" font-family="Inter">12⁺</text>
|
||
<circle cx="80" cy="58" r="4" fill="#92400e"/><circle cx="80" cy="102" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="38" r="4" fill="#92400e"/><circle cx="110" cy="50" r="4" fill="#92400e"/>
|
||
<circle cx="122" cy="80" r="4" fill="#92400e"/><circle cx="110" cy="110" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="122" r="4" fill="#92400e"/><circle cx="50" cy="110" r="4" fill="#92400e"/>
|
||
<circle cx="38" cy="80" r="4" fill="#92400e"/><circle cx="50" cy="50" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="20" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
<circle cx="80" cy="140" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
</svg>
|
||
<div style="font-size:.73rem;color:var(--muted)">K₁=2   K₂=8   <span style="color:#ef4444;font-weight:700">K₃=2</span></div>
|
||
<div style="font-size:.76rem;margin-top:5px;font-family:'JetBrains Mono',monospace;background:rgba(180,83,9,.07);border-radius:6px;padding:4px 8px">Mg⁰ − 2e⁻ → Mg²⁺</div>
|
||
</div>
|
||
<div class="fcard" style="padding:13px 10px;text-align:center">
|
||
<h3>Алюминий Al <span style="font-weight:400;text-transform:none;color:var(--muted)">(Z=13)</span></h3>
|
||
<svg viewBox="0 0 160 160" style="width:100%;max-width:148px;display:block;margin:6px auto">
|
||
<circle cx="80" cy="80" r="22" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="42" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="60" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="80" cy="80" r="13" fill="#b45309"/>
|
||
<text x="80" y="78" text-anchor="middle" font-size="9" font-weight="700" fill="#fff" font-family="Inter">Al</text>
|
||
<text x="80" y="88" text-anchor="middle" font-size="7.5" fill="#fde68a" font-family="Inter">13⁺</text>
|
||
<circle cx="80" cy="58" r="4" fill="#92400e"/><circle cx="80" cy="102" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="38" r="4" fill="#92400e"/><circle cx="110" cy="50" r="4" fill="#92400e"/>
|
||
<circle cx="122" cy="80" r="4" fill="#92400e"/><circle cx="110" cy="110" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="122" r="4" fill="#92400e"/><circle cx="50" cy="110" r="4" fill="#92400e"/>
|
||
<circle cx="38" cy="80" r="4" fill="#92400e"/><circle cx="50" cy="50" r="4" fill="#92400e"/>
|
||
<circle cx="80" cy="20" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
<circle cx="132" cy="110" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
<circle cx="28" cy="110" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
</svg>
|
||
<div style="font-size:.73rem;color:var(--muted)">K₁=2   K₂=8   <span style="color:#ef4444;font-weight:700">K₃=3</span></div>
|
||
<div style="font-size:.76rem;margin-top:5px;font-family:'JetBrains Mono',monospace;background:rgba(180,83,9,.07);border-radius:6px;padding:4px 8px">Al⁰ − 3e⁻ → Al³⁺</div>
|
||
</div>
|
||
<div class="fcard" style="padding:13px 10px;text-align:center">
|
||
<h3>Кальций Ca <span style="font-weight:400;text-transform:none;color:var(--muted)">(Z=20)</span></h3>
|
||
<svg viewBox="0 0 180 180" style="width:100%;max-width:165px;display:block;margin:6px auto">
|
||
<circle cx="90" cy="90" r="20" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="38" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="58" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="76" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="13" fill="#b45309"/>
|
||
<text x="90" y="88" text-anchor="middle" font-size="9" font-weight="700" fill="#fff" font-family="Inter">Ca</text>
|
||
<text x="90" y="98" text-anchor="middle" font-size="7.5" fill="#fde68a" font-family="Inter">20⁺</text>
|
||
<circle cx="90" cy="70" r="3.5" fill="#92400e"/><circle cx="90" cy="110" r="3.5" fill="#92400e"/>
|
||
<circle cx="90" cy="52" r="3.5" fill="#92400e"/><circle cx="117" cy="63" r="3.5" fill="#92400e"/>
|
||
<circle cx="128" cy="90" r="3.5" fill="#92400e"/><circle cx="117" cy="117" r="3.5" fill="#92400e"/>
|
||
<circle cx="90" cy="128" r="3.5" fill="#92400e"/><circle cx="63" cy="117" r="3.5" fill="#92400e"/>
|
||
<circle cx="52" cy="90" r="3.5" fill="#92400e"/><circle cx="63" cy="63" r="3.5" fill="#92400e"/>
|
||
<circle cx="90" cy="32" r="3.5" fill="#92400e"/><circle cx="131" cy="49" r="3.5" fill="#92400e"/>
|
||
<circle cx="148" cy="90" r="3.5" fill="#92400e"/><circle cx="131" cy="131" r="3.5" fill="#92400e"/>
|
||
<circle cx="90" cy="148" r="3.5" fill="#92400e"/><circle cx="49" cy="131" r="3.5" fill="#92400e"/>
|
||
<circle cx="32" cy="90" r="3.5" fill="#92400e"/><circle cx="49" cy="49" r="3.5" fill="#92400e"/>
|
||
<circle cx="90" cy="14" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
<circle cx="90" cy="166" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
</svg>
|
||
<div style="font-size:.73rem;color:var(--muted)">K₁=2   K₂=8   K₃=8   <span style="color:#ef4444;font-weight:700">K₄=2</span></div>
|
||
<div style="font-size:.76rem;margin-top:5px;font-family:'JetBrains Mono',monospace;background:rgba(180,83,9,.07);border-radius:6px;padding:4px 8px">Ca⁰ − 2e⁻ → Ca²⁺</div>
|
||
</div>
|
||
<!-- Fe — переходный металл, 2 формы ионов -->
|
||
<div class="fcard" style="padding:13px 16px;grid-column:1/-1">
|
||
<h3>Железо Fe <span style="font-weight:400;text-transform:none;color:var(--muted)">(Z=26) · переходный металл</span></h3>
|
||
<div style="display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap">
|
||
<div style="text-align:center;flex-shrink:0">
|
||
<svg viewBox="0 0 180 180" style="width:160px;display:block;margin:4px auto">
|
||
<circle cx="90" cy="90" r="20" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="38" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="58" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="76" fill="none" stroke="#b45309" stroke-width="1" stroke-dasharray="3,3" opacity=".35"/>
|
||
<circle cx="90" cy="90" r="13" fill="#b45309"/>
|
||
<text x="90" y="88" text-anchor="middle" font-size="9" font-weight="700" fill="#fff" font-family="Inter">Fe</text>
|
||
<text x="90" y="98" text-anchor="middle" font-size="7.5" fill="#fde68a" font-family="Inter">26⁺</text>
|
||
<!-- K: 2e -->
|
||
<circle cx="90" cy="70" r="4" fill="#92400e"/><circle cx="90" cy="110" r="4" fill="#92400e"/>
|
||
<!-- L: 8e -->
|
||
<circle cx="90" cy="52" r="3.5" fill="#92400e"/><circle cx="117" cy="63" r="3.5" fill="#92400e"/>
|
||
<circle cx="128" cy="90" r="3.5" fill="#92400e"/><circle cx="117" cy="117" r="3.5" fill="#92400e"/>
|
||
<circle cx="90" cy="128" r="3.5" fill="#92400e"/><circle cx="63" cy="117" r="3.5" fill="#92400e"/>
|
||
<circle cx="52" cy="90" r="3.5" fill="#92400e"/><circle cx="63" cy="63" r="3.5" fill="#92400e"/>
|
||
<!-- M: 14e -->
|
||
<circle cx="90" cy="32" r="3" fill="#92400e"/><circle cx="115" cy="38" r="3" fill="#92400e"/>
|
||
<circle cx="135" cy="54" r="3" fill="#92400e"/><circle cx="147" cy="77" r="3" fill="#92400e"/>
|
||
<circle cx="147" cy="103" r="3" fill="#92400e"/><circle cx="135" cy="126" r="3" fill="#92400e"/>
|
||
<circle cx="115" cy="142" r="3" fill="#92400e"/><circle cx="90" cy="148" r="3" fill="#92400e"/>
|
||
<circle cx="65" cy="142" r="3" fill="#92400e"/><circle cx="45" cy="126" r="3" fill="#92400e"/>
|
||
<circle cx="34" cy="103" r="3" fill="#92400e"/><circle cx="34" cy="77" r="3" fill="#92400e"/>
|
||
<circle cx="45" cy="54" r="3" fill="#92400e"/><circle cx="65" cy="38" r="3" fill="#92400e"/>
|
||
<!-- N: 2e валентных (красные) -->
|
||
<circle cx="90" cy="14" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
<circle cx="90" cy="166" r="5.5" fill="#ef4444" stroke="#fff" stroke-width="1.5"/>
|
||
</svg>
|
||
<div style="font-size:.73rem;color:var(--muted)">K₁=2   K₂=8   K₃=14   <span style="color:#ef4444;font-weight:700">K₄=2</span></div>
|
||
</div>
|
||
<div style="flex:1;min-width:160px">
|
||
<div style="font-family:'JetBrains Mono',monospace;background:rgba(180,83,9,.07);border-radius:7px;padding:8px 12px;font-size:.8rem;margin-bottom:8px;line-height:1.9">
|
||
Fe⁰ − 2e⁻ → Fe²⁺ (HCl, H₂SO₄ разб.)<br>
|
||
Fe⁰ − 3e⁻ → Fe³⁺ (Cl₂, конц. HNO₃)
|
||
</div>
|
||
<div style="font-size:.79rem;color:var(--muted);line-height:1.85">
|
||
📌 <strong>Переходный металл</strong> — частично заполненная 3d-орбиталь (3d⁶4s²).<br>
|
||
📌 Образует <strong>два</strong> типа катионов: <strong style="color:#b45309">Fe²⁺</strong> и <strong style="color:#991b1b">Fe³⁺</strong>.<br>
|
||
📌 Fe²⁺ + NaOH → белый осадок Fe(OH)₂ <em>(буреет на воздухе)</em><br>
|
||
📌 Fe³⁺ + NaOH → бурый осадок Fe(OH)₃
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-magnet"></i> Металлическая связь</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Металлическая связь</strong> — это связь между положительно заряженными ионами металлов посредством <strong>обобществлённых («свободных») электронов</strong>, образующих «электронный газ».
|
||
</div>
|
||
|
||
<!-- SVG: металлическая связь -->
|
||
<div class="fcard" style="margin-bottom:20px">
|
||
<h3>Схема металлической кристаллической решётки</h3>
|
||
<svg viewBox="0 0 480 300" style="width:100%;max-width:520px;display:block;margin:8px auto">
|
||
<defs>
|
||
<radialGradient id="cg" cx="38%" cy="32%">
|
||
<stop offset="0%" stop-color="#fde68a"/>
|
||
<stop offset="60%" stop-color="#f59e0b"/>
|
||
<stop offset="100%" stop-color="#d97706"/>
|
||
</radialGradient>
|
||
<radialGradient id="eg" cx="40%" cy="35%">
|
||
<stop offset="0%" stop-color="#c2410c"/>
|
||
<stop offset="100%" stop-color="#7c2d12"/>
|
||
</radialGradient>
|
||
<filter id="eglow" x="-100%" y="-100%" width="300%" height="300%">
|
||
<feGaussianBlur stdDeviation="2.5" result="b"/>
|
||
<feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
|
||
</filter>
|
||
<marker id="emarr" markerWidth="7" markerHeight="7" refX="5.5" refY="3.5" orient="auto">
|
||
<path d="M0,1 L6,3.5 L0,6 Z" fill="#b45309"/>
|
||
</marker>
|
||
</defs>
|
||
|
||
<!-- Фон -->
|
||
<rect x="1" y="1" width="478" height="298" rx="10" fill="rgba(251,191,36,0.04)" stroke="var(--border)" stroke-width="1"/>
|
||
<!-- Ореол «электронного газа» -->
|
||
<ellipse cx="235" cy="155" rx="198" ry="108" fill="rgba(180,83,9,0.05)"/>
|
||
|
||
<!-- Линии кристаллической решётки (горизонтальные) -->
|
||
<line x1="70" y1="65" x2="400" y2="65" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
<line x1="70" y1="155" x2="400" y2="155" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
<line x1="70" y1="245" x2="400" y2="245" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
<!-- Линии решётки (вертикальные) -->
|
||
<line x1="70" y1="65" x2="70" y2="245" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
<line x1="180" y1="65" x2="180" y2="245" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
<line x1="290" y1="65" x2="290" y2="245" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
<line x1="400" y1="65" x2="400" y2="245" stroke="#d97706" stroke-width="1.2" stroke-dasharray="5,4" opacity=".35"/>
|
||
|
||
<!-- Свободные электроны (между катионами) -->
|
||
<!-- Вузлы между рядами 1–2 -->
|
||
<circle cx="125" cy="110" r="5" fill="url(#eg)" filter="url(#eglow)" opacity=".9"/>
|
||
<circle cx="235" cy="110" r="5" fill="url(#eg)" filter="url(#eglow)" opacity=".9"/>
|
||
<circle cx="345" cy="110" r="5" fill="url(#eg)" filter="url(#eglow)" opacity=".9"/>
|
||
<!-- Вузлы между рядами 2–3 -->
|
||
<circle cx="125" cy="200" r="5" fill="url(#eg)" filter="url(#eglow)" opacity=".9"/>
|
||
<circle cx="235" cy="200" r="5" fill="url(#eg)" filter="url(#eglow)" opacity=".9"/>
|
||
<circle cx="345" cy="200" r="5" fill="url(#eg)" filter="url(#eglow)" opacity=".9"/>
|
||
<!-- Над рядом 1 -->
|
||
<circle cx="70" cy="30" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<circle cx="180" cy="30" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<circle cx="290" cy="30" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<circle cx="400" cy="30" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<!-- По краям -->
|
||
<circle cx="32" cy="110" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<circle cx="448" cy="155" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<circle cx="32" cy="200" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<!-- Под рядом 3 -->
|
||
<circle cx="125" cy="268" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
<circle cx="345" cy="268" r="4.5" fill="url(#eg)" filter="url(#eglow)" opacity=".8"/>
|
||
|
||
<!-- Стрелки движения электронов (электронный газ подвижен) -->
|
||
<line x1="131" y1="107" x2="151" y2="100" stroke="#b45309" stroke-width="1.5" marker-end="url(#emarr)" opacity=".75"/>
|
||
<line x1="341" y1="114" x2="321" y2="123" stroke="#b45309" stroke-width="1.5" marker-end="url(#emarr)" opacity=".75"/>
|
||
<line x1="120" y1="196" x2="107" y2="184" stroke="#b45309" stroke-width="1.5" marker-end="url(#emarr)" opacity=".75"/>
|
||
<line x1="243" y1="204" x2="259" y2="215" stroke="#b45309" stroke-width="1.5" marker-end="url(#emarr)" opacity=".75"/>
|
||
|
||
<!-- Подписи e⁻ у двух электронов -->
|
||
<text x="243" y="103" font-size="9.5" fill="#b45309" font-family="Inter" font-weight="600">e⁻</text>
|
||
<text x="103" y="192" font-size="9.5" fill="#b45309" font-family="Inter" font-weight="600">e⁻</text>
|
||
|
||
<!-- Катионы 4×3 -->
|
||
<g stroke="#b45309" stroke-width="1.5">
|
||
<circle cx="70" cy="65" r="24" fill="url(#cg)"/>
|
||
<circle cx="180" cy="65" r="24" fill="url(#cg)"/>
|
||
<circle cx="290" cy="65" r="24" fill="url(#cg)"/>
|
||
<circle cx="400" cy="65" r="24" fill="url(#cg)"/>
|
||
<circle cx="70" cy="155" r="24" fill="url(#cg)"/>
|
||
<circle cx="180" cy="155" r="24" fill="url(#cg)"/>
|
||
<circle cx="290" cy="155" r="24" fill="url(#cg)"/>
|
||
<circle cx="400" cy="155" r="24" fill="url(#cg)"/>
|
||
<circle cx="70" cy="245" r="24" fill="url(#cg)"/>
|
||
<circle cx="180" cy="245" r="24" fill="url(#cg)"/>
|
||
<circle cx="290" cy="245" r="24" fill="url(#cg)"/>
|
||
<circle cx="400" cy="245" r="24" fill="url(#cg)"/>
|
||
</g>
|
||
<!-- Подписи катионов -->
|
||
<g font-size="11" font-weight="700" fill="#7c2d12" text-anchor="middle" font-family="Inter">
|
||
<text x="70" y="70">Me⁺</text> <text x="180" y="70">Me⁺</text>
|
||
<text x="290" y="70">Me⁺</text> <text x="400" y="70">Me⁺</text>
|
||
<text x="70" y="160">Me⁺</text> <text x="180" y="160">Me⁺</text>
|
||
<text x="290" y="160">Me⁺</text> <text x="400" y="160">Me⁺</text>
|
||
<text x="70" y="250">Me⁺</text> <text x="180" y="250">Me⁺</text>
|
||
<text x="290" y="250">Me⁺</text> <text x="400" y="250">Me⁺</text>
|
||
</g>
|
||
|
||
<!-- Легенда -->
|
||
<rect x="55" y="279" width="370" height="17" rx="4" fill="rgba(251,191,36,0.1)" stroke="rgba(180,83,9,0.15)" stroke-width="1"/>
|
||
<circle cx="80" cy="287" r="8" fill="url(#cg)" stroke="#b45309" stroke-width="1"/>
|
||
<text x="93" y="291" font-size="10" fill="#78716c" font-family="Inter">— катион металла Me⁺</text>
|
||
<circle cx="258" cy="287" r="4.5" fill="url(#eg)" filter="url(#eglow)"/>
|
||
<text x="268" y="291" font-size="10" fill="#78716c" font-family="Inter">— свободный электрон e⁻</text>
|
||
</svg>
|
||
<p style="font-size:.8rem;color:var(--muted);text-align:center">«Электронный газ» свободно движется между катионами — объясняет электропроводность, теплопроводность и пластичность металлов</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-mountain"></i> Нахождение металлов в природе</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Группа по активности</th><th>Примеры металлов</th><th>Форма нахождения</th><th>Примеры соединений</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong style="color:#065f46">Активные</strong></td><td>K, Na, Ca, Mg, Al</td><td>Только сложные вещества</td><td>NaCl, CaCO₃, KCl, Al₂O₃</td></tr>
|
||
<tr><td><strong style="color:#92400e">Средней активности</strong></td><td>Fe, Zn, Pb, Cu</td><td>Оксиды, сульфиды</td><td>Fe₂O₃, ZnS, PbS, Fe₃O₄</td></tr>
|
||
<tr><td><strong style="color:#991b1b">Малоактивные</strong></td><td>Cu, Ag, Au, Pt</td><td>Самородный металл и соединения</td><td>Au⁰, Ag⁰, Cu₂S, CuS</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-industry"></i> Получение металлов</div>
|
||
|
||
<div class="def-box">
|
||
Получение металлов из руд (природных соединений) называется <strong>металлургией</strong>. Суть любого способа — <strong>восстановление</strong> ионов металла до атомов: Meⁿ⁺ + ne⁻ → Me⁰.
|
||
</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Пирометаллургия</h3>
|
||
<p>Восстановление металлов из оксидов при <em>высоких температурах</em>.</p>
|
||
<ul>
|
||
<li>Коксом (C): <code style="font-size:.82rem">2Fe₂O₃ + 3C → 4Fe + 3CO₂↑</code></li>
|
||
<li>Оксидом углерода: <code style="font-size:.82rem">Fe₂O₃ + 3CO → 2Fe + 3CO₂</code></li>
|
||
<li>Водородом: <code style="font-size:.82rem">CuO + H₂ → Cu + H₂O</code></li>
|
||
<li>Алюминием (алюминотермия): <code style="font-size:.82rem">Fe₂O₃ + 2Al → Al₂O₃ + 2Fe</code></li>
|
||
</ul>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Гидрометаллургия</h3>
|
||
<p>Металл растворяют в кислоте, затем вытесняют более активным металлом.</p>
|
||
<p>Пример: <code style="font-size:.82rem">CuSO₄ + Fe → FeSO₄ + Cu↓</code></p>
|
||
<p>Применяется для меди, серебра, золота.</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Электрометаллургия</h3>
|
||
<p>Электролиз расплавов солей или оксидов. Используется для получения <em>активных</em> металлов (Na, K, Ca, Mg, Al), которые нельзя получить пирометаллургией.</p>
|
||
<p>Пример: электролиз расплава Al₂O₃ → получение алюминия.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-row"><i class="fas fa-fire"></i>
|
||
<span><strong>Алюминотермия</strong> — восстановление металлов алюминием из их оксидов. Реакция <code>Fe₂O₃ + 2Al = Al₂O₃ + 2Fe</code> выделяет огромное количество теплоты (T > 2500 °C). Используется для сварки рельсов и получения редких металлов.</span>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-question-circle"></i> Контрольные вопросы</div>
|
||
<ol class="q-list">
|
||
<li>Где расположены металлы в периодической системе? Сколько их всего?</li>
|
||
<li>Почему атомы металлов легко отдают электроны?</li>
|
||
<li>Что такое металлическая связь? Чем она обусловлена?</li>
|
||
<li>Почему активные металлы не встречаются в природе в свободном виде?</li>
|
||
<li>Какой металл является самым распространённым в земной коре?</li>
|
||
<li>Какими тремя способами получают металлы? Приведите примеры.</li>
|
||
<li>Почему алюминий нельзя получить пирометаллургией, но можно — электролизом?</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
§41 — ПРОСТЫЕ ВЕЩЕСТВА. ФИЗИЧЕСКИЕ СВОЙСТВА. СПЛАВЫ
|
||
══════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref41">
|
||
|
||
<div class="section-title"><i class="fas fa-bolt"></i> Физические свойства металлов</div>
|
||
|
||
<div style="display:flex;flex-direction:column;gap:10px;margin-bottom:20px">
|
||
|
||
<!-- Плотность -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:15px 18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
|
||
<span style="width:36px;height:36px;background:linear-gradient(135deg,#b45309,#d97706);border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:1rem">⚖️</span>
|
||
<div>
|
||
<div style="font-weight:800;font-size:.95rem">Плотность</div>
|
||
<div style="font-size:.76rem;color:var(--muted)">лёгкие (ρ < 5 г/см³) и тяжёлые (ρ > 5 г/см³)</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;font-size:.78rem;font-family:'JetBrains Mono',monospace">
|
||
<span style="background:#d1fae5;color:#065f46;padding:4px 10px;border-radius:7px;font-weight:700">Li 0,53 ← мин</span>
|
||
<span style="background:rgba(180,83,9,.08);padding:4px 10px;border-radius:7px">Na 0,97</span>
|
||
<span style="background:rgba(180,83,9,.08);padding:4px 10px;border-radius:7px">Mg 1,74</span>
|
||
<span style="background:rgba(180,83,9,.12);padding:4px 10px;border-radius:7px;font-weight:700">Al 2,7</span>
|
||
<span style="background:rgba(180,83,9,.08);padding:4px 10px;border-radius:7px">Fe 7,87</span>
|
||
<span style="background:rgba(180,83,9,.08);padding:4px 10px;border-radius:7px">Cu 8,9</span>
|
||
<span style="background:rgba(180,83,9,.08);padding:4px 10px;border-radius:7px">Pb 11,35</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:4px 10px;border-radius:7px;font-weight:700">Os 22,6 → макс</span>
|
||
</div>
|
||
<div style="font-size:.76rem;color:var(--muted);margin-top:8px">📌 <strong>Al</strong> — самый используемый лёгкий металл: авиация, строительство, упаковка</div>
|
||
</div>
|
||
|
||
<!-- Электро- и теплопроводность -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:15px 18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
|
||
<span style="width:36px;height:36px;background:linear-gradient(135deg,#b45309,#d97706);border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:1rem">⚡</span>
|
||
<div>
|
||
<div style="font-weight:800;font-size:.95rem">Электро- и теплопроводность</div>
|
||
<div style="font-size:.76rem;color:var(--muted)">обусловлены свободными электронами («электронным газом»)</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:8px">
|
||
<div style="font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em">Электропроводность (Ag = 100%)</div>
|
||
<div style="display:flex;flex-direction:column;gap:4px">
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;width:24px;color:var(--pri)">Ag</span>
|
||
<div style="flex:1;background:rgba(180,83,9,.1);border-radius:3px;height:14px"><div style="width:100%;height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:3px"></div></div>
|
||
<span style="font-size:.72rem;font-weight:700;color:var(--pri);width:38px">100%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;width:24px;color:var(--pri)">Cu</span>
|
||
<div style="flex:1;background:rgba(180,83,9,.1);border-radius:3px;height:14px"><div style="width:94%;height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:3px"></div></div>
|
||
<span style="font-size:.72rem;font-weight:700;color:var(--pri);width:38px">94%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;width:24px;color:var(--pri)">Al</span>
|
||
<div style="flex:1;background:rgba(180,83,9,.1);border-radius:3px;height:14px"><div style="width:60%;height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:3px"></div></div>
|
||
<span style="font-size:.72rem;font-weight:700;color:var(--pri);width:38px">60%</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<span style="font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;width:24px;color:var(--muted)">Bi</span>
|
||
<div style="flex:1;background:rgba(180,83,9,.1);border-radius:3px;height:14px"><div style="width:0.3%;height:100%;background:var(--muted);border-radius:3px;min-width:4px"></div></div>
|
||
<span style="font-size:.72rem;font-weight:700;color:var(--muted);width:38px">0,3%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:flex;gap:8px;font-size:.77rem;flex-wrap:wrap">
|
||
<span style="background:#fef3c7;color:#92400e;padding:3px 9px;border-radius:6px">⬇ при нагревании — проводимость снижается</span>
|
||
<span style="background:rgba(180,83,9,.07);padding:3px 9px;border-radius:6px">теплопроводность ↔ электропроводность</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Пластичность и твёрдость -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:15px 18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
|
||
<span style="width:36px;height:36px;background:linear-gradient(135deg,#b45309,#d97706);border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:1rem">🔨</span>
|
||
<div>
|
||
<div style="font-weight:800;font-size:.95rem">Пластичность и твёрдость</div>
|
||
<div style="font-size:.76rem;color:var(--muted)">скольжение слоёв катионов в электронном газе</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
||
<div style="background:rgba(180,83,9,.06);border-radius:10px;padding:10px 12px">
|
||
<div style="font-size:.73rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px">Пластичность</div>
|
||
<div style="font-size:.79rem;line-height:1.7">
|
||
🥇 <strong>Au</strong> — из 1 г → проволока <strong>3420 м</strong><br>
|
||
🥈 <strong>Ag</strong>, затем Al, Cu, Fe…<br>
|
||
🔴 Хрупкий: <strong>Bi, Mn</strong> — крошатся
|
||
</div>
|
||
</div>
|
||
<div style="background:rgba(180,83,9,.06);border-radius:10px;padding:10px 12px">
|
||
<div style="font-size:.73rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px">Твёрдость</div>
|
||
<div style="font-size:.79rem;line-height:1.7">
|
||
🥇 <strong>Cr</strong> — царапает стекло<br>
|
||
🔧 Fe, Ni, Co — средняя<br>
|
||
🔴 Мягкие: <strong>K, Na, Cs</strong> — режутся ножом
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Блеск, цвет, магнетизм -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:15px 18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:12px">
|
||
<span style="width:36px;height:36px;background:linear-gradient(135deg,#b45309,#d97706);border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:1rem">✨</span>
|
||
<div>
|
||
<div style="font-weight:800;font-size:.95rem">Блеск, цвет и магнитные свойства</div>
|
||
<div style="font-size:.76rem;color:var(--muted)">свободные электроны отражают свет</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px">
|
||
<div>
|
||
<div style="font-size:.73rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px">Цвет</div>
|
||
<div style="display:flex;flex-direction:column;gap:4px;font-size:.79rem">
|
||
<span style="display:flex;align-items:center;gap:7px"><span style="width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#d1d5db,#9ca3af);flex-shrink:0"></span>Большинство — серебристо-белый</span>
|
||
<span style="display:flex;align-items:center;gap:7px"><span style="width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#f97316,#dc2626);flex-shrink:0"></span><strong>Cu</strong> — красноватый</span>
|
||
<span style="display:flex;align-items:center;gap:7px"><span style="width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#fde68a,#d97706);flex-shrink:0"></span><strong>Au</strong> — жёлтый</span>
|
||
<span style="display:flex;align-items:center;gap:7px"><span style="width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#fbbf24,#f59e0b);flex-shrink:0"></span><strong>Cs</strong> — золотисто-жёлтый</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="font-size:.73rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px">Магнитные свойства</div>
|
||
<div style="display:flex;flex-direction:column;gap:5px;font-size:.79rem">
|
||
<div style="background:#fee2e2;border-radius:7px;padding:5px 9px"><strong>Fe, Co, Ni</strong> — ферромагнетики 🧲<br><span style="font-size:.72rem;color:#991b1b">сильно намагничиваются</span></div>
|
||
<div style="background:#fef3c7;border-radius:7px;padding:5px 9px"><strong>Al</strong> — парамагнетик<br><span style="font-size:.72rem;color:#92400e">очень слабо</span></div>
|
||
<div style="background:rgba(180,83,9,.07);border-radius:7px;padding:5px 9px"><strong>Cu, Zn</strong> — диамагнетики<br><span style="font-size:.72rem;color:var(--muted)">слабо отталкиваются</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Диаграмма температур плавления -->
|
||
<div class="melt-chart">
|
||
<h3><i class="fas fa-temperature-high"></i> Температуры плавления металлов</h3>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Hg</span>
|
||
<div class="bar-track" style="background:rgba(14,165,233,.15)">
|
||
<span style="font-size:.7rem;font-weight:700;color:#0ea5e9;padding:2px 6px">−39 °C (жидкий!)</span>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Ga</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill cold" style="width:1%"><span class="bar-temp outside">29,8 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Na</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:3%"><span class="bar-temp outside">98 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Pb</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:10%"><span class="bar-temp">327 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Mg</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:19%"><span class="bar-temp">650 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Al</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:19%"><span class="bar-temp">660 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Ag</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:28%"><span class="bar-temp">962 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Cu</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:32%"><span class="bar-temp">1085 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">Fe</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:45%"><span class="bar-temp">1538 °C</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="bar-row">
|
||
<span class="bar-metal">W</span>
|
||
<div class="bar-track">
|
||
<div class="bar-fill" style="width:100%"><span class="bar-temp">3410 °C — рекорд!</span></div>
|
||
</div>
|
||
</div>
|
||
<p style="font-size:.75rem;color:var(--muted);margin-top:8px">Металлы с T<sub>пл</sub> < 1000 °C — <em>легкоплавкие</em>; T<sub>пл</sub> > 1000 °C — <em>тугоплавкие</em>. Вольфрам W — самый тугоплавкий.</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-layer-group"></i> Сплавы металлов</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Сплавы</strong> — это однородные твёрдые смеси металлов (иногда с неметаллами — C, Si, B, P). В сплавах реализуется <strong>металлическая связь</strong>. Свойства сплавов <em>отличаются</em> от свойств компонентов.
|
||
</div>
|
||
|
||
<table class="tbl">
|
||
<thead>
|
||
<tr><th>Название</th><th>Состав</th><th>Ценное свойство</th><th>Применение</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td><strong>Бронза</strong></td><td>Cu ~90%, Sn ~10%</td><td>Твёрдость, коррозионная стойкость</td><td>Подшипники, колокола, скульптуры</td></tr>
|
||
<tr><td><strong>Латунь</strong></td><td>Cu ~60%, Zn ~40%</td><td>Коррозионная стойкость</td><td>Трубопроводы, муз. инструменты, сантехника</td></tr>
|
||
<tr><td><strong>Дюралюминий</strong></td><td>Al ~93%, Cu ~6%, Mg, Mn</td><td>Лёгкость + прочность</td><td>Авиа- и машиностроение</td></tr>
|
||
<tr><td><strong>Чугун</strong></td><td>Fe ~96,5%, C ~3,5%</td><td>Твёрдость (хрупкий)</td><td>Трубы, кухонная посуда, решётки</td></tr>
|
||
<tr><td><strong>Сталь</strong></td><td>Fe ~98,5%, C <1,5%</td><td>Прочность, пластичность</td><td>Рельсы, инструменты, строительство</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-row"><i class="fas fa-star"></i>
|
||
<span><strong>Проба</strong> драгоценного металла — число, показывающее массу металла в 1000 г сплава. Например, проба <strong>585</strong> означает, что в 1000 г сплава содержится 585 г золота.</span>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-tools"></i> Применение металлов</div>
|
||
<div class="use-grid">
|
||
<div class="use-card">
|
||
<div class="use-sym">Al</div>
|
||
<div class="use-name">Алюминий</div>
|
||
<ul><li>Авиация, автомобили</li><li>Провода ЛЭП</li><li>Пищевая фольга</li><li>Оконные профили</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Fe</div>
|
||
<div class="use-name">Железо / Сталь</div>
|
||
<ul><li>Строительство</li><li>Машиностроение</li><li>Рельсы, трубы</li><li>Инструменты</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Cu</div>
|
||
<div class="use-name">Медь</div>
|
||
<ul><li>Электропровода</li><li>Радиаторы</li><li>Монеты (сплавы)</li><li>Трубопроводы</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Au</div>
|
||
<div class="use-name">Золото</div>
|
||
<ul><li>Ювелирные изделия</li><li>Электроника (контакты)</li><li>Медицинские протезы</li><li>Банковские резервы</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Na</div>
|
||
<div class="use-name">Натрий</div>
|
||
<ul><li>Натриевые лампы</li><li>Теплоноситель АЭС</li><li>Синтез NaOH, Na₂O₂</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Ag</div>
|
||
<div class="use-name">Серебро</div>
|
||
<ul><li>Ювелирные изделия</li><li>Антибактер. покрытия</li><li>Электрические контакты</li></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-question-circle"></i> Контрольные вопросы</div>
|
||
<ol class="q-list">
|
||
<li>Какие физические свойства характерны для металлов? Чем они обусловлены?</li>
|
||
<li>Почему металлы хорошо проводят электрический ток и теплоту?</li>
|
||
<li>Что такое пластичность? Какой металл наиболее пластичен?</li>
|
||
<li>Что такое сплав? Чем свойства сплава отличаются от свойств чистых металлов?</li>
|
||
<li>Что показывает проба драгоценного металла?</li>
|
||
<li>Назовите самый лёгкий и самый тяжёлый металл. На какие группы по плотности делятся металлы?</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
§42 — ОБЩИЕ ХИМИЧЕСКИЕ СВОЙСТВА МЕТАЛЛОВ
|
||
══════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref42">
|
||
|
||
<div class="def-box">
|
||
В химических реакциях металлы всегда <strong>отдают электроны</strong> и окисляются → выступают в роли <strong>восстановителей</strong>:
|
||
Me⁰ − ne⁻ → Meⁿ⁺ (окисление).
|
||
Все реакции с участием металлов — <strong>окислительно-восстановительные</strong>.
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-sort-amount-up"></i> Ряд активности металлов</div>
|
||
|
||
<div class="act-wrap">
|
||
<div class="act-title">← восстановительные свойства усиливаются</div>
|
||
<div class="act-series">
|
||
<div class="az az-active">
|
||
<div class="az-lbl">Активные</div>
|
||
<div class="az-metals">K Ba<br>Ca Na<br>Mg Al</div>
|
||
<div class="az-note">реагируют<br>с H₂O</div>
|
||
</div>
|
||
<div class="az az-medium">
|
||
<div class="az-lbl">Средние</div>
|
||
<div class="az-metals">Zn Fe<br>Ni Sn<br>Pb</div>
|
||
<div class="az-note">реагируют<br>с кислотами</div>
|
||
</div>
|
||
<div class="az az-h2">
|
||
<div class="az-metals">(H₂)</div>
|
||
</div>
|
||
<div class="az az-inactive">
|
||
<div class="az-lbl">Малоактивные</div>
|
||
<div class="az-metals">Cu Hg<br>Ag Pt<br>Au</div>
|
||
<div class="az-note">не реагируют<br>с кислотами</div>
|
||
</div>
|
||
</div>
|
||
<div class="act-arrow">
|
||
<span class="act-arrow-line"></span>
|
||
<span style="white-space:nowrap;font-size:.73rem;font-weight:700;color:var(--muted)">более активный металл вытесняет менее активный из растворов его солей</span>
|
||
<span class="act-arrow-line"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-brain"></i> Как запомнить ряд активности</div>
|
||
<div class="mnem-card">
|
||
<div style="font-family:'JetBrains Mono',monospace;font-size:.83rem;font-weight:700;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center">
|
||
<span style="background:#d1fae5;color:#065f46;padding:3px 8px;border-radius:7px">K Ba Ca Na Mg Al</span>
|
||
<span style="color:var(--muted)">›</span>
|
||
<span style="background:#fef3c7;color:#92400e;padding:3px 8px;border-radius:7px">Zn Fe Ni Sn Pb</span>
|
||
<span style="color:var(--muted)">›</span>
|
||
<span style="background:#f5f5f4;padding:3px 8px;border-radius:7px">(H₂)</span>
|
||
<span style="color:var(--muted)">›</span>
|
||
<span style="background:#fee2e2;color:#991b1b;padding:3px 8px;border-radius:7px">Cu Hg Ag Pt Au</span>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.78rem;margin-bottom:12px">
|
||
<div style="background:#d1fae5;border-radius:9px;padding:9px 12px;color:#065f46">
|
||
<strong>Активные (до Al включ.)</strong><br>
|
||
✔ реагируют с H₂O при н.у.<br>
|
||
✔ реагируют с кислотами<br>
|
||
✔ в природе — только соединения
|
||
</div>
|
||
<div style="background:#fef3c7;border-radius:9px;padding:9px 12px;color:#92400e">
|
||
<strong>Средние (Zn — Pb)</strong><br>
|
||
✗ с холодной водой не реагируют<br>
|
||
✔ реагируют с кислотами<br>
|
||
✔ Fe + пар → Fe₃O₄ + H₂↑
|
||
</div>
|
||
<div style="background:#fee2e2;border-radius:9px;padding:9px 12px;color:#991b1b">
|
||
<strong>Неактивные (Cu — Au)</strong><br>
|
||
✗ с водой не реагируют<br>
|
||
✗ с разб. HCl не реагируют<br>
|
||
✔ встречаются самородками
|
||
</div>
|
||
<div style="background:rgba(180,83,9,.08);border-radius:9px;padding:9px 12px">
|
||
<strong style="color:var(--pri)">Якоря памяти:</strong><br>
|
||
📌 K, Na — режутся ножом<br>
|
||
📌 Au, Pt — «благородные» (не ржавеют)<br>
|
||
📌 Al — самый используемый лёгкий металл
|
||
</div>
|
||
</div>
|
||
<div style="font-size:.77rem;color:var(--muted);border-top:1px solid var(--border);padding-top:10px;line-height:1.9">
|
||
<strong style="color:var(--text)">Мнемоника по группам:</strong><br>
|
||
<span style="color:#065f46;font-weight:700">«К</span>аждый <span style="color:#065f46;font-weight:700">Б</span>арон <span style="color:#065f46;font-weight:700">С</span>верху <span style="color:#065f46;font-weight:700">Н</span>адел <span style="color:#065f46;font-weight:700">М</span>аску <span style="color:#065f46;font-weight:700">А</span>люминиевую» → K Ba Ca Na Mg Al<br>
|
||
<span style="color:#92400e;font-weight:700">«Ц</span>ари <span style="color:#92400e;font-weight:700">Ж</span>елают <span style="color:#92400e;font-weight:700">Н</span>ичего — <span style="color:#92400e;font-weight:700">О</span>лово <span style="color:#92400e;font-weight:700">С</span>вободно» → Zn(Ц) Fe(Ж) Ni(Н) Sn(О) Pb(С)<br>
|
||
<span style="color:#991b1b;font-weight:700">«М</span>едный <span style="color:#991b1b;font-weight:700">Р</span>ыцарь <span style="color:#991b1b;font-weight:700">С</span>еребряную <span style="color:#991b1b;font-weight:700">П</span>латину <span style="color:#991b1b;font-weight:700">А</span>укнул» → Cu(М) Hg(Р) Ag(С) Pt(П) Au(А)
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fcard" style="margin-bottom:16px">
|
||
<h3 style="margin-bottom:8px"><i class="fas fa-hand-pointer"></i> Интерактивный ряд активности</h3>
|
||
<div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px">
|
||
<button class="act-mode-btn btn btn-ghost active" data-mode="displace" onclick="actSetMode('displace')" style="font-size:.75rem;padding:5px 11px">⚗️ A вытесняет B</button>
|
||
<button class="act-mode-btn btn btn-ghost" data-mode="water" onclick="actSetMode('water')" style="font-size:.75rem;padding:5px 11px">💧 + H₂O</button>
|
||
<button class="act-mode-btn btn btn-ghost" data-mode="acid" onclick="actSetMode('acid')" style="font-size:.75rem;padding:5px 11px">🧪 + HCl</button>
|
||
</div>
|
||
<p id="actSelInfo" style="font-size:.81rem;color:var(--muted);margin-bottom:8px">Выберите металл <span style="background:#d1fae5;color:#065f46;font-weight:700;padding:0 5px;border-radius:4px">A</span>, затем металл <span style="background:#fef3c7;color:#92400e;font-weight:700;padding:0 5px;border-radius:4px">B</span> — проверьте реакцию замещения.</p>
|
||
<div class="act-btn-row" id="actBtns"></div>
|
||
<div style="margin-top:8px">
|
||
<button class="btn btn-ghost" onclick="actReset()" style="font-size:.74rem;padding:5px 11px"><i class="fas fa-rotate-right"></i> Сброс</button>
|
||
</div>
|
||
<div class="act-result" id="actResult"></div>
|
||
</div>
|
||
|
||
<!-- Сводная таблица химических свойств -->
|
||
<div class="fcard" style="margin-bottom:16px;overflow-x:auto">
|
||
<h3>Сводная таблица: реакции металлов</h3>
|
||
<table style="width:100%;border-collapse:collapse;font-size:.77rem;margin-top:8px;min-width:440px">
|
||
<thead>
|
||
<tr>
|
||
<th style="background:var(--pri);color:#fff;padding:8px 10px;text-align:left;border-radius:6px 0 0 0">Реагент</th>
|
||
<th style="background:#065f46;color:#fff;padding:8px 10px;text-align:center">Активные<br><span style="font-family:'JetBrains Mono',monospace;font-size:.72rem">K–Al</span></th>
|
||
<th style="background:#78350f;color:#fff;padding:8px 10px;text-align:center">Средние<br><span style="font-family:'JetBrains Mono',monospace;font-size:.72rem">Zn–Pb</span></th>
|
||
<th style="background:#991b1b;color:#fff;padding:8px 10px;text-align:center;border-radius:0 6px 0 0">Малоактивные<br><span style="font-family:'JetBrains Mono',monospace;font-size:.72rem">Cu–Au</span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);font-weight:700">O₂</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ оксид</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ оксид</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#fefce8;color:#92400e;text-align:center">✔/✗ (Cu, Ag — да;<br>Au, Pt — нет)</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);font-weight:700">H₂O</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ Me(OH)ₙ + H₂↑</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#fefce8;color:#92400e;text-align:center">⚠ пар →<br>оксид + H₂↑</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#fef2f2;color:#991b1b;text-align:center">✗</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);font-weight:700">HCl, H₂SO₄(разб.)</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ соль + H₂↑</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ соль + H₂↑</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#fef2f2;color:#991b1b;text-align:center">✗</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);font-weight:700">конц. H₂SO₄, HNO₃</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ реагируют</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#fefce8;color:#92400e;text-align:center">⚠ Fe, Al —<br>пассивация</td>
|
||
<td style="padding:7px 10px;border-bottom:1px solid var(--border);background:#f0fdf4;color:#15803d;text-align:center">✔ Cu, Ag, Hg</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:7px 10px;font-weight:700">Раствор соли</td>
|
||
<td style="padding:7px 10px;background:#fefce8;color:#92400e;text-align:center">⚠ сначала<br>реагирует с H₂O</td>
|
||
<td style="padding:7px 10px;background:#f0fdf4;color:#15803d;text-align:center">✔ если стоит<br>левее металла соли</td>
|
||
<td style="padding:7px 10px;background:#f0fdf4;color:#15803d;text-align:center">✔ если стоит<br>левее металла соли</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-arrows-alt-h"></i> ОВР-схемы реакций металлов</div>
|
||
|
||
<!-- Алгоритм ОВР -->
|
||
<div class="fcard highlight" style="margin-bottom:16px">
|
||
<h3>Алгоритм составления уравнений ОВР</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:8px 0">
|
||
<div style="background:rgba(180,83,9,.07);border-radius:9px;padding:9px 12px">
|
||
<div style="font-size:.71rem;font-weight:800;color:var(--pri);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px">① Степени окисления</div>
|
||
<div style="font-size:.79rem;line-height:1.65">Расставить СО над атомами. Металл: всегда <strong>0</strong> в простом веществе → повышает СО.</div>
|
||
</div>
|
||
<div style="background:rgba(180,83,9,.07);border-radius:9px;padding:9px 12px">
|
||
<div style="font-size:.71rem;font-weight:800;color:var(--pri);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px">② Электронный баланс</div>
|
||
<div style="font-size:.79rem;line-height:1.65">Найти e⁻ отданные и принятые. Взять <strong>НОК</strong>, поставить коэффициенты к Ок/Вос.</div>
|
||
</div>
|
||
<div style="background:rgba(180,83,9,.07);border-radius:9px;padding:9px 12px">
|
||
<div style="font-size:.71rem;font-weight:800;color:var(--pri);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px">③ Уравнивание</div>
|
||
<div style="font-size:.79rem;line-height:1.65">Уравнять остальные атомы. Проверить: <strong>e⁻ отданных = e⁻ принятых</strong>.</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:.77rem;color:var(--muted);padding:7px 10px;background:rgba(180,83,9,.05);border-radius:8px;display:flex;gap:8px;align-items:flex-start">
|
||
<span style="font-size:1rem;flex-shrink:0">📌</span>
|
||
<span><strong>Металл — всегда восстановитель:</strong> Me⁰ − ne⁻ → Meⁿ⁺ (окисление). Вещество-партнёр — окислитель: принимает эти электроны.</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ovr-card">
|
||
<div class="ovr-eq">Zn + 2HCl = ZnCl₂ + H₂↑</div>
|
||
<div class="ovr-ox">Zn⁰ − 2e⁻ → Zn²⁺ (окисление; Zn — <strong>восстановитель</strong>)</div>
|
||
<div class="ovr-red">2H⁺ + 2e⁻ → H₂⁰ (восстановление; H⁺ — <strong>окислитель</strong>)</div>
|
||
</div>
|
||
<div class="ovr-card">
|
||
<div class="ovr-eq">Fe + CuSO₄ = FeSO₄ + Cu↓</div>
|
||
<div class="ovr-ox">Fe⁰ − 2e⁻ → Fe²⁺ (окисление; Fe — <strong>восстановитель</strong>)</div>
|
||
<div class="ovr-red">Cu²⁺ + 2e⁻ → Cu⁰ (восстановление; Cu²⁺ — <strong>окислитель</strong>)</div>
|
||
</div>
|
||
<div class="ovr-card">
|
||
<div class="ovr-eq">2Al + 6HCl = 2AlCl₃ + 3H₂↑</div>
|
||
<div class="ovr-ox">Al⁰ − 3e⁻ → Al³⁺ |×2 итого: 6e⁻ отданы</div>
|
||
<div class="ovr-red">2H⁺ + 2e⁻ → H₂⁰ |×3 итого: 6e⁻ приняты</div>
|
||
<p style="font-size:.76rem;color:var(--muted);margin-top:7px">⬆ Баланс: 2×3 = 3×2 = 6e⁻. Число отданных = числу принятых ✓</p>
|
||
</div>
|
||
<div class="ovr-card">
|
||
<div class="ovr-eq">2Na + 2H₂O = 2NaOH + H₂↑</div>
|
||
<div class="ovr-ox">Na⁰ − 1e⁻ → Na⁺ |×2 (окисление; Na — <strong>восстановитель</strong>)</div>
|
||
<div class="ovr-red">2H⁺ + 2e⁻ → H₂⁰ |×1 (восстановление; H⁺ — <strong>окислитель</strong>)</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-fire"></i> 1. Взаимодействие с неметаллами</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>С кислородом (горение)</h3>
|
||
<code class="eq">4Li + O₂ = 2Li₂O</code>
|
||
<code class="eq">2Mg + O₂ → 2MgO (при нагревании)</code>
|
||
<code class="eq">4Al + 3O₂ → 2Al₂O₃ (при нагревании)</code>
|
||
<code class="eq">3Fe + 2O₂ → Fe₃O₄ (горение в O₂)</code>
|
||
<p class="eq-note">⚠ Au и Pt с кислородом не реагируют. Mg, Al при комнатной температуре покрываются тонкой защитной оксидной плёнкой.</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>С галогенами, азотом, водородом</h3>
|
||
<code class="eq">2Na + Cl₂ = 2NaCl (с хлором)</code>
|
||
<code class="eq">Mg + Br₂ = MgBr₂ (с бромом)</code>
|
||
<code class="eq">3Mg + N₂ → Mg₃N₂ (нитрид магния)</code>
|
||
<code class="eq">3Ca + 2P → Ca₃P₂ (фосфид кальция)</code>
|
||
<code class="eq">2Na + H₂ → 2NaH (гидрид натрия)</code>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-tint"></i> 2. Взаимодействие с водой</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Активные металлы (от K до Al) + H₂O → щёлочь + H₂</h3>
|
||
<code class="eq">2Na + 2H₂O = 2NaOH + H₂↑ (бурно, при н.у.)</code>
|
||
<code class="eq">Ca + 2H₂O = Ca(OH)₂ + H₂↑ (при н.у.)</code>
|
||
<code class="eq">Mg + 2H₂O = Mg(OH)₂ + H₂↑ (горячая вода)</code>
|
||
<p class="eq-note">Реакции щелочных металлов (K, Na) с водой очень бурные, иногда с воспламенением!</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Металлы средней активности (Zn–Pb) + H₂O(пар) → оксид + H₂</h3>
|
||
<code class="eq">3Fe + 4H₂O(пар) = Fe₃O₄ + 4H₂↑ (раскалённое железо)</code>
|
||
<p class="eq-note">Cu, Hg, Ag, Pt, Au с водой <strong>не реагируют</strong>.</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> 3. Взаимодействие с кислотами</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Металл (левее H₂ в ряду) + HCl или H₂SO₄(разб.) → соль + H₂</h3>
|
||
<code class="eq">Fe + 2HCl = FeCl₂ + H₂↑</code>
|
||
<code class="eq">Zn + H₂SO₄(разб.) = ZnSO₄ + H₂↑</code>
|
||
<code class="eq">Mg + 2HCl = MgCl₂ + H₂↑</code>
|
||
<code class="eq">2Al + 6HCl = 2AlCl₃ + 3H₂↑</code>
|
||
<p class="eq-note">⚠ Металлы правее H₂ (Cu, Ag, Hg, Pt, Au) с разбавленными HCl и H₂SO₄ <strong>не реагируют</strong>.<br>
|
||
Щелочные и щелочноземельные металлы реагируют с кислотами бурно (опасно!) — в опытах не используются.</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>⚠ Концентрированные кислоты — особые случаи</h3>
|
||
<code class="eq">Cu + 2H₂SO₄(конц.) → CuSO₄ + SO₂↑ + 2H₂O</code>
|
||
<code class="eq">Cu + 4HNO₃(конц.) → Cu(NO₃)₂ + 2NO₂↑ + 2H₂O</code>
|
||
<p class="eq-note">⚠ <strong>Пассивация:</strong> Fe и Al на холоде <em>не реагируют</em> с конц. H₂SO₄ и конц. HNO₃ — на поверхности образуется плотная оксидная плёнка. Именно поэтому азотную кислоту перевозят в стальных цистернах!</p>
|
||
<p class="eq-note">Медь Cu стоит <em>правее</em> H₂, но реагирует с концентрированными кислотами — они являются окислителями сами по себе, а не за счёт H⁺.</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-fire-flame-curved"></i> 3б. Металлотермия (алюминотермия)</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Восстановление оксидов металлов алюминием</h3>
|
||
<code class="eq">Fe₂O₃ + 2Al = Al₂O₃ + 2Fe (T > 2500 °C)</code>
|
||
<code class="eq">3CuO + 2Al = Al₂O₃ + 3Cu</code>
|
||
<code class="eq">Cr₂O₃ + 2Al = Al₂O₃ + 2Cr</code>
|
||
<p class="eq-note">Алюминий — более активный металл, поэтому вытесняет менее активные металлы из их оксидов при нагревании. Реакция термитная — выделяет огромное количество теплоты. Применяется для сварки рельсов, получения редких металлов.</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-exchange-alt"></i> 4. Взаимодействие с растворами солей</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Более активный металл вытесняет менее активный из раствора соли</h3>
|
||
<code class="eq">Fe + CuSO₄ = FeSO₄ + Cu↓ (Fe активнее Cu)</code>
|
||
<code class="eq">Zn + CuSO₄ = ZnSO₄ + Cu↓ (Zn активнее Cu)</code>
|
||
<code class="eq">Cu + 2AgNO₃ = Cu(NO₃)₂ + 2Ag↓ (Cu активнее Ag)</code>
|
||
<p class="eq-note">Условие: металл должен стоять <strong>левее</strong> металла соли в ряду активности. Щелочные и щелочноземельные металлы в таких реакциях сначала взаимодействуют с водой.</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-question-circle"></i> Контрольные вопросы</div>
|
||
<ol class="q-list">
|
||
<li>Почему металлы в химических реакциях всегда проявляют восстановительные свойства?</li>
|
||
<li>Как связана химическая активность металла с его положением в ряду активности?</li>
|
||
<li>Как определить, будет ли металл вытеснять водород из кислоты?</li>
|
||
<li>Какие металлы реагируют с водой при комнатной температуре? При нагревании?</li>
|
||
<li>Составьте уравнения реакций: Mg + HCl; Al + H₂SO₄(разб.); Fe + CuSO₄.</li>
|
||
<li>Почему Fe и Al не реагируют с концентрированной серной кислотой на холоде?</li>
|
||
<li>Что такое алюминотермия? Напишите уравнение реакции Fe₂O₃ с алюминием.</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
§43 — АЛЮМИНИЙ И ЕГО СОЕДИНЕНИЯ
|
||
══════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref43">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#7c2d12,#b45309);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:2rem;font-weight:900;line-height:1">Al</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Z = 13 · III А</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">3-й период</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#92400e,#d97706);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:2rem;font-weight:900;line-height:1">~8%</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">массы земной коры</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">№1 среди металлов</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#b45309,#f59e0b);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:1.3rem;font-weight:900;line-height:1.2">2,7</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">г/см³ · лёгкий</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">T<sub>пл</sub> = 660 °C</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-atom"></i> Строение атома · электронная конфигурация</div>
|
||
|
||
<div class="formula-grid" style="margin-bottom:16px">
|
||
<div class="fcard highlight" style="position:relative;overflow:hidden">
|
||
<div style="position:absolute;top:0;right:0;background:#fbbf24;color:#78350f;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:0 10px 0 8px">III А · 3-й период</div>
|
||
<h3 style="margin-right:100px">Атом алюминия (Z=13)</h3>
|
||
<div class="main-f">[Ne] 3s²3p¹</div>
|
||
<p style="font-size:.79rem">3 <strong>валентных электрона</strong> на внешнем уровне → отдаёт все 3:</p>
|
||
<div style="font-family:'JetBrains Mono',monospace;font-size:.82rem;background:rgba(180,83,9,.07);border-radius:7px;padding:7px 10px;margin-top:7px">Al⁰ − 3e⁻ → Al³⁺</div>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Нахождение в природе</h3>
|
||
<p style="font-size:.79rem;margin-bottom:6px">В природе — только в виде <strong>соединений</strong>:</p>
|
||
<ul>
|
||
<li>Al₂O₃ — корунд, глинозём</li>
|
||
<li>Al₂O₃·nH₂O — <strong>бокситы</strong> (руда)</li>
|
||
<li>KAlSi₃O₈ — полевой шпат</li>
|
||
<li>Al₂Si₂O₇·nH₂O — каолинит (глина)</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-bolt"></i> Физические свойства алюминия</div>
|
||
|
||
<div class="formula-grid" style="margin-bottom:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))">
|
||
<div class="fcard" style="border-left:4px solid #fbbf24">
|
||
<h3 style="color:#92400e">🎨 Цвет и блеск</h3>
|
||
<p style="font-size:.82rem">Серебристо-белый металл с ярким <strong>металлическим блеском</strong>. На воздухе быстро тускнеет из-за оксидной плёнки Al₂O₃.</p>
|
||
</div>
|
||
<div class="fcard" style="border-left:4px solid #60a5fa">
|
||
<h3 style="color:#1e40af">⚖️ Плотность</h3>
|
||
<div style="font-size:1.3rem;font-weight:800;color:#1d4ed8;margin:4px 0">2,7 г/см³</div>
|
||
<p style="font-size:.79rem"><strong>Лёгкий металл</strong> (ρ < 5 г/см³). В 3 раза легче железа (7,9 г/см³). Поэтому широко используется в авиации.</p>
|
||
</div>
|
||
<div class="fcard" style="border-left:4px solid #f87171">
|
||
<h3 style="color:#991b1b">🌡️ Температура плавления</h3>
|
||
<div style="font-size:1.3rem;font-weight:800;color:#dc2626;margin:4px 0">660 °C</div>
|
||
<p style="font-size:.79rem"><strong>Легкоплавкий</strong> металл. Для сравнения: Fe плавится при 1539 °C, Cu — при 1085 °C.</p>
|
||
</div>
|
||
<div class="fcard" style="border-left:4px solid #34d399">
|
||
<h3 style="color:#065f46">🔨 Пластичность</h3>
|
||
<p style="font-size:.82rem"><strong>Очень высокая.</strong> Прокатывается в фольгу толщиной <strong>0,001 мм</strong>. Легко куётся, тянется в проволоку.</p>
|
||
</div>
|
||
<div class="fcard" style="border-left:4px solid #a78bfa">
|
||
<h3 style="color:#4c1d95">⚡ Электропроводность</h3>
|
||
<div style="font-size:1.1rem;font-weight:800;color:#7c3aed;margin:4px 0">≈ 60% от Ag</div>
|
||
<p style="font-size:.79rem"><strong>Хороший проводник.</strong> Уступает Cu, но намного легче → используется в электросетях.</p>
|
||
</div>
|
||
<div class="fcard" style="border-left:4px solid #fb923c">
|
||
<h3 style="color:#7c2d12">🔥 Теплопроводность</h3>
|
||
<p style="font-size:.82rem"><strong>Высокая</strong> — 237 Вт/(м·К). Быстро отводит тепло → используется в радиаторах охлаждения.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="def-box" style="background:rgba(251,191,36,.08);border-left-color:#fbbf24">
|
||
<strong>Немагнитный металл</strong> (парамагнетик) — не притягивается магнитом. Это отличает его от железа и позволяет разделять алюминиевый лом магнитным сепаратором.
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> Химические свойства алюминия</div>
|
||
|
||
<div class="def-box">
|
||
Алюминий — <strong>активный металл</strong> (левее Zn в ряду активности). Но он покрыт тонкой <strong>оксидной плёнкой Al₂O₃</strong>, которая защищает от коррозии.
|
||
<br>Уникальное свойство: <strong>алюминий — амфотерный металл</strong> — реагирует как с кислотами, так и со щёлочами.
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-fire"></i> С кислородом</h3>
|
||
<code class="eq">4Al + 3O₂ → 2Al₂O₃ (при нагревании)</code>
|
||
<p class="eq-note">При н.у. Al покрыт плёнкой Al₂O₃ → не реагирует. Порошок Al горит ярким белым пламенем. Конц. H₂SO₄ и конц. HNO₃ пассивируют Al (как и Fe!).</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-flask"></i> С разбавленными кислотами</h3>
|
||
<code class="eq">2Al + 6HCl = 2AlCl₃ + 3H₂↑</code>
|
||
<code class="eq">2Al + 3H₂SO₄(разб.) = Al₂(SO₄)₃ + 3H₂↑</code>
|
||
</div>
|
||
|
||
<div class="eq-box" style="border-left-color:#10b981">
|
||
<h3 style="color:#065f46"><i class="fas fa-star"></i> Со щелочами — амфотерность!</h3>
|
||
<code class="eq">2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑</code>
|
||
<p class="eq-note" style="color:#065f46">Al — единственный из распространённых металлов, реагирующий со щёлочью с выделением H₂. Продукт: алюминат натрия NaAlO₂.</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-fire-flame-curved"></i> Алюминотермия</h3>
|
||
<code class="eq">Fe₂O₃ + 2Al = Al₂O₃ + 2Fe (T > 2500 °C)</code>
|
||
<code class="eq">Cr₂O₃ + 2Al = Al₂O₃ + 2Cr</code>
|
||
<p class="eq-note">Al восстанавливает менее активные металлы из оксидов. Применяется для сварки рельсов, получения Cr, Mn, Ti.</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-layer-group"></i> Соединения алюминия</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>Al₂O₃ — оксид алюминия</h3>
|
||
<div class="main-f">Амфотерный оксид</div>
|
||
<div style="font-family:'JetBrains Mono',monospace;font-size:.77rem;line-height:2;background:rgba(180,83,9,.07);border-radius:7px;padding:8px 12px;margin-top:6px">
|
||
Al₂O₃ + 6HCl = 2AlCl₃ + 3H₂O<br>Al₂O₃ + 2NaOH = 2NaAlO₂ + H₂O
|
||
</div>
|
||
<p style="font-size:.74rem;color:var(--muted);margin-top:6px">Природные разновидности: корунд, рубин (с Cr³⁺), сапфир (с Ti⁴⁺)</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Al(OH)₃ — гидроксид алюминия</h3>
|
||
<div class="main-f">Амфотерный гидроксид</div>
|
||
<p style="font-size:.79rem">Белый студенистый осадок. Получение:</p>
|
||
<div style="font-family:'JetBrains Mono',monospace;font-size:.77rem;background:rgba(180,83,9,.07);border-radius:7px;padding:6px 10px;margin:5px 0;line-height:2">
|
||
Al³⁺ + 3OH⁻ → Al(OH)₃↓ (избыток — нет!)<br>
|
||
Al(OH)₃ + 3HCl = AlCl₃ + 3H₂O<br>
|
||
Al(OH)₃ + NaOH = NaAlO₂ + 2H₂O
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-industry"></i> Производство алюминия</div>
|
||
|
||
<div class="info-row"><i class="fas fa-bolt"></i>
|
||
<span><strong>Электролиз расплава:</strong> 2Al₂O₃ → 4Al + 3O₂↑. Al₂O₃ растворяют в <strong>криолите</strong> Na₃AlF₆ (снижает T плавления с 2050 °C до ~960 °C). Метод Холла–Эру (1886 г.).
|
||
<br>Al <em>нельзя</em> получить пирометаллургией — слишком активный.</span>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-tools"></i> Применение алюминия</div>
|
||
<div class="use-grid">
|
||
<div class="use-card">
|
||
<div class="use-sym">Al</div>
|
||
<div class="use-name">Авиация</div>
|
||
<ul><li>Корпуса самолётов</li><li>Дюралюминий Al+Cu+Mg</li><li>Лёгкость + прочность</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Al</div>
|
||
<div class="use-name">Электротехника</div>
|
||
<ul><li>Провода ЛЭП</li><li>Электрические шины</li><li>60% проводимости Ag</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Al</div>
|
||
<div class="use-name">Строительство</div>
|
||
<ul><li>Оконные профили</li><li>Облицовочные панели</li><li>Кровельные материалы</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Al</div>
|
||
<div class="use-name">Упаковка</div>
|
||
<ul><li>Пищевая фольга</li><li>Банки для напитков</li><li>Антикоррозийные покрытия</li></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-question-circle"></i> Контрольные вопросы</div>
|
||
<ol class="q-list">
|
||
<li>Почему Al стоек к коррозии, несмотря на высокую химическую активность?</li>
|
||
<li>Что значит «Al — амфотерный металл»? Приведите уравнения реакций с кислотой и щёлочью.</li>
|
||
<li>Составьте уравнения: Al + HCl; Al + NaOH + H₂O; Al₂O₃ + KOH.</li>
|
||
<li>Почему Al нельзя получить пирометаллургией? Как его получают?</li>
|
||
<li>Что такое алюминотермия? Напишите уравнение восстановления Fe₂O₃ алюминием.</li>
|
||
<li>Как называются природные минералы: Al₂O₃, Al₂O₃·nH₂O, KAlSi₃O₈?</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
§44 — ЖЕЛЕЗО И ЕГО СОЕДИНЕНИЯ
|
||
══════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref44">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#7c2d12,#b45309);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:2rem;font-weight:900;line-height:1">Fe</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Z = 26 · VIII Б</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">4-й период, d-блок</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#92400e,#d97706);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:2rem;font-weight:900;line-height:1">~5%</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">массы земной коры</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">№2 среди металлов</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#b45309,#f59e0b);border-radius:14px;padding:16px 14px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900;line-height:1.4">Fe²⁺<br>Fe³⁺</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">два типа катионов</div>
|
||
<div style="font-size:.67rem;opacity:.7;margin-top:2px">переходный металл</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-atom"></i> Строение атома железа</div>
|
||
|
||
<div class="formula-grid" style="margin-bottom:16px">
|
||
<div class="fcard highlight" style="position:relative;overflow:hidden">
|
||
<div style="position:absolute;top:0;right:0;background:#f59e0b;color:#78350f;font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:0 10px 0 8px">VIII Б · 4-й период</div>
|
||
<h3 style="margin-right:100px">Атом железа (Z=26)</h3>
|
||
<div class="main-f">[Ar] 3d⁶4s²</div>
|
||
<p style="font-size:.79rem">d-блок (переходный металл). Два типа ионов:</p>
|
||
<div style="font-family:'JetBrains Mono',monospace;font-size:.81rem;background:rgba(180,83,9,.07);border-radius:7px;padding:7px 10px;margin-top:7px;line-height:2">
|
||
Fe⁰ − 2e⁻ → Fe²⁺ (с разб. HCl, H₂SO₄)<br>
|
||
Fe⁰ − 3e⁻ → Fe³⁺ (с Cl₂, конц. HNO₃)
|
||
</div>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Физические свойства</h3>
|
||
<ul>
|
||
<li><strong>Ферромагнетик</strong> 🧲 — сильно намагничивается</li>
|
||
<li>Плотность: 7,87 г/см³ (тяжёлый металл)</li>
|
||
<li>T<sub>пл</sub> = 1538 °C (тугоплавкий)</li>
|
||
<li>Серебристо-белый, блестящий</li>
|
||
<li>Пластичен и ковок</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-info-circle"></i> Нахождение в природе</div>
|
||
<table class="tbl" style="margin-bottom:16px">
|
||
<thead><tr><th>Минерал</th><th>Формула</th><th>Описание</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Магнетит</strong> (магнитный железняк)</td><td>Fe₃O₄</td><td>Чёрный, магнитный, ценная руда</td></tr>
|
||
<tr><td><strong>Гематит</strong> (красный железняк)</td><td>Fe₂O₃</td><td>Красно-бурый, основная руда для стали</td></tr>
|
||
<tr><td><strong>Лимонит</strong> (бурый железняк)</td><td>Fe₂O₃·nH₂O</td><td>Жёлто-бурый (ржавчина)</td></tr>
|
||
<tr><td><strong>Пирит</strong> (серный колчедан)</td><td>FeS₂</td><td>Золотисто-жёлтый, «золото дураков»</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> Химические свойства железа</div>
|
||
|
||
<div class="def-box">
|
||
В реакциях Fe проявляет степени окисления <strong>+2</strong> (с разб. кислотами) и <strong>+3</strong> (с сильными окислителями — Cl₂, конц. HNO₃). Пассивируется конц. H₂SO₄ и конц. HNO₃.
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-fire"></i> С неметаллами</h3>
|
||
<code class="eq">3Fe + 2O₂ = Fe₃O₄ (горение в O₂)</code>
|
||
<code class="eq">2Fe + 3Cl₂ = 2FeCl₃ (Cl₂ → Fe³⁺)</code>
|
||
<code class="eq">Fe + S = FeS (нагревание → Fe²⁺)</code>
|
||
<p class="eq-note">⚠️ С кислородом → Fe₃O₄ (магнетит), с хлором → FeCl₃ (Fe³⁺), с серой → FeS (Fe²⁺).</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-tint"></i> С водой (пар)</h3>
|
||
<code class="eq">3Fe + 4H₂O(пар) = Fe₃O₄ + 4H₂↑ (раскалённое Fe)</code>
|
||
<p class="eq-note">С холодной водой Fe не реагирует (средний металл). Только с водяным паром при высокой температуре.</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-flask"></i> С кислотами</h3>
|
||
<code class="eq">Fe + 2HCl = FeCl₂ + H₂↑ (разб. → Fe²⁺)</code>
|
||
<code class="eq">Fe + H₂SO₄(разб.) = FeSO₄ + H₂↑</code>
|
||
<code class="eq">Fe + 4HNO₃(конц.)→Fe(NO₃)₃+NO₂↑+2H₂O (нагревание)</code>
|
||
<p class="eq-note">⚠️ Конц. H₂SO₄ и конц. HNO₃ на холоде <em>пассивируют</em> Fe (как и Al)! Именно поэтому HNO₃ хранят в стальных цистернах.</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3><i class="fas fa-exchange-alt"></i> С растворами солей</h3>
|
||
<code class="eq">Fe + CuSO₄ = FeSO₄ + Cu↓ (Fe активнее Cu)</code>
|
||
<code class="eq">Fe + 2AgNO₃ = Fe(NO₃)₂ + 2Ag↓</code>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-layer-group"></i> Оксиды и гидроксиды железа</div>
|
||
|
||
<table class="tbl" style="margin-bottom:16px">
|
||
<thead><tr><th>Формула</th><th>Название</th><th>Цвет</th><th>Характер</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>FeO</strong></td><td>Оксид железа(II)</td><td>Чёрный</td><td>Основной</td></tr>
|
||
<tr><td><strong>Fe₂O₃</strong></td><td>Оксид железа(III)</td><td>Красно-бурый</td><td>Основной (слабо амфотерный)</td></tr>
|
||
<tr><td><strong>Fe₃O₄</strong></td><td>Магнетит (FeO·Fe₂O₃)</td><td>Чёрный</td><td>Смешанный (Fe²⁺ + Fe³⁺)</td></tr>
|
||
<tr><td><strong>Fe(OH)₂</strong></td><td>Гидроксид железа(II)</td><td>Белый → зелёный</td><td>Основной</td></tr>
|
||
<tr><td><strong>Fe(OH)₃</strong></td><td>Гидроксид железа(III)</td><td>Бурый (коричневый)</td><td>Основной</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="formula-grid" style="margin-bottom:16px">
|
||
<div class="fcard">
|
||
<h3>Fe(OH)₂ → Fe(OH)₃ (на воздухе)</h3>
|
||
<div class="main-f" style="font-size:.85rem">4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃</div>
|
||
<p style="font-size:.78rem">Белый осадок Fe(OH)₂ на воздухе <strong>буреет</strong> — окисляется до Fe(OH)₃. Именно это объясняет «ржавление» — ржавчина: Fe₂O₃·nH₂O.</p>
|
||
</div>
|
||
<div class="fcard highlight">
|
||
<h3>Качественные реакции на ионы Fe</h3>
|
||
<div style="font-family:'JetBrains Mono',monospace;font-size:.77rem;line-height:2;background:rgba(180,83,9,.07);border-radius:7px;padding:8px 12px">
|
||
Fe²⁺ + NaOH → Fe(OH)₂↓ (белый)<br>
|
||
Fe³⁺ + NaOH → Fe(OH)₃↓ (бурый)<br>
|
||
Fe³⁺ + KSCN → Fe(SCN)₃ (кроваво-красный!)
|
||
</div>
|
||
<p style="font-size:.74rem;color:var(--muted);margin-top:6px">📌 KSCN (роданид калия) — реактив на Fe³⁺. Окрашивает раствор в кроваво-красный цвет.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-industry"></i> Чугун и сталь</div>
|
||
|
||
<table class="tbl" style="margin-bottom:16px">
|
||
<thead><tr><th>Сплав</th><th>ω(C)</th><th>Свойства</th><th>Применение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Чугун</strong></td><td>2–4 %</td><td>Твёрдый, хрупкий, хорошо отливается</td><td>Трубы, посуда, решётки, блоки двигателей</td></tr>
|
||
<tr><td><strong>Сталь</strong></td><td>< 2 %</td><td>Прочная, пластичная, куётся</td><td>Рельсы, инструменты, арматура, машины</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-row"><i class="fas fa-industry"></i>
|
||
<span><strong>Доменный процесс</strong> (получение чугуна): Fe₂O₃ + 3CO = 2Fe + 3CO₂. Восстановитель — оксид углерода CO, образующийся из кокса: 2C + O₂ → 2CO. Температура > 1500 °C.</span>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-tools"></i> Применение железа</div>
|
||
<div class="use-grid">
|
||
<div class="use-card">
|
||
<div class="use-sym">Fe</div>
|
||
<div class="use-name">Строительство</div>
|
||
<ul><li>Стальная арматура</li><li>Профили и балки</li><li>Кровельный металл</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Fe</div>
|
||
<div class="use-name">Машиностроение</div>
|
||
<ul><li>Двигатели (чугун)</li><li>Корпуса станков</li><li>Трубопроводы</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Fe</div>
|
||
<div class="use-name">Инструменты</div>
|
||
<ul><li>Режущие инструменты</li><li>Пружины (сталь)</li><li>Рельсы, мосты</li></ul>
|
||
</div>
|
||
<div class="use-card">
|
||
<div class="use-sym">Fe</div>
|
||
<div class="use-name">Нержавеющая</div>
|
||
<ul><li>Fe + Cr + Ni</li><li>Посуда, медтехника</li><li>Химическое оборудование</li></ul>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-question-circle"></i> Контрольные вопросы</div>
|
||
<ol class="q-list">
|
||
<li>Почему железо образует два вида катионов Fe²⁺ и Fe³⁺? В каких условиях образуется каждый?</li>
|
||
<li>Какой оксид образуется при горении Fe в кислороде? При реакции с водяным паром?</li>
|
||
<li>Составьте уравнения: Fe + HCl; Fe + Cl₂; Fe + CuSO₄; 3Fe + 4H₂O(пар).</li>
|
||
<li>Как отличить раствор FeCl₂ от раствора FeCl₃? Приведите уравнения качественных реакций.</li>
|
||
<li>Почему Fe и Al пассивируются концентрированными H₂SO₄ и HNO₃ на холоде?</li>
|
||
<li>Какова разница между чугуном и сталью? В чём их применение?</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<!-- ══ §53 — ПОЛУЧЕНИЕ ЖЕЛЕЗА. ПРИМЕНЕНИЕ ЖЕЛЕЗА И ЕГО СПЛАВОВ ══ -->
|
||
<div class="content" id="tab-ref53">
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#78350f,#b45309);border-radius:14px;padding:16px 14px;text-align:center;color:#fff"><div style="font-size:1.3rem;font-weight:900">>2%</div><div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">С в чугуне</div></div>
|
||
<div style="background:linear-gradient(135deg,#b45309,#d97706);border-radius:14px;padding:16px 14px;text-align:center;color:#fff"><div style="font-size:1.3rem;font-weight:900"><2%</div><div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">С в стали</div></div>
|
||
<div style="background:linear-gradient(135deg,#d97706,#f59e0b);border-radius:14px;padding:16px 14px;text-align:center;color:#fff"><div style="font-size:1.3rem;font-weight:900">1500°C</div><div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">t в домне</div></div>
|
||
</div>
|
||
<div class="section-title"><i class="fas fa-industry"></i> Доменный процесс</div>
|
||
<div class="def-box">Домна — вертикальная шахтная печь, работающая непрерывно. Шихта: железная руда (Fe₂O₃, Fe₃O₄) + кокс + известняк.</div>
|
||
<div class="formula-grid" style="margin-bottom:14px">
|
||
<div class="fcard highlight">
|
||
<h3>Горение кокса и образование CO</h3>
|
||
<div class="eq">C + O₂ = CO₂</div>
|
||
<div class="eq">CO₂ + C = 2CO</div>
|
||
</div>
|
||
<div class="fcard highlight">
|
||
<h3>Восстановление железа оксидом углерода</h3>
|
||
<div class="eq">Fe₂O₃ + 3CO = 2Fe + 3CO₂</div>
|
||
<div class="eq">Fe₃O₄ + 4CO = 3Fe + 4CO₂</div>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Роль известняка (флюс)</h3>
|
||
<div class="eq">CaCO₃ = CaO + CO₂</div>
|
||
<div class="eq">CaO + SiO₂ = CaSiO₃ (шлак)</div>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Продукты домны</h3>
|
||
<p style="font-size:.78rem;margin-top:6px"><strong>Чугун</strong> — сплав Fe с C (> 2%). Хрупкий, для литья.<br><strong>Шлак</strong> — CaSiO₃, используют в цементе.</p>
|
||
</div>
|
||
</div>
|
||
<div class="section-title"><i class="fas fa-fire"></i> Получение стали</div>
|
||
<div class="info-row"><i class="fas fa-info-circle"></i> Сталь: сплав Fe с C (< 2%). Получают из чугуна выжиганием лишнего углерода (конвертер, электропечь).</div>
|
||
<div class="section-title"><i class="fas fa-cogs"></i> Виды чугуна и стали</div>
|
||
<table class="tbl" style="margin-bottom:16px">
|
||
<thead><tr><th>Сплав</th><th>Содержание C</th><th>Свойства</th><th>Применение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Белый чугун</td><td>2–4%</td><td>Хрупкий, твёрдый</td><td>Переплавка в сталь</td></tr>
|
||
<tr><td>Серый чугун</td><td>2–4%</td><td>Графит в структуре</td><td>Литьё (трубы, радиаторы)</td></tr>
|
||
<tr><td>Углеродистая сталь</td><td>0,1–2%</td><td>Прочная, пластичная</td><td>Конструкции, рельсы</td></tr>
|
||
<tr><td>Легированная сталь</td><td><2%</td><td>+Cr, Ni, V…</td><td>Нержавеющая, инструменты</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="divider"></div>
|
||
</div>
|
||
|
||
|
||
<!-- ══════════════════════════════════════════
|
||
ЗАДАЧИ — по параграфам
|
||
══════════════════════════════════════════ -->
|
||
<div class="content" id="tab-tasks">
|
||
<!-- Paragraph selector grid -->
|
||
<div class="para-selector">
|
||
<div class="psel-grid">
|
||
|
||
<!-- I. Строение вещества §1–10 -->
|
||
<div class="psel-card psel-ted">
|
||
<div class="psel-card-hdr"><span class="psel-card-title">Строение вещества</span><span class="psel-card-sub">§1–10</span></div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p1" onclick="setParaTab('p1')" title="§1 — Строение атома. Ядро">§1</button>
|
||
<button class="para-pill" data-para="p2" onclick="setParaTab('p2')" title="§2 — Электронные оболочки">§2</button>
|
||
<button class="para-pill" data-para="p3" onclick="setParaTab('p3')" title="§3 — Валентность">§3</button>
|
||
<button class="para-pill" data-para="p4" onclick="setParaTab('p4')" title="§4 — Ковалентная связь">§4</button>
|
||
<button class="para-pill" data-para="p5" onclick="setParaTab('p5')" title="§5 — Кратные связи. Д-А">§5</button>
|
||
<button class="para-pill" data-para="p6" onclick="setParaTab('p6')" title="§6 — Ионная связь">§6</button>
|
||
<button class="para-pill" data-para="p7" onclick="setParaTab('p7')" title="§7 — Степень окисления">§7</button>
|
||
<button class="para-pill" data-para="p8" onclick="setParaTab('p8')" title="§8 — Кристаллические решётки">§8</button>
|
||
<button class="para-pill" data-para="p9" onclick="setParaTab('p9')" title="§9 — Смеси. Разделение">§9</button>
|
||
<button class="para-pill" data-para="p10" onclick="setParaTab('p10')" title="§10 — Дисперсные системы">§10</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- II. Растворы и классы §11–18 -->
|
||
<div class="psel-card psel-ovr">
|
||
<div class="psel-card-hdr"><span class="psel-card-title">Растворы и классы</span><span class="psel-card-sub">§11–18</span></div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p11" onclick="setParaTab('p11')" title="§11 — Растворы. ТЭД">§11</button>
|
||
<button class="para-pill" data-para="p12" onclick="setParaTab('p12')" title="§12 — Ионный обмен">§12</button>
|
||
<button class="para-pill" data-para="p13" onclick="setParaTab('p13')" title="§13 — Гидролиз солей">§13</button>
|
||
<button class="para-pill" data-para="p14" onclick="setParaTab('p14')" title="§14 — Оксиды">§14</button>
|
||
<button class="para-pill" data-para="p15" onclick="setParaTab('p15')" title="§15 — Основания">§15</button>
|
||
<button class="para-pill" data-para="p16" onclick="setParaTab('p16')" title="§16 — Кислоты">§16</button>
|
||
<button class="para-pill" data-para="p17" onclick="setParaTab('p17')" title="§17 — Соли">§17</button>
|
||
<button class="para-pill" data-para="p18" onclick="setParaTab('p18')" title="§18 — Обобщение классов">§18</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- III. ОВР §19–25 -->
|
||
<div class="psel-card psel-csi">
|
||
<div class="psel-card-hdr"><span class="psel-card-title">ОВР</span><span class="psel-card-sub">§19–25</span></div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p19" onclick="setParaTab('p19')" title="§19 — ОВР. Основные понятия">§19</button>
|
||
<button class="para-pill" data-para="p20" onclick="setParaTab('p20')" title="§20 — Степень окисления">§20</button>
|
||
<button class="para-pill" data-para="p21" onclick="setParaTab('p21')" title="§21 — Окислители. Восстановители">§21</button>
|
||
<button class="para-pill" data-para="p22" onclick="setParaTab('p22')" title="§22 — Электронный баланс">§22</button>
|
||
<button class="para-pill" data-para="p23" onclick="setParaTab('p23')" title="§23 — Важнейшие ОВ реакции">§23</button>
|
||
<button class="para-pill" data-para="p24" onclick="setParaTab('p24')" title="§24 — Полуреакции">§24</button>
|
||
<button class="para-pill" data-para="p25" onclick="setParaTab('p25')" title="§25 — Обобщение ОВР">§25</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IV. Неметаллы §26–39 -->
|
||
<div class="psel-card psel-hal">
|
||
<div class="psel-card-hdr"><span class="psel-card-title">Неметаллы</span><span class="psel-card-sub">§26–39</span></div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p26" onclick="setParaTab('p26')" title="§26 — Азот. N₂">§26</button>
|
||
<button class="para-pill" data-para="p27" onclick="setParaTab('p27')" title="§27 — Аммиак">§27</button>
|
||
<button class="para-pill" data-para="p28" onclick="setParaTab('p28')" title="§28 — Соли аммония">§28</button>
|
||
<button class="para-pill" data-para="p29" onclick="setParaTab('p29')" title="§29 — HNO₃">§29</button>
|
||
<button class="para-pill" data-para="p30" onclick="setParaTab('p30')" title="§30 — Нитраты">§30</button>
|
||
<button class="para-pill" data-para="p31" onclick="setParaTab('p31')" title="§31 — Фосфор">§31</button>
|
||
<button class="para-pill" data-para="p32" onclick="setParaTab('p32')" title="§32 — Соединения фосфора">§32</button>
|
||
<button class="para-pill" data-para="p33" onclick="setParaTab('p33')" title="§33 — Минеральные удобрения">§33</button>
|
||
<button class="para-pill" data-para="p34" onclick="setParaTab('p34')" title="§34 — Углерод. Аллотропия">§34</button>
|
||
<button class="para-pill" data-para="p35" onclick="setParaTab('p35')" title="§35 — Оксиды углерода">§35</button>
|
||
<button class="para-pill" data-para="p36" onclick="setParaTab('p36')" title="§36 — Угольная кислота">§36</button>
|
||
<button class="para-pill" data-para="p37" onclick="setParaTab('p37')" title="§37 — Кремний">§37</button>
|
||
<button class="para-pill" data-para="p38" onclick="setParaTab('p38')" title="§38 — SiO₂. Силикаты">§38</button>
|
||
<button class="para-pill" data-para="p39" onclick="setParaTab('p39')" title="§39 — Строительные материалы">§39</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- I. Строение и свойства §40–42 -->
|
||
<div class="psel-card psel-c1">
|
||
<div class="psel-card-hdr">
|
||
<span class="psel-card-title">Строение и свойства</span>
|
||
<span class="psel-card-sub">§40–42</span>
|
||
</div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill active" data-para="p40" onclick="setParaTab('p40')" title="§40 — Строение металлов">§40</button>
|
||
<button class="para-pill" data-para="p41" onclick="setParaTab('p41')" title="§41 — Физические свойства">§41</button>
|
||
<button class="para-pill" data-para="p42" onclick="setParaTab('p42')" title="§42 — Химические реакции">§42</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- II. Al и Fe (обзор) §43–44 -->
|
||
<div class="psel-card psel-c2">
|
||
<div class="psel-card-hdr">
|
||
<span class="psel-card-title">Al · Fe обзор</span>
|
||
<span class="psel-card-sub">§43–44</span>
|
||
</div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p43" onclick="setParaTab('p43')" title="§43 — Алюминий">§43</button>
|
||
<button class="para-pill" data-para="p44" onclick="setParaTab('p44')" title="§44 — Железо">§44</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- III. Электролиз §45 -->
|
||
<div class="psel-card psel-c3">
|
||
<div class="psel-card-hdr">
|
||
<span class="psel-card-title">Электролиз</span>
|
||
<span class="psel-card-sub">§45</span>
|
||
</div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p45" onclick="setParaTab('p45')" title="§45 — Электролиз расплавов">§45</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IV. Mg и Ca §46–48 -->
|
||
<div class="psel-card psel-c4">
|
||
<div class="psel-card-hdr">
|
||
<span class="psel-card-title">Mg и Ca</span>
|
||
<span class="psel-card-sub">§46–48</span>
|
||
</div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p46" onclick="setParaTab('p46')" title="§46 — Mg и ЩЗМ">§46</button>
|
||
<button class="para-pill" data-para="p47" onclick="setParaTab('p47')" title="§47 — Соединения Mg и Ca">§47</button>
|
||
<button class="para-pill" data-para="p48" onclick="setParaTab('p48')" title="§48 — Жёсткость воды">§48</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- V. Алюминий §49–50 -->
|
||
<div class="psel-card psel-c5">
|
||
<div class="psel-card-hdr">
|
||
<span class="psel-card-title">Алюминий</span>
|
||
<span class="psel-card-sub">§49–50</span>
|
||
</div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p49" onclick="setParaTab('p49')" title="§49 — Алюминий. Общая характеристика">§49</button>
|
||
<button class="para-pill" data-para="p50" onclick="setParaTab('p50')" title="§50 — Соединения алюминия">§50</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VI. Железо §51–53 -->
|
||
<div class="psel-card psel-c6">
|
||
<div class="psel-card-hdr">
|
||
<span class="psel-card-title">Железо</span>
|
||
<span class="psel-card-sub">§51–53</span>
|
||
</div>
|
||
<div class="psel-card-pills">
|
||
<button class="para-pill" data-para="p51" onclick="setParaTab('p51')" title="§51 — Железо. Коррозия">§51</button>
|
||
<button class="para-pill" data-para="p52" onclick="setParaTab('p52')" title="§52 — Соединения железа">§52</button>
|
||
<button class="para-pill" data-para="p53" onclick="setParaTab('p53')" title="§53 — Получение железа">§53</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §1–39 ptabs (ТЭД, ОВР, C/Si, Галогены/Неметаллы) -->
|
||
<!-- §1 --><div id="ptab-p1" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp1">0</span></div><div class="chip chip-tot"><span id="curp1">0</span> / <span id="maxp1">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p1')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp1" style="width:0%"></div></div><div class="nav-dots" id="navDotsp1"></div><div id="taskAreap1"></div><div class="feedback" id="fbp1"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp1" onclick="nextTask('p1')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump1"><h2>§1 — готово!</h2><div class="big-score" id="sumScorep1">0/8</div><div class="sum-grade" id="sumGradep1"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p1')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p2')">→ §2</button></div></div></div>
|
||
<!-- §2 --><div id="ptab-p2" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp2">0</span></div><div class="chip chip-tot"><span id="curp2">0</span> / <span id="maxp2">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p2')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp2" style="width:0%"></div></div><div class="nav-dots" id="navDotsp2"></div><div id="taskAreap2"></div><div class="feedback" id="fbp2"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp2" onclick="nextTask('p2')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump2"><h2>§2 — готово!</h2><div class="big-score" id="sumScorep2">0/8</div><div class="sum-grade" id="sumGradep2"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p2')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p3')">→ §3</button></div></div></div>
|
||
<!-- §3 --><div id="ptab-p3" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp3">0</span></div><div class="chip chip-tot"><span id="curp3">0</span> / <span id="maxp3">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p3')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp3" style="width:0%"></div></div><div class="nav-dots" id="navDotsp3"></div><div id="taskAreap3"></div><div class="feedback" id="fbp3"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp3" onclick="nextTask('p3')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump3"><h2>§3 — готово!</h2><div class="big-score" id="sumScorep3">0/8</div><div class="sum-grade" id="sumGradep3"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p3')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p4')">→ §4</button></div></div></div>
|
||
<!-- §4 --><div id="ptab-p4" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp4">0</span></div><div class="chip chip-tot"><span id="curp4">0</span> / <span id="maxp4">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p4')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp4" style="width:0%"></div></div><div class="nav-dots" id="navDotsp4"></div><div id="taskAreap4"></div><div class="feedback" id="fbp4"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp4" onclick="nextTask('p4')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump4"><h2>§4 — готово!</h2><div class="big-score" id="sumScorep4">0/8</div><div class="sum-grade" id="sumGradep4"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p4')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p5')">→ §5</button></div></div></div>
|
||
<!-- §5 --><div id="ptab-p5" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp5">0</span></div><div class="chip chip-tot"><span id="curp5">0</span> / <span id="maxp5">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p5')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp5" style="width:0%"></div></div><div class="nav-dots" id="navDotsp5"></div><div id="taskAreap5"></div><div class="feedback" id="fbp5"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp5" onclick="nextTask('p5')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump5"><h2>§5 — готово!</h2><div class="big-score" id="sumScorep5">0/8</div><div class="sum-grade" id="sumGradep5"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p5')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p6')">→ §6</button></div></div></div>
|
||
<!-- §6 --><div id="ptab-p6" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp6">0</span></div><div class="chip chip-tot"><span id="curp6">0</span> / <span id="maxp6">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p6')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp6" style="width:0%"></div></div><div class="nav-dots" id="navDotsp6"></div><div id="taskAreap6"></div><div class="feedback" id="fbp6"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp6" onclick="nextTask('p6')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump6"><h2>§6 — готово!</h2><div class="big-score" id="sumScorep6">0/8</div><div class="sum-grade" id="sumGradep6"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p6')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p7')">→ §7</button></div></div></div>
|
||
<!-- §7 --><div id="ptab-p7" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp7">0</span></div><div class="chip chip-tot"><span id="curp7">0</span> / <span id="maxp7">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p7')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp7" style="width:0%"></div></div><div class="nav-dots" id="navDotsp7"></div><div id="taskAreap7"></div><div class="feedback" id="fbp7"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp7" onclick="nextTask('p7')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump7"><h2>§7 — готово!</h2><div class="big-score" id="sumScorep7">0/8</div><div class="sum-grade" id="sumGradep7"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p7')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p8')">→ §8</button></div></div></div>
|
||
<!-- §8 --><div id="ptab-p8" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp8">0</span></div><div class="chip chip-tot"><span id="curp8">0</span> / <span id="maxp8">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p8')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp8" style="width:0%"></div></div><div class="nav-dots" id="navDotsp8"></div><div id="taskAreap8"></div><div class="feedback" id="fbp8"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp8" onclick="nextTask('p8')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump8"><h2>§8 — готово!</h2><div class="big-score" id="sumScorep8">0/8</div><div class="sum-grade" id="sumGradep8"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p8')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p9')">→ §9</button></div></div></div>
|
||
<!-- §9 --><div id="ptab-p9" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp9">0</span></div><div class="chip chip-tot"><span id="curp9">0</span> / <span id="maxp9">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p9')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp9" style="width:0%"></div></div><div class="nav-dots" id="navDotsp9"></div><div id="taskAreap9"></div><div class="feedback" id="fbp9"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp9" onclick="nextTask('p9')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump9"><h2>§9 — готово!</h2><div class="big-score" id="sumScorep9">0/8</div><div class="sum-grade" id="sumGradep9"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p9')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p10')">→ §10</button></div></div></div>
|
||
<!-- §10 --><div id="ptab-p10" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp10">0</span></div><div class="chip chip-tot"><span id="curp10">0</span> / <span id="maxp10">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p10')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp10" style="width:0%"></div></div><div class="nav-dots" id="navDotsp10"></div><div id="taskAreap10"></div><div class="feedback" id="fbp10"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp10" onclick="nextTask('p10')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump10"><h2>§10 — готово!</h2><div class="big-score" id="sumScorep10">0/8</div><div class="sum-grade" id="sumGradep10"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p10')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p11')">→ §11</button></div></div></div>
|
||
<!-- §11 --><div id="ptab-p11" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp11">0</span></div><div class="chip chip-tot"><span id="curp11">0</span> / <span id="maxp11">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p11')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp11" style="width:0%"></div></div><div class="nav-dots" id="navDotsp11"></div><div id="taskAreap11"></div><div class="feedback" id="fbp11"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp11" onclick="nextTask('p11')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump11"><h2>§11 — готово!</h2><div class="big-score" id="sumScorep11">0/8</div><div class="sum-grade" id="sumGradep11"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p11')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p12')">→ §12</button></div></div></div>
|
||
<!-- §12 --><div id="ptab-p12" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp12">0</span></div><div class="chip chip-tot"><span id="curp12">0</span> / <span id="maxp12">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p12')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp12" style="width:0%"></div></div><div class="nav-dots" id="navDotsp12"></div><div id="taskAreap12"></div><div class="feedback" id="fbp12"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp12" onclick="nextTask('p12')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump12"><h2>§12 — готово!</h2><div class="big-score" id="sumScorep12">0/8</div><div class="sum-grade" id="sumGradep12"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p12')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p13')">→ §13</button></div></div></div>
|
||
<!-- §13 --><div id="ptab-p13" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp13">0</span></div><div class="chip chip-tot"><span id="curp13">0</span> / <span id="maxp13">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p13')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp13" style="width:0%"></div></div><div class="nav-dots" id="navDotsp13"></div><div id="taskAreap13"></div><div class="feedback" id="fbp13"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp13" onclick="nextTask('p13')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump13"><h2>§13 — готово!</h2><div class="big-score" id="sumScorep13">0/8</div><div class="sum-grade" id="sumGradep13"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p13')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p14')">→ §14</button></div></div></div>
|
||
<!-- §14 --><div id="ptab-p14" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp14">0</span></div><div class="chip chip-tot"><span id="curp14">0</span> / <span id="maxp14">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p14')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp14" style="width:0%"></div></div><div class="nav-dots" id="navDotsp14"></div><div id="taskAreap14"></div><div class="feedback" id="fbp14"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp14" onclick="nextTask('p14')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump14"><h2>§14 — готово!</h2><div class="big-score" id="sumScorep14">0/8</div><div class="sum-grade" id="sumGradep14"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p14')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p15')">→ §15</button></div></div></div>
|
||
<!-- §15 --><div id="ptab-p15" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp15">0</span></div><div class="chip chip-tot"><span id="curp15">0</span> / <span id="maxp15">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p15')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp15" style="width:0%"></div></div><div class="nav-dots" id="navDotsp15"></div><div id="taskAreap15"></div><div class="feedback" id="fbp15"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp15" onclick="nextTask('p15')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump15"><h2>§15 — готово!</h2><div class="big-score" id="sumScorep15">0/8</div><div class="sum-grade" id="sumGradep15"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p15')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p16')">→ §16</button></div></div></div>
|
||
<!-- §16 --><div id="ptab-p16" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp16">0</span></div><div class="chip chip-tot"><span id="curp16">0</span> / <span id="maxp16">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p16')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp16" style="width:0%"></div></div><div class="nav-dots" id="navDotsp16"></div><div id="taskAreap16"></div><div class="feedback" id="fbp16"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp16" onclick="nextTask('p16')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump16"><h2>§16 — готово!</h2><div class="big-score" id="sumScorep16">0/8</div><div class="sum-grade" id="sumGradep16"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p16')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p17')">→ §17</button></div></div></div>
|
||
<!-- §17 --><div id="ptab-p17" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp17">0</span></div><div class="chip chip-tot"><span id="curp17">0</span> / <span id="maxp17">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p17')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp17" style="width:0%"></div></div><div class="nav-dots" id="navDotsp17"></div><div id="taskAreap17"></div><div class="feedback" id="fbp17"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp17" onclick="nextTask('p17')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump17"><h2>§17 — готово!</h2><div class="big-score" id="sumScorep17">0/8</div><div class="sum-grade" id="sumGradep17"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p17')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p18')">→ §18</button></div></div></div>
|
||
<!-- §18 --><div id="ptab-p18" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp18">0</span></div><div class="chip chip-tot"><span id="curp18">0</span> / <span id="maxp18">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p18')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp18" style="width:0%"></div></div><div class="nav-dots" id="navDotsp18"></div><div id="taskAreap18"></div><div class="feedback" id="fbp18"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp18" onclick="nextTask('p18')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump18"><h2>§18 — готово!</h2><div class="big-score" id="sumScorep18">0/8</div><div class="sum-grade" id="sumGradep18"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p18')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p19')">→ §19</button></div></div></div>
|
||
<!-- §19 --><div id="ptab-p19" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp19">0</span></div><div class="chip chip-tot"><span id="curp19">0</span> / <span id="maxp19">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p19')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp19" style="width:0%"></div></div><div class="nav-dots" id="navDotsp19"></div><div id="taskAreap19"></div><div class="feedback" id="fbp19"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp19" onclick="nextTask('p19')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump19"><h2>§19 — готово!</h2><div class="big-score" id="sumScorep19">0/8</div><div class="sum-grade" id="sumGradep19"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p19')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p20')">→ §20</button></div></div></div>
|
||
<!-- §20 --><div id="ptab-p20" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp20">0</span></div><div class="chip chip-tot"><span id="curp20">0</span> / <span id="maxp20">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p20')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp20" style="width:0%"></div></div><div class="nav-dots" id="navDotsp20"></div><div id="taskAreap20"></div><div class="feedback" id="fbp20"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp20" onclick="nextTask('p20')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump20"><h2>§20 — готово!</h2><div class="big-score" id="sumScorep20">0/8</div><div class="sum-grade" id="sumGradep20"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p20')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p21')">→ §21</button></div></div></div>
|
||
<!-- §21 --><div id="ptab-p21" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp21">0</span></div><div class="chip chip-tot"><span id="curp21">0</span> / <span id="maxp21">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p21')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp21" style="width:0%"></div></div><div class="nav-dots" id="navDotsp21"></div><div id="taskAreap21"></div><div class="feedback" id="fbp21"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp21" onclick="nextTask('p21')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump21"><h2>§21 — готово!</h2><div class="big-score" id="sumScorep21">0/8</div><div class="sum-grade" id="sumGradep21"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p21')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p22')">→ §22</button></div></div></div>
|
||
<!-- §22 --><div id="ptab-p22" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp22">0</span></div><div class="chip chip-tot"><span id="curp22">0</span> / <span id="maxp22">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p22')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp22" style="width:0%"></div></div><div class="nav-dots" id="navDotsp22"></div><div id="taskAreap22"></div><div class="feedback" id="fbp22"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp22" onclick="nextTask('p22')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump22"><h2>§22 — готово!</h2><div class="big-score" id="sumScorep22">0/8</div><div class="sum-grade" id="sumGradep22"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p22')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p23')">→ §23</button></div></div></div>
|
||
<!-- §23 --><div id="ptab-p23" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp23">0</span></div><div class="chip chip-tot"><span id="curp23">0</span> / <span id="maxp23">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p23')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp23" style="width:0%"></div></div><div class="nav-dots" id="navDotsp23"></div><div id="taskAreap23"></div><div class="feedback" id="fbp23"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp23" onclick="nextTask('p23')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump23"><h2>§23 — готово!</h2><div class="big-score" id="sumScorep23">0/8</div><div class="sum-grade" id="sumGradep23"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p23')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p24')">→ §24</button></div></div></div>
|
||
<!-- §24 --><div id="ptab-p24" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp24">0</span></div><div class="chip chip-tot"><span id="curp24">0</span> / <span id="maxp24">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p24')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp24" style="width:0%"></div></div><div class="nav-dots" id="navDotsp24"></div><div id="taskAreap24"></div><div class="feedback" id="fbp24"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp24" onclick="nextTask('p24')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump24"><h2>§24 — готово!</h2><div class="big-score" id="sumScorep24">0/8</div><div class="sum-grade" id="sumGradep24"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p24')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p25')">→ §25</button></div></div></div>
|
||
<!-- §25 --><div id="ptab-p25" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp25">0</span></div><div class="chip chip-tot"><span id="curp25">0</span> / <span id="maxp25">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p25')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp25" style="width:0%"></div></div><div class="nav-dots" id="navDotsp25"></div><div id="taskAreap25"></div><div class="feedback" id="fbp25"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp25" onclick="nextTask('p25')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump25"><h2>§25 — готово!</h2><div class="big-score" id="sumScorep25">0/8</div><div class="sum-grade" id="sumGradep25"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p25')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p26')">→ §26</button></div></div></div>
|
||
<!-- §26 --><div id="ptab-p26" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp26">0</span></div><div class="chip chip-tot"><span id="curp26">0</span> / <span id="maxp26">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p26')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp26" style="width:0%"></div></div><div class="nav-dots" id="navDotsp26"></div><div id="taskAreap26"></div><div class="feedback" id="fbp26"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp26" onclick="nextTask('p26')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump26"><h2>§26 — готово!</h2><div class="big-score" id="sumScorep26">0/8</div><div class="sum-grade" id="sumGradep26"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p26')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p27')">→ §27</button></div></div></div>
|
||
<!-- §27 --><div id="ptab-p27" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp27">0</span></div><div class="chip chip-tot"><span id="curp27">0</span> / <span id="maxp27">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p27')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp27" style="width:0%"></div></div><div class="nav-dots" id="navDotsp27"></div><div id="taskAreap27"></div><div class="feedback" id="fbp27"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp27" onclick="nextTask('p27')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump27"><h2>§27 — готово!</h2><div class="big-score" id="sumScorep27">0/8</div><div class="sum-grade" id="sumGradep27"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p27')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p28')">→ §28</button></div></div></div>
|
||
<!-- §28 --><div id="ptab-p28" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp28">0</span></div><div class="chip chip-tot"><span id="curp28">0</span> / <span id="maxp28">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p28')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp28" style="width:0%"></div></div><div class="nav-dots" id="navDotsp28"></div><div id="taskAreap28"></div><div class="feedback" id="fbp28"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp28" onclick="nextTask('p28')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump28"><h2>§28 — готово!</h2><div class="big-score" id="sumScorep28">0/8</div><div class="sum-grade" id="sumGradep28"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p28')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p29')">→ §29</button></div></div></div>
|
||
<!-- §29 --><div id="ptab-p29" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp29">0</span></div><div class="chip chip-tot"><span id="curp29">0</span> / <span id="maxp29">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p29')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp29" style="width:0%"></div></div><div class="nav-dots" id="navDotsp29"></div><div id="taskAreap29"></div><div class="feedback" id="fbp29"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp29" onclick="nextTask('p29')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump29"><h2>§29 — готово!</h2><div class="big-score" id="sumScorep29">0/8</div><div class="sum-grade" id="sumGradep29"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p29')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p30')">→ §30</button></div></div></div>
|
||
<!-- §30 --><div id="ptab-p30" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp30">0</span></div><div class="chip chip-tot"><span id="curp30">0</span> / <span id="maxp30">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p30')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp30" style="width:0%"></div></div><div class="nav-dots" id="navDotsp30"></div><div id="taskAreap30"></div><div class="feedback" id="fbp30"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp30" onclick="nextTask('p30')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump30"><h2>§30 — готово!</h2><div class="big-score" id="sumScorep30">0/8</div><div class="sum-grade" id="sumGradep30"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p30')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p31')">→ §31</button></div></div></div>
|
||
<!-- §31 --><div id="ptab-p31" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp31">0</span></div><div class="chip chip-tot"><span id="curp31">0</span> / <span id="maxp31">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p31')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp31" style="width:0%"></div></div><div class="nav-dots" id="navDotsp31"></div><div id="taskAreap31"></div><div class="feedback" id="fbp31"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp31" onclick="nextTask('p31')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump31"><h2>§31 — готово!</h2><div class="big-score" id="sumScorep31">0/8</div><div class="sum-grade" id="sumGradep31"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p31')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p32')">→ §32</button></div></div></div>
|
||
<!-- §32 --><div id="ptab-p32" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp32">0</span></div><div class="chip chip-tot"><span id="curp32">0</span> / <span id="maxp32">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p32')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp32" style="width:0%"></div></div><div class="nav-dots" id="navDotsp32"></div><div id="taskAreap32"></div><div class="feedback" id="fbp32"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp32" onclick="nextTask('p32')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump32"><h2>§32 — готово!</h2><div class="big-score" id="sumScorep32">0/8</div><div class="sum-grade" id="sumGradep32"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p32')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p33')">→ §33</button></div></div></div>
|
||
<!-- §33 --><div id="ptab-p33" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp33">0</span></div><div class="chip chip-tot"><span id="curp33">0</span> / <span id="maxp33">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p33')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp33" style="width:0%"></div></div><div class="nav-dots" id="navDotsp33"></div><div id="taskAreap33"></div><div class="feedback" id="fbp33"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp33" onclick="nextTask('p33')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump33"><h2>§33 — готово!</h2><div class="big-score" id="sumScorep33">0/8</div><div class="sum-grade" id="sumGradep33"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p33')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p34')">→ §34</button></div></div></div>
|
||
<!-- §34 --><div id="ptab-p34" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp34">0</span></div><div class="chip chip-tot"><span id="curp34">0</span> / <span id="maxp34">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p34')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp34" style="width:0%"></div></div><div class="nav-dots" id="navDotsp34"></div><div id="taskAreap34"></div><div class="feedback" id="fbp34"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp34" onclick="nextTask('p34')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump34"><h2>§34 — готово!</h2><div class="big-score" id="sumScorep34">0/8</div><div class="sum-grade" id="sumGradep34"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p34')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p35')">→ §35</button></div></div></div>
|
||
<!-- §35 --><div id="ptab-p35" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp35">0</span></div><div class="chip chip-tot"><span id="curp35">0</span> / <span id="maxp35">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p35')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp35" style="width:0%"></div></div><div class="nav-dots" id="navDotsp35"></div><div id="taskAreap35"></div><div class="feedback" id="fbp35"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp35" onclick="nextTask('p35')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump35"><h2>§35 — готово!</h2><div class="big-score" id="sumScorep35">0/8</div><div class="sum-grade" id="sumGradep35"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p35')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p36')">→ §36</button></div></div></div>
|
||
<!-- §36 --><div id="ptab-p36" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp36">0</span></div><div class="chip chip-tot"><span id="curp36">0</span> / <span id="maxp36">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p36')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp36" style="width:0%"></div></div><div class="nav-dots" id="navDotsp36"></div><div id="taskAreap36"></div><div class="feedback" id="fbp36"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp36" onclick="nextTask('p36')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump36"><h2>§36 — готово!</h2><div class="big-score" id="sumScorep36">0/8</div><div class="sum-grade" id="sumGradep36"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p36')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p37')">→ §37</button></div></div></div>
|
||
<!-- §37 --><div id="ptab-p37" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp37">0</span></div><div class="chip chip-tot"><span id="curp37">0</span> / <span id="maxp37">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p37')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp37" style="width:0%"></div></div><div class="nav-dots" id="navDotsp37"></div><div id="taskAreap37"></div><div class="feedback" id="fbp37"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp37" onclick="nextTask('p37')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump37"><h2>§37 — готово!</h2><div class="big-score" id="sumScorep37">0/8</div><div class="sum-grade" id="sumGradep37"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p37')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p38')">→ §38</button></div></div></div>
|
||
<!-- §38 --><div id="ptab-p38" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp38">0</span></div><div class="chip chip-tot"><span id="curp38">0</span> / <span id="maxp38">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p38')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp38" style="width:0%"></div></div><div class="nav-dots" id="navDotsp38"></div><div id="taskAreap38"></div><div class="feedback" id="fbp38"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp38" onclick="nextTask('p38')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump38"><h2>§38 — готово!</h2><div class="big-score" id="sumScorep38">0/8</div><div class="sum-grade" id="sumGradep38"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p38')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p39')">→ §39</button></div></div></div>
|
||
<!-- §39 --><div id="ptab-p39" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp39">0</span></div><div class="chip chip-tot"><span id="curp39">0</span> / <span id="maxp39">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p39')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp39" style="width:0%"></div></div><div class="nav-dots" id="navDotsp39"></div><div id="taskAreap39"></div><div class="feedback" id="fbp39"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp39" onclick="nextTask('p39')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump39"><h2>§39 — готово!</h2><div class="big-score" id="sumScorep39">0/8</div><div class="sum-grade" id="sumGradep39"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p39')"><i class="fas fa-rotate-right"></i> Ещё раз</button><button class="btn btn-ghost" onclick="setParaTab('p40')">→ §40</button></div></div></div>
|
||
|
||
<!-- §40 -->
|
||
<div id="ptab-p40">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp40">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp40">0</span> / <span id="maxp40">5</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p40')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp40" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp40"></div>
|
||
<div id="taskAreap40"></div>
|
||
<div class="feedback" id="fbp40"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp40" onclick="nextTask('p40')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump40">
|
||
<h2>§40 — готово!</h2>
|
||
<div class="big-score" id="sumScorep40">0/5</div>
|
||
<div class="sum-grade" id="sumGradep40"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p40')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p41')">→ §41</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §41 -->
|
||
<div id="ptab-p41" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp41">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp41">0</span> / <span id="maxp41">6</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p41')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp41" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp41"></div>
|
||
<div id="taskAreap41"></div>
|
||
<div class="feedback" id="fbp41"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp41" onclick="nextTask('p41')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump41">
|
||
<h2>§41 — готово!</h2>
|
||
<div class="big-score" id="sumScorep41">0/6</div>
|
||
<div class="sum-grade" id="sumGradep41"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p41')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p42')">→ §42</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §42 -->
|
||
<div id="ptab-p42" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp42">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp42">0</span> / <span id="maxp42">7</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p42')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp42" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp42"></div>
|
||
<div id="taskAreap42"></div>
|
||
<div class="feedback" id="fbp42"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp42" onclick="nextTask('p42')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump42">
|
||
<h2>§42 — готово!</h2>
|
||
<div class="big-score" id="sumScorep42">0/7</div>
|
||
<div class="sum-grade" id="sumGradep42"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p42')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p43')">→ §43</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §43 -->
|
||
<div id="ptab-p43" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp43">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp43">0</span> / <span id="maxp43">5</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p43')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp43" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp43"></div>
|
||
<div id="taskAreap43"></div>
|
||
<div class="feedback" id="fbp43"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp43" onclick="nextTask('p43')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump43">
|
||
<h2>§43 — готово!</h2>
|
||
<div class="big-score" id="sumScorep43">0/5</div>
|
||
<div class="sum-grade" id="sumGradep43"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p43')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p44')">→ §44</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §44 -->
|
||
<div id="ptab-p44" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp44">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp44">0</span> / <span id="maxp44">5</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p44')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp44" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp44"></div>
|
||
<div id="taskAreap44"></div>
|
||
<div class="feedback" id="fbp44"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp44" onclick="nextTask('p44')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump44">
|
||
<h2>§44 — готово!</h2>
|
||
<div class="big-score" id="sumScorep44">0/5</div>
|
||
<div class="sum-grade" id="sumGradep44"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p44')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p45')">→ §45</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §45 -->
|
||
<div id="ptab-p45" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp45">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp45">0</span> / <span id="maxp45">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p45')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp45" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp45"></div>
|
||
<div id="taskAreap45"></div>
|
||
<div class="feedback" id="fbp45"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp45" onclick="nextTask('p45')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump45">
|
||
<h2>§45 — готово!</h2>
|
||
<div class="big-score" id="sumScorep45">0/8</div>
|
||
<div class="sum-grade" id="sumGradep45"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p45')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p46')">→ §46</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §46 -->
|
||
<div id="ptab-p46" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp46">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp46">0</span> / <span id="maxp46">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p46')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp46" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp46"></div>
|
||
<div id="taskAreap46"></div>
|
||
<div class="feedback" id="fbp46"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp46" onclick="nextTask('p46')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump46">
|
||
<h2>§46 — готово!</h2>
|
||
<div class="big-score" id="sumScorep46">0/8</div>
|
||
<div class="sum-grade" id="sumGradep46"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p46')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p47')">→ §47</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §47 -->
|
||
<div id="ptab-p47" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp47">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp47">0</span> / <span id="maxp47">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p47')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp47" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp47"></div>
|
||
<div id="taskAreap47"></div>
|
||
<div class="feedback" id="fbp47"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp47" onclick="nextTask('p47')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump47">
|
||
<h2>§47 — готово!</h2>
|
||
<div class="big-score" id="sumScorep47">0/8</div>
|
||
<div class="sum-grade" id="sumGradep47"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p47')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p48')">→ §48</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §48 -->
|
||
<div id="ptab-p48" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp48">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp48">0</span> / <span id="maxp48">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p48')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp48" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp48"></div>
|
||
<div id="taskAreap48"></div>
|
||
<div class="feedback" id="fbp48"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp48" onclick="nextTask('p48')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump48">
|
||
<h2>§48 — готово!</h2>
|
||
<div class="big-score" id="sumScorep48">0/8</div>
|
||
<div class="sum-grade" id="sumGradep48"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p48')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p49')">→ §49</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §49 -->
|
||
<div id="ptab-p49" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp49">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp49">0</span> / <span id="maxp49">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p49')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp49" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp49"></div>
|
||
<div id="taskAreap49"></div>
|
||
<div class="feedback" id="fbp49"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp49" onclick="nextTask('p49')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump49">
|
||
<h2>§49 — готово!</h2>
|
||
<div class="big-score" id="sumScorep49">0/8</div>
|
||
<div class="sum-grade" id="sumGradep49"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p49')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p50')">→ §50</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §50 -->
|
||
<div id="ptab-p50" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp50">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp50">0</span> / <span id="maxp50">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p50')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp50" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp50"></div>
|
||
<div id="taskAreap50"></div>
|
||
<div class="feedback" id="fbp50"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp50" onclick="nextTask('p50')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump50">
|
||
<h2>§50 — готово!</h2>
|
||
<div class="big-score" id="sumScorep50">0/8</div>
|
||
<div class="sum-grade" id="sumGradep50"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p50')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p51')">→ §51</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §51 -->
|
||
<div id="ptab-p51" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp51">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp51">0</span> / <span id="maxp51">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p51')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp51" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp51"></div>
|
||
<div id="taskAreap51"></div>
|
||
<div class="feedback" id="fbp51"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp51" onclick="nextTask('p51')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump51">
|
||
<h2>§51 — готово!</h2>
|
||
<div class="big-score" id="sumScorep51">0/8</div>
|
||
<div class="sum-grade" id="sumGradep51"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p51')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p52')">→ §52</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- §52 -->
|
||
<div id="ptab-p52" style="display:none">
|
||
<div class="score-bar">
|
||
<div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp52">0</span></div>
|
||
<div class="chip chip-tot"><span id="curp52">0</span> / <span id="maxp52">8</span></div>
|
||
<button class="btn btn-ghost" onclick="resetTasks('p52')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button>
|
||
</div>
|
||
<div class="prog-wrap"><div class="prog-fill" id="progp52" style="width:0%"></div></div>
|
||
<div class="nav-dots" id="navDotsp52"></div>
|
||
<div id="taskAreap52"></div>
|
||
<div class="feedback" id="fbp52"></div>
|
||
<div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end">
|
||
<button class="btn btn-next" id="nextBtnp52" onclick="nextTask('p52')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button>
|
||
</div>
|
||
<div class="summary" id="sump52">
|
||
<h2>§52 — готово!</h2>
|
||
<div class="big-score" id="sumScorep52">0/8</div>
|
||
<div class="sum-grade" id="sumGradep52"></div>
|
||
<div class="sum-btns">
|
||
<button class="btn btn-pri" onclick="resetTasks('p52')"><i class="fas fa-rotate-right"></i> Ещё раз</button>
|
||
<button class="btn btn-ghost" onclick="setParaTab('p53')">→ §53</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- §53 ptab (Получение железа — последний параграф) -->
|
||
<!-- §53 --><div id="ptab-p53" style="display:none"><div class="score-bar"><div class="chip chip-ok"><i class="fas fa-check"></i> <span id="okp53">0</span></div><div class="chip chip-tot"><span id="curp53">0</span> / <span id="maxp53">8</span></div><button class="btn btn-ghost" onclick="resetTasks('p53')" style="padding:6px 13px;font-size:.74rem"><i class="fas fa-rotate-right"></i> Заново</button></div><div class="prog-wrap"><div class="prog-fill" id="progp53" style="width:0%"></div></div><div class="nav-dots" id="navDotsp53"></div><div id="taskAreap53"></div><div class="feedback" id="fbp53"></div><div style="display:flex;gap:10px;margin-top:10px;justify-content:flex-end"><button class="btn btn-next" id="nextBtnp53" onclick="nextTask('p53')" style="display:none"><i class="fas fa-arrow-right"></i> Следующее</button></div><div class="summary" id="sump53"><h2>§53 — готово!</h2><div class="big-score" id="sumScorep53">0/8</div><div class="sum-grade" id="sumGradep53"></div><div class="sum-btns"><button class="btn btn-pri" onclick="resetTasks('p53')"><i class="fas fa-rotate-right"></i> Ещё раз</button></div></div></div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§45 — ЭЛЕКТРОЛИЗ РАСПЛАВОВ СОЛЕЙ
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref45">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#0c4a6e,#0369a1);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.8rem;line-height:1">⚡</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Постоянный ток</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">разлагает электролит</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#075985,#0284c7);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.4rem;font-weight:900;line-height:1.2">801 °C</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">t°пл. NaCl</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">бесцветная жидкость</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#0369a1,#0ea5e9);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900;line-height:1.3">ОВР</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">окисление + восстановление</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">одновременно</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-book-open"></i> Что такое электролиз?</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Электролиз</strong> (от русск. <em>электрический</em> + греч. <em>lysis</em> — разложение) — <strong>окислительно-восстановительный процесс</strong>, протекающий на электродах при пропускании <strong>постоянного электрического тока</strong> через расплавы или растворы электролитов.
|
||
</div>
|
||
|
||
<div class="info-row">
|
||
<i class="fas fa-lightbulb"></i>
|
||
<span>Важнейший промышленный способ получения щелочных металлов — разложение их солей электрическим током. Так получают Na, K, Ca, Mg, Al.</span>
|
||
</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Термин</th><th>Описание</th><th>Роль</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong style="color:#1d4ed8">Катод (−)</strong></td><td>Отрицательно заряженный электрод</td><td><strong>Восстановление</strong> · катионы принимают e⁻</td></tr>
|
||
<tr><td><strong style="color:#dc2626">Анод (+)</strong></td><td>Положительно заряженный электрод</td><td><strong>Окисление</strong> · анионы отдают e⁻</td></tr>
|
||
<tr><td><strong>Катионы</strong></td><td>Положительно заряженные ионы</td><td>Движутся к катоду (−)</td></tr>
|
||
<tr><td><strong>Анионы</strong></td><td>Отрицательно заряженные ионы</td><td>Движутся к аноду (+)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> Электролиз расплава NaCl</div>
|
||
|
||
<div class="cell-wrap">
|
||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">
|
||
<h3 style="font-size:.85rem;font-weight:700;color:var(--pri)"><i class="fas fa-project-diagram"></i> Схема электролиза</h3>
|
||
<button class="btn btn-pri" id="cellBtn45" onclick="toggleCell45()" style="padding:7px 14px;font-size:.78rem">
|
||
<span id="cellIcon45"><i class="fas fa-play"></i></span> <span id="cellBtnTxt45">Запустить ток</span>
|
||
</button>
|
||
</div>
|
||
<div style="position:relative;height:220px;background:linear-gradient(180deg,#e0f2fe,#bae6fd 60%,#7dd3fc);border-radius:12px;border:2px solid #bae6fd;overflow:hidden" id="cellDiagram45">
|
||
<div style="position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:.63rem;color:#075985;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.6);padding:2px 8px;border-radius:10px">⚡ Источник постоянного тока</div>
|
||
<div style="position:absolute;left:13%;top:8%;width:26px;height:74%;background:linear-gradient(180deg,#1e3a8a,#3b82f6);border-radius:6px;z-index:3">
|
||
<div style="position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:800;color:#1d4ed8;white-space:nowrap">КАТОД</div>
|
||
<div style="position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:.9rem;font-weight:900;color:#3b82f6">−</div>
|
||
<div style="position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:.62rem;color:#fff;font-weight:700">Na↓</div>
|
||
</div>
|
||
<div style="position:absolute;right:13%;top:8%;width:26px;height:74%;background:linear-gradient(180deg,#7f1d1d,#ef4444);border-radius:6px;z-index:3">
|
||
<div style="position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.62rem;font-weight:800;color:#dc2626;white-space:nowrap">АНОД</div>
|
||
<div style="position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:.9rem;font-weight:900;color:#ef4444">+</div>
|
||
<div style="position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:.62rem;color:#fff;font-weight:700">Cl₂↑</div>
|
||
</div>
|
||
<div style="position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:.65rem;color:#075985;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.5);padding:2px 8px;border-radius:10px">Расплав NaCl · 801 °C · бесцветная жидкость</div>
|
||
<div class="ion ion-na" style="left:38%;top:28%;animation-delay:0s">Na⁺</div>
|
||
<div class="ion ion-na" style="left:50%;top:52%;animation-delay:.5s">Na⁺</div>
|
||
<div class="ion ion-na" style="left:44%;top:65%;animation-delay:1.1s">Na⁺</div>
|
||
<div class="ion ion-na" style="left:57%;top:36%;animation-delay:1.7s">Na⁺</div>
|
||
<div class="ion ion-cl" style="left:55%;top:44%;animation-delay:.25s">Cl⁻</div>
|
||
<div class="ion ion-cl" style="left:42%;top:58%;animation-delay:.8s">Cl⁻</div>
|
||
<div class="ion ion-cl" style="left:60%;top:60%;animation-delay:1.4s">Cl⁻</div>
|
||
<div class="ion ion-cl" style="left:48%;top:30%;animation-delay:1.9s">Cl⁻</div>
|
||
</div>
|
||
<div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:.74rem">
|
||
<div style="display:flex;align-items:center;gap:6px"><div style="width:16px;height:16px;background:#fed7aa;border:2px solid #f97316;border-radius:50%"></div><span><strong>Na⁺</strong> → катод (−)</span></div>
|
||
<div style="display:flex;align-items:center;gap:6px"><div style="width:16px;height:16px;background:#bbf7d0;border:2px solid #10b981;border-radius:50%"></div><span><strong>Cl⁻</strong> → анод (+)</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-card" style="border-left:4px solid #3b82f6">
|
||
<div class="step-row"><div class="step-num" style="background:#1d4ed8">K</div>
|
||
<div style="font-size:.86rem;line-height:1.7"><strong>Катод (−) — восстановление Na⁺:</strong></div></div>
|
||
<span class="eq" style="background:#dbeafe;color:#1e3a8a;margin-top:8px;display:block">Na⁺ + 1e⁻ → Na⁰</span>
|
||
</div>
|
||
<div class="step-card" style="border-left:4px solid #ef4444">
|
||
<div class="step-row"><div class="step-num" style="background:#dc2626">A</div>
|
||
<div style="font-size:.86rem;line-height:1.7"><strong>Анод (+) — окисление Cl⁻:</strong></div></div>
|
||
<span class="eq" style="background:#fee2e2;color:#991b1b;margin-top:8px;display:block">2Cl⁻ − 2e⁻ → Cl₂↑</span>
|
||
</div>
|
||
<div class="step-card" style="border:2px solid var(--pri);background:rgba(180,83,9,.03)">
|
||
<div style="font-size:.86rem;font-weight:700;margin-bottom:8px">Суммарное уравнение:</div>
|
||
<div style="text-align:center">
|
||
<span class="eq" style="font-size:1rem;display:inline-block;border:2px solid var(--pri);padding:10px 20px">2NaCl<sub style="font-size:.7em">(расплав)</sub> →<sup style="font-size:.65em;color:var(--pri)">ток</sup> 2Na + Cl₂↑</span>
|
||
</div>
|
||
<p class="eq-note" style="margin-top:8px;text-align:center">Серебристый металл натрий и зеленовато-жёлтый газ хлор</p>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-exchange-alt"></i> Катод и анод · Другие галогениды</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="el-card cathode-card">
|
||
<div class="el-sign">−</div>
|
||
<div class="el-title">Катод</div>
|
||
<div style="font-size:.82rem;color:var(--muted);margin-bottom:8px">Отрицательно заряженный</div>
|
||
<div class="el-process">Na⁺ + 1e⁻ → Na⁰</div>
|
||
<div style="font-size:.79rem;line-height:1.8;margin-top:8px">
|
||
📌 Процесс: <strong>восстановление</strong><br>
|
||
📌 Роль: <strong>восстановитель</strong><br>
|
||
📌 К нему: <strong>катионы (+)</strong>
|
||
</div>
|
||
</div>
|
||
<div class="el-card anode-card">
|
||
<div class="el-sign">+</div>
|
||
<div class="el-title">Анод</div>
|
||
<div style="font-size:.82rem;color:var(--muted);margin-bottom:8px">Положительно заряженный</div>
|
||
<div class="el-process">2Cl⁻ − 2e⁻ → Cl₂↑</div>
|
||
<div style="font-size:.79rem;line-height:1.8;margin-top:8px">
|
||
📌 Процесс: <strong>окисление</strong><br>
|
||
📌 Роль: <strong>окислитель</strong><br>
|
||
📌 К нему: <strong>анионы (−)</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ovr-card">
|
||
<div style="font-size:.83rem;font-weight:700;margin-bottom:6px;color:var(--pri)">2KBr — бромид калия</div>
|
||
<div class="ovr-eq">2KBr(расплав) →<sup>ток</sup> 2K + Br₂↑</div>
|
||
<div class="ovr-red">Катод: K⁺ + 1e⁻ → K⁰</div>
|
||
<div class="ovr-ox">Анод: 2Br⁻ − 2e⁻ → Br₂↑</div>
|
||
</div>
|
||
<div class="ovr-card">
|
||
<div style="font-size:.83rem;font-weight:700;margin-bottom:6px;color:var(--pri)">CaF₂ — фторид кальция</div>
|
||
<div class="ovr-eq">CaF₂(расплав) →<sup>ток</sup> Ca + F₂↑</div>
|
||
<div class="ovr-red">Катод: Ca²⁺ + 2e⁻ → Ca⁰</div>
|
||
<div class="ovr-ox">Анод: 2F⁻ − 2e⁻ → F₂↑</div>
|
||
</div>
|
||
<div class="ovr-card">
|
||
<div style="font-size:.83rem;font-weight:700;margin-bottom:6px;color:var(--pri)">MgCl₂ — хлорид магния</div>
|
||
<div class="ovr-eq">MgCl₂(расплав) →<sup>ток</sup> Mg + Cl₂↑</div>
|
||
<div class="ovr-red">Катод: Mg²⁺ + 2e⁻ → Mg⁰</div>
|
||
<div class="ovr-ox">Анод: 2Cl⁻ − 2e⁻ → Cl₂↑</div>
|
||
</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Соль (расплав)</th><th>Катод (−)</th><th>Анод (+)</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><code>NaCl</code></td><td>Na металл</td><td>Cl₂↑ газ</td></tr>
|
||
<tr><td><code>KBr</code></td><td>K металл</td><td>Br₂↑</td></tr>
|
||
<tr><td><code>CaF₂</code></td><td>Ca металл</td><td>F₂↑ газ</td></tr>
|
||
<tr><td><code>MgCl₂</code></td><td>Mg металл</td><td>Cl₂↑ газ</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-industry"></i> Применение электролиза</div>
|
||
|
||
<div class="use-grid">
|
||
<div class="use-card"><div class="use-sym">K Na</div><div class="use-name">Щелочные металлы</div><ul><li>Калий, натрий</li><li>из расплавов KCl, NaCl</li></ul></div>
|
||
<div class="use-card"><div class="use-sym">Ca Mg</div><div class="use-name">Щёлочноземельные</div><ul><li>Кальций, магний</li><li>из расплавов солей</li></ul></div>
|
||
<div class="use-card"><div class="use-sym">Al Zn</div><div class="use-name">Другие металлы</div><ul><li>Алюминий, цинк</li><li>из растворов</li></ul></div>
|
||
<div class="use-card"><div class="use-sym">Cl₂</div><div class="use-name">Хлор</div><ul><li>Дезинфекция воды</li><li>хим. промышленность</li></ul></div>
|
||
<div class="use-card"><div class="use-sym">NaOH</div><div class="use-name">Щёлочи</div><ul><li>NaOH, KOH</li><li>бумага, стекло</li></ul></div>
|
||
<div class="use-card"><div class="use-sym">Ni Cr</div><div class="use-name">Гальванотехника</div><ul><li>Никелирование</li><li>Хромирование, золочение</li></ul></div>
|
||
</div>
|
||
|
||
<div class="info-row" style="background:rgba(0,128,0,.05);border-color:rgba(0,128,0,.2)">
|
||
<i class="fas fa-map-marker-alt" style="color:#16a34a"></i>
|
||
<div><strong>Беларусь.</strong> На базе ОАО «Беларуськалий» работает электролизный цех: производит <strong>KOH</strong>, соляную кислоту, <strong>NaClO</strong>.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§46 — МАГНИЙ И ЩЁЛОЧНОЗЕМЕЛЬНЫЕ МЕТАЛЛЫ
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref46">
|
||
|
||
<!-- Три карточки-шапки -->
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#14532d,#16a34a);border-radius:14px;padding:16px 10px;text-align:center;color:#fff">
|
||
<div style="font-size:1.5rem;font-weight:900;line-height:1">IIA</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Группа</div>
|
||
<div style="font-size:.63rem;opacity:.7;margin-top:2px">Mg · Ca · Sr · Ba · Ra</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#064e3b,#059669);border-radius:14px;padding:16px 10px;text-align:center;color:#fff">
|
||
<div style="font-size:1.3rem;font-weight:900;font-family:'JetBrains Mono',monospace;line-height:1.2">ns²</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Внешний уровень</div>
|
||
<div style="font-size:.63rem;opacity:.7;margin-top:2px">2 валентных электрона</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#166534,#22c55e);border-radius:14px;padding:16px 10px;text-align:center;color:#fff">
|
||
<div style="font-size:1rem;font-weight:900;font-family:'JetBrains Mono',monospace;line-height:1.3">Me⁰−2e⁻<br>→Me²⁺</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">С.О. = +2</div>
|
||
<div style="font-size:.63rem;opacity:.7;margin-top:2px">восстановители</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-book-open"></i> Что такое щёлочноземельные металлы?</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Щёлочноземельные металлы</strong> — естественное семейство элементов группы IIA: <strong>Ca, Sr, Ba, Ra</strong>. Они имеют схожее строение атомов и схожие свойства простых веществ.<br>
|
||
<span style="font-size:.82rem;color:var(--muted)">Примечание: магний (Mg) и бериллий (Be) входят в группу IIA, но к щёлочноземельным <em>не относятся</em>.</span>
|
||
</div>
|
||
|
||
<div class="info-row">
|
||
<i class="fas fa-history"></i>
|
||
<span>Оксиды CaO, SrO, BaO реагируют с водой, образуя щёлочи — поэтому и получили название <strong>«щелочные земли»</strong>, а металлы — щёлочноземельные.</span>
|
||
</div>
|
||
|
||
<!-- Группа IIA — наглядный блок -->
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-table"></i> Положение в периодической системе</div>
|
||
|
||
<div class="g2bar">
|
||
<div class="g2cell">
|
||
<div class="g2sym">Mg</div>
|
||
<div class="g2num">№ 12</div>
|
||
<div class="g2cfg">3s²</div>
|
||
<div style="font-size:.58rem;margin-top:3px;color:var(--muted)">r = 0,16 нм</div>
|
||
</div>
|
||
<div class="g2cell">
|
||
<div class="g2sym">Ca</div>
|
||
<div class="g2num">№ 20</div>
|
||
<div class="g2cfg">4s²</div>
|
||
<div style="font-size:.58rem;margin-top:3px;color:var(--muted)">r = 0,197 нм</div>
|
||
</div>
|
||
<div class="g2cell">
|
||
<div class="g2sym">Sr</div>
|
||
<div class="g2num">№ 38</div>
|
||
<div class="g2cfg">5s²</div>
|
||
<div style="font-size:.58rem;margin-top:3px;color:var(--muted)">r = 0,215 нм</div>
|
||
</div>
|
||
<div class="g2cell">
|
||
<div class="g2sym">Ba</div>
|
||
<div class="g2num">№ 56</div>
|
||
<div class="g2cfg">6s²</div>
|
||
<div style="font-size:.58rem;margin-top:3px;color:var(--muted)">r = 0,222 нм</div>
|
||
</div>
|
||
<div class="g2cell">
|
||
<div class="g2sym">Ra</div>
|
||
<div class="g2num">№ 88</div>
|
||
<div class="g2cfg">7s²</div>
|
||
<div style="font-size:.58rem;margin-top:3px;color:var(--muted)">r = 0,235 нм</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="step-card" style="border-left:4px solid #16a34a">
|
||
<div class="step-row">
|
||
<div class="step-num" style="background:#16a34a">→</div>
|
||
<div style="font-size:.86rem;line-height:1.75">
|
||
<strong>В ряду Mg → Ra:</strong> радиус атома <strong>увеличивается</strong>, электроотрицательность <strong>уменьшается</strong>, химическая активность <strong>возрастает</strong>.<br>
|
||
Все атомы теряют <strong>2 электрона</strong>: <code>Me⁰ − 2e⁻ = Me²⁺</code> · единственная степень окисления в соединениях: <strong>+2</strong>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Нахождение в природе -->
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-globe"></i> Нахождение в природе</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Металл</th><th>Доля в земной коре</th><th>Важнейшие минералы</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Mg</strong></td><td>2,4 %</td><td>Доломит MgCO₃·CaCO₃, Mg в морской воде (~1300 мг/дм³)</td></tr>
|
||
<tr><td><strong>Ca</strong></td><td>3,4 %</td><td>Кальцит CaCO₃ (мел, мрамор), Гипс CaSO₄·2H₂O, Фосфорит Ca₃(PO₄)₂</td></tr>
|
||
<tr><td><strong>Sr, Ba</strong></td><td>< 0,01 %</td><td>Редкие — в виде сульфатов и карбонатов</td></tr>
|
||
<tr><td><strong>Ra</strong></td><td>∼10⁻¹² %</td><td>Продукт распада урана; радиоактивен</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-row">
|
||
<i class="fas fa-water"></i>
|
||
<span>Присутствие солей Mg и Ca в природной воде определяет её <strong>жёсткость</strong>. Содержание Ca в морской воде — около 400 мг/дм³.</span>
|
||
</div>
|
||
|
||
<!-- Физические свойства -->
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-ruler"></i> Физические свойства простых веществ</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Свойство</th><th>Mg→Ra</th><th>Примечание</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Цвет</td><td>Серебристо-белые</td><td>Металлический блеск</td></tr>
|
||
<tr><td>Плотность</td><td>↑ возрастает</td><td>Тяжелее щелочных металлов</td></tr>
|
||
<tr><td>Температура плавления</td><td>↓ убывает</td><td>Mg (650 °C) → Ra ниже</td></tr>
|
||
<tr><td>Твёрдость</td><td>Выше, чем у щелочных</td><td>Из-за более прочной металлической связи</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Химические свойства -->
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> Химические свойства</div>
|
||
|
||
<div class="def-box">
|
||
Mg и щёлочноземельные металлы — <strong>химически активные вещества</strong>. В реакциях они проявляют свойства <strong>сильных восстановителей</strong>: всегда отдают 2 электрона.
|
||
</div>
|
||
|
||
<!-- С галогенами -->
|
||
<div class="rxn46">
|
||
<div class="rxn46-lbl"><i class="fas fa-atom"></i> С галогенами (комнатная температура)</div>
|
||
<div class="rxn46-eq">Mg + I₂ = MgI₂</div>
|
||
<div style="font-size:.77rem;color:var(--muted);margin-top:4px">Реакция сопровождается вспышкой. В ступке смешивают Mg и I₂, добавляют каплю воды (катализатор) → бурная реакция с фиолетовыми парами йода.</div>
|
||
</div>
|
||
|
||
<!-- С кислородом -->
|
||
<div class="rxn46">
|
||
<div class="rxn46-lbl"><i class="fas fa-fire"></i> С кислородом (реакция соединения)</div>
|
||
<div class="rxn46-eq">2Mg + O₂ = 2MgO</div>
|
||
<div class="rxn46-eq">2Ca + O₂ = 2CaO</div>
|
||
<div style="font-size:.77rem;color:var(--muted);margin-top:4px">Mg горит ослепительно ярким белым пламенем → белый порошок MgO. Оксидная плёнка на ЩЗМ <strong>непрочная</strong> — не защищает от дальнейшего окисления.</div>
|
||
</div>
|
||
|
||
<!-- С серой -->
|
||
<div class="rxn46">
|
||
<div class="rxn46-lbl"><i class="fas fa-circle"></i> С серой (нагревание)</div>
|
||
<div class="rxn46-eq">Sr + S = SrS</div>
|
||
<div style="font-size:.77rem;color:var(--muted);margin-top:4px">Продукты — сульфиды металлов (соли сероводородной кислоты).</div>
|
||
</div>
|
||
|
||
<!-- С азотом и фосфором -->
|
||
<div class="rxn46">
|
||
<div class="rxn46-lbl"><i class="fas fa-wind"></i> С азотом и фосфором (нагревание)</div>
|
||
<div class="rxn46-eq">3Mg + N₂ →(t) Mg₃N₂ (нитрид, N — с.о. −3)</div>
|
||
<div class="rxn46-eq">3Ca + 2P →(t) Ca₃P₂ (фосфид, P — с.о. −3)</div>
|
||
</div>
|
||
|
||
<!-- С водородом -->
|
||
<div class="rxn46">
|
||
<div class="rxn46-lbl"><i class="fas fa-atom"></i> С водородом (нагревание)</div>
|
||
<div class="rxn46-eq">Ca + H₂ →(t) CaH₂ (гидрид кальция)</div>
|
||
</div>
|
||
|
||
<!-- С водой -->
|
||
<div class="rxn46" style="border-left-color:#3b82f6">
|
||
<div class="rxn46-lbl" style="color:#1d4ed8"><i class="fas fa-tint"></i> С водой</div>
|
||
<div class="rxn46-eq" style="background:rgba(59,130,246,.07)">Mg + 2H₂O →(t) Mg(OH)₂↓ + H₂↑ (только горячая!)</div>
|
||
<div class="rxn46-eq" style="background:rgba(59,130,246,.07)">Ca + 2H₂O = Ca(OH)₂ + H₂↑ (при н.у.)</div>
|
||
<div style="font-size:.77rem;color:var(--muted);margin-top:4px">Ca, Sr, Ba реагируют с холодной водой. Mg — только при нагревании. Продукты: <strong>гидроксид металла (щёлочь) + H₂↑</strong>.</div>
|
||
</div>
|
||
|
||
<!-- С кислотами -->
|
||
<div class="rxn46" style="border-left-color:#ef4444">
|
||
<div class="rxn46-lbl" style="color:#dc2626"><i class="fas fa-vial"></i> С кислотами</div>
|
||
<div class="rxn46-eq" style="background:rgba(239,68,68,.07)">Mg + H₂SO₄(разб.) = MgSO₄ + H₂↑</div>
|
||
<div class="rxn46-eq" style="background:rgba(239,68,68,.07)">Ca + 2HCl = CaCl₂ + H₂↑</div>
|
||
<div style="font-size:.77rem;color:var(--muted);margin-top:4px">Реагируют энергично. Продукты: <strong>соль + H₂↑</strong>.</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-heartbeat"></i> Биологическая роль магния и кальция</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="el-card" style="border:2px solid #16a34a;background:linear-gradient(135deg,rgba(22,163,74,.06),rgba(5,150,105,.04))">
|
||
<div style="font-size:2rem;font-weight:900;color:#16a34a;line-height:1">Mg</div>
|
||
<div style="font-size:.9rem;font-weight:800;margin-bottom:6px;color:#14532d">Магний</div>
|
||
<div style="font-size:.79rem;line-height:1.8">
|
||
🌿 Входит в состав <strong>хлорофилла</strong> — зелёного пигмента растений<br>
|
||
🧬 В организме взрослого человека — около <strong>70 г</strong><br>
|
||
🦴 Сосредоточен в костной и мышечной тканях, эмали зубов
|
||
</div>
|
||
</div>
|
||
<div class="el-card" style="border:2px solid #3b82f6;background:linear-gradient(135deg,rgba(59,130,246,.06),rgba(37,99,235,.04))">
|
||
<div style="font-size:2rem;font-weight:900;color:#3b82f6;line-height:1">Ca</div>
|
||
<div style="font-size:.9rem;font-weight:800;margin-bottom:6px;color:#1d4ed8">Кальций</div>
|
||
<div style="font-size:.79rem;line-height:1.8">
|
||
🦴 В организме взрослого — около <strong>1700 г</strong><br>
|
||
🦷 ∼1680 г — в костях и зубах<br>
|
||
💪 Ионы Ca²⁺ участвуют в <strong>сокращении мышц</strong> и <strong>свёртывании крови</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-box"></i> Хранение</div>
|
||
|
||
<div class="info-row" style="background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.2)">
|
||
<i class="fas fa-exclamation-triangle" style="color:#dc2626"></i>
|
||
<div>Щёлочноземельные металлы хранят <strong>под слоем керосина или минерального масла</strong> — так же, как и щелочные металлы. Это предотвращает окисление на воздухе и реакцию с влагой.</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§47 — ВАЖНЕЙШИЕ СОЕДИНЕНИЯ Mg И Ca
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref47">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#064e3b,#065f46);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.6rem;line-height:1">🧱</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Оксиды</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">MgO · CaO</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#065f46,#059669);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.6rem;line-height:1">💧</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Гидроксиды</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">Mg(OH)₂ · Ca(OH)₂</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#047857,#10b981);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.6rem;line-height:1">🪨</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Соли</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">CaCO₃ · CaSO₄ · …</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Оксиды -->
|
||
<div class="section-title"><i class="fas fa-fire"></i> Оксиды: MgO и CaO</div>
|
||
|
||
<div class="def-box">
|
||
<strong>MgO</strong> — оксид магния («жжёная магнезия»): белый порошок, тугоплавкий (t°пл. = 2852 °C), основный оксид.<br>
|
||
<strong>CaO</strong> — оксид кальция (<em>негашёная известь</em>): белое твёрдое вещество, t°пл. = 2613 °C, основный оксид.
|
||
</div>
|
||
|
||
<div class="info-row"><i class="fas fa-hand-pointer"></i><span>Выбери вещество — увидишь все реакции:</span></div>
|
||
<div class="cmpd47-wrap">
|
||
<button class="cmpd47-btn active" onclick="show47('mgo',this)">MgO</button>
|
||
<button class="cmpd47-btn" onclick="show47('cao',this)">CaO</button>
|
||
</div>
|
||
<div class="cmpd47-rxn show" id="cmpd47-mgo">
|
||
<strong>MgO — оксид магния</strong><br>
|
||
MgO + H₂O → Mg(OH)₂↓  <em>(медленно; Mg(OH)₂ нерастворим)</em><br>
|
||
MgO + 2HCl → MgCl₂ + H₂O<br>
|
||
MgO + H₂SO₄ → MgSO₄ + H₂O<br>
|
||
MgO + CO₂ → MgCO₃<br>
|
||
<span style="font-size:.74rem;color:var(--muted)">Применение: огнеупорные материалы, медицина (антацид)</span>
|
||
</div>
|
||
<div class="cmpd47-rxn" id="cmpd47-cao">
|
||
<strong>CaO — негашёная известь</strong><br>
|
||
CaO + H₂O → Ca(OH)₂ + Q  <em>(бурная! много теплоты — «гашение»)</em><br>
|
||
CaO + 2HCl → CaCl₂ + H₂O<br>
|
||
CaO + H₂SO₄ → CaSO₄ + H₂O<br>
|
||
CaO + CO₂ → CaCO₃  <em>(поглощает CO₂ из воздуха)</em><br>
|
||
CaCO₃ →(t>900°C) CaO + CO₂↑  <em>(обжиг известняка — промышленное получение)</em><br>
|
||
<span style="font-size:.74rem;color:var(--muted)">Применение: строительство, дезинфекция, производство цемента</span>
|
||
</div>
|
||
|
||
<!-- CaO гашение demo -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:var(--sh)">
|
||
<div style="font-weight:800;font-size:.9rem;color:var(--pri);margin-bottom:12px"><i class="fas fa-temperature-high"></i> Гашение CaO — попробуй сам</div>
|
||
<div style="display:flex;gap:18px;align-items:center;flex-wrap:wrap">
|
||
<!-- Visual: beaker + thermometer -->
|
||
<div style="flex-shrink:0;position:relative">
|
||
<div style="width:70px;height:84px;border:3px solid #9ca3af;border-top:none;border-radius:0 0 10px 10px;position:relative;overflow:hidden;background:#fff;box-shadow:inset 0 0 8px rgba(0,0,0,.07)">
|
||
<div id="cao47cnt" style="position:absolute;bottom:0;left:0;right:0;height:62%;background:rgba(229,231,235,.75);border-radius:0 0 8px 8px;transition:background .9s;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:800;color:#6b7280;font-family:'JetBrains Mono',monospace">CaO</div>
|
||
<div id="cao47steam" style="position:absolute;top:0;left:0;right:0;height:100%;overflow:visible;pointer-events:none"></div>
|
||
</div>
|
||
<div style="width:76px;height:6px;border:3px solid #9ca3af;border-bottom:none;border-radius:4px 4px 0 0;background:#fff;margin:0 auto"></div>
|
||
<!-- thermometer -->
|
||
<div style="position:absolute;right:-20px;top:4px;width:9px;height:76px;background:rgba(180,83,9,.1);border-radius:5px;overflow:hidden">
|
||
<div id="cao47therm" style="position:absolute;bottom:0;left:0;right:0;height:20%;background:linear-gradient(to top,#ef4444,#f97316);border-radius:5px;transition:height .9s ease-out"></div>
|
||
</div>
|
||
<div id="cao47tempLbl" style="position:absolute;right:-52px;top:22px;font-size:.62rem;font-weight:700;color:#ef4444;opacity:.2;transition:opacity .5s;white-space:nowrap">~300°C</div>
|
||
</div>
|
||
<!-- Text & button -->
|
||
<div style="flex:1;min-width:130px">
|
||
<div id="cao47status" style="font-size:.84rem;line-height:1.75;color:var(--text);margin-bottom:8px"><strong>CaO</strong> — белый порошок (негашёная известь). Добавим воду...</div>
|
||
<div id="cao47eq" style="font-family:'JetBrains Mono',monospace;font-size:.75rem;background:rgba(180,83,9,.07);border-radius:7px;padding:6px 10px;color:var(--pri);display:none;line-height:1.6;margin-bottom:8px"></div>
|
||
<button class="btn btn-pri" id="cao47btn" onclick="cao47Step()" style="font-size:.8rem;padding:8px 14px"><i class="fas fa-droplet"></i> Добавить воду</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- Гидроксиды -->
|
||
<div class="section-title"><i class="fas fa-flask"></i> Гидроксиды: Mg(OH)₂ и Ca(OH)₂</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Свойство</th><th>Mg(OH)₂</th><th>Ca(OH)₂</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Название</td><td>гидроксид магния</td><td>гашёная известь</td></tr>
|
||
<tr><td>Внешний вид</td><td>белый осадок</td><td>белый порошок</td></tr>
|
||
<tr><td>Растворимость</td><td>нерастворим</td><td>мало растворим (~1,7 г/л)</td></tr>
|
||
<tr><td>Тип основания</td><td>слабое</td><td>сильное (щёлочь)</td></tr>
|
||
<tr><td>Раствор в воде</td><td>«магнезиальное молоко»</td><td>«известковая вода» — щелочная</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="eq-box">
|
||
<h3>Реакции</h3>
|
||
<span class="eq">Mg(OH)₂ + 2HCl = MgCl₂ + 2H₂O</span>
|
||
<span class="eq">Ca(OH)₂ + 2HCl = CaCl₂ + 2H₂O</span>
|
||
<span class="eq">Ca(OH)₂ + CO₂ = CaCO₃↓ + H₂O  (помутнение)</span>
|
||
<span class="eq">Ca(OH)₂ + 2CO₂ = Ca(HCO₃)₂  (избыток CO₂ → прозрачный)</span>
|
||
</div>
|
||
|
||
<div class="info-row"><i class="fas fa-lightbulb"></i>
|
||
<span><strong>Известковая вода</strong> — прозрачный р-р Ca(OH)₂. При пропускании CO₂ мутнеет (CaCO₃↓). При избытке CO₂ снова прозрачная (Ca(HCO₃)₂). Это качественная реакция на CO₂!</span>
|
||
</div>
|
||
|
||
<!-- CO₂ test tube interactive -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:var(--sh)">
|
||
<div style="font-weight:800;font-size:.9rem;color:var(--pri);margin-bottom:12px"><i class="fas fa-flask"></i> Опыт: CO₂ через известковую воду — 3 шага</div>
|
||
<div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap">
|
||
<!-- Tube visual -->
|
||
<div style="flex-shrink:0;text-align:center">
|
||
<div style="position:relative;display:inline-block">
|
||
<div class="co2tube47">
|
||
<div class="co2liq47" id="co2liq47"></div>
|
||
<div class="co2sed47" id="co2sed47"></div>
|
||
</div>
|
||
<div style="width:62px;height:6px;border:3px solid #9ca3af;border-bottom:none;border-radius:4px 4px 0 0;background:#fff;margin:0 auto"></div>
|
||
</div>
|
||
<div id="co2lbl47" style="font-size:.68rem;font-weight:700;color:var(--muted);margin-top:5px;max-width:70px">Ca(OH)₂ (р-р)</div>
|
||
</div>
|
||
<!-- Status -->
|
||
<div style="flex:1;min-width:140px">
|
||
<div id="co2status47" style="font-size:.83rem;line-height:1.8;color:var(--text);margin-bottom:8px"><strong>Прозрачный</strong> раствор Ca(OH)₂ — «известковая вода»</div>
|
||
<div id="co2eq47" style="font-family:'JetBrains Mono',monospace;font-size:.74rem;background:rgba(180,83,9,.07);border-radius:7px;padding:6px 10px;color:var(--pri);display:none;line-height:1.6;margin-bottom:8px"></div>
|
||
<div style="display:flex;gap:7px;flex-wrap:wrap">
|
||
<button class="btn btn-pri" id="co2btn47" onclick="co247Step()" style="font-size:.79rem;padding:7px 14px"><i class="fas fa-wind"></i> Пропустить CO₂</button>
|
||
<button class="btn btn-ghost" onclick="co247Reset()" style="font-size:.79rem;padding:7px 10px"><i class="fas fa-rotate-right"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Step indicators -->
|
||
<div style="display:flex;gap:6px;margin-top:12px;font-size:.7rem">
|
||
<div id="co2step47-0" style="padding:3px 10px;border-radius:20px;background:var(--pri);color:#fff;font-weight:700">① прозрачная</div>
|
||
<div id="co2step47-1" style="padding:3px 10px;border-radius:20px;background:var(--border);color:var(--muted);font-weight:700">② мутная (CaCO₃↓)</div>
|
||
<div id="co2step47-2" style="padding:3px 10px;border-radius:20px;background:var(--border);color:var(--muted);font-weight:700">③ прозрачная (Ca(HCO₃)₂)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- Соли -->
|
||
<div class="section-title"><i class="fas fa-database"></i> Важнейшие соли Ca и Mg</div>
|
||
|
||
<div class="formula-grid" style="grid-template-columns:repeat(auto-fill,minmax(210px,1fr))">
|
||
<div class="fcard">
|
||
<h3>CaCO₃</h3>
|
||
<div class="main-f" style="font-size:.88rem">Карбонат кальция</div>
|
||
<p>Мел, мрамор, кальцит — нерастворим. При нагревании разлагается: CaCO₃ →(t) CaO + CO₂↑</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>CaSO₄·2H₂O</h3>
|
||
<div class="main-f" style="font-size:.88rem">Гипс</div>
|
||
<p>Белый, мало растворим. Применяется в строительстве и медицине (гипсовые повязки)</p>
|
||
</div>
|
||
<div class="fcard highlight">
|
||
<h3>2CaSO₄·H₂O</h3>
|
||
<div class="main-f" style="font-size:.88rem">Алебастр</div>
|
||
<p>Полугидрат сульфата кальция. Получают обжигом гипса при 120–180°C. С водой снова твердеет</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Ca₃(PO₄)₂</h3>
|
||
<div class="main-f" style="font-size:.88rem">Фосфорит</div>
|
||
<p>Нерастворим. Природный минерал, сырьё для фосфорных удобрений</p>
|
||
</div>
|
||
<div class="fcard highlight">
|
||
<h3>Ca(HCO₃)₂</h3>
|
||
<div class="main-f" style="font-size:.88rem">Гидрокарбонат Ca</div>
|
||
<p><strong>Растворим!</strong> Причина временной жёсткости воды. При кипячении разлагается → CaCO₃↓</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>MgSO₄·7H₂O</h3>
|
||
<div class="main-f" style="font-size:.88rem">Горькая соль</div>
|
||
<p>Английская/горькая соль. Применяется в медицине, сельском хозяйстве</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title"><i class="fas fa-arrows-left-right"></i> Гипс ⇌ Алебастр</div>
|
||
|
||
<div class="eq-box">
|
||
<span class="eq">2(CaSO₄·2H₂O) →(120–180°C) 2CaSO₄·H₂O + 3H₂O↑  (гипс → алебастр)</span>
|
||
<span class="eq">2CaSO₄·H₂O + 3H₂O → 2CaSO₄·2H₂O  (алебастр + вода → твердеет)</span>
|
||
<div class="eq-note">M(гипса CaSO₄·2H₂O) = 172 г/моль · M(алебастра 2CaSO₄·H₂O) = 290 г/моль</div>
|
||
</div>
|
||
|
||
<div class="info-row"><i class="fas fa-user-graduate"></i>
|
||
<span>Стоматологи отливают модели зубов из алебастра: смешивают порошок с водой — масса быстро твердеет. Строители штукатурят гипсом — та же реакция! Мрамор, мел и скорлупа яиц — одно вещество: CaCO₃.</span>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- Цвета пламени -->
|
||
<div class="section-title"><i class="fas fa-fire-flame-curved"></i> Цвета пламени</div>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0">
|
||
<div class="f47ca" style="border-radius:14px;padding:18px 10px;text-align:center;background:linear-gradient(135deg,#7f1d1d,#dc2626);border:2px solid rgba(220,38,38,.5);cursor:default">
|
||
<div class="f47ico" style="font-size:2.2rem;line-height:1">🔥</div>
|
||
<div style="font-weight:900;font-size:1.1rem;color:#fff;margin-top:6px">Ca²⁺</div>
|
||
<div style="font-size:.73rem;margin-top:4px;color:#fca5a5;font-weight:700">кирпично-красное</div>
|
||
<div style="font-size:.67rem;margin-top:5px;color:#fecaca;opacity:.85">в CaO, CaCl₂</div>
|
||
</div>
|
||
<div class="f47sr" style="border-radius:14px;padding:18px 10px;text-align:center;background:linear-gradient(135deg,#4c0519,#be123c);border:2px solid rgba(190,18,60,.5);cursor:default">
|
||
<div class="f47ico" style="font-size:2.2rem;line-height:1;animation-delay:.5s">🔥</div>
|
||
<div style="font-weight:900;font-size:1.1rem;color:#fff;margin-top:6px">Sr²⁺</div>
|
||
<div style="font-size:.73rem;margin-top:4px;color:#fda4af;font-weight:700">малиново-красное</div>
|
||
<div style="font-size:.67rem;margin-top:5px;color:#fecdd3;opacity:.85">в SrCl₂, фейерверки</div>
|
||
</div>
|
||
<div class="f47ba" style="border-radius:14px;padding:18px 10px;text-align:center;background:linear-gradient(135deg,#365314,#4d7c0f);border:2px solid rgba(101,163,13,.5);cursor:default">
|
||
<div class="f47ico" style="font-size:2.2rem;line-height:1;animation-delay:1s">🔥</div>
|
||
<div style="font-weight:900;font-size:1.1rem;color:#fff;margin-top:6px">Ba²⁺</div>
|
||
<div style="font-size:.73rem;margin-top:4px;color:#bef264;font-weight:700">жёлто-зелёное</div>
|
||
<div style="font-size:.67rem;margin-top:5px;color:#d9f99d;opacity:.85">в BaCl₂, пиротехника</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0">
|
||
<div style="background:rgba(250,204,21,.12);border:1.5px solid rgba(250,204,21,.4);border-radius:10px;padding:8px 12px;font-size:.77rem">
|
||
<span style="font-weight:800;color:#a16207">Na⁺</span> — <span style="color:#78350f">ярко-жёлтое</span>  <em style="color:var(--muted);font-size:.7rem">(даже следы засвечивают)</em>
|
||
</div>
|
||
<div style="background:rgba(167,139,250,.12);border:1.5px solid rgba(139,92,246,.35);border-radius:10px;padding:8px 12px;font-size:.77rem">
|
||
<span style="font-weight:800;color:#7c3aed">K⁺</span> — <span style="color:#5b21b6">фиолетовое</span>  <em style="color:var(--muted);font-size:.7rem">(видно через синее стекло)</em>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§48 — КАЧЕСТВЕННЫЕ РЕАКЦИИ. ЖЁСТКОСТЬ
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref48">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#1e3a5f,#1d4ed8);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.4rem;font-weight:900;line-height:1">Ca²⁺</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">обнаружение</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">CO₃²⁻ → белый ↓</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#14532d,#15803d);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.4rem;font-weight:900;line-height:1">Ba²⁺</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">обнаружение</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">SO₄²⁻ → белый ↓</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#92400e,#b45309);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.4rem;font-weight:900;line-height:1">H₂O</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Жёсткость</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">Ca²⁺ + Mg²⁺</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Качественные реакции -->
|
||
<div class="section-title"><i class="fas fa-microscope"></i> Обнаружение ионов Ca²⁺ и Ba²⁺</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Ион</th><th>Реагент</th><th>Признак</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Ca²⁺</strong></td>
|
||
<td>CO₃²⁻ (р-р Na₂CO₃)</td>
|
||
<td>белый осадок</td>
|
||
<td style="font-family:'JetBrains Mono',monospace;font-size:.76rem">Ca²⁺ + CO₃²⁻ = CaCO₃↓</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Ba²⁺</strong></td>
|
||
<td>SO₄²⁻ (р-р Na₂SO₄ или H₂SO₄)</td>
|
||
<td>белый осадок, <strong>не раств. в к-тах!</strong></td>
|
||
<td style="font-family:'JetBrains Mono',monospace;font-size:.76rem">Ba²⁺ + SO₄²⁻ = BaSO₄↓</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-row"><i class="fas fa-lightbulb"></i>
|
||
<span><strong>Ключевое отличие BaSO₄ от CaCO₃:</strong> BaSO₄ не растворяется даже в концентрированных кислотах. CaCO₃ при добавлении HCl бурно растворяется (CO₂↑). Это позволяет отличить Ba²⁺ от Ca²⁺.</span>
|
||
</div>
|
||
|
||
<!-- Интерактивный детектор ионов -->
|
||
<div class="section-title"><i class="fas fa-vials"></i> Тренажёр: виртуальная пробирка</div>
|
||
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap">
|
||
<!-- Tube visual -->
|
||
<div style="flex-shrink:0;text-align:center;padding-top:6px">
|
||
<div style="position:relative;display:inline-block">
|
||
<div class="tube48" id="tube48main">
|
||
<div class="tube48-liq" id="tube48liq"></div>
|
||
<div class="tube48-sed" id="tube48sed" style="background:white"></div>
|
||
</div>
|
||
<div style="width:54px;height:5px;border:2.5px solid #9ca3af;border-bottom:none;border-radius:4px 4px 0 0;background:#fff;margin:0 auto"></div>
|
||
</div>
|
||
<div id="tube48lbl" style="font-size:.67rem;color:var(--muted);margin-top:4px;font-weight:700;max-width:58px;line-height:1.35">р-р</div>
|
||
</div>
|
||
<!-- Controls -->
|
||
<div style="flex:1;min-width:180px">
|
||
<div style="font-size:.78rem;font-weight:700;color:var(--muted);margin:0 0 5px">Что в пробирке (ион)?</div>
|
||
<div class="ion48-row" style="margin-bottom:10px">
|
||
<button class="ion48-btn ion-type" onclick="sel48Ion('ca',this)">Ca²⁺</button>
|
||
<button class="ion48-btn ion-type" onclick="sel48Ion('ba',this)">Ba²⁺</button>
|
||
</div>
|
||
<div style="font-size:.78rem;font-weight:700;color:var(--muted);margin:0 0 5px">Добавляем реагент:</div>
|
||
<div class="ion48-row">
|
||
<button class="ion48-btn rgt-type" onclick="sel48Rgt('co3',this)">CO₃²⁻</button>
|
||
<button class="ion48-btn rgt-type" onclick="sel48Rgt('so4',this)">SO₄²⁻</button>
|
||
<button class="ion48-btn rgt-type" onclick="sel48Rgt('oh',this)">OH⁻</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ion48-result" id="ion48Result" style="margin-top:10px"></div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- Жёсткость воды -->
|
||
<div class="section-title"><i class="fas fa-droplet"></i> Жёсткость воды</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Жёсткость воды</strong> — содержание ионов <strong>Ca²⁺</strong> и <strong>Mg²⁺</strong>. Жёсткая вода образует накипь в чайниках, разрушает ткань при стирке, мешает мылиться мылу.
|
||
</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Вид жёсткости</th><th>Причина</th><th>Устранение</th></tr></thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong>Карбонатная (временная)</strong></td>
|
||
<td>Ca(HCO₃)₂, Mg(HCO₃)₂</td>
|
||
<td>кипячение или Ca(OH)₂</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Некарбонатная (постоянная)</strong></td>
|
||
<td>CaSO₄, MgSO₄, CaCl₂, MgCl₂</td>
|
||
<td>Na₂CO₃ или ионный обмен</td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong>Общая</strong></td>
|
||
<td>временная + постоянная</td>
|
||
<td>комплексные методы</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Soft vs hard water visual -->
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0">
|
||
<div class="hw48c">
|
||
<div style="font-weight:800;font-size:.82rem;color:#059669;margin-bottom:8px">💧 Мягкая вода</div>
|
||
<div style="position:relative;height:58px;background:rgba(219,234,254,.3);border-radius:8px;overflow:hidden;margin:5px 0">
|
||
<div class="hw48bub" style="left:12%;bottom:4px;animation-delay:0s"></div>
|
||
<div class="hw48bub" style="left:30%;bottom:4px;animation-delay:.3s;width:12px;height:12px"></div>
|
||
<div class="hw48bub" style="left:52%;bottom:4px;animation-delay:.55s"></div>
|
||
<div class="hw48bub" style="left:70%;bottom:4px;animation-delay:.85s;width:11px;height:11px"></div>
|
||
<div class="hw48bub" style="left:85%;bottom:4px;animation-delay:.2s;width:7px;height:7px"></div>
|
||
<div style="position:absolute;bottom:0;left:0;right:0;height:38%;background:linear-gradient(180deg,rgba(219,234,254,.5),rgba(186,230,253,.65));border-radius:0 0 7px 7px"></div>
|
||
</div>
|
||
<div style="font-size:.72rem;color:var(--muted)">Много пены · нет накипи</div>
|
||
<div style="font-size:.69rem;background:rgba(5,150,105,.08);border-radius:6px;padding:3px 7px;margin-top:5px;color:#065f46">Ca²⁺, Mg²⁺ практически нет</div>
|
||
</div>
|
||
<div class="hw48c">
|
||
<div style="font-weight:800;font-size:.82rem;color:#dc2626;margin-bottom:8px">💧 Жёсткая вода</div>
|
||
<div style="position:relative;height:58px;background:rgba(229,231,235,.35);border-radius:8px;overflow:hidden;margin:5px 0">
|
||
<div class="hw48bub" style="left:40%;bottom:18px;animation-delay:0s;width:7px;height:7px;animation-duration:2.2s;opacity:.5"></div>
|
||
<div style="position:absolute;bottom:0;left:0;right:0">
|
||
<div class="hw48scale" style="height:10px;border-radius:0 0 7px 7px"></div>
|
||
</div>
|
||
<div style="position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:.67rem;font-weight:700;color:#9ca3af;white-space:nowrap">мало пены</div>
|
||
</div>
|
||
<div style="font-size:.72rem;color:var(--muted)">Накипь · плохо мылится</div>
|
||
<div style="font-size:.69rem;background:rgba(239,68,68,.07);border-radius:6px;padding:3px 7px;margin-top:5px;color:#991b1b">Ca(HCO₃)₂ · CaSO₄ · MgCl₂…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Методы устранения жёсткости -->
|
||
<div class="section-title"><i class="fas fa-wrench"></i> Как устранить жёсткость?</div>
|
||
|
||
<div class="info-row" style="margin-bottom:8px"><i class="fas fa-hand-pointer"></i><span>Нажми на метод — увидишь уравнение и пояснение:</span></div>
|
||
|
||
<div class="hard48-row">
|
||
<button class="hard48-btn" onclick="hard48Show('boil',this)">Кипячение</button>
|
||
<button class="hard48-btn" onclick="hard48Show('lime',this)">Известь Ca(OH)₂</button>
|
||
<button class="hard48-btn" onclick="hard48Show('soda',this)">Сода Na₂CO₃</button>
|
||
<button class="hard48-btn" onclick="hard48Show('ion',this)">Ионный обмен</button>
|
||
</div>
|
||
<div class="hard48-res" id="hard48Res"></div>
|
||
|
||
<div class="eq-box" style="margin-top:14px">
|
||
<h3>Все уравнения устранения жёсткости</h3>
|
||
<span class="eq">Ca(HCO₃)₂ →(t) CaCO₃↓ + H₂O + CO₂↑  (кипячение)</span>
|
||
<span class="eq">Ca(HCO₃)₂ + Ca(OH)₂ = 2CaCO₃↓ + 2H₂O  (известь)</span>
|
||
<span class="eq">CaSO₄ + Na₂CO₃ = CaCO₃↓ + Na₂SO₄  (сода)</span>
|
||
<span class="eq">MgSO₄ + Na₂CO₃ = MgCO₃↓ + Na₂SO₄  (сода)</span>
|
||
<span class="eq">MgCl₂ + Na₂CO₃ = MgCO₃↓ + 2NaCl  (сода)</span>
|
||
</div>
|
||
|
||
<div class="info-row"><i class="fas fa-info-circle"></i>
|
||
<span><strong>Почему в чайнике накипь?</strong> Ca(HCO₃)₂ при кипячении разлагается: образуется нерастворимый CaCO₃ — он и оседает на стенках. Это временная жёсткость «уходит» в осадок.</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§49 — АЛЮМИНИЙ. ОБЩАЯ ХАРАКТЕРИСТИКА
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref49">
|
||
|
||
<!-- Hero cards -->
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#374151,#6b7280);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.5rem;font-weight:900;line-height:1">Al</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">алюминий</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">период 3 · IIIA</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#1e3a5f,#2563eb);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.2rem;font-weight:900;line-height:1.2">2,7</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">г/см³</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">лёгкий металл</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#92400e,#b45309);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.2rem;font-weight:900;line-height:1.2">660°C</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">t° плавления</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">серебристо-белый</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Алюминий</strong> — лёгкий серебристо-белый металл, третий по распространённости элемент земной коры (~8%). Электронная конфигурация: [Ne]3s²3p¹, степень окисления <strong>+3</strong>.
|
||
Покрыт тонкой прочной плёнкой <strong>Al₂O₃</strong>, которая защищает металл от дальнейшего окисления.
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-layer-group"></i> Оксидная плёнка и пассивация</div>
|
||
|
||
<!-- Interactive: oxide film demo -->
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;gap:20px;align-items:center;flex-wrap:wrap">
|
||
<div class="al49-wrap">
|
||
<div style="font-size:.7rem;color:var(--muted);text-align:center;margin-bottom:4px">поверхность Al</div>
|
||
<div class="al49-block">
|
||
Al
|
||
<div class="al49-film" id="film49" title="Al₂O₃ плёнка"></div>
|
||
</div>
|
||
<div id="filmLbl49" style="font-size:.67rem;color:#059669;text-align:center;font-weight:700;margin-top:4px">✓ плёнка Al₂O₃</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<div style="font-size:.82rem;margin-bottom:8px" id="filmStat49">
|
||
<strong>Защитная плёнка Al₂O₃</strong> толщиной ~4 нм делает Al стойким к воде и разбавленным кислотам без нагрева.
|
||
</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
||
<button class="btn btn-ghost" style="font-size:.75rem;padding:6px 12px" onclick="filmShow49('protect')">🛡 Защита</button>
|
||
<button class="btn btn-ghost" style="font-size:.75rem;padding:6px 12px" onclick="filmShow49('passive')">⚠️ Пассивация</button>
|
||
<button class="btn btn-ghost" style="font-size:.75rem;padding:6px 12px" onclick="filmShow49('alkali')">🔬 + щёлочь</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> Выбери реагент — посмотри реакцию</div>
|
||
|
||
<div class="rxn49-grid">
|
||
<button class="rxn49-btn" onclick="rxn49('o2',this)">🔥 O₂<br><span style="font-size:.65rem;opacity:.7">сжигание</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('cl2',this)">🟡 Cl₂<br><span style="font-size:.65rem;opacity:.7">галоген</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('hcl',this)">🧪 HCl(разб.)<br><span style="font-size:.65rem;opacity:.7">кислота</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('h2so4',this)">⚗️ H₂SO₄(разб.)<br><span style="font-size:.65rem;opacity:.7">кислота</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('naoh',this)">🔬 NaOH+H₂O<br><span style="font-size:.65rem;opacity:.7">щёлочь</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('cucl2',this)">🔵 CuCl₂<br><span style="font-size:.65rem;opacity:.7">р-р соли</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('fe2o3',this)">⚡ Fe₂O₃<br><span style="font-size:.65rem;opacity:.7">алюминотермия</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('hno3c',this)">🚫 HNO₃(конц.)<br><span style="font-size:.65rem;opacity:.7">пассивация</span></button>
|
||
<button class="rxn49-btn" onclick="rxn49('h2o',this)">💧 H₂O<br><span style="font-size:.65rem;opacity:.7">вода</span></button>
|
||
</div>
|
||
<div class="rxn49-res" id="rxn49Res"></div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-industry"></i> Производство алюминия</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Электролиз расплавленного Al₂O₃</h3>
|
||
<span class="eq">2Al₂O₃ →(ток, 960°C, криолит Na₃AlF₆) 4Al + 3O₂↑</span>
|
||
<p class="eq-note">Криолит Na₃AlF₆ снижает t° плавления Al₂O₃ с 2050°C до ~960°C. Россия — один из крупнейших производителей Al в мире.</p>
|
||
</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Природное соединение</th><th>Формула</th><th>Применение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>Корунд</td><td>Al₂O₃</td><td>Абразив, рубин/сапфир (примеси)</td></tr>
|
||
<tr><td>Боксит</td><td>Al₂O₃·nH₂O</td><td>Главная руда Al</td></tr>
|
||
<tr><td>Полевой шпат</td><td>KAlSi₃O₈</td><td>Силикатная порода</td></tr>
|
||
<tr><td>Глина</td><td>Al₂O₃·2SiO₂·2H₂O</td><td>Кирпич, керамика</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§50 — ОКСИД И ГИДРОКСИД АЛЮМИНИЯ
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref50">
|
||
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#1e3a5f,#2563eb);border-radius:14px;padding:16px 14px;color:#fff">
|
||
<div style="font-size:1rem;font-weight:900">Al₂O₃</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Корунд · амфотерный оксид</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">t°пл = 2050°C · нерастворим в H₂O</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#14532d,#16a34a);border-radius:14px;padding:16px 14px;color:#fff">
|
||
<div style="font-size:1rem;font-weight:900">Al(OH)₃</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">Амфотерный гидроксид</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">белый студенистый осадок</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Амфотерность</strong> — способность проявлять свойства и <em>кислоты</em>, и <em>основания</em>: реагировать как с кислотами, так и со щелочами. Al₂O₃ и Al(OH)₃ — классические амфотерные соединения.
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-vial"></i> Интерактив: Al(OH)₃ — что добавить?</div>
|
||
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh)">
|
||
<div class="amp50-wrap">
|
||
<div class="amp50-tube-area">
|
||
<div style="font-size:.67rem;color:var(--muted);margin-bottom:2px">пробирка</div>
|
||
<div class="amp50-tube">
|
||
<div class="amp50-liq" id="amp50liq"></div>
|
||
<div class="amp50-sed show" id="amp50sed"></div>
|
||
</div>
|
||
<div id="amp50lbl" style="font-size:.67rem;text-align:center;margin-top:4px;font-weight:700;color:var(--muted)">Al(OH)₃↓</div>
|
||
</div>
|
||
<div class="amp50-ctrls">
|
||
<div style="font-size:.79rem;font-weight:700;margin-bottom:8px">Что добавить к Al(OH)₃?</div>
|
||
<button class="amp50-btn acid" onclick="amp50('hcl',this)">🧪 Добавить HCl (кислота)</button>
|
||
<button class="amp50-btn base" onclick="amp50('naoh_conc',this)">🔬 Добавить NaOH(конц.) — сплавление</button>
|
||
<button class="amp50-btn base" onclick="amp50('naoh_aq',this)">💧 Добавить NaOH(р-р)</button>
|
||
<button class="amp50-btn heat" onclick="amp50('heat',this)">🔥 Нагреть (прокалить)</button>
|
||
<button class="amp50-btn" style="font-weight:600;color:var(--muted)" onclick="amp50('reset',this)">↺ Сбросить</button>
|
||
<div class="amp50-stat" id="amp50stat">Осадок Al(OH)₃ — белый, студенистый. Выберите действие.</div>
|
||
<div class="amp50-eq-box" id="amp50eq"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-arrows-alt-h"></i> Al₂O₃ — реакции</div>
|
||
|
||
<div class="formula-grid">
|
||
<div class="fcard highlight">
|
||
<h3>+ кислота</h3>
|
||
<span class="eq">Al₂O₃ + 6HCl = 2AlCl₃ + 3H₂O</span>
|
||
<p style="margin-top:8px">Оксид реагирует с кислотой → соль Al³⁺ и вода</p>
|
||
</div>
|
||
<div class="fcard highlight">
|
||
<h3>+ щёлочь (сплавл.)</h3>
|
||
<span class="eq">Al₂O₃ + 2NaOH = 2NaAlO₂ + H₂O</span>
|
||
<p style="margin-top:8px">При сплавлении → метаалюминат натрия NaAlO₂</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>+ щёлочь (р-р)</h3>
|
||
<span class="eq">Al₂O₃ + 2NaOH + 3H₂O = 2Na[Al(OH)₄]</span>
|
||
<p style="margin-top:8px">При растворении → тетрагидроксоалюминат</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>+ H₂SO₄ · + Ca(OH)₂</h3>
|
||
<span class="eq">Al₂O₃ + 3H₂SO₄ = Al₂(SO₄)₃ + 3H₂O</span>
|
||
<span class="eq" style="margin-top:6px">Al₂O₃ + Ca(OH)₂ = Ca(AlO₂)₂ + H₂O</span>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-exchange-alt"></i> Получение Al(OH)₃ и алюминаты</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Осаждение Al(OH)₃</h3>
|
||
<span class="eq">AlCl₃ + 3NaOH(недост.) = Al(OH)₃↓ + 3NaCl</span>
|
||
<span class="eq" style="margin-top:6px">AlCl₃ + 4NaOH(избыток) = Na[Al(OH)₄] + 3NaCl</span>
|
||
<p class="eq-note">При недостатке NaOH — осадок Al(OH)₃. При избытке — осадок растворяется, образуя тетрагидроксоалюминат.</p>
|
||
</div>
|
||
|
||
<div class="eq-box">
|
||
<h3>Превращения алюминатов</h3>
|
||
<span class="eq">NaAlO₂ + 2H₂O = Na[Al(OH)₄]</span>
|
||
<span class="eq" style="margin-top:6px">K[Al(OH)₄] →(t°) KAlO₂ + 2H₂O</span>
|
||
<p class="eq-note">Метаалюминат ↔ тетрагидроксоалюминат (обратимые переходы при нагреве/растворении)</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§51 — ЖЕЛЕЗО. КОРРОЗИЯ
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref51">
|
||
|
||
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px">
|
||
<div style="background:linear-gradient(135deg,#374151,#4b5563);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.5rem;font-weight:900;line-height:1">Fe</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">железо</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">период 4 · VIIIB</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#1e3a5f,#1d4ed8);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900;line-height:1.2">7,87</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">г/см³</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">тяжёлый металл</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#92400e,#b45309);border-radius:14px;padding:16px 12px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900;line-height:1.2">1535°C</div>
|
||
<div style="font-size:.72rem;font-weight:700;opacity:.85;margin-top:4px">t° плавления</div>
|
||
<div style="font-size:.65rem;opacity:.7;margin-top:2px">с.о. +2 и +3</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="def-box">
|
||
<strong>Железо</strong> — переходный металл, [Ar]3d⁶4s². Самый используемый металл (≈95% всей металлургии). Минералы: <strong>Fe₂O₃</strong> (гематит), <strong>Fe₃O₄</strong> (магнетит), <strong>Fe₂O₃·H₂O</strong> (лимонит), <strong>FeS₂</strong> (пирит).
|
||
<br>С.О. <strong>+2</strong> — с кислотами разб., солями. С.О. <strong>+3</strong> — с Cl₂, O₂ (горение).
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-flask"></i> Fe + Cl₂ против Fe + O₂ — разные продукты!</div>
|
||
|
||
<div class="fe51-cmp">
|
||
<div class="fe51-crd cl2">
|
||
<h4 style="color:#dc2626">🟡 Fe + Cl₂ → FeCl₃ (Fe³⁺!)</h4>
|
||
<span class="eq" style="font-size:.79rem">2Fe + 3Cl₂ = 2FeCl₃</span>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:6px;line-height:1.6">
|
||
Хлор — сильный окислитель. Железо окисляется до <strong>+3</strong>.<br>Коричневый дым FeCl₃.
|
||
</div>
|
||
</div>
|
||
<div class="fe51-crd o2">
|
||
<h4 style="color:#b45309">🔥 Fe + O₂ → Fe₃O₄ (Fe²⁺+Fe³⁺)</h4>
|
||
<span class="eq" style="font-size:.79rem">3Fe + 2O₂ = Fe₃O₄</span>
|
||
<div style="font-size:.75rem;color:var(--muted);margin-top:6px;line-height:1.6">
|
||
Кислород — слабее Cl₂. Горение в O₂ → окалина Fe₃O₄<br>(смесь FeO·Fe₂O₃).
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-bolt"></i> Коррозия — интерактив</div>
|
||
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
|
||
<div class="fe51-demo">
|
||
<div style="font-size:.67rem;color:var(--muted);margin-bottom:4px">Железная балка</div>
|
||
<div class="fe51-bar" id="feBar51">Fe</div>
|
||
<div id="feStat51" style="font-size:.7rem;color:var(--muted);text-align:center;margin-top:4px">исходное состояние</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<div style="font-size:.79rem;font-weight:700;margin-bottom:8px">Условия:</div>
|
||
<div style="display:flex;flex-direction:column;gap:8px">
|
||
<button class="btn btn-ghost" style="font-size:.76rem;text-align:left" onclick="feCorr51('dry')">☀️ Сухой воздух</button>
|
||
<button class="btn btn-ghost" style="font-size:.76rem;text-align:left" onclick="feCorr51('wet')">🌧 Влажный воздух (ржавчина)</button>
|
||
<button class="btn btn-ghost" style="font-size:.76rem;text-align:left" onclick="feCorr51('fire')">🔥 Горение в кислороде</button>
|
||
<button class="btn btn-ghost" style="font-size:.76rem;text-align:left" onclick="feCorr51('reset')">↺ Сбросить</button>
|
||
</div>
|
||
<div id="feEq51" style="font-family:'JetBrains Mono',monospace;font-size:.77rem;padding:7px 10px;background:rgba(180,83,9,.06);border-radius:8px;margin-top:10px;display:none;line-height:1.7"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-table"></i> Все химические реакции железа</div>
|
||
|
||
<table class="tbl">
|
||
<thead><tr><th>Реагент</th><th>Уравнение</th><th>Продукт / с.о. Fe</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>O₂ (горение)</td><td>3Fe + 2O₂ = Fe₃O₄</td><td>окалина · +2,+3</td></tr>
|
||
<tr><td>Cl₂</td><td>2Fe + 3Cl₂ = 2FeCl₃</td><td>FeCl₃ · <strong>+3</strong></td></tr>
|
||
<tr><td>S</td><td>Fe + S = FeS</td><td>FeS · +2</td></tr>
|
||
<tr><td>H₂O (пар)</td><td>3Fe + 4H₂O = Fe₃O₄ + 4H₂↑</td><td>окалина · +2,+3</td></tr>
|
||
<tr><td>HCl (разб.)</td><td>Fe + 2HCl = FeCl₂ + H₂↑</td><td>FeCl₂ · <strong>+2</strong></td></tr>
|
||
<tr><td>H₂SO₄ (разб.)</td><td>Fe + H₂SO₄ = FeSO₄ + H₂↑</td><td>FeSO₄ · <strong>+2</strong></td></tr>
|
||
<tr><td>CuCl₂ (р-р)</td><td>Fe + CuCl₂ = FeCl₂ + Cu↓</td><td>FeCl₂ · +2</td></tr>
|
||
<tr><td>Конц. HNO₃, H₂SO₄</td><td colspan="2">Пассивация — реакции нет (оксидная плёнка)</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="info-row"><i class="fas fa-shield-alt"></i>
|
||
<span><strong>Защита от коррозии:</strong> покрытие краской/лаком, нанесение другого металла (цинкование, хромирование), легирование (нержавеющая сталь), протекторная защита (анод из Zn).</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════
|
||
§52 — ВАЖНЕЙШИЕ СОЕДИНЕНИЯ ЖЕЛЕЗА
|
||
════════════════════════════════════════ -->
|
||
<div class="content" id="tab-ref52">
|
||
|
||
<!-- Oxide cards -->
|
||
<div class="fe52-oxides">
|
||
<div style="background:linear-gradient(135deg,#1f2937,#374151);border-radius:14px;padding:14px 10px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900">FeO</div>
|
||
<div style="font-size:.68rem;opacity:.85;margin-top:3px">чёрный · Fe²⁺</div>
|
||
<div style="font-size:.63rem;opacity:.65;margin-top:2px">восстановитель!</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#7c2d12,#b45309);border-radius:14px;padding:14px 10px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900">Fe₂O₃</div>
|
||
<div style="font-size:.68rem;opacity:.85;margin-top:3px">красно-бурый · Fe³⁺</div>
|
||
<div style="font-size:.63rem;opacity:.65;margin-top:2px">главная руда</div>
|
||
</div>
|
||
<div style="background:linear-gradient(135deg,#1e3a5f,#1d4ed8);border-radius:14px;padding:14px 10px;text-align:center;color:#fff">
|
||
<div style="font-size:1.1rem;font-weight:900">Fe₃O₄</div>
|
||
<div style="font-size:.68rem;opacity:.85;margin-top:3px">чёрный · FeO·Fe₂O₃</div>
|
||
<div style="font-size:.63rem;opacity:.65;margin-top:2px">магнит · окалина</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="formula-grid" style="margin-bottom:16px">
|
||
<div class="fcard">
|
||
<h3>FeO + кислота</h3>
|
||
<span class="eq">FeO + 2HCl = FeCl₂ + H₂O</span>
|
||
<span class="eq" style="margin-top:5px">6FeO + O₂ = 2Fe₃O₄ ⚡</span>
|
||
<p style="margin-top:6px">FeO — восстановитель, окисляется до Fe₃O₄ на воздухе</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Fe₂O₃ реакции</h3>
|
||
<span class="eq">Fe₂O₃ + 6HNO₃ = 2Fe(NO₃)₃ + 3H₂O</span>
|
||
<span class="eq" style="margin-top:5px">Fe₂O₃ + 2Al = Al₂O₃ + 2Fe 🔥</span>
|
||
<p style="margin-top:6px">Термит: алюминотермия → получение Fe</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Fe₃O₄ + HCl</h3>
|
||
<span class="eq">Fe₃O₄ + 8HCl =</span>
|
||
<span class="eq">FeCl₂ + 2FeCl₃ + 4H₂O</span>
|
||
<p style="margin-top:6px">Даёт сразу Fe²⁺ и Fe³⁺</p>
|
||
</div>
|
||
<div class="fcard">
|
||
<h3>Fe(OH)₂ реакции</h3>
|
||
<span class="eq">Fe(OH)₂ + 2HCl = FeCl₂ + 2H₂O</span>
|
||
<span class="eq" style="margin-top:5px">4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃</span>
|
||
<p style="margin-top:6px">Буреет на воздухе: Fe²⁺ → Fe³⁺</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-eye-dropper"></i> Fe(OH)₂ на воздухе — цветовая анимация</div>
|
||
|
||
<div style="background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--sh)">
|
||
<div style="display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap">
|
||
<div class="feoh52-demo">
|
||
<div style="font-size:.67rem;color:var(--muted);margin-bottom:4px">пробирка</div>
|
||
<div class="feoh52-tube">
|
||
<div class="feoh52-liq" id="feohLiq52"></div>
|
||
</div>
|
||
<div id="feohLbl52" style="font-size:.67rem;text-align:center;margin-top:5px;font-weight:700;color:var(--muted)">Fe(OH)₂ — белый</div>
|
||
</div>
|
||
<div style="flex:1;min-width:180px">
|
||
<div style="font-size:.79rem;font-weight:700;margin-bottom:8px">Наблюдай изменение:</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px">
|
||
<button class="btn btn-ghost" style="font-size:.75rem" onclick="feoh52Step('white')">① Начало</button>
|
||
<button class="btn btn-ghost" style="font-size:.75rem" onclick="feoh52Step('grey')">② + воздух</button>
|
||
<button class="btn btn-ghost" style="font-size:.75rem" onclick="feoh52Step('brown')">③ → ржавчина</button>
|
||
</div>
|
||
<div id="feohStat52" style="font-size:.8rem;line-height:1.65">
|
||
Только что осадил Fe(OH)₂: белый/серо-зелёный осадок.
|
||
</div>
|
||
<div id="feohEq52" style="font-family:'JetBrains Mono',monospace;font-size:.76rem;padding:6px 10px;background:rgba(180,83,9,.06);border-radius:8px;margin-top:8px;display:none;line-height:1.6"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
<div class="section-title"><i class="fas fa-search"></i> Качественные реакции на Fe²⁺ и Fe³⁺</div>
|
||
|
||
<div class="qual52-grid">
|
||
<!-- Fe²⁺ + NaOH -->
|
||
<div class="qual52-card">
|
||
<h4>Fe²⁺ + NaOH</h4>
|
||
<div class="qual52-tube-v">
|
||
<div class="qual52-liq52" id="ql52a-liq" style="background:rgba(219,234,254,.5)"></div>
|
||
<div class="qual52-sed52" id="ql52a-sed" style="background:rgba(156,163,175,.85)"></div>
|
||
</div>
|
||
<button class="qual52-rbtn" onclick="qual52('a',this)">🔬 Добавить NaOH</button>
|
||
<div id="ql52a-res" style="font-size:.71rem;color:var(--muted);margin-top:6px;min-height:30px;line-height:1.5"></div>
|
||
</div>
|
||
<!-- Fe³⁺ + NaOH -->
|
||
<div class="qual52-card">
|
||
<h4>Fe³⁺ + NaOH</h4>
|
||
<div class="qual52-tube-v">
|
||
<div class="qual52-liq52" id="ql52b-liq" style="background:rgba(254,243,199,.5)"></div>
|
||
<div class="qual52-sed52" id="ql52b-sed" style="background:rgba(180,83,9,.5)"></div>
|
||
</div>
|
||
<button class="qual52-rbtn" onclick="qual52('b',this)">🔬 Добавить NaOH</button>
|
||
<div id="ql52b-res" style="font-size:.71rem;color:var(--muted);margin-top:6px;min-height:30px;line-height:1.5"></div>
|
||
</div>
|
||
<!-- Fe³⁺ + KSCN -->
|
||
<div class="qual52-card">
|
||
<h4>Fe³⁺ + KSCN</h4>
|
||
<div class="qual52-tube-v">
|
||
<div class="qual52-liq52" id="ql52c-liq" style="background:rgba(254,243,199,.5)"></div>
|
||
<div class="qual52-sed52" id="ql52c-sed"></div>
|
||
</div>
|
||
<button class="qual52-rbtn" onclick="qual52('c',this)">🩸 Добавить KSCN</button>
|
||
<div id="ql52c-res" style="font-size:.71rem;color:var(--muted);margin-top:6px;min-height:30px;line-height:1.5"></div>
|
||
</div>
|
||
<!-- Fe(OH)₂ → Fe(OH)₃ получение -->
|
||
<div class="qual52-card">
|
||
<h4>Fe(OH)₃ получение</h4>
|
||
<div class="qual52-tube-v">
|
||
<div class="qual52-liq52" id="ql52d-liq" style="background:rgba(254,243,199,.5)"></div>
|
||
<div class="qual52-sed52" id="ql52d-sed" style="background:rgba(180,83,9,.5)"></div>
|
||
</div>
|
||
<button class="qual52-rbtn" onclick="qual52('d',this)">🔬 FeCl₃ + KOH</button>
|
||
<div id="ql52d-res" style="font-size:.71rem;color:var(--muted);margin-top:6px;min-height:30px;line-height:1.5"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="tbl" style="margin-top:16px">
|
||
<thead><tr><th>Ион</th><th>Реагент</th><th>Наблюдение</th><th>Уравнение</th></tr></thead>
|
||
<tbody>
|
||
<tr><td><strong>Fe²⁺</strong></td><td>NaOH</td><td><span style="color:#6b7280">серо-зелёный</span> ↓</td><td>Fe²⁺ + 2OH⁻ = Fe(OH)₂↓</td></tr>
|
||
<tr><td><strong>Fe³⁺</strong></td><td>NaOH</td><td><span style="color:#92400e">красно-бурый</span> ↓</td><td>Fe³⁺ + 3OH⁻ = Fe(OH)₃↓</td></tr>
|
||
<tr><td><strong>Fe³⁺</strong></td><td>KSCN</td><td><span style="color:#dc2626">кроваво-красный</span> р-р</td><td>Fe³⁺ + 3SCN⁻ = Fe(SCN)₃</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// ══════════════════════════════════════════
|
||
// SVG ICONS
|
||
// ══════════════════════════════════════════
|
||
const ICONS={
|
||
moon:'<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/>',
|
||
sun:'<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>',
|
||
flask:'<path d="M4.5 3h15M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3M10 12h4"/>',
|
||
check:'<path d="M20 6 9 17l-5-5"/>',
|
||
'arrow-right':'<path d="M5 12h14M12 5l7 7-7 7"/>',
|
||
'rotate-right':'<path d="M21 12a9 9 0 1 1-.5-3M21 3v6h-6"/>',
|
||
bolt:'<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="currentColor" stroke="none"/>',
|
||
fire:'<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
|
||
'fire-flame-curved':'<path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>',
|
||
atom:'<circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/>',
|
||
magnet:'<path d="M4 8V6a8 8 0 0 1 16 0v2M4 8h4v6a4 4 0 0 0 8 0V8h4"/>',
|
||
mountain:'<path d="m8 3 4 8 5-5 5 13H2L8 3z"/>',
|
||
industry:'<rect x="2" y="10" width="16" height="10" rx="1"/><path d="M18 10V4M2 10l6-4v4l6-4v4M22 20H2"/>',
|
||
'question-circle':'<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/>',
|
||
'temperature-high':'<path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>',
|
||
'layer-group':'<path d="M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>',
|
||
star:'<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor" stroke="none"/>',
|
||
tools:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>',
|
||
'sort-amount-up':'<path d="M3 6h18M3 12h12M3 18h6M17 14l3-3 3 3M20 11v9"/>',
|
||
brain:'<path d="M9.5 2A2.5 2.5 0 0 0 7 4.5C4.5 4.5 3 6.5 3 8.5a4 4 0 0 0 2 3.5V22h14V12a4 4 0 0 0 2-3.5C21 6.5 19.5 4.5 17 4.5A2.5 2.5 0 0 0 14.5 2c-1.15 0-2.13.65-2.5 1.6C11.63 2.65 10.65 2 9.5 2z"/><path d="M12 4v18"/>',
|
||
'hand-pointer':'<path d="M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8l-1.5-1.5A2 2 0 0 0 2 14.5V15a9 9 0 0 0 18 0v-5a2 2 0 0 0-4 0z"/>',
|
||
'arrows-alt-h':'<path d="M8 4 4 8l4 4M16 4l4 4-4 4M3 8h18"/>',
|
||
'arrows-left-right':'<path d="M8 4 4 8l4 4M16 4l4 4-4 4M3 8h18"/>',
|
||
tint:'<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>',
|
||
droplet:'<path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>',
|
||
'exchange-alt':'<path d="M7 16V4m0 0 3 3M7 4 4 7M17 8v12m0 0-3-3m3 3 3-3"/>',
|
||
'book-open':'<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2zM22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
|
||
lightbulb:'<path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4"/>',
|
||
'project-diagram':'<rect x="5" y="3" width="4" height="4" rx="1"/><rect x="15" y="17" width="4" height="4" rx="1"/><circle cx="12" cy="12" r="2"/><path d="M7 7v3l5 2M17 17v-3l-5-2"/>',
|
||
play:'<polygon points="5 3 19 12 5 21 5 3" fill="currentColor" stroke="none"/>',
|
||
stop:'<rect x="5" y="5" width="14" height="14" rx="2" fill="currentColor" stroke="none"/>',
|
||
'map-marker-alt':'<path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
|
||
history:'<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5M12 7v5l4 2"/>',
|
||
table:'<path d="M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18"/>',
|
||
'table-cells':'<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
|
||
globe:'<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
|
||
water:'<path d="M2 12c2-4 6-4 8 0s6 4 8 0M2 18c2-4 6-4 8 0s6 4 8 0M2 6c2-4 6-4 8 0s6 4 8 0"/>',
|
||
ruler:'<path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM8 7v2M12 7v4M16 7v2"/>',
|
||
circle:'<circle cx="12" cy="12" r="10" fill="currentColor" stroke="none"/>',
|
||
wind:'<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2M9.6 4.6A2 2 0 1 1 11 8H2M12.6 19.4A2 2 0 1 0 14 16H2"/>',
|
||
vial:'<path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5V2M8.5 2h7M6 10h12"/>',
|
||
vials:'<path d="M14.5 2v17.5c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5V2M8.5 2h7M6 10h12M18 2v14c0 1.1-.9 2-2 2"/>',
|
||
heartbeat:'<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
|
||
box:'<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.27 6.96 8.73 5.05 8.73-5.05M12 22.08V12"/>',
|
||
'exclamation-triangle':'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"/>',
|
||
'user-graduate':'<path d="M22 10v6M2 10l10-5 10 5-10 5zM6 12v5c3 3 9 3 12 0v-5"/>',
|
||
microscope:'<path d="M9 3v10M7 5h4M5 13h14M8 21h8M12 13v8"/><circle cx="12" cy="8" r="2"/>',
|
||
wrench:'<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>',
|
||
database:'<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>',
|
||
'shield-alt':'<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
|
||
'eye-dropper':'<path d="m2 22 1-1h3l9-9M3 21v-3l9-9"/><path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8"/>',
|
||
search:'<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
|
||
'info-circle':'<circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>',
|
||
};
|
||
function ico(n){
|
||
const d=ICONS[n]||'<circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/>';
|
||
return `<svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${d}</svg>`;
|
||
}
|
||
document.querySelectorAll('i[class*="fa-"]').forEach(el=>{
|
||
const n=[...el.classList].find(c=>c.startsWith('fa-'))?.slice(3);
|
||
if(n){const t=document.createElement('span');t.innerHTML=ico(n);if(t.firstChild)el.replaceWith(t.firstChild);}
|
||
});
|
||
|
||
// ══════════════════════════════════════════
|
||
// ПУЛЫ ЗАДАЧ ПО ПАРАГРАФАМ
|
||
// ══════════════════════════════════════════
|
||
|
||
const TASKS_P1 = [
|
||
{q:"Из чего состоит ядро атома?",opts:["Из протонов и электронов","Из протонов и нейтронов","Из нейтронов и электронов","Из нейтрино"],a:1,ex:"Ядро состоит из протонов (p⁺) и нейтронов (n⁰). Электроны — снаружи ядра."},
|
||
{q:"Что определяет порядковый номер элемента Z?",opts:["Число нейтронов","Массовое число","Число протонов в ядре","Число электронных уровней"],a:2,ex:"Z = число протонов = число электронов у нейтрального атома. Z — «паспорт» элемента."},
|
||
{q:"Что такое изотопы?",opts:["Атомы разных элементов с одинаковой массой","Атомы одного элемента с разным числом нейтронов","Атомы с одинаковым числом нейтронов","Ионы одного элемента"],a:1,ex:"Изотопы: одинаковое Z, разное N → разное A. Пример: ¹H, ²H (дейтерий), ³H (тритий)."},
|
||
{q:"Массовое число A = ?",opts:["Z + e","p + e","p + n","n − p"],a:2,ex:"A = p + n (число протонов + число нейтронов). Записывается: ²⁶Fe — A=56, Z=26."},
|
||
{q:"У атома ³²S сколько нейтронов?",opts:["16","32","48","8"],a:0,ex:"Z(S)=16, A=32. N = A − Z = 32 − 16 = 16 нейтронов."},
|
||
{q:"Атом хлора ³⁵Cl: сколько протонов?",hint:"Z(Cl) — порядковый номер Cl в ПСХЭ",unit:"протонов",a:17,ex:"Хлор Z=17. Протонов = 17."},
|
||
{q:"У атома ⁵⁶Fe сколько нейтронов?",hint:"N = A − Z; Z(Fe)=26",unit:"нейтронов",a:30,ex:"N = 56 − 26 = 30 нейтронов."},
|
||
{q:"Два изотопа: ¹²C и ¹⁴C. Чем они отличаются?",opts:["Числом протонов","Числом электронов","Числом нейтронов","Химическими свойствами"],a:2,ex:"У ¹²C — 6 нейтронов, у ¹⁴C — 8 нейтронов. Протоны (6) и электроны — одинаковые."}
|
||
];
|
||
|
||
const TASKS_P2 = [
|
||
{q:"Сколько электронов максимально на уровне n?",opts:["2n","2n²","n²","n+2"],a:1,ex:"Максимальное число электронов на n-м уровне: 2n². Уровень 1: 2, уровень 2: 8, уровень 3: 18."},
|
||
{q:"Какие подуровни есть на 3-м энергетическом уровне?",opts:["Только s","s и p","s, p и d","s, p, d и f"],a:2,ex:"Уровень 3 содержит подуровни 3s, 3p, 3d. Подуровень f появляется с 4-го уровня."},
|
||
{q:"Принцип Паули гласит:",opts:["Электроны занимают свободные орбитали","На одной орбитали не более 2 электронов с противоположными спинами","Электроны заполняют уровни снизу вверх","Сначала заполняются все орбитали одного подуровня"],a:1,ex:"Принцип Паули: на каждой орбитали не более 2 электронов с антипараллельными спинами."},
|
||
{q:"Правило Хунда:",opts:["Сначала заполняется s-подуровень","Электроны попарно заполняют орбитали","Электроны сначала занимают все свободные орбитали подуровня по одному, затем спариваются","Число электронов = число протонов"],a:2,ex:"Правило Хунда: суммарный спин максимален — сначала по одному на каждую орбиталь."},
|
||
{q:"Электронная конфигурация Na (Z=11)?",opts:["1s²2s²2p⁶3s¹","1s²2s²2p⁵","1s²2s²2p⁶3p¹","1s²2s²3s¹"],a:0,ex:"Na: 1s²2s²2p⁶3s¹. На последнем уровне 1 электрон — типичный щелочной металл."},
|
||
{q:"Сколько электронов на внешнем уровне у Cl (Z=17)?",hint:"Конфигурация Cl: 1s²2s²2p⁶3s²3p⁵",unit:"электронов",a:7,ex:"Cl: …3s²3p⁵ → 2+5=7 электронов на 3-м уровне."},
|
||
{q:"Сколько неспаренных электронов у азота N в основном состоянии?",hint:"N: 1s²2s²2p³ — три p-орбитали с 3 электронами",unit:"электронов",a:3,ex:"N: 2p³ — три орбитали заняты по одному (правило Хунда) → 3 неспаренных."},
|
||
{q:"У какого атома электронная конфигурация внешнего уровня …3s²3p⁴?",opts:["S","Si","P","Cl"],a:0,ex:"S (Z=16): 1s²2s²2p⁶3s²3p⁴. Шесть электронов на внешнем уровне — характерно для серы."}
|
||
];
|
||
|
||
const TASKS_P3 = [
|
||
{q:"Что такое валентность атома?",opts:["Число нейтронов","Число связей, которые атом образует","Степень окисления","Заряд иона"],a:1,ex:"Валентность — число ковалентных связей, которые атом образует с другими атомами."},
|
||
{q:"Чем определяется валентность в основном состоянии?",opts:["Числом протонов","Числом неспаренных электронов","Числом уровней","Массовым числом"],a:1,ex:"В основном состоянии валентность = число неспаренных электронов. Для N: 3 неспаренных → валентность III."},
|
||
{q:"Максимальная валентность серы S (возбуждённое состояние)?",opts:["II","IV","VI","VIII"],a:2,ex:"S в возбуждённом состоянии: 3s¹3p³3d² → 6 неспаренных электронов → валентность VI."},
|
||
{q:"Почему азот N не проявляет валентность V ковалентными связями?",opts:["Нет d-орбиталей на 2-м уровне","Нет электронов","Слишком большой атом","Слабый окислитель"],a:0,ex:"На 2-м уровне нет d-орбиталей, поэтому N не может возбудиться до 5 неспаренных. Максимум — IV (через д-а механизм)."},
|
||
{q:"Валентность фосфора P в молекуле PCl₅?",opts:["I","III","V","VII"],a:2,ex:"P: 3s¹3p³3d¹ (возбуждённое) → 5 неспаренных → валентность V."},
|
||
{q:"Сколько неспаренных электронов у серы S в возбуждённом состоянии (max валентность)?",hint:"S: 3s¹3p³3d² — считайте неспаренные",unit:"электронов",a:6,ex:"S*: 3s¹3p³3d² → 6 неспаренных → валентность VI."},
|
||
{q:"Какова валентность углерода C в CH₄?",hint:"CH₄: углерод образует 4 связи с H",unit:"(число)",a:4,ex:"C в CH₄ образует 4 ковалентные связи → валентность IV."},
|
||
{q:"Валентность азота в NH₃?",opts:["I","II","III","V"],a:2,ex:"N в NH₃: три связи N–H → валентность III. Одна пара электронов несвязывающая."}
|
||
];
|
||
|
||
const TASKS_P4 = [
|
||
{q:"Как образуется ковалентная связь?",opts:["Передача электронов от одного атома другому","Обобществление электронной пары двумя атомами","Притяжение разноимённых ионов","Металлические ионы в электронном газе"],a:1,ex:"Ковалентная связь — обобщение одного или нескольких электронных пар двумя атомами."},
|
||
{q:"Что такое электроотрицательность (ЭО)?",opts:["Заряд иона","Способность атома притягивать общие электронные пары","Число электронов на внешнем уровне","Энергия связи"],a:1,ex:"ЭО — способность атома в молекуле притягивать к себе общую электронную пару. Растёт к F."},
|
||
{q:"Какая связь является неполярной ковалентной?",opts:["H₂O","HCl","H₂","NaCl"],a:2,ex:"H₂: одинаковые атомы → одинаковая ЭО → электронная пара строго посередине → неполярная."},
|
||
{q:"Между какими атомами ковалентная полярная связь?",opts:["H и H","Cl и Cl","H и Cl","Na и Cl"],a:2,ex:"H–Cl: ЭО(Cl) > ЭО(H) → пара смещена к Cl → полярная ковалентная. NaCl — ионная."},
|
||
{q:"Метан CH₄: какой тип связи?",opts:["Ионная","Металлическая","Ковалентная неполярная","Ковалентная полярная"],a:3,ex:"C–H: разные атомы, разная ЭО → полярная ковалентная. Но молекула в целом неполярная."},
|
||
{q:"Как направлена смещение пары в HCl?",opts:["К H","К Cl","Строго посередине","Произвольно"],a:1,ex:"ЭО(Cl)=3,16 > ЭО(H)=2,20 → пара смещается к хлору → Clδ⁻, Hδ⁺."},
|
||
{q:"Сколько общих электронных пар в молекуле N₂?",hint:"N≡N: тройная связь",unit:"пар",a:3,ex:"N≡N — тройная связь: 3 общих электронных пары."},
|
||
{q:"У молекулы H₂O угол H–O–H ≈ 104°. Это объясняется:",opts:["Линейной структурой","Наличием двух несвязывающих пар у O","Ионной природой связи","Металлической связью"],a:1,ex:"Две несвязывающие пары у O отталкиваются от связывающих → изгибают молекулу (угол <109°)."}
|
||
];
|
||
|
||
const TASKS_P5 = [
|
||
{q:"Что такое донорно-акцепторный механизм образования связи?",opts:["Один атом отдаёт электрон","Один атом предоставляет пару электронов, другой — свободную орбиталь","Образование ионной связи","Разрыв двойной связи"],a:1,ex:"Донор даёт готовую пару, акцептор принимает её на свободную орбиталь. Связь такая же прочная, как обменная."},
|
||
{q:"Какая частица образуется при присоединении H⁺ к NH₃ по донорно-акцепторному механизму?",opts:["NH₂⁻","NH₄⁺","N₂H₄","NH₂OH"],a:1,ex:"NH₃ — донор (несвязывающая пара), H⁺ — акцептор (пустая орбиталь). Образуется NH₄⁺."},
|
||
{q:"Что такое σ-связь?",opts:["Боковое перекрывание орбиталей","Осевое перекрывание орбиталей по линии связи","Три пары электронов","Ионная связь"],a:1,ex:"σ-связь: перекрывание орбиталей вдоль оси связи. Одна на каждую пару атомов."},
|
||
{q:"Что такое π-связь?",opts:["Осевое перекрывание","Боковое перекрывание p-орбиталей выше и ниже оси","Металлическая связь","Водородная связь"],a:1,ex:"π-связь: боковое перекрывание p-орбиталей. Образует двойные и тройные связи вместе с σ."},
|
||
{q:"Сколько σ- и π-связей в молекуле C₂H₄?",opts:["5σ + 1π","4σ + 2π","5σ + 2π","4σ + 1π"],a:0,ex:"C=C: 1σ+1π. Четыре C–H: 4σ. Итого: 5σ + 1π."},
|
||
{q:"Какова кратность связи в N₂?",hint:"N≡N — тройная связь",unit:"(кратность)",a:3,ex:"N≡N: 1σ + 2π = тройная связь (кратность 3)."},
|
||
{q:"В ионе [AlCl₄]⁻ связь Al–Cl — донорно-акцепторная? Кто донор?",opts:["Al","Cl","H","O"],a:1,ex:"Cl⁻ — донор (несвязывающие пары), Al³⁺ — акцептор (пустые орбитали 3-го уровня)."},
|
||
{q:"Кратность связи C≡N в HCN?",opts:["1","2","3","4"],a:2,ex:"C≡N — тройная связь (кратность 3): 1σ + 2π."}
|
||
];
|
||
|
||
const TASKS_P6 = [
|
||
{q:"Как образуется ионная связь?",opts:["Обобществление электронов","Передача электронов от металла к неметаллу с образованием ионов","Донорно-акцепторный механизм","Металлический газ"],a:1,ex:"Ионная связь: металл отдаёт электроны → катион; неметалл принимает → анион. Притяжение разноимённых ионов."},
|
||
{q:"Какое соединение имеет ионную связь?",opts:["H₂O","CH₄","NaCl","HCl"],a:2,ex:"NaCl: Na → Na⁺ + e⁻; Cl + e⁻ → Cl⁻. Ионная кристаллическая решётка."},
|
||
{q:"Что происходит с атомом Na при образовании NaCl?",opts:["Принимает электрон","Отдаёт 1 электрон → Na⁺","Обобществляет электрон","Не изменяется"],a:1,ex:"Na (1 валентный e⁻) отдаёт его хлору → Na⁺. Электронная конфигурация Na⁺ = Ne."},
|
||
{q:"Свойство ионных кристаллов:",opts:["Электропроводность в твёрдом виде","Хрупкость, высокая т.пл., растворимость в воде","Низкая температура плавления","Пластичность"],a:1,ex:"Ионные кристаллы: высокая т.пл. (сильные кулоновские силы), хрупкие, электролиты в растворе."},
|
||
{q:"Заряд иона Ca²⁺ означает, что кальций…",opts:["Принял 2 электрона","Отдал 2 электрона","Имеет 2 нейтрона","Потерял 2 протона"],a:1,ex:"Ca → Ca²⁺ + 2e⁻. Кальций в группе II отдаёт 2 электрона."},
|
||
{q:"Сколько электронов принял атом Cl, став Cl⁻?",hint:"Заряд иона = число принятых/отданных электронов",unit:"электронов",a:1,ex:"Cl + 1e⁻ → Cl⁻. Принят 1 электрон."},
|
||
{q:"Формула иона алюминия, образующегося при ионной связи?",opts:["Al⁻","Al²⁺","Al³⁺","Al⁴⁺"],a:2,ex:"Al в группе III отдаёт 3 электрона → Al³⁺."},
|
||
{q:"Из 0,5 моль Na₂O сколько моль ионов Na⁺ образуется?",hint:"Na₂O: 2 иона Na⁺ на 1 формульную единицу",unit:"моль",a:1,ex:"n(Na⁺) = 2 × 0,5 = 1 моль."}
|
||
];
|
||
|
||
const TASKS_P7 = [
|
||
{q:"Что такое степень окисления (СО)?",opts:["Реальный заряд атома","Условный заряд атома, если считать связи полностью ионными","Валентность","Число нейтронов"],a:1,ex:"СО — условный заряд атома в предположении, что все пары электронов отданы более электроотрицательному."},
|
||
{q:"СО кислорода в большинстве соединений?",opts:["+2","-1","-2","+1"],a:2,ex:"O обычно −2 (исключения: пероксиды H₂O₂ → O: −1; OF₂ → O: +2)."},
|
||
{q:"СО водорода в соединениях с металлами (гидриды)?",opts:["+1","-1","0","+2"],a:1,ex:"В гидридах металлов (NaH, CaH₂) водород H: −1. В остальных случаях H: +1."},
|
||
{q:"Определите СО серы в H₂SO₄.",opts:["+4","+6","-2","+2"],a:1,ex:"H: +1 (×2=+2); O: −2 (×4=−8); S = 0−(+2)−(−8) = +6. Проверка: 2(+1)+S+4(−2)=0 → S=+6."},
|
||
{q:"СО марганца в KMnO₄?",opts:["+2","+4","+6","+7"],a:3,ex:"K: +1; O: −2 (×4=−8); Mn = 0−1+8 = +7."},
|
||
{q:"Определите СО азота в NO₂.",hint:"O: −2 (×2=−4); сумма=0",unit:"(значение СО N)",a:4,ex:"N + 2(−2) = 0 → N = +4."},
|
||
{q:"СО хлора в хлорной кислоте HClO₄?",hint:"H:+1; O:−2(×4); сумма=0",unit:"(значение)",a:7,ex:"+1+Cl+4(−2)=0 → Cl=+7."},
|
||
{q:"СО фосфора в фосфорной кислоте H₃PO₄?",hint:"3(+1)+P+4(−2)=0",unit:"(значение)",a:5,ex:"3+P−8=0 → P=+5."}
|
||
];
|
||
|
||
const TASKS_P8 = [
|
||
{q:"Какой тип кристаллической решётки у алмаза?",opts:["Ионная","Металлическая","Атомная (ковалентная)","Молекулярная"],a:2,ex:"Алмаз: атомная решётка, каждый C связан с 4 соседями. Очень твёрдый, высокая т.пл."},
|
||
{q:"Молекулярная кристаллическая решётка характерна для:",opts:["NaCl","Fe","CO₂","SiO₂"],a:2,ex:"CO₂ — молекулярная решётка. Узлы — молекулы, связаны слабыми силами → низкая т.пл."},
|
||
{q:"Почему металлы электропроводны?",opts:["Ионы","Свободные молекулы","Электроны в электронном газе","Протоны"],a:2,ex:"Металлическая решётка: катионы металла + «море» свободных электронов → высокая электропроводность."},
|
||
{q:"Какая решётка у NaCl?",opts:["Молекулярная","Атомная","Ионная","Металлическая"],a:2,ex:"NaCl — ионная решётка: чередующиеся Na⁺ и Cl⁻. Высокая т.пл., хрупкая, электролит."},
|
||
{q:"Почему лёд имеет низкую температуру плавления (для кристалла)?",opts:["Атомная решётка","Ионная решётка","Молекулярная решётка с водородными связями","Металлическая"],a:2,ex:"Лёд — молекулярная решётка (H₂O); связи между молекулами — водородные, слабее ковалентных."},
|
||
{q:"Атомная решётка SiO₂: какое свойство предсказуем?",opts:["Растворяется в воде","Мягкий","Очень твёрдый, высокая т.пл.","Летучий"],a:2,ex:"SiO₂ (кварц): каждый Si связан с 4 O ковалентно → атомная решётка → твёрдый (7 по Моосу), т.пл. ~1700°C."},
|
||
{q:"Соответствие: ионная решётка — пример?",opts:["Fe","H₂O","KCl","CO₂"],a:2,ex:"KCl: K⁺ и Cl⁻ — типичная ионная решётка."},
|
||
{q:"Что общего у атомной и ионной решёток?",opts:["Молекулы в узлах","Высокая твёрдость и т.пл.","Электропроводность","Летучесть"],a:1,ex:"Обе имеют высокую твёрдость и высокую т.пл. из-за прочных химических связей в узлах."}
|
||
];
|
||
|
||
const TASKS_P9 = [
|
||
{q:"Чем отличается однородная смесь от неоднородной?",opts:["Числом компонентов","Однородная не имеет границ раздела фаз","Температурой","Агрегатным состоянием"],a:1,ex:"Однородная (гомогенная): нет видимых границ раздела (раствор NaCl). Неоднородная (гетерогенная): фазы разделены (молоко, суспензия)."},
|
||
{q:"Какой метод разделения используют для отделения нерастворимого осадка от жидкости?",opts:["Перегонка","Фильтрация","Кристаллизация","Хроматография"],a:1,ex:"Фильтрование: суспензию пропускают через фильтр — осадок остаётся, фильтрат проходит."},
|
||
{q:"Как разделить смесь воды и спирта?",opts:["Фильтрованием","Отстаиванием","Перегонкой (дистилляцией)","Кристаллизацией"],a:2,ex:"Вода и спирт смешиваются, но кипят при разных температурах → дистилляция (перегонка)."},
|
||
{q:"Кристаллизация применяется для:",opts:["Разделения газов","Получения чистого твёрдого вещества из раствора","Очистки воды от механических примесей","Разделения несмешивающихся жидкостей"],a:1,ex:"Кристаллизация: при охлаждении насыщенного раствора выпадают чистые кристаллы (сахар, соль)."},
|
||
{q:"Как разделить смесь железных опилок и серы?",opts:["Фильтрованием","Перегонкой","Магнитом","Кристаллизацией"],a:2,ex:"Железо — магнетик, сера — нет. Магнит притягивает железо, разделяя смесь."},
|
||
{q:"Что такое делительная воронка и для чего используется?",opts:["Для перегонки","Для разделения несмешивающихся жидкостей","Для фильтрования","Для кристаллизации"],a:1,ex:"Делительная воронка разделяет несмешивающиеся жидкости (например, воду и бензин) по плотности."},
|
||
{q:"В смеси 60 г воды и 40 г NaCl — масса воды после фильтрования?",hint:"NaCl растворён — не отфильтровывается",unit:"г",a:60,ex:"NaCl — растворимый, не задержится фильтром. Вода в фильтрате = 60 г + 40 г NaCl (в виде раствора)."},
|
||
{q:"При перегонке 200 мл раствора спирта (20%) получили чистый спирт. Сколько мл спирта максимум?",hint:"V(спирта) = 20% от 200 мл",unit:"мл",a:40,ex:"V = 0,20 × 200 = 40 мл спирта (теоретически)."}
|
||
];
|
||
|
||
const TASKS_P10 = [
|
||
{q:"Что такое дисперсная система?",opts:["Чистое вещество","Система из одного вещества (среды) с частицами другого (дисперсной фазы)","Однородная смесь","Химическое соединение"],a:1,ex:"Дисперсная система: дисперсионная среда + дисперсная фаза (частицы). По размеру частиц: истинные растворы, коллоиды, взвеси."},
|
||
{q:"Какой размер частиц у коллоидных систем?",opts:["<1 нм","1–100 нм","100–1000 нм",">1 мм"],a:1,ex:"Коллоидные частицы: 1–100 нм. Больше молекул (истинных растворов), но меньше частиц взвесей."},
|
||
{q:"Что такое эффект Тиндаля?",opts:["Коагуляция коллоида","Рассеивание света коллоидными частицами","Растворение твёрдого вещества","Кристаллизация"],a:1,ex:"Луч света в коллоиде рассеивается — виден светящийся конус (дымка в лесу, луч в тумане)."},
|
||
{q:"Чем коллоид отличается от истинного раствора?",opts:["Агрегатным состоянием","Размером частиц и эффектом Тиндаля","Цветом","Температурой"],a:1,ex:"Истинный раствор: частицы <1 нм (ионы/молекулы) — прозрачный, нет эффекта Тиндаля. Коллоид: 1–100 нм — опалесцирует."},
|
||
{q:"Молоко — это:",opts:["Истинный раствор","Взвесь","Коллоидная система (эмульсия)","Чистое вещество"],a:2,ex:"Молоко — эмульсия (жир в воде): коллоидная система. Частицы жира 0,1–10 мкм."},
|
||
{q:"Что произойдёт с коллоидом при добавлении электролита?",opts:["Растворится","Коагуляция — частицы слипаются и оседают","Образуется истинный раствор","Ничего"],a:1,ex:"Электролит нейтрализует заряды коллоидных частиц → коагуляция (выпадение в осадок)."},
|
||
{q:"Взвесь (суспензия) от коллоида отличается:",opts:["Цветом","Размером частиц: взвесь >100 нм, частицы оседают","Температурой","Электропроводностью"],a:1,ex:"Взвесь: крупные частицы >100 нм видны, оседают. Коллоид: опалесцирует, не оседает."},
|
||
{q:"Туман — это:",opts:["Истинный раствор газа","Суспензия","Аэрозоль (коллоид: жидкость в газе)","Гель"],a:2,ex:"Туман — аэрозоль: капли жидкости (воды) в газе (воздухе). Коллоидная система."}
|
||
];
|
||
|
||
const TASKS_P11 = [
|
||
{q:"Что такое теория электролитической диссоциации (ТЭД)?",opts:["Теория строения атома","Теория о распаде электролитов на ионы при растворении","Теория горения","Теория ядерных реакций"],a:1,ex:"ТЭД Аррениуса (1887): электролиты при растворении распадаются на ионы — катионы и анионы."},
|
||
{q:"Что такое электролит?",opts:["Вещество, не проводящее ток","Вещество, проводящее ток в растворе или расплаве","Любой раствор","Металл"],a:1,ex:"Электролит — вещество, распадающееся на ионы в растворе или расплаве и проводящее ток."},
|
||
{q:"Диссоциация HCl в воде?",opts:["HCl → H₂ + Cl₂","HCl → H⁺ + Cl⁻","2HCl → H₂Cl₂","HCl → H⁻ + Cl⁺"],a:1,ex:"HCl (сильная кислота): HCl → H⁺ + Cl⁻. Полная диссоциация."},
|
||
{q:"Какая соль диссоциирует: Na₂SO₄ → ?",opts:["2Na⁺ + SO₄²⁻","Na₂⁺ + SO₄²⁻","Na⁺ + 2SO₄²⁻","2Na²⁺ + S²⁻"],a:0,ex:"Na₂SO₄ → 2Na⁺ + SO₄²⁻. Число ионов — по формуле."},
|
||
{q:"Степень диссоциации α=0,95. Вещество:",opts:["Слабый электролит","Неэлектролит","Сильный электролит","Амфолит"],a:2,ex:"α > 0,3 — сильный электролит. α < 0,03 — слабый."},
|
||
{q:"Сколько молей ионов образуется при диссоциации 0,5 моль CaCl₂?",hint:"CaCl₂ → Ca²⁺ + 2Cl⁻; 3 иона на 1 ф.е.",unit:"моль",a:1.5,ex:"n(ионов) = 3 × 0,5 = 1,5 моль."},
|
||
{q:"Сколько молей H⁺ образуется при диссоциации 0,3 моль H₃PO₄ (полная)?",hint:"H₃PO₄ → 3H⁺ + PO₄³⁻",unit:"моль",a:0.9,ex:"n(H⁺) = 3 × 0,3 = 0,9 моль."},
|
||
{q:"Какой из растворов лучше проводит электрический ток?",opts:["0,1 М CH₃COOH","0,1 М NaCl","Дистиллированная вода","Раствор сахара"],a:1,ex:"NaCl — сильный электролит, полностью диссоциирован → наибольшая концентрация ионов → лучший проводник."}
|
||
];
|
||
|
||
const TASKS_P12 = [
|
||
{q:"Когда реакция ионного обмена идёт до конца?",opts:["Всегда","Если образуется осадок, газ или слабый электролит","Только при нагревании","Только в кислой среде"],a:1,ex:"Реакции ионного обмена необратимы, если образуется: ↓ (осадок), ↑ (газ) или H₂O/слабый электролит."},
|
||
{q:"Полное ионное уравнение реакции BaCl₂ + Na₂SO₄?",opts:["BaCl₂ + Na₂SO₄ → BaSO₄ + 2NaCl","Ba²⁺ + SO₄²⁻ → BaSO₄↓","2Na⁺ + 2Cl⁻ = нет","Ba²⁺ + 2Cl⁻ + 2Na⁺ + SO₄²⁻ → BaSO₄↓ + 2Na⁺ + 2Cl⁻"],a:3,ex:"Полное ионное: все сильные электролиты разбиваем на ионы, BaSO₄ — нерастворим, не разбиваем."},
|
||
{q:"Сокращённое ионное уравнение нейтрализации (сильная кислота + сильное основание)?",opts:["H⁺ + OH⁻ → H₂O","Na⁺ + Cl⁻ → NaCl","H₂ + O₂ → H₂O","2H⁺ + O²⁻ → H₂O"],a:0,ex:"Любая сильная кислота + сильное основание: H⁺ + OH⁻ → H₂O — всегда одинаковое КИУ."},
|
||
{q:"Идёт ли реакция: KCl + NaNO₃ → KNO₃ + NaCl?",opts:["Да, с осадком","Да, с газом","Нет — все продукты растворимы","Да, с водой"],a:2,ex:"Все 4 вещества — растворимые соли. Сокращённое ионное уравнение: «нет реакции»."},
|
||
{q:"Сокращённое ионное уравнение: Cu²⁺ + 2OH⁻ → Cu(OH)₂↓. Какие реагенты?",opts:["CuSO₄ + NaOH","CuO + H₂O","Cu + NaOH","CuCl₂ + Ca(OH)₂ — тоже подходит"],a:3,ex:"Любая растворимая соль Cu²⁺ + любое сильное основание OH⁻ дают это КИУ."},
|
||
{q:"Масса BaSO₄ (M=233 г/моль), если смешать 0,2 моль BaCl₂ с избытком Na₂SO₄?",hint:"n(BaSO₄)=n(Ba²⁺)=0,2 моль",unit:"г",a:46.6,ex:"m = 0,2 × 233 = 46,6 г."},
|
||
{q:"Объём CO₂ (н.у., л) при реакции 0,5 моль Na₂CO₃ с HCl?",hint:"CO₃²⁻ + 2H⁺ → H₂O + CO₂↑; n(CO₂)=n(Na₂CO₃)",unit:"л",a:11.2,ex:"n(CO₂)=0,5; V=0,5×22,4=11,2 л."},
|
||
{q:"Масса AgCl (M=143,5 г/моль) при реакции 0,1 моль AgNO₃ + NaCl?",hint:"Ag⁺ + Cl⁻ → AgCl↓",unit:"г",a:14.35,ex:"n(AgCl)=0,1 моль; m=0,1×143,5=14,35 г."}
|
||
];
|
||
|
||
const TASKS_P13 = [
|
||
{q:"Что такое гидролиз соли?",opts:["Растворение соли","Взаимодействие ионов соли с водой, изменяющее pH","Нейтрализация","Осаждение"],a:1,ex:"Гидролиз — реакция ионов соли с водой. Меняет pH раствора (кроме солей сильной кислоты и сильного основания)."},
|
||
{q:"Среда раствора CH₃COONa (уксусная — слабая, NaOH — сильное)?",opts:["Кислая","Нейтральная","Щелочная","Зависит от температуры"],a:2,ex:"Анион CH₃COO⁻ + H₂O ⇌ CH₃COOH + OH⁻ → pH > 7, щелочная среда."},
|
||
{q:"Среда раствора NH₄Cl (NH₃·H₂O — слабое, HCl — сильная)?",opts:["Кислая","Нейтральная","Щелочная","Переменная"],a:0,ex:"Катион NH₄⁺ + H₂O ⇌ NH₃·H₂O + H⁺ → pH < 7, кислая среда."},
|
||
{q:"Среда раствора NaCl (NaOH — сильное, HCl — сильная)?",opts:["Кислая","Нейтральная","Щелочная","Слабокислая"],a:1,ex:"Na⁺ и Cl⁻ не гидролизуются. Среда нейтральная, pH = 7."},
|
||
{q:"Как влияет нагревание на гидролиз?",opts:["Подавляет","Не влияет","Усиливает","Прекращает"],a:2,ex:"Гидролиз — эндотермический процесс. По принципу Ле Шателье: нагрев усиливает гидролиз."},
|
||
{q:"pH раствора Na₂CO₃, если [OH⁻]=0,01 М?",hint:"Kw=10⁻¹⁴; [H⁺]=10⁻¹⁴/[OH⁻]; pH=−lg[H⁺]",unit:"",a:12,ex:"[H⁺]=10⁻¹⁴/10⁻²=10⁻¹²; pH=12."},
|
||
{q:"Соль Al₂(SO₄)₃ — образована слабым основанием Al(OH)₃ и сильной H₂SO₄. Тип гидролиза?",opts:["По аниону","По катиону","Полный","Без гидролиза"],a:1,ex:"Al³⁺ + H₂O ⇌ AlOH²⁺ + H⁺ — гидролиз по катиону. Среда кислая."},
|
||
{q:"Степень гидролиза CH₃COONa α=0,001; C=0,1 М; V=1 л. Моль CH₃COOH образовалось?",hint:"n(гидр)=α×n(соли); n(соли)=C×V",unit:"моль",a:0.0001,ex:"n(соли)=0,1; n=0,001×0,1=0,0001 моль."}
|
||
];
|
||
|
||
const TASKS_P14 = [
|
||
{q:"На какие группы делятся оксиды по химическим свойствам?",opts:["Кислые и щелочные","Основные, кислотные, амфотерные","Органические и неорганические","Газообразные и твёрдые"],a:1,ex:"Оксиды: основные (Na₂O, CaO), кислотные (SO₃, CO₂), амфотерные (Al₂O₃, ZnO)."},
|
||
{q:"Основной оксид взаимодействует с:",opts:["Основаниями","Металлами","Кислотами и кислотными оксидами","Инертными газами"],a:2,ex:"Основной оксид + кислота → соль + H₂O. CaO + H₂SO₄ → CaSO₄ + H₂O."},
|
||
{q:"Кислотный оксид взаимодействует с:",opts:["Кислотами","Основаниями и основными оксидами","Металлами","Неметаллами"],a:1,ex:"SO₃ + 2NaOH → Na₂SO₄ + H₂O. CO₂ + CaO → CaCO₃."},
|
||
{q:"Амфотерный оксид реагирует:",opts:["Только с кислотами","Только с основаниями","И с кислотами, и с основаниями","Ни с чем"],a:2,ex:"Al₂O₃ + 6HCl → 2AlCl₃ + 3H₂O; Al₂O₃ + 2NaOH + 3H₂O → 2Na[Al(OH)₄]."},
|
||
{q:"К какому типу относится SO₃?",opts:["Основной","Кислотный","Амфотерный","Несолеобразующий"],a:1,ex:"SO₃ — кислотный оксид (ангидрид серной кислоты H₂SO₄)."},
|
||
{q:"Масса CO₂ (M=44) при сгорании 12 г углерода C (M=12)?",hint:"C + O₂ → CO₂; n(C)=1 моль → n(CO₂)=1 моль",unit:"г",a:44,ex:"n(C)=12/12=1 моль; n(CO₂)=1 моль; m=1×44=44 г."},
|
||
{q:"Масса CaO (M=56) при разложении 100 г CaCO₃ (M=100)?",hint:"CaCO₃ → CaO + CO₂; n(CaCO₃)=1 моль",unit:"г",a:56,ex:"n(CaCO₃)=1; n(CaO)=1; m=56 г."},
|
||
{q:"Оксид Na₂O + H₂O → ?",opts:["Na₂O₂","NaOH","Na + H₂","NaHO₂"],a:1,ex:"Na₂O + H₂O → 2NaOH — основной оксид + вода → щёлочь."}
|
||
];
|
||
|
||
const TASKS_P15 = [
|
||
{q:"Что такое основания (с точки зрения ТЭД)?",opts:["Вещества, выделяющие H⁺","Вещества, диссоциирующие с выделением OH⁻","Оксиды металлов","Соли кислородсодержащих кислот"],a:1,ex:"Основания диссоциируют: Me(OH)n → Meⁿ⁺ + nOH⁻. Щёлочи — растворимые основания."},
|
||
{q:"Реакция нейтрализации: основание + кислота → ?",opts:["Оксид + вода","Соль + вода","Только вода","Газ + соль"],a:1,ex:"NaOH + HCl → NaCl + H₂O. Основание + кислота → соль + вода."},
|
||
{q:"Что такое щёлочи?",opts:["Все основания","Растворимые в воде основания (NaOH, KOH, Ca(OH)₂)","Кислотные растворы","Нерастворимые основания"],a:1,ex:"Щёлочи — растворимые основания: NaOH, KOH, Ba(OH)₂, Ca(OH)₂ (малорастворим)."},
|
||
{q:"Что происходит при нагревании нерастворимого основания?",opts:["Растворяется","Разлагается на оксид и воду","Нейтрализуется","Кристаллизуется"],a:1,ex:"Cu(OH)₂ → CuO + H₂O (нагрев). Нерастворимые основания нестабильны."},
|
||
{q:"Реакция Ca(OH)₂ + CO₂ → ?",opts:["Ca + H₂O + O₂","CaCO₃↓ + H₂O","CaO + H₂O","Нет реакции"],a:1,ex:"Ca(OH)₂ + CO₂ → CaCO₃↓ + H₂O. «Известковая вода мутнеет» — качественная реакция на CO₂."},
|
||
{q:"Масса NaOH (M=40), нужная для нейтрализации 0,5 моль HCl?",hint:"NaOH + HCl → NaCl + H₂O; n(NaOH)=n(HCl)",unit:"г",a:20,ex:"n(NaOH)=0,5 моль; m=0,5×40=20 г."},
|
||
{q:"Масса Cu(OH)₂ (M=98) при реакции 0,3 моль CuSO₄ + NaOH (изб.)?",hint:"CuSO₄ + 2NaOH → Cu(OH)₂↓ + Na₂SO₄",unit:"г",a:29.4,ex:"n(Cu(OH)₂)=0,3; m=0,3×98=29,4 г."},
|
||
{q:"Лакмус в растворе NaOH?",opts:["Красный","Фиолетовый","Синий","Бесцветный"],a:2,ex:"Щелочная среда (pH > 7) → лакмус синий."}
|
||
];
|
||
|
||
const TASKS_P16 = [
|
||
{q:"Что такое кислоты (с точки зрения ТЭД)?",opts:["Вещества, отдающие OH⁻","Вещества, диссоциирующие с выделением H⁺","Оксиды неметаллов","Все водородосодержащие вещества"],a:1,ex:"Кислоты: HA → H⁺ + A⁻. Характерный ион — H⁺ (катион водорода)."},
|
||
{q:"Классификация кислот по числу атомов H?",opts:["Слабые и сильные","Одноосновные (HCl), двухосновные (H₂SO₄), трёхосновные (H₃PO₄)","Органические и неорганические","Кислотные и нейтральные"],a:1,ex:"По числу H⁺: одно- (HCl, HNO₃), двух- (H₂SO₄, H₂CO₃), трёх- (H₃PO₄) основные."},
|
||
{q:"Сильная кислота среди перечисленных?",opts:["H₂CO₃","CH₃COOH","HF","HNO₃"],a:3,ex:"HNO₃ — сильная кислота (α ≈ 1). H₂CO₃, CH₃COOH, HF — слабые."},
|
||
{q:"Реакция кислоты с основным оксидом?",opts:["Кислота + оксид → кислород + соль","Кислота + оксид → соль + вода","Нет реакции","Кислота + оксид → газ"],a:1,ex:"H₂SO₄ + CuO → CuSO₄ + H₂O. Кислота + основной оксид → соль + вода."},
|
||
{q:"Реакция разведённой HCl с Zn?",opts:["Нет реакции","Zn + 2HCl → ZnCl₂ + H₂↑","Zn + HCl → ZnHCl","Zn горит в HCl"],a:1,ex:"Zn + 2HCl → ZnCl₂ + H₂↑. Металлы до H₂ в ряду активности реагируют с разв. кислотами."},
|
||
{q:"Объём H₂ (н.у.) при реакции 6,5 г Zn (M=65) + HCl?",hint:"Zn + 2HCl → ZnCl₂ + H₂; n(Zn)=0,1",unit:"л",a:2.24,ex:"n(Zn)=0,1; n(H₂)=0,1; V=0,1×22,4=2,24 л."},
|
||
{q:"Масса H₂SO₄ (M=98), нужная для реакции с 4 г NaOH (M=40)?",hint:"H₂SO₄ + 2NaOH → Na₂SO₄ + 2H₂O; n(NaOH)=0,1; n(H₂SO₄)=0,05",unit:"г",a:4.9,ex:"n(H₂SO₄)=0,05; m=0,05×98=4,9 г."},
|
||
{q:"Какая кислота не имеет кислорода в составе?",opts:["H₂SO₄","HNO₃","HCl","H₃PO₄"],a:2,ex:"HCl — бескислородная кислота."}
|
||
];
|
||
|
||
const TASKS_P17 = [
|
||
{q:"Что такое соли (с точки зрения ТЭД)?",opts:["Продукты горения металлов","Электролиты, диссоциирующие на катион металла и анион кислотного остатка","Оксиды металлов","Вещества с pH=7"],a:1,ex:"Соли: MeₙAₘ → nMeᵏ⁺ + mAⁿ⁻ (катион металла + анион кислотного остатка)."},
|
||
{q:"Название Na₂SO₄?",opts:["Хлорид натрия","Сульфат натрия","Нитрат натрия","Карбонат натрия"],a:1,ex:"Na₂SO₄ — сульфат натрия (SO₄²⁻ — сульфат)."},
|
||
{q:"Реакция обмена солей идёт до конца если:",opts:["Всегда","Образуется нерастворимая соль, газ или слабая кислота/основание","Только при нагреве","Реагенты — металлы"],a:1,ex:"Na₂CO₃ + 2HCl → 2NaCl + H₂O + CO₂↑ — CO₂ улетает, реакция необратима."},
|
||
{q:"Реакция Ca₃(PO₄)₂ + H₂SO₄ → ?",opts:["3CaSO₄ + 2H₃PO₄","CaHPO₄ + H₂S","Нет реакции","Ca(HSO₄)₂ + P"],a:0,ex:"Ca₃(PO₄)₂ + 3H₂SO₄ → 3CaSO₄↓ + 2H₃PO₄."},
|
||
{q:"Классификация солей по составу:",opts:["Кислые и щелочные","Средние, кислые (NaHSO₄), основные (Fe(OH)Cl)","Органические и неорг.","Твёрдые и жидкие"],a:1,ex:"Средние (NaCl), кислые (NaHCO₃ — есть H), основные (FeOHCl — есть OH)."},
|
||
{q:"Масса NaCl (M=58,5) при реакции 0,4 моль NaOH + HCl?",hint:"NaOH + HCl → NaCl + H₂O",unit:"г",a:23.4,ex:"n(NaCl)=0,4; m=0,4×58,5=23,4 г."},
|
||
{q:"Масса Ca₃(PO₄)₂ (M=310) при реакции 0,3 моль CaCl₂ + Na₃PO₄?",hint:"3CaCl₂ + 2Na₃PO₄ → Ca₃(PO₄)₂↓ + 6NaCl; n(Ca₃(PO₄)₂)=0,1",unit:"г",a:31,ex:"n(Ca₃(PO₄)₂)=0,3/3=0,1 моль; m=0,1×310=31 г."},
|
||
{q:"Кислая соль NaHCO₃: что выделяется при добавлении HCl?",opts:["H₂","O₂","CO₂","Cl₂"],a:2,ex:"NaHCO₃ + HCl → NaCl + H₂O + CO₂↑."}
|
||
];
|
||
|
||
const TASKS_P18 = [
|
||
{q:"Генетическая связь: металл → основный оксид → основание → соль. Пример с Na?",opts:["Na→Na₂O→NaOH→NaCl","Na→NaCl→NaOH→Na₂O","Na→NaOH→Na₂O→NaCl","Na→NaCl→Na₂O→NaOH"],a:0,ex:"Na + O₂ → Na₂O; Na₂O + H₂O → 2NaOH; NaOH + HCl → NaCl + H₂O."},
|
||
{q:"Схема: неметалл → кислотный оксид → кислота → соль. Пример с S?",opts:["S→SO₂→H₂SO₃→Na₂SO₃","S→H₂S→SO₂→NaS","S→SO₃→Na₂SO₄→H₂SO₄","S→NaS→SO₂→H₂S"],a:0,ex:"S + O₂ → SO₂; SO₂ + H₂O → H₂SO₃; H₂SO₃ + 2NaOH → Na₂SO₃ + 2H₂O."},
|
||
{q:"Амфотерное соединение Zn(OH)₂ реагирует с:",opts:["Только кислотами","Только основаниями","И кислотами, и основаниями","Ни с чем"],a:2,ex:"Zn(OH)₂ + H₂SO₄ → ZnSO₄ + 2H₂O; Zn(OH)₂ + 2NaOH → Na₂[Zn(OH)₄]."},
|
||
{q:"Какое свойство объединяет все классы неорганических соединений?",opts:["Ионное строение","Взаимные превращения по схеме генетических рядов","Нерастворимость","Газообразность"],a:1,ex:"Все классы связаны генетически: из одного вещества можно получить другое."},
|
||
{q:"Реакция Na₂O + H₂SO₄ → ?",opts:["Na₂SO₄ + H₂O","Na + SO₄ + H₂O","NaHSO₄","Нет реакции"],a:0,ex:"Na₂O + H₂SO₄ → Na₂SO₄ + H₂O. Основной оксид + кислота → соль + вода."},
|
||
{q:"Масса Ca(OH)₂ (M=74) из 0,5 моль CaO + H₂O?",hint:"CaO + H₂O → Ca(OH)₂",unit:"г",a:37,ex:"n(Ca(OH)₂)=0,5; m=0,5×74=37 г."},
|
||
{q:"Масса Na₂CO₃ (M=106) из 0,2 моль NaOH + CO₂?",hint:"2NaOH + CO₂ → Na₂CO₃ + H₂O; n(Na₂CO₃)=0,1",unit:"г",a:10.6,ex:"n(Na₂CO₃)=0,1; m=0,1×106=10,6 г."},
|
||
{q:"К какому классу относится H₂SO₃?",opts:["Основание","Кислотный оксид","Кислота","Соль"],a:2,ex:"H₂SO₃ — сернистая кислота (двухосновная, слабая)."}
|
||
];
|
||
|
||
const TASKS_P19 = [
|
||
{q:"Что такое окисление?",opts:["Присоединение кислорода только","Процесс отдачи электронов (увеличение СО)","Присоединение водорода","Разложение вещества"],a:1,ex:"Окисление — отдача электронов: восстановитель отдаёт е⁻, СО повышается."},
|
||
{q:"Что такое восстановление?",opts:["Отдача электронов","Приём электронов (понижение СО)","Разложение","Горение"],a:1,ex:"Восстановление — приём электронов: окислитель принимает е⁻, СО понижается."},
|
||
{q:"Кто является окислителем в реакции: Zn + 2HCl → ZnCl₂ + H₂?",opts:["Zn","H⁺ (в HCl)","Cl⁻","Zn²⁺"],a:1,ex:"H⁺ принимает е⁻ (H⁺ + e⁻ → H⁰) → H⁺ восстанавливается → H⁺ — окислитель."},
|
||
{q:"Как изменяется степень окисления восстановителя?",opts:["Понижается","Не изменяется","Повышается","Становится равной нулю"],a:2,ex:"Восстановитель отдаёт е⁻ → его СО повышается (степень окисления восстановителя растёт)."},
|
||
{q:"Что такое ОВР?",opts:["Реакция с водой","Реакция, где происходит передача электронов между реагентами","Только реакции горения","Реакции ионного обмена"],a:1,ex:"ОВР — реакции с изменением степеней окисления атомов (перенос е⁻ от восстановителя к окислителю)."},
|
||
{q:"В реакции 2Mg + O₂ → 2MgO: кто окислитель?",opts:["Mg","O₂","MgO","Нет окислителя"],a:1,ex:"O₂ принимает е⁻ (O⁰ + 2e⁻ → O²⁻) → О₂ — окислитель. Mg — восстановитель."},
|
||
{q:"СО железа в Fe₂O₃?",hint:"3O²⁻ суммарный заряд −6; 2Fe + (−6) = 0",unit:"(значение СО Fe)",a:3,ex:"2Fe + 3(−2) = 0 → Fe = +3."},
|
||
{q:"Число электронов, отданных одним атомом Fe при окислении Fe → Fe³⁺?",hint:"Fe⁰ → Fe³⁺ + 3e⁻",unit:"электронов",a:3,ex:"Fe⁰ − 3e⁻ → Fe³⁺. Отдаёт 3 электрона."}
|
||
];
|
||
|
||
const TASKS_P20 = [
|
||
{q:"Суть метода электронного баланса?",opts:["Подбор коэффициентов по числу атомов","Число отданных электронов = числу принятых","Расстановка зарядов","Подбор кислорода"],a:1,ex:"МЭБ: сумма е⁻ окисл. = сумма е⁻ восстан. Коэффициенты: число принятых/отданных = НОК."},
|
||
{q:"Расставьте коэффициенты: __Fe + __Cl₂ → __FeCl₃. Fe: 0→+3 (−3e⁻); Cl: 0→−1 (+1e⁻ на атом).",opts:["1,1,1","2,3,2","1,3,2","2,1,2"],a:1,ex:"2Fe − 6е (×2); 3Cl₂ + 6е (×3). Ответ: 2Fe + 3Cl₂ → 2FeCl₃."},
|
||
{q:"В реакции MnO₂ + HCl → MnCl₂ + Cl₂ + H₂O кто окислитель?",opts:["HCl","Cl₂","MnO₂","H₂O"],a:2,ex:"Mn +4 → +2 (принимает 2е⁻) → MnO₂ — окислитель. Cl⁻ −1 → 0 — восстановитель."},
|
||
{q:"В реакции H₂ + CuO → Cu + H₂O кто восстановитель?",opts:["CuO","Cu","H₂O","H₂"],a:3,ex:"H₂: Н⁰ → H⁺ (в воде) — отдаёт е⁻ → H₂ — восстановитель. Cu²⁺ → Cu⁰ — окисл."},
|
||
{q:"Диспропорционирование — это ОВР, где:",opts:["Два разных окислителя","Одно вещество одновременно и окисляется, и восстанавливается","Нет изменения СО","Реагируют только металлы"],a:1,ex:"Пример: Cl₂ + 2NaOH → NaCl + NaClO + H₂O. Cl₂: Cl⁰ → Cl⁻ (−1) и Cl⁰ → Cl⁺ (+1)."},
|
||
{q:"В реакции: Cu + 2H₂SO₄(конц) → CuSO₄ + SO₂ + 2H₂O. Изменение СО серы?",hint:"H₂SO₄: S=+6; SO₂: S=+4",unit:"(изменение СО S)",a:-2,ex:"S+6 → S+4: изменение −2 (принимает 2е⁻). S — окислитель."},
|
||
{q:"Расставьте коэффициенты в: __KMnO₄ + __HCl → __KCl + __MnCl₂ + __Cl₂ + __H₂O. Сколько HCl?",hint:"Mn+7→+2 (5е⁻); Cl−→0 (1е⁻). НОК=10",unit:"молей HCl (коэффициент)",a:16,ex:"2KMnO₄ + 16HCl → 2KCl + 2MnCl₂ + 5Cl₂ + 8H₂O. HCl: коэффициент 16."},
|
||
{q:"Степень окисления S в Na₂S₂O₃ (тиосульфат)?",hint:"2Na+: +2; 3O: −6; сумма 0: 2S=+2",unit:"(среднее значение)",a:2,ex:"2(+1)+2S+3(−2)=0 → 2S=4 → S=+2. Среднее (формально)."}
|
||
];
|
||
|
||
|
||
const TASKS_P21 = [
|
||
{q:"Типичные окислители в химии?",opts:["Металлы, H₂, CO","KMnO₄, K₂Cr₂O₇, HNO₃, Cl₂, O₂","NH₃, H₂S, HI","NaCl, KOH, H₂O"],a:1,ex:"Окислители: KMnO₄ (Mn+7), K₂Cr₂O₇ (Cr+6), HNO₃ (N+5), Cl₂, O₂ — принимают электроны."},
|
||
{q:"Типичные восстановители?",opts:["KMnO₄, HNO₃","Металлы (Zn, Fe), H₂, H₂S, C, CO","Cl₂, O₃","Na₂SO₄, HCl (раствор)"],a:1,ex:"Восстановители: активные металлы, H₂, H₂S, HI, SO₂, C, CO — отдают электроны."},
|
||
{q:"Действие KMnO₄ в кислой среде: MnO₄⁻ → ?",opts:["MnO₂ (осадок)","Mn²⁺ (бесцветно)","MnO₄²⁻","MnO"],a:1,ex:"В кислой среде KMnO₄: MnO₄⁻ + 8H⁺ + 5e⁻ → Mn²⁺ + 4H₂O. Раствор обесцвечивается."},
|
||
{q:"Действие KMnO₄ в нейтральной/слабощелочной среде: MnO₄⁻ → ?",opts:["Mn²⁺","MnO₄²⁻","MnO₂↓ (бурый осадок)","Mn⁰"],a:2,ex:"В нейтральной/слабощелочной: MnO₄⁻ + 2H₂O + 3e⁻ → MnO₂↓ + 4OH⁻. Бурый осадок."},
|
||
{q:"H₂O₂ может быть и окислителем, и восстановителем. Как окислитель?",opts:["H₂O₂ отдаёт H⁺","H₂O₂ принимает е⁻: O⁻¹ + e⁻ → O²⁻","H₂O₂ реагирует с металлами","H₂O₂ разлагается"],a:1,ex:"Как окислитель: H₂O₂ + 2e⁻ → 2OH⁻. Как восстановитель: H₂O₂ − 2e⁻ → O₂."},
|
||
{q:"Реакция: Fe + H₂SO₄(конц, хол) →?",opts:["FeSO₄ + H₂S","Нет реакции (пассивация)","Fe₂(SO₄)₃ + H₂","Fe + SO₂"],a:1,ex:"Fe пассивируется конц. H₂SO₄ (холодной). Аналогично Al с конц. H₂SO₄ и HNO₃."},
|
||
{q:"Какой газ выделяется при реакции активного металла с конц. HNO₃?",opts:["H₂","NO","N₂O","NH₃"],a:1,ex:"Конц. HNO₃ + активный металл (Zn, Cu) → NO₂ (бурый газ). Разб. HNO₃ → NO (бесцветный)."},
|
||
{q:"Реакция Cu + 4HNO₃(конц) → Cu(NO₃)₂ + 2NO₂ + 2H₂O. СО азота в NO₂?",hint:"N в HNO₃: +5; NO₂: N=?; 2O²⁻=−4; сумма=0",unit:"(значение СО N в NO₂)",a:4,ex:"N + 2(−2) = 0 → N = +4."}
|
||
];
|
||
|
||
const TASKS_P22 = [
|
||
{q:"Влияние среды на продукт восстановления KMnO₄?",opts:["Среда не влияет","Кислая → Mn²⁺; нейтр. → MnO₂↓; щелочная → MnO₄²⁻","Всегда MnO₂","Только Mn⁰"],a:1,ex:"KMnO₄: кислая среда → Mn²⁺; нейтральная → MnO₂↓; щелочная → MnO₄²⁻."},
|
||
{q:"Зачем добавляют H₂SO₄ при ОВР с KMnO₄?",opts:["Для нейтрализации","Создаёт кислую среду для полного восстановления Mn⁷⁺ → Mn²⁺","Для осаждения","Для цвета"],a:1,ex:"H₂SO₄ (разб.) создаёт кислую среду: MnO₄⁻ + 8H⁺ + 5e⁻ → Mn²⁺ + 4H₂O."},
|
||
{q:"Реакция K₂Cr₂O₇ + H₂SO₄ + FeSO₄ → Cr₂(SO₄)₃ + Fe₂(SO₄)₃ + K₂SO₄ + H₂O. Кто окислитель?",opts:["FeSO₄","K₂Cr₂O₇","H₂SO₄","Fe₂(SO₄)₃"],a:1,ex:"Cr₂O₇²⁻: Cr⁺⁶ → Cr³⁺ (принимает е⁻) — окислитель. Fe²⁺ → Fe³⁺ — восстановитель."},
|
||
{q:"В щелочной среде KMnO₄ даёт MnO₄²⁻ (манганат). Изменение СО Mn?",opts:["+7 → +4","+7 → +2","+7 → +6","+7 → 0"],a:2,ex:"MnO₄⁻ + e⁻ → MnO₄²⁻: Mn+7 → Mn+6 (принимает 1е⁻ на атом Mn)."},
|
||
{q:"В каком случае H₂S — восстановитель?",opts:["H₂S + OH⁻","H₂S + Cl₂ → S + HCl (S⁻² → S⁰)","H₂S + H₂O","H₂S + NaOH"],a:1,ex:"H₂S + Cl₂ → S↓ + 2HCl. S: −2 → 0 (отдаёт е⁻) → H₂S восстановитель."},
|
||
{q:"Реакция SO₂ + Cl₂ + H₂O → H₂SO₄ + HCl. СО S в SO₂ и H₂SO₄?",hint:"SO₂: S=+4; H₂SO₄: S=+6",unit:"(изменение СО S)",a:2,ex:"S: +4 → +6 (отдаёт 2е⁻). SO₂ — восстановитель."},
|
||
{q:"Число молей электронов при окислении 1 моль Fe²⁺ → Fe³⁺?",hint:"Fe²⁺ − 1e⁻ → Fe³⁺",unit:"моль е⁻",a:1,ex:"1 моль Fe²⁺ отдаёт 1 моль е⁻."},
|
||
{q:"Масса SO₂ (M=64) при реакции 6,4 г Cu (M=64) + конц. H₂SO₄? Cu + 2H₂SO₄(конц) → CuSO₄ + SO₂ + 2H₂O.",hint:"n(Cu)=0,1; n(SO₂)=0,1",unit:"г",a:6.4,ex:"n(Cu)=0,1; n(SO₂)=0,1; m=0,1×64=6,4 г."}
|
||
];
|
||
|
||
const TASKS_P23 = [
|
||
{q:"Что такое электрохимическая коррозия металлов?",opts:["Растворение металла в кислоте","Разрушение металла при контакте с электролитом при наличии гальванической пары","Окисление кислородом воздуха","Разрушение при нагреве"],a:1,ex:"Электрохимическая коррозия: гальваническая пара (два разных металла) + электролит → ток → разрушение анода."},
|
||
{q:"В гальванической паре Fe–Cu: кто разрушается?",opts:["Cu","Fe (более активный — анод)","Оба одинаково","Ни один"],a:1,ex:"Fe активнее Cu → Fe — анод (окисляется, разрушается). Cu — катод (восстанавливает O₂ или H⁺)."},
|
||
{q:"Катодная защита металла — это:",opts:["Покрытие лаком","Подключение защищаемого металла к катоду внешнего тока или к более активному металлу","Нанесение масла","Нагрев"],a:1,ex:"Катодная защита: защищаемый металл — катод. Или жертвенный анод (Zn для Fe)."},
|
||
{q:"Протекторная защита: для защиты стальной трубы прикрепляют?",opts:["Медную пластину","Цинковую пластину (Zn активнее Fe — анод, жертва)","Никелевую пластину","Золото"],a:1,ex:"Zn активнее Fe → Zn — анод (окисляется). Fe — катод (не разрушается)."},
|
||
{q:"Коррозия ускоряется при:",opts:["Чистой дистиллированной воде","Присутствии солей и кислот в электролите","Сухом воздухе","Обработке щёлочью"],a:1,ex:"Ионы (Cl⁻, H⁺) повышают проводимость электролита → ускоряют коррозию."},
|
||
{q:"Анодная реакция при коррозии железа: Fe → ?",opts:["Fe²⁺ + 2e⁻ (Fe окисляется)","Fe + 2e⁻","Fe³⁺ − 3e⁻","2Fe + O₂"],a:0,ex:"На аноде (Fe): Fe − 2e⁻ → Fe²⁺. Железо окисляется."},
|
||
{q:"Катодная реакция при коррозии в нейтральной среде (O₂)?",opts:["Fe − 2e⁻ → Fe²⁺","O₂ + 2H₂O + 4e⁻ → 4OH⁻","2H⁺ + 2e⁻ → H₂","Cu²⁺ + 2e⁻ → Cu"],a:1,ex:"На катоде (нейтральная среда): O₂ + 2H₂O + 4e⁻ → 4OH⁻."},
|
||
{q:"Что образуется при взаимодействии Fe²⁺ с OH⁻ при коррозии?",opts:["Fe₂O₃","Fe(OH)₂↓ → Fe₂O₃·nH₂O (ржавчина)","FeCl₂","FeO"],a:1,ex:"Fe²⁺ + 2OH⁻ → Fe(OH)₂↓; при окислении O₂ → Fe(OH)₃ → Fe₂O₃·nH₂O (ржавчина)."}
|
||
];
|
||
|
||
const TASKS_P24 = [
|
||
{q:"Что такое электролиз?",opts:["Самопроизвольный распад электролита","Разложение вещества электрическим током","Химическая реакция горения","Ионный обмен"],a:1,ex:"Электролиз: разложение расплава или раствора электролита под действием постоянного тока."},
|
||
{q:"На каком электроде идёт восстановление при электролизе?",opts:["Аноде","Катоде","На обоих","Нигде"],a:1,ex:"Катод (−): катионы принимают е⁻ → восстановление. Анод (+): анионы отдают е⁻ → окисление."},
|
||
{q:"Электролиз расплава NaCl: что выделяется на катоде?",opts:["Cl₂","Na (металл)","NaOH","H₂"],a:1,ex:"Na⁺ + e⁻ → Na. На катоде — натрий. На аноде: 2Cl⁻ − 2e⁻ → Cl₂."},
|
||
{q:"При электролизе раствора CuSO₄ что выделяется на катоде?",opts:["H₂","SO₂","Cu (медь)","O₂"],a:2,ex:"Cu²⁺ + 2e⁻ → Cu. Медь осаждается на катоде (Cu менее активен, чем H₂)."},
|
||
{q:"Первый закон Фарадея: масса вещества при электролизе…",opts:["Зависит от температуры","Пропорциональна количеству прошедшего заряда Q","Не зависит от тока","Пропорциональна площади электрода"],a:1,ex:"m = (M × Q)/(n × F), где n — число е⁻, F=96485 Кл/моль. Масса ∝ Q."},
|
||
{q:"Масса Cu (M=64, n=2) при электролизе с зарядом Q=96485 Кл (1 Ф)?",hint:"m = M×Q/(n×F) = 64×1/(2×1) = 32 г",unit:"г",a:32,ex:"m = 64 / 2 = 32 г при 1 фарадее (1 моль e⁻)."},
|
||
{q:"Масса Al (M=27, n=3) при электролизе 2 Фарадея?",hint:"m = M × n_F / n_ион = 27×2/3",unit:"г",a:18,ex:"m = 27 × 2/3 = 18 г."},
|
||
{q:"Электролиз водного раствора Na₂SO₄. Что выделяется на катоде?",opts:["Na","SO₂","H₂ (восстановление воды)","O₂"],a:2,ex:"Na⁺ — малоактивный катион не разряжается; вместо него: 2H₂O + 2e⁻ → H₂ + 2OH⁻."}
|
||
];
|
||
|
||
const TASKS_P25 = [
|
||
{q:"Что такое тепловой эффект реакции (ΔH)?",opts:["Скорость реакции","Теплота, выделяемая или поглощаемая в ходе реакции","Энергия активации","Температура воспламенения"],a:1,ex:"ΔH — разность энтальпий продуктов и реагентов. Экзотермические: ΔH < 0; эндотермические: ΔH > 0."},
|
||
{q:"Экзотермическая реакция — это реакция, при которой:",opts:["Выделяется свет","Выделяется теплота (ΔH < 0)","Поглощается теплота","Изменяется цвет"],a:1,ex:"Горение, нейтрализация — экзотермические. ΔH < 0 — теплота выделяется."},
|
||
{q:"Закон Гесса гласит:",opts:["Масса реагентов = массе продуктов","Тепловой эффект не зависит от пути реакции, только от начального и конечного состояния","Скорость реакции растёт с T","Концентрация и давление влияют на равновесие"],a:1,ex:"Закон Гесса: ΔH зависит только от начального и конечного состояния, а не от механизма."},
|
||
{q:"Термохимическое уравнение: CH₄(г) + 2O₂(г) → CO₂(г) + 2H₂O(ж), ΔH = −890 кДж. Что означает знак «−»?",opts:["Поглощение тепла","Выделение тепла","Реакция обратима","Реакция не идёт"],a:1,ex:"ΔH < 0 → экзотермическая реакция: выделяется 890 кДж."},
|
||
{q:"Стандартная энтальпия образования — это ΔH реакции образования 1 моль вещества из:",opts:["Любых реагентов","Простых веществ (стандартных форм) при стандартных условиях","Элементов в газовой фазе","Оксидов"],a:1,ex:"ΔHf° — теплота образования 1 моль вещества из простых веществ (O₂, N₂, Fe и т.д.) при 298 К, 101 кПа."},
|
||
{q:"При сжигании 1 моль C выделяется 393,5 кДж. Сколько кДж при сгорании 2 моль C?",hint:"Q пропорционально числу молей",unit:"кДж",a:787,ex:"Q = 2 × 393,5 = 787 кДж."},
|
||
{q:"ΔH реакции: 2H₂(г) + O₂(г) → 2H₂O(ж), ΔH = −572 кДж. Теплота при сгорании 1 моль H₂?",hint:"Уравнение на 2 моль H₂ → делим на 2",unit:"кДж",a:286,ex:"572 / 2 = 286 кДж на 1 моль H₂."},
|
||
{q:"Реакция разложения CaCO₃ → CaO + CO₂, ΔH = +178 кДж. Это реакция:",opts:["Экзотермическая","Эндотермическая","Нейтральная","Нельзя определить"],a:1,ex:"ΔH > 0 → поглощение тепла → эндотермическая."}
|
||
];
|
||
|
||
const TASKS_P26 = [
|
||
{q:"Строение молекулы N₂?",opts:["Одинарная связь N–N","Двойная связь N=N","Тройная связь N≡N (1σ + 2π)","Ионная связь"],a:2,ex:"N₂: тройная ковалентная неполярная связь N≡N. Очень прочная (946 кДж/моль) → N₂ инертен."},
|
||
{q:"Почему N₂ химически инертен при обычных условиях?",opts:["Ядовит","Тройная связь очень прочная","Газ без цвета","Не взаимодействует с водой"],a:1,ex:"Тройная связь N≡N имеет высокую энергию (946 кДж/моль) → N₂ реагирует лишь при t°, давлении, катализаторе."},
|
||
{q:"Реакция синтеза аммиака (процесс Габера)?",opts:["N₂ + O₂ → 2NO","N₂ + 3H₂ ⇌ 2NH₃ (кат., t°, P)","2N₂ + 3O₂ → 2NO₃⁻","N₂ + H₂O → NH₃ + O₂"],a:1,ex:"N₂ + 3H₂ ⇌ 2NH₃. Промышленный синтез аммиака: катализатор Fe, t=450°C, P=150–200 атм."},
|
||
{q:"Реакция N₂ с кислородом? При каких условиях?",opts:["При обычной температуре","При горении / молнии: N₂ + O₂ → 2NO","N₂ + 2O₂ → 2NO₂","N₂ + O₃ → N₂O₃"],a:1,ex:"N₂ + O₂ → 2NO — только при очень высоких температурах (>2000°C) или в дуге/молнии."},
|
||
{q:"СО азота в NO?",hint:"O: −2; сумма=0",unit:"(значение)",a:2,ex:"N + (−2) = 0 → N = +2."},
|
||
{q:"Масса NH₃ (M=17) из 0,5 моль N₂ при полном синтезе?",hint:"N₂ + 3H₂ → 2NH₃; n(NH₃)=2×0,5=1 моль",unit:"г",a:17,ex:"n(NH₃)=1; m=1×17=17 г."},
|
||
{q:"Объём N₂ (н.у., л) в 28 г N₂ (M=28)?",hint:"n=m/M; V=n×22,4",unit:"л",a:22.4,ex:"n=1 моль; V=22,4 л."},
|
||
{q:"Реакция активных металлов с N₂?",opts:["Нет реакции","Металл + N₂ → нитрид (3Mg + N₂ → Mg₃N₂)","Металл + N₂ → нитрат","Металл + N₂ → аммоний"],a:1,ex:"3Mg + N₂ → Mg₃N₂ — нитрид магния."}
|
||
];
|
||
|
||
const TASKS_P27 = [
|
||
{q:"Получение аммиака в лаборатории?",opts:["N₂ + H₂ при нагреве","NH₄Cl + Ca(OH)₂ → CaCl₂ + 2NH₃ + 2H₂O","Электролиз воды","Разложение HNO₃"],a:1,ex:"2NH₄Cl + Ca(OH)₂ → CaCl₂ + 2NH₃↑ + 2H₂O. Нагревание. Газ — вверх, над водой не собирают."},
|
||
{q:"Физические свойства NH₃?",opts:["Без запаха, тяжелее воздуха","Резкий запах, легче воздуха, хорошо растворяется в воде","Без запаха, малорастворим","Жёлтый газ"],a:1,ex:"NH₃: бесцветный, резкий запах, легче воздуха (M=17 < 29), хорошо растворяется (1:700 объёмов)."},
|
||
{q:"NH₃ в воде образует:",opts:["Азотную кислоту","Аммоний NH₄⁺ и OH⁻ (слабое основание NH₃·H₂O)","HNO₂","N₂"],a:1,ex:"NH₃ + H₂O ⇌ NH₄⁺ + OH⁻ (NH₃·H₂O). Слабое основание."},
|
||
{q:"Реакция NH₃ с HCl?",opts:["NH₃ + HCl → NH₄Cl (дым)","NH₃ + HCl → N₂ + H₂O","NH₃ + HCl → NH₂Cl + H₂","Нет реакции"],a:0,ex:"NH₃ + HCl → NH₄Cl — белый дым (хлорид аммония). Кислотно-основное взаимодействие."},
|
||
{q:"NH₃ как восстановитель (при горении)?",opts:["4NH₃ + 3O₂ → 2N₂ + 6H₂O","NH₃ + O₂ → NO₂","NH₃ + O₂ → NH₄⁺","Нет"],a:0,ex:"4NH₃ + 3O₂ → 2N₂ + 6H₂O (горение без кат.). N: −3 → 0 (восстановитель)."},
|
||
{q:"Масса NH₄Cl (M=53,5) при реакции 0,4 моль NH₃ + HCl?",hint:"NH₃ + HCl → NH₄Cl; n(NH₄Cl)=n(NH₃)",unit:"г",a:21.4,ex:"m=0,4×53,5=21,4 г."},
|
||
{q:"Объём NH₃ (н.у.) из 0,2 моль NH₄Cl + Ca(OH)₂?",hint:"2NH₄Cl + Ca(OH)₂ → CaCl₂ + 2NH₃ + 2H₂O; n(NH₃)=n(NH₄Cl)=0,2",unit:"л",a:4.48,ex:"n(NH₃)=0,2; V=0,2×22,4=4,48 л."},
|
||
{q:"Каталитическое окисление NH₃ даёт:",opts:["N₂","NO (при Pt-кат.: 4NH₃ + 5O₂ → 4NO + 6H₂O)","NH₄NO₃","HNO₂"],a:1,ex:"4NH₃ + 5O₂ → 4NO + 6H₂O (Pt, 800°C) — первая стадия производства HNO₃."}
|
||
];
|
||
|
||
const TASKS_P28 = [
|
||
{q:"Что происходит при нагревании NH₄Cl?",opts:["NH₄Cl плавится","NH₄Cl → NH₃ + HCl (возгонка, обратимо)","NH₄Cl → N₂ + HCl","Нет изменений"],a:1,ex:"NH₄Cl → NH₃ + HCl при нагреве (возгонка). При охлаждении — снова NH₄Cl. Качественная реакция."},
|
||
{q:"Реакция NH₄Cl с NaOH при нагреве?",opts:["Нет реакции","NH₄Cl + NaOH → NaCl + NH₃↑ + H₂O","NH₄Cl + NaOH → NH₄OH + NaCl","NH₄⁺ → N₂"],a:1,ex:"NH₄Cl + NaOH → NaCl + NH₃↑ + H₂O. Запах аммиака — качественная реакция на NH₄⁺."},
|
||
{q:"Гидролиз NH₄Cl: среда раствора?",opts:["Щелочная","Нейтральная","Кислая","Зависит от температуры"],a:2,ex:"NH₄⁺ + H₂O ⇌ NH₃·H₂O + H⁺. pH < 7, кислая среда (соль слабого основания и сильной кислоты)."},
|
||
{q:"Применение солей аммония?",opts:["Взрывчатые вещества","Удобрения (NH₄NO₃, (NH₄)₂SO₄), хладагенты","Только дезинфекция","Строительные материалы"],a:1,ex:"NH₄NO₃ — аммиачная селитра (удобрение). (NH₄)₂SO₄ — сульфат аммония. NH₄Cl — нашатырь."},
|
||
{q:"Разложение NH₄NO₃ при нагреве?",opts:["NH₄NO₃ → N₂ + H₂O","NH₄NO₃ → N₂O↑ + 2H₂O","NH₄NO₃ → NH₃ + HNO₃","NH₄NO₃ → нет"],a:1,ex:"NH₄NO₃ → N₂O + 2H₂O (при умеренном нагреве). N₂O — «веселящий газ»."},
|
||
{q:"Масса NH₃ (M=17) при реакции 5,35 г NH₄Cl (M=53,5) + NaOH?",hint:"n(NH₄Cl)=0,1; n(NH₃)=0,1",unit:"г",a:1.7,ex:"m(NH₃)=0,1×17=1,7 г."},
|
||
{q:"Масса (NH₄)₂SO₄ (M=132) из 0,4 моль NH₃ + H₂SO₄?",hint:"2NH₃ + H₂SO₄ → (NH₄)₂SO₄; n((NH₄)₂SO₄)=0,2",unit:"г",a:26.4,ex:"m=0,2×132=26,4 г."},
|
||
{q:"Качественная реакция на ион NH₄⁺?",opts:["Синеет лакмус","При нагреве с NaOH выделяется NH₃ (запах, синит лакмус)","Белый осадок","Выделяется Cl₂"],a:1,ex:"NH₄⁺ + OH⁻ → NH₃↑ + H₂O. NH₃ синит влажный лакмус и имеет резкий запах."}
|
||
];
|
||
|
||
const TASKS_P29 = [
|
||
{q:"Промышленное получение HNO₃ — стадии?",opts:["Синтез из N₂ и H₂","Каталитическое окисление NH₃ → NO → NO₂ → HNO₃","Электролиз","Нагрев нитратов"],a:1,ex:"1) 4NH₃+5O₂→4NO+6H₂O (Pt). 2) 2NO+O₂→2NO₂. 3) 3NO₂+H₂O→2HNO₃+NO."},
|
||
{q:"Почему HNO₃ — сильный окислитель?",opts:["Сильная кислота","N в степени +5 — сильный окислитель","Летучая кислота","Бесцветная"],a:1,ex:"Азот в HNO₃ имеет СО +5 (максимум) → принимает е⁻ → восстанавливается до NO₂, NO, N₂, NH₃."},
|
||
{q:"Продукт восстановления HNO₃ (конц.) с Cu?",opts:["N₂","NH₃","NO₂ (бурый газ)","H₂"],a:2,ex:"Cu + 4HNO₃(конц.) → Cu(NO₃)₂ + 2NO₂↑ + 2H₂O. Конц. HNO₃ → NO₂."},
|
||
{q:"Продукт восстановления HNO₃ (разб.) с Cu?",opts:["NO₂","NO (бесцветный газ, синеет на воздухе)","N₂O","NH₃"],a:1,ex:"3Cu + 8HNO₃(разб.) → 3Cu(NO₃)₂ + 2NO↑ + 4H₂O. Разб. HNO₃ → NO."},
|
||
{q:"Пассивация металлов конц. HNO₃?",opts:["Все металлы растворяются","Fe, Al, Cr пассивируются (плёнка оксида)","Только Cu","Только Au"],a:1,ex:"Fe, Al, Cr в конц. HNO₃ (холодной) покрываются оксидной плёнкой → пассивация."},
|
||
{q:"Масса Cu(NO₃)₂ (M=188) из 0,1 моль Cu + конц. HNO₃?",hint:"Cu + 4HNO₃(конц) → Cu(NO₃)₂ + 2NO₂ + 2H₂O; n(Cu(NO₃)₂)=0,1",unit:"г",a:18.8,ex:"m=0,1×188=18,8 г."},
|
||
{q:"Объём NO (н.у.) из реакции 0,3 моль Cu + разб. HNO₃?",hint:"3Cu + 8HNO₃ → 3Cu(NO₃)₂ + 2NO + 4H₂O; n(NO)=2/3×0,3=0,2",unit:"л",a:4.48,ex:"n(NO)=0,2; V=0,2×22,4=4,48 л."},
|
||
{q:"СО азота в NO₃⁻?",hint:"O: −2 (×3=−6); заряд −1; N+?=−1",unit:"(значение)",a:5,ex:"N + 3(−2) = −1 → N = +5."}
|
||
];
|
||
|
||
const TASKS_P30 = [
|
||
{q:"Разложение нитрата калия KNO₃ при нагреве?",opts:["KNO₃ → K + NO₃","2KNO₃ → 2KNO₂ + O₂↑","KNO₃ → K₂O + NO₂","KNO₃ → KOH + N₂"],a:1,ex:"2KNO₃ → 2KNO₂ + O₂↑. Нитраты активных металлов (Na, K) → нитриты + O₂."},
|
||
{q:"Разложение нитрата меди Cu(NO₃)₂?",opts:["Cu(NO₃)₂ → Cu(NO₂)₂ + O₂","2Cu(NO₃)₂ → 2CuO + 4NO₂↑ + O₂↑","Cu(NO₃)₂ → Cu + N₂ + O₂","Нет разложения"],a:1,ex:"2Cu(NO₃)₂ → 2CuO + 4NO₂ + O₂. Нитраты металлов средней активности → оксид + NO₂ + O₂."},
|
||
{q:"Нитраты как удобрения — основные применяемые?",opts:["NaNO₃ (натриевая селитра), KNO₃ (калийная), NH₄NO₃ (аммиачная)","Только NH₄NO₃","CaNO₃ и AlNO₃","KNO₂ и NaNO₂"],a:0,ex:"NaNO₃, KNO₃, NH₄NO₃, Ca(NO₃)₂ — азотные удобрения (нитраты)."},
|
||
{q:"Все нитраты...",opts:["Нерастворимы","Растворимы в воде","Нейтральны","Красные"],a:1,ex:"Все нитраты растворимы в воде."},
|
||
{q:"«Царская водка» (3HCl + HNO₃) растворяет золото Au. Почему?",opts:["HCl — сильная кислота","Смесь — очень сильный окислитель (Cl₂, NOCl выделяются)","Au реагирует с водой","HNO₃ слабее в смеси"],a:1,ex:"Царская водка: выделяется Cl₂ и NOCl (нитрозилхлорид) → Au комплексируется: Au + 4HCl + HNO₃ → H[AuCl₄] + NO + 2H₂O."},
|
||
{q:"Масса O₂ (M=32), выделяющегося при разложении 0,2 моль KNO₃?",hint:"2KNO₃ → 2KNO₂ + O₂; n(O₂)=0,1",unit:"г",a:3.2,ex:"n(O₂)=0,1; m=0,1×32=3,2 г."},
|
||
{q:"Масса NO₂ (M=46) при разложении 94 г Cu(NO₃)₂ (M=188)?",hint:"2Cu(NO₃)₂ → 2CuO + 4NO₂ + O₂; n(Cu(NO₃)₂)=0,5; n(NO₂)=1",unit:"г",a:46,ex:"n(Cu(NO₃)₂)=0,5; n(NO₂)=1; m=1×46=46 г."},
|
||
{q:"Нитрат серебра AgNO₃ применяется для:",opts:["Удобрения","Качественной реакции на Cl⁻ (белый осадок AgCl)","Синтеза NH₃","Коррозионной защиты"],a:1,ex:"AgNO₃ + HCl → AgCl↓ + HNO₃. Белый творожистый осадок — качественная реакция на Cl⁻."}
|
||
];
|
||
|
||
const TASKS_P31 = [
|
||
{q:"Аллотропные модификации фосфора?",opts:["Графит и алмаз","Белый, красный и чёрный фосфор","Ромбическая и моноклинная сера","Кислород и озон"],a:1,ex:"Фосфор: белый (P₄, ядовитый, светится), красный (полимерный, менее ядовит), чёрный (слоистый)."},
|
||
{q:"Почему белый фосфор ядовит и хранится под водой?",opts:["Реагирует с CO₂","Самовоспламеняется на воздухе; очень ядовит","Растворяется в воде","Взрывается"],a:1,ex:"Белый фосфор: т.всп. ~34°C → самовоспламеняется на воздухе; хранят под водой."},
|
||
{q:"Горение фосфора?",opts:["P + O₂ → PO₂","4P + 5O₂ → 2P₂O₅ (при избытке O₂)","2P + O₂ → P₂O₂","P + H₂O → H₃PO₄"],a:1,ex:"4P + 5O₂ → 2P₂O₅ (пентоксид фосфора). При недостатке O₂: P₂O₃."},
|
||
{q:"Реакция P с хлором?",opts:["P + Cl₂ → нет","2P + 3Cl₂ → 2PCl₃; 2P + 5Cl₂ → 2PCl₅","P + Cl₂ → PCl","P + 4Cl₂ → PCl₈"],a:1,ex:"2P + 3Cl₂ → 2PCl₃ (недостаток Cl₂). 2P + 5Cl₂ → 2PCl₅ (избыток Cl₂)."},
|
||
{q:"Реакция P с металлами?",opts:["P + металл → нет","P + металл → фосфид (3Mg + 2P → Mg₃P₂)","P + металл → H₃PO₄","P + металл → PO₄³⁻"],a:1,ex:"3Mg + 2P → Mg₃P₂. Фосфид магния."},
|
||
{q:"Масса P₂O₅ (M=142) при сгорании 6,2 г P (M=31)?",hint:"4P + 5O₂ → 2P₂O₅; n(P)=0,2; n(P₂O₅)=0,1",unit:"г",a:14.2,ex:"n(P₂O₅)=0,1; m=0,1×142=14,2 г."},
|
||
{q:"Масса PCl₃ (M=137,5) при реакции 0,4 моль P + Cl₂ (недост.)?",hint:"2P + 3Cl₂ → 2PCl₃; n(PCl₃)=n(P)=0,4",unit:"г",a:55,ex:"n(PCl₃)=0,4; m=0,4×137,5=55 г."},
|
||
{q:"Какой фосфор применяется в производстве спичек?",opts:["Белый","Красный (в коробке) + KClO₃ (в головке)","Чёрный","Фиолетовый"],a:1,ex:"Красный фосфор — в тёрке коробки спичек. В головке — KClO₃ и S."}
|
||
];
|
||
|
||
const TASKS_P32 = [
|
||
{q:"Реакция P₂O₅ с водой?",opts:["P₂O₅ + H₂O → нет","P₂O₅ + 3H₂O → 2H₃PO₄","P₂O₅ + H₂O → H₂PO₄","P₂O₅ + H₂O → HPO₃"],a:1,ex:"P₂O₅ + 3H₂O → 2H₃PO₄ (ортофосфорная кислота)."},
|
||
{q:"H₃PO₄ — это кислота:",opts:["Одноосновная сильная","Двухосновная сильная","Трёхосновная средней силы","Трёхосновная слабая"],a:2,ex:"H₃PO₄ — трёхосновная кислота средней силы (слабее H₂SO₄, сильнее H₂CO₃)."},
|
||
{q:"Какие соли образует H₃PO₄?",opts:["Только средние фосфаты","Средние (Na₃PO₄), гидрофосфаты (Na₂HPO₄), дигидрофосфаты (NaH₂PO₄)","Только кислые","Только нитраты"],a:1,ex:"H₃PO₄ (трёхосновная): три ряда солей — ортофосфаты, гидрофосфаты, дигидрофосфаты."},
|
||
{q:"Качественная реакция на фосфат-ион PO₄³⁻?",opts:["AgNO₃ → AgCl (белый)","BaCl₂ → BaSO₄ (белый)","AgNO₃ → Ag₃PO₄ (жёлтый осадок)","H₂SO₄ → CO₂"],a:2,ex:"Ag⁺ + PO₄³⁻ → Ag₃PO₄↓ (жёлтый). Качественная реакция на PO₄³⁻."},
|
||
{q:"Применение H₃PO₄?",opts:["Только удобрения","Пищевая (Е338), удобрения, ингибитор коррозии, производство Ca₃(PO₄)₂","Только металлургия","Взрывчатые вещества"],a:1,ex:"H₃PO₄: пищевая добавка E338, удобрения, ингибитор коррозии, стоматология (протравка эмали)."},
|
||
{q:"Масса H₃PO₄ (M=98) из 0,2 моль P₂O₅?",hint:"P₂O₅ + 3H₂O → 2H₃PO₄; n(H₃PO₄)=0,4",unit:"г",a:39.2,ex:"m=0,4×98=39,2 г."},
|
||
{q:"Масса Ca₃(PO₄)₂ (M=310) из 0,3 моль H₃PO₄ + Ca(OH)₂?",hint:"2H₃PO₄ + 3Ca(OH)₂ → Ca₃(PO₄)₂ + 6H₂O; n(Ca₃(PO₄)₂)=0,15",unit:"г",a:46.5,ex:"m=0,15×310=46,5 г."},
|
||
{q:"Диссоциация H₃PO₄ — первая ступень?",opts:["H₃PO₄ → 3H⁺ + PO₄³⁻","H₃PO₄ ⇌ H⁺ + H₂PO₄⁻","H₃PO₄ → H₂ + PO₄","H₃PO₄ ⇌ H₂PO₃⁻ + H⁺"],a:1,ex:"Ступенчатая диссоциация: H₃PO₄ ⇌ H⁺ + H₂PO₄⁻ (первая, наиболее сильная ступень)."}
|
||
];
|
||
|
||
const TASKS_P33 = [
|
||
{q:"Классификация минеральных удобрений?",opts:["Кислые и щелочные","Азотные, фосфорные, калийные (+ комплексные)","Органические и минеральные","Жидкие и твёрдые"],a:1,ex:"Азотные (NH₄NO₃, CO(NH₂)₂); фосфорные (суперфосфат); калийные (KCl, K₂SO₄); комплексные (нитрофоска)."},
|
||
{q:"Азотное удобрение — аммиачная селитра. Формула?",opts:["(NH₄)₂SO₄","NH₄NO₃","KNO₃","NaNO₃"],a:1,ex:"NH₄NO₃ — аммиачная селитра: 34% N. Широко применяется в земледелии."},
|
||
{q:"Суперфосфат — фосфорное удобрение. Получение?",opts:["Ca₃(PO₄)₂ + H₂SO₄ → Ca(H₂PO₄)₂ + CaSO₄","P + H₂SO₄ → H₃PO₄","H₃PO₄ + Ca → суперфосфат","P₂O₅ + H₂O → H₃PO₄"],a:0,ex:"Ca₃(PO₄)₂ + 2H₂SO₄ → Ca(H₂PO₄)₂ + 2CaSO₄ — простой суперфосфат."},
|
||
{q:"Калийное удобрение — пример?",opts:["NH₄NO₃","(NH₄)₂SO₄","KCl","Ca₃(PO₄)₂"],a:2,ex:"KCl — хлорид калия (сильвинит). K₂SO₄ — сульфат калия. Применяются как калийные удобрения."},
|
||
{q:"Комплексное удобрение содержит:",opts:["Только N","Только P","Два или более питательных элемента (NPK)","Только Ca"],a:2,ex:"Нитрофоска (N+P+K), нитроаммофоска — комплексные удобрения."},
|
||
{q:"Масса N в 100 г NH₄NO₃ (M=80)?",hint:"NH₄NO₃: 2 атома N; M(N)=14; m(N)=2×14=28 г в 80 г",unit:"г",a:35,ex:"w(N) = 28/80 × 100% = 35 г в 100 г."},
|
||
{q:"Масса P₂O₅ (M=142) в 100 г Ca(H₂PO₄)₂ (M=234, 2 остатка PO₄)?",hint:"Условно считают через M(P₂O₅): 2 атома P в 1 ф.е. → 1 моль P₂O₅ на 1 моль Ca(H₂PO₄)₂",unit:"г",a:60.7,ex:"n=1/234≈0,00427; m(P₂O₅)=0,00427×142×100≈60,7 г. (w ≈ 60,7%)"},
|
||
{q:"Что такое известкование почвы и зачем?",opts:["Внесение KCl для плодородия","Внесение CaCO₃ или Ca(OH)₂ для снижения кислотности почвы","Полив водой","Внесение азотных удобрений"],a:1,ex:"Известкование: CaCO₃ (известняк) или Ca(OH)₂ нейтрализуют кислые почвы → улучшают условия для растений."}
|
||
];
|
||
|
||
const TASKS_P34 = [
|
||
{q:"Аллотропные модификации углерода?",opts:["Только графит","Алмаз, графит, фуллерен (C₆₀), карбин","Антрацит и графит","Уголь и кокс"],a:1,ex:"Углерод: алмаз (самый твёрдый), графит (слоистый, мягкий), фуллерен C₆₀, карбин (цепочки)."},
|
||
{q:"Почему алмаз твёрдый, а графит мягкий?",opts:["Разная масса атомов","В алмазе атомная решётка (связи 4C), в графите — слоистая (слои слабо связаны)","Алмаз — металл","Разная чистота углерода"],a:1,ex:"Алмаз: 4 ковалентные связи C–C (атомная решётка). Графит: слои C – связи между слоями слабые (Ван-дер-Вальс)."},
|
||
{q:"Углерод как восстановитель: реакция с CuO?",opts:["C + CuO → нет","2CuO + C → 2Cu + CO₂ (при высокой t)","C + CuO → CuCO₃","C + 2CuO → Cu₂O + CO₂"],a:1,ex:"2CuO + C → 2Cu + CO₂ (высокая t). Углерод восстанавливает металлы из оксидов."},
|
||
{q:"Углерод как восстановитель в металлургии?",opts:["Только для получения Fe","Кокс (C) восстанавливает Fe, Cu, Pb, Sn из оксидов","C восстанавливает только Na","C — только окислитель"],a:1,ex:"Fe₂O₃ + 3C → 2Fe + 3CO или Fe₂O₃ + 3CO → 2Fe + 3CO₂. Кокс — ключевой восстановитель в домне."},
|
||
{q:"Адсорбция — свойство активированного угля. Что это?",opts:["Поглощение газов внутрь кристалла","Поверхностное поглощение веществ пористым углём","Химическое окисление","Каталитическое разложение"],a:1,ex:"Адсорбция: вещества задерживаются на поверхности активированного угля. Применение: фильтры, противогазы."},
|
||
{q:"Масса CO₂ (M=44) при сжигании 6 г C (M=12)?",hint:"C + O₂ → CO₂; n(C)=0,5",unit:"г",a:22,ex:"n(C)=0,5; n(CO₂)=0,5; m=0,5×44=22 г."},
|
||
{q:"Масса Cu (M=64) из 0,5 моль CuO + кокс (избыток)?",hint:"2CuO + C → 2Cu + CO₂; n(Cu)=n(CuO)=0,5",unit:"г",a:32,ex:"m(Cu)=0,5×64=32 г."},
|
||
{q:"Фуллерен C₆₀: структура?",opts:["Цепочка C","Графитовые плоскости","Сфера из 60 атомов C (пятиугольники + шестиугольники)","Алмазная решётка"],a:2,ex:"C₆₀ — фуллерен: сферическая молекула (12 пятиугольников + 20 шестиугольников). Открыт в 1985 г."}
|
||
];
|
||
|
||
const TASKS_P35 = [
|
||
{q:"Реакция C с кислородом при недостатке O₂?",opts:["C + O₂ → CO₂","2C + O₂ → 2CO (угарный газ)","C + O₂ → CO₃","C + 2O₂ → CO₄"],a:1,ex:"При недостатке O₂: 2C + O₂ → 2CO (угарный газ). При избытке: C + O₂ → CO₂."},
|
||
{q:"Почему CO ядовит?",opts:["Реагирует с водой","Связывается с гемоглобином крови вместо O₂ (образует COHb)","Взрывоопасен","Кислотный газ"],a:1,ex:"CO образует карбоксигемоглобин (COHb) — более прочный, чем оксигемоглобин. Блокирует перенос O₂."},
|
||
{q:"CO как восстановитель?",opts:["CO + Fe₂O₃ → Fe + CO₂ (да)","CO — только окислитель","CO не реагирует с оксидами","CO + H₂O → нет"],a:0,ex:"Fe₂O₃ + 3CO → 2Fe + 3CO₂. CO — восстановитель в металлургии (доменная печь)."},
|
||
{q:"Свойства CO₂?",opts:["Горит","CO₂ + H₂O → H₂CO₃ (кислотный оксид), не поддерживает горение","CO₂ — основной оксид","CO₂ нейтральный"],a:1,ex:"CO₂ — кислотный оксид: CO₂ + H₂O ⇌ H₂CO₃. Не поддерживает горение, тяжелее воздуха."},
|
||
{q:"Реакция CO₂ с Ca(OH)₂?",opts:["CO₂ + Ca(OH)₂ → нет","CO₂ + Ca(OH)₂ → CaCO₃↓ + H₂O (известковая вода мутнеет)","CO₂ + CaO → Ca(CO)₂","CO₂ + Ca(OH)₂ → Ca + H₂CO₃"],a:1,ex:"CO₂ + Ca(OH)₂ → CaCO₃↓ + H₂O — качественная реакция на CO₂."},
|
||
{q:"Масса CO (M=28) при реакции 0,4 моль C + недостаток O₂?",hint:"2C + O₂ → 2CO; n(CO)=n(C)=0,4",unit:"г",a:11.2,ex:"m=0,4×28=11,2 г."},
|
||
{q:"Объём CO₂ (н.у.) при реакции 0,5 моль Fe₂O₃ + CO (изб.)?",hint:"Fe₂O₃ + 3CO → 2Fe + 3CO₂; n(CO₂)=1,5",unit:"л",a:33.6,ex:"V=1,5×22,4=33,6 л."},
|
||
{q:"Парниковый эффект — роль CO₂?",opts:["CO₂ поглощает УФ-радиацию","CO₂ поглощает ИК-излучение Земли и удерживает тепло","CO₂ отражает солнечный свет","CO₂ разрушает озоновый слой"],a:1,ex:"CO₂ поглощает инфракрасное излучение Земли → замедляет охлаждение атмосферы → парниковый эффект."}
|
||
];
|
||
|
||
const TASKS_P36 = [
|
||
{q:"Угольная кислота H₂CO₃ — это...",opts:["Сильная кислота","Слабая двухосновная кислота, существует только в растворе","Одноосновная кислота","Соль"],a:1,ex:"H₂CO₃ — слабая, двухосновная. Не выделяется в чистом виде: CO₂ + H₂O ⇌ H₂CO₃."},
|
||
{q:"Соли угольной кислоты?",opts:["Карбонаты (CO₃²⁻) и гидрокарбонаты (HCO₃⁻)","Только карбонаты","Только гидрокарбонаты","Нитраты и сульфаты"],a:0,ex:"H₂CO₃ (двухосн.): средние — карбонаты (Na₂CO₃), кислые — гидрокарбонаты (NaHCO₃)."},
|
||
{q:"Жёсткость воды — причина?",opts:["Высокое содержание NaCl","Растворённые Ca²⁺ и Mg²⁺ (главным образом их гидрокарбонаты и сульфаты)","Высокое содержание O₂","Наличие глины"],a:1,ex:"Жёсткость воды: Ca(HCO₃)₂, Mg(HCO₃)₂ (временная), CaSO₄, MgSO₄ (постоянная)."},
|
||
{q:"Устранение временной жёсткости (кипячением)?",opts:["Ca(HCO₃)₂ → CaCO₃↓ + H₂O + CO₂↑","CaSO₄ → Ca + SO₃","Ca²⁺ + NaCl → CaCl₂","Нет реакции"],a:0,ex:"Ca(HCO₃)₂ → CaCO₃↓ + H₂O + CO₂ — кипячение устраняет временную жёсткость."},
|
||
{q:"Устранение постоянной жёсткости?",opts:["Кипячением","Добавлением Na₂CO₃: Ca²⁺ + CO₃²⁻ → CaCO₃↓","Добавлением NaCl","Нагреванием"],a:1,ex:"CaSO₄ не разлагается при кипячении. Добавляют Na₂CO₃ или Na₃PO₄ → осаждение Ca²⁺."},
|
||
{q:"Реакция Na₂CO₃ + HCl?",opts:["Na₂CO₃ + HCl → NaCl + CO₃","Na₂CO₃ + 2HCl → 2NaCl + H₂O + CO₂↑","Нет реакции","Na₂CO₃ + HCl → NaHCO₃"],a:1,ex:"Na₂CO₃ + 2HCl → 2NaCl + H₂O + CO₂↑."},
|
||
{q:"Масса CaCO₃ (M=100) осадка при кипячении 1 л воды, содержащей 0,01 моль Ca(HCO₃)₂?",hint:"Ca(HCO₃)₂ → CaCO₃ + H₂O + CO₂; n(CaCO₃)=n(Ca(HCO₃)₂)=0,01",unit:"г",a:1,ex:"m=0,01×100=1 г."},
|
||
{q:"Масса Na₂CO₃ (M=106) для осаждения 0,2 моль Ca²⁺?",hint:"Ca²⁺ + CO₃²⁻ → CaCO₃; n(Na₂CO₃)=n(Ca²⁺)=0,2",unit:"г",a:21.2,ex:"m=0,2×106=21,2 г."}
|
||
];
|
||
|
||
const TASKS_P37 = [
|
||
{q:"Кремний Si — полупроводник. Почему?",opts:["Жидкий металл","По электропроводности между металлом и диэлектриком; с ростом t — проводимость растёт","Реагирует с водой","Мягкий как воск"],a:1,ex:"Si — полупроводник: имеет атомную решётку как алмаз, но бо́льшие атомы → более слабые связи → при нагреве растёт проводимость."},
|
||
{q:"Реакция Si с HF (единственная кислота)?",opts:["Si + HF → нет","Si + 4HF → SiF₄ + 2H₂↑","Si + HCl → SiCl₄","Si + H₂SO₄ → SiSO₄"],a:1,ex:"Si + 4HF → SiF₄↑ + 2H₂. HF — единственная кислота, растворяющая Si и SiO₂."},
|
||
{q:"Реакция Si с NaOH?",opts:["Нет реакции","Si + 2NaOH + H₂O → Na₂SiO₃ + 2H₂↑","Si + NaOH → SiO₂","Si + 4NaOH → Na₄SiO₄"],a:1,ex:"Si + 2NaOH + H₂O → Na₂SiO₃ + 2H₂↑. Кремний растворяется в щёлочах (амфотерные свойства)."},
|
||
{q:"Применение Si?",opts:["Только стекло","Полупроводниковая электроника (транзисторы, чипы, солнечные батареи)","Удобрение","Только строительство"],a:1,ex:"Si: полупроводники (чипы), солнечные батареи, оптические волокна (SiO₂)."},
|
||
{q:"Реакция Si + O₂?",opts:["Si + O₂ → нет","Si + O₂ → SiO₂ (при высокой t)","Si + 2O₂ → SiO₄","Si + O₂ → Si₂O"],a:1,ex:"Si + O₂ → SiO₂ (при высокой t). SiO₂ — твёрдый, т.пл. ~1700°C."},
|
||
{q:"Масса SiO₂ (M=60) при горении 0,5 моль Si?",hint:"Si + O₂ → SiO₂; n(SiO₂)=0,5",unit:"г",a:30,ex:"m=0,5×60=30 г."},
|
||
{q:"Масса H₂ (M=2) при реакции 28 г Si (M=28) + NaOH?",hint:"Si + 2NaOH + H₂O → Na₂SiO₃ + 2H₂; n(Si)=1; n(H₂)=2",unit:"г",a:4,ex:"n(H₂)=2; m=2×2=4 г."},
|
||
{q:"SiF₄ + 2H₂O → ?",opts:["SiO₂ + HF","H₂SiO₃ + HF (частичный гидролиз) → SiO₂·H₂O + 4HF","SiF₄ не реагирует с водой","Si + HF + O₂"],a:1,ex:"SiF₄ + 3H₂O → H₂SiO₃ + 4HF (гидролиз). Кремниевая кислота выпадает в осадок."}
|
||
];
|
||
|
||
const TASKS_P38 = [
|
||
{q:"Свойства SiO₂?",opts:["Растворяется в воде","Кислотный оксид: не реагирует с водой, но реагирует с щёлочами и HF","Основной оксид","Амфотерный: реагирует с кислотами"],a:1,ex:"SiO₂ — кислотный оксид. С H₂O не реагирует. С NaOH: SiO₂ + 2NaOH → Na₂SiO₃ + H₂O. С HF: SiO₂ + 4HF → SiF₄ + 2H₂O."},
|
||
{q:"Реакция SiO₂ + NaOH?",opts:["SiO₂ + NaOH → нет","SiO₂ + 2NaOH → Na₂SiO₃ + H₂O","SiO₂ + NaOH → NaSiH₃O₃","SiO₂ + 2NaOH → Na₂SiO₄ + H₂"],a:1,ex:"SiO₂ + 2NaOH → Na₂SiO₃ + H₂O. При сплавлении с NaOH или Na₂CO₃."},
|
||
{q:"«Жидкое стекло» — это:",opts:["Расплавленный SiO₂","Водный раствор Na₂SiO₃ (силиката натрия)","Расплав Na₂SiO₃","Коллоидный SiO₂"],a:1,ex:"Жидкое стекло — концентрированный раствор Na₂SiO₃. Применяют как огнезащитное покрытие, клей."},
|
||
{q:"Кремниевая кислота H₂SiO₃ — свойства?",opts:["Сильная растворимая кислота","Слабая нерастворимая кислота (гель); разлагается при нагреве на SiO₂ + H₂O","Нейтральное вещество","Хорошо растворяется"],a:1,ex:"H₂SiO₃ слабее H₂CO₃ — не растворяется в воде. При нагреве: H₂SiO₃ → SiO₂ + H₂O."},
|
||
{q:"Стекло — состав?",opts:["Чистый SiO₂","Na₂O·CaO·6SiO₂ (смесь силикатов Na и Ca)","SiO₂ + C","Si + O₂"],a:1,ex:"Обычное стекло: Na₂SiO₃ + CaSiO₃ + SiO₂ (сплавление Na₂CO₃ + CaCO₃ + SiO₂)."},
|
||
{q:"Масса Na₂SiO₃ (M=122) при реакции 60 г SiO₂ (M=60) + NaOH (изб.)?",hint:"SiO₂ + 2NaOH → Na₂SiO₃ + H₂O; n(SiO₂)=1",unit:"г",a:122,ex:"n(Na₂SiO₃)=1; m=122 г."},
|
||
{q:"Масса H₂SiO₃ (M=78) при реакции 0,2 моль Na₂SiO₃ + HCl?",hint:"Na₂SiO₃ + 2HCl → 2NaCl + H₂SiO₃↓",unit:"г",a:15.6,ex:"n(H₂SiO₃)=0,2; m=0,2×78=15,6 г."},
|
||
{q:"Почему HF травит стекло?",opts:["HF — сильная кислота","SiO₂ + 4HF → SiF₄↑ + 2H₂O — SiO₂ растворяется в HF","HF — восстановитель","HF реагирует с Na₂O"],a:1,ex:"HF единственная кислота, растворяющая SiO₂ (и Si). Используют для травления стекла."}
|
||
];
|
||
|
||
const TASKS_P39 = [
|
||
{q:"Строительные материалы на основе кремния — основные виды?",opts:["Только стекло","Стекло, керамика (кирпич, фарфор), цемент, бетон, известь","Только цемент","Только пластик"],a:1,ex:"Силикатные строительные материалы: стекло (Na₂O·CaO·6SiO₂), керамика (Al₂Si₂O₅(OH)₄), цемент (Ca-алюмосиликаты), бетон."},
|
||
{q:"Получение негашёной извести CaO?",opts:["Ca + O₂ → CaO","CaCO₃ → CaO + CO₂ (обжиг известняка при ~1000°C)","Ca(OH)₂ → CaO (охлаждение)","Ca + H₂O → CaO + H₂"],a:1,ex:"CaCO₃ → CaO + CO₂ — обжиг известняка (мрамора). CaO — «негашёная известь»."},
|
||
{q:"Гашение извести?",opts:["CaO + CO₂ → CaCO₃","CaO + H₂O → Ca(OH)₂ (гашёная известь, пушонка)","CaO + HCl → CaCl₂","CaO + NaOH → Ca(NaO)₂"],a:1,ex:"CaO + H₂O → Ca(OH)₂ + Q (реакция экзотермическая)."},
|
||
{q:"Цементирование (схватывание цемента) — химический процесс?",opts:["Испарение воды","Гидратация алюмосиликатов Ca → образование кристаллов","Горение CaO","Растворение SiO₂"],a:1,ex:"Цемент (Ca-алюмосиликаты) + вода → гидратация → образование кристаллов → твердение."},
|
||
{q:"Портландцемент состоит из:",opts:["Чистого SiO₂","Смеси Ca-алюмосиликатов (CaO·Al₂O₃·SiO₂) — продукт обжига известняка + глины","CaCO₃ + Al₂O₃","NaCl + SiO₂"],a:1,ex:"Портландцемент: обжиг CaCO₃ + Al₂Si₂O₅(OH)₄ (глина) → Ca-алюмосиликаты."},
|
||
{q:"Масса Ca(OH)₂ (M=74) при гашении 28 г CaO (M=56)?",hint:"CaO + H₂O → Ca(OH)₂; n(CaO)=0,5",unit:"г",a:37,ex:"n(Ca(OH)₂)=0,5; m=0,5×74=37 г."},
|
||
{q:"Масса CO₂ (M=44) при обжиге 200 г CaCO₃ (M=100)?",hint:"CaCO₃ → CaO + CO₂; n(CaCO₃)=2",unit:"г",a:88,ex:"n(CO₂)=2; m=2×44=88 г."},
|
||
{q:"Фарфор и фаянс — сырьё?",opts:["Только SiO₂","Каолин Al₂Si₂O₅(OH)₄ (белая глина), полевой шпат, кварц","Только CaCO₃","CaO + Na₂O"],a:1,ex:"Фарфор: каолин + полевой шпат + кварц. Обжиг при 1300–1400°C → плотный, белый, просвечивает."}
|
||
];
|
||
|
||
|
||
const TASKS_P40 = [
|
||
{
|
||
q: "Что такое металлическая связь?",
|
||
opts: [
|
||
"Ковалентная связь в кристалле металла",
|
||
"Ионная связь между атомами",
|
||
"Связь между катионами через обобществлённые электроны",
|
||
"Водородная связь между молекулами"
|
||
],
|
||
a: 2,
|
||
ex: "Металлическая связь — между катионами металлов посредством обобществлённых («свободных») электронов («электронного газа»). Объясняет электропроводность, теплопроводность и пластичность металлов."
|
||
},
|
||
{
|
||
q: "В каком виде активные металлы (K, Na, Ca) встречаются в природе?",
|
||
opts: [
|
||
"В виде самородного металла (простого вещества)",
|
||
"Только в виде оксидов",
|
||
"В виде сложных веществ: хлоридов, карбонатов, сульфатов",
|
||
"Только в виде сульфидов"
|
||
],
|
||
a: 2,
|
||
ex: "Активные металлы K, Na, Ca встречаются только в виде соединений: NaCl, CaCO₃, KCl, Na₂SO₄ и др. В свободном виде их в природе нет — мгновенно реагируют с водой и кислородом воздуха."
|
||
},
|
||
{
|
||
q: "Какой металл является самым распространённым в земной коре?",
|
||
opts: ["Железо (Fe) — ~5%", "Кальций (Ca) — ~3%", "Алюминий (Al) — ~8%", "Натрий (Na) — ~2%"],
|
||
a: 2,
|
||
ex: "Алюминий Al — самый распространённый металл в земной коре (~8% массы). Для сравнения: Fe ≈ 5%, Ca ≈ 3%. Самый распространённый элемент вообще — кислород O (47%)."
|
||
},
|
||
{
|
||
q: "Каким способом получают активные металлы (Na, K, Ca, Al)?",
|
||
opts: [
|
||
"Пирометаллургией (восстановление коксом)",
|
||
"Гидрометаллургией (кислотное растворение)",
|
||
"Электролизом расплавов их солей или оксидов",
|
||
"Алюминотермией (восстановление Al)"
|
||
],
|
||
a: 2,
|
||
ex: "Активные металлы нельзя получить пирометаллургией. Применяют электролиз расплавов: 2NaCl(расплав) → 2Na + Cl₂↑; 2Al₂O₃(расплав) → 4Al + 3O₂↑. Они сами являются слишком сильными восстановителями."
|
||
},
|
||
{
|
||
q: "Рассчитайте массу алюминия, содержащегося в 51 г оксида алюминия Al₂O₃.",
|
||
hint: "$M(\\text{Al}_2\\text{O}_3) = 102\\,\\text{г/моль}$. В формуле — 2 атома Al. $n(\\text{Al}) = 2{\\cdot}n(\\text{Al}_2\\text{O}_3)$.",
|
||
unit: "г", a: 27,
|
||
ex: "$n(\\text{Al}_2\\text{O}_3) = 51/102 = 0{,}5\\,\\text{моль}$; $n(\\text{Al}) = 0{,}5{\\cdot}2 = 1\\,\\text{моль}$; $m(\\text{Al}) = 1{\\cdot}27 = 27\\,\\text{г}$"
|
||
},
|
||
];
|
||
|
||
const TASKS_P41 = [
|
||
{
|
||
q: "Самый пластичный металл — это:",
|
||
opts: ["Серебро (Ag)", "Алюминий (Al)", "Золото (Au)", "Медь (Cu)"],
|
||
a: 2,
|
||
ex: "Золото Au — самый пластичный металл: из 1 г можно вытянуть проволоку 3420 м. Порядок пластичности: Au > Ag > Al > Cu > Fe. Хрупкие металлы: Bi, Mn, Cr."
|
||
},
|
||
{
|
||
q: "Самый тугоплавкий металл — это:",
|
||
opts: ["Платина (Pt), 1768 °C", "Вольфрам (W), 3410 °C", "Железо (Fe), 1538 °C", "Хром (Cr), 1907 °C"],
|
||
a: 1,
|
||
ex: "Вольфрам W — самый тугоплавкий металл (3410 °C). Из него изготавливают нити ламп накаливания. Самый легкоплавкий — ртуть Hg (−39 °C, жидкая при н.у.)."
|
||
},
|
||
{
|
||
q: "Из каких компонентов состоит бронза?",
|
||
opts: [
|
||
"Cu + Zn (медь + цинк)",
|
||
"Cu + Sn (медь + олово)",
|
||
"Al + Cu + Mg (дюралюминий)",
|
||
"Fe + C (железо + углерод)"
|
||
],
|
||
a: 1,
|
||
ex: "Бронза: Cu ≈ 90%, Sn ≈ 10%. Латунь — Cu + Zn. Дюралюминий — Al + Cu + Mg. Сталь — Fe + C < 2%. Чугун — Fe + C 2–4%."
|
||
},
|
||
{
|
||
q: "Массовая доля углерода в чугуне составляет:",
|
||
opts: ["Менее 0,5%", "0,5–1,5%", "2–4%", "Более 10%"],
|
||
a: 2,
|
||
ex: "Чугун: Fe + C (2–4 %). Сталь: Fe + C < 2% — более пластична. Чугун хрупче стали, используется для литья труб, посуды, решёток."
|
||
},
|
||
{
|
||
q: "На золотом украшении указана проба 750. Масса украшения — 20 г. Рассчитайте массу золота в нём.",
|
||
hint: "Проба 750: в 1000 г сплава — 750 г Au. $\\omega(\\text{Au}) = 0{,}75$. $m = m_{\\text{сплав}}{\\cdot}\\omega$.",
|
||
unit: "г", a: 15,
|
||
ex: "$m(\\text{Au}) = 20{\\cdot}0{,}75 = 15\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Бронза содержит 90% меди. Рассчитайте массу меди в 400 г бронзы.",
|
||
hint: "$m(\\text{Cu}) = m_{\\text{сплав}}{\\cdot}\\omega(\\text{Cu})$. $\\omega = 0{,}90$.",
|
||
unit: "г", a: 360,
|
||
ex: "$m(\\text{Cu}) = 400{\\cdot}0{,}90 = 360\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "В сплаве серебра проба 875. Масса украшения — 8 г. Рассчитайте массу серебра в нём.",
|
||
hint: "Проба 875: в 1000 г сплава — 875 г Ag. $\\omega(\\text{Ag}) = 0{,}875$.",
|
||
unit: "г", a: 7,
|
||
ex: "$m(\\text{Ag}) = 8{\\cdot}0{,}875 = 7\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Бронза содержит 90% меди и 10% олова. Рассчитайте массу меди в 200 г бронзы.",
|
||
hint: "$m(\\text{Cu}) = m_{\\text{сплав}}{\\cdot}\\omega(\\text{Cu})$. $\\omega = 0{,}90$.",
|
||
unit: "г", a: 180,
|
||
ex: "$m(\\text{Cu}) = 200{\\cdot}0{,}90 = 180\\,\\text{г}$"
|
||
},
|
||
];
|
||
|
||
const TASKS_P42 = [
|
||
{
|
||
q: "Какой металл реагирует с водой при обычной температуре?",
|
||
opts: ["Железо (Fe)", "Магний (Mg)", "Натрий (Na)", "Медь (Cu)"],
|
||
a: 2,
|
||
ex: "Натрий — активный металл. Реакция: 2Na + 2H₂O = 2NaOH + H₂↑ (бурно!). Mg — только с горячей водой. Fe — только с водяным паром. Cu с водой не реагирует."
|
||
},
|
||
{
|
||
q: "В химических реакциях металлы всегда являются:",
|
||
opts: ["Окислителями (принимают e⁻)", "Катализаторами", "Восстановителями (отдают e⁻)", "Растворителями"],
|
||
a: 2,
|
||
ex: "Атомы металлов всегда отдают электроны: Me⁰ − ne⁻ → Meⁿ⁺ (окисление). Металл — восстановитель. Партнёр-окислитель принимает эти электроны. Все реакции с металлами — ОВР."
|
||
},
|
||
{
|
||
q: "Какой металл НЕ реагирует с разбавленной соляной кислотой HCl?",
|
||
opts: ["Железо (Fe)", "Цинк (Zn)", "Алюминий (Al)", "Медь (Cu)"],
|
||
a: 3,
|
||
ex: "Медь Cu расположена правее H₂ в ряду активности. С разбавленными HCl и H₂SO₄ реагируют только металлы, стоящие левее водорода. Cu + HCl(разб.) — реакция не идёт."
|
||
},
|
||
{
|
||
q: "Что образуется при взаимодействии <strong>активного металла с водой</strong>?",
|
||
opts: [
|
||
"Оксид металла и O₂",
|
||
"Щёлочь и H₂",
|
||
"Соль и вода",
|
||
"Кислота и H₂"
|
||
],
|
||
a: 1,
|
||
ex: "Пример: 2Na + 2H₂O = 2NaOH + H₂↑. Активные металлы (от K до Al включительно) дают щёлочь (гидроксид металла) и водород. Щелочные металлы реагируют бурно — вплоть до воспламенения!"
|
||
},
|
||
{
|
||
q: "Какая из реакций НЕ протекает согласно ряду активности металлов?",
|
||
opts: [
|
||
"Zn + CuSO₄ = ZnSO₄ + Cu↓",
|
||
"Fe + 2AgNO₃ = Fe(NO₃)₂ + 2Ag↓",
|
||
"Cu + FeSO₄ = CuSO₄ + Fe↓",
|
||
"Cu + 2AgNO₃ = Cu(NO₃)₂ + 2Ag↓"
|
||
],
|
||
a: 2,
|
||
ex: "Медь Cu стоит правее железа Fe в ряду активности — Cu НЕ может вытеснить Fe из его соли. Реакция идёт только если металл-вытеснитель стоит левее металла из соли."
|
||
},
|
||
{
|
||
q: "Магний массой 4,8 г растворили в соляной кислоте. Рассчитайте объём H₂ (н.у.).",
|
||
hint: "Mg + 2HCl = MgCl₂ + H₂↑. $M(\\text{Mg}) = 24$. $n = m/M$;   $V = n{\\cdot}V_m$.",
|
||
unit: "дм³", a: 4.48,
|
||
ex: "$n(\\text{Mg}) = 4{,}8/24 = 0{,}2\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}2\\,\\text{моль}$; $V = 0{,}2{\\cdot}22{,}4 = 4{,}48\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Железо массой 2,8 г внесли в раствор CuSO₄. Рассчитайте массу выделившейся меди.",
|
||
hint: "Fe + CuSO₄ = FeSO₄ + Cu↓. $M(\\text{Fe}) = 56$; $M(\\text{Cu}) = 64$.",
|
||
unit: "г", a: 3.2,
|
||
ex: "$n(\\text{Fe}) = 2{,}8/56 = 0{,}05\\,\\text{моль}$; $n(\\text{Cu}) = 0{,}05\\,\\text{моль}$; $m(\\text{Cu}) = 0{,}05{\\cdot}64 = 3{,}2\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Железную пластинку опустили в CuSO₄. Масса пластинки увеличилась на 4 г. Найдите массу осевшей меди.",
|
||
hint: "Fe + CuSO₄ = FeSO₄ + Cu↓. Прирост = $m(\\text{Cu}) - m(\\text{Fe}) = (64-56)n = 8n$.",
|
||
unit: "г", a: 32,
|
||
ex: "$8n = 4\\Rightarrow n = 0{,}5\\,\\text{моль}$; $m(\\text{Cu}) = 0{,}5{\\cdot}64 = 32\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Цинк массой 13 г растворили в разбавленной серной кислоте. Рассчитайте объём H₂ (н.у.).",
|
||
hint: "Zn + H₂SO₄(разб.) = ZnSO₄ + H₂↑. $M(\\text{Zn}) = 65\\,\\text{г/моль}$.",
|
||
unit: "дм³", a: 4.48,
|
||
ex: "$n(\\text{Zn}) = 13/65 = 0{,}2\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}2\\,\\text{моль}$; $V = 0{,}2{\\cdot}22{,}4 = 4{,}48\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Натрий массой 4,6 г прореагировал с водой. Рассчитайте объём H₂ (н.у.).",
|
||
hint: "2Na + 2H₂O = 2NaOH + H₂↑. $M(\\text{Na}) = 23\\,\\text{г/моль}$. Соотношение Na : H₂ = 2 : 1.",
|
||
unit: "дм³", a: 2.24,
|
||
ex: "$n(\\text{Na}) = 4{,}6/23 = 0{,}2\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}2/2 = 0{,}1\\,\\text{моль}$; $V = 0{,}1{\\cdot}22{,}4 = 2{,}24\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Кальций массой 4 г прореагировал с водой. Рассчитайте массу Ca(OH)₂.",
|
||
hint: "Ca + 2H₂O = Ca(OH)₂ + H₂↑. $M(\\text{Ca}) = 40$, $M(\\text{Ca(OH)}_2) = 74\\,\\text{г/моль}$.",
|
||
unit: "г", a: 7.4,
|
||
ex: "$n(\\text{Ca}) = 4/40 = 0{,}1\\,\\text{моль}$; $n(\\text{Ca(OH)}_2) = 0{,}1\\,\\text{моль}$; $m = 0{,}1{\\cdot}74 = 7{,}4\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Магний массой 4,8 г сожгли в кислороде. Рассчитайте массу оксида MgO.",
|
||
hint: "2Mg + O₂ = 2MgO. Соотношение Mg : MgO = 1 : 1. $M(\\text{MgO}) = 40\\,\\text{г/моль}$.",
|
||
unit: "г", a: 8,
|
||
ex: "$n(\\text{Mg}) = 4{,}8/24 = 0{,}2\\,\\text{моль}$; $n(\\text{MgO}) = 0{,}2\\,\\text{моль}$; $m = 0{,}2{\\cdot}40 = 8\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Железо реагирует с водяным паром. Какой оксид образуется и почему?",
|
||
opts: [
|
||
"Fe₂O₃ — потому что Fe окисляется до +3 всегда",
|
||
"FeO — наименее окисленный продукт",
|
||
"Fe₃O₄ — смешанный оксид (FeO·Fe₂O₃)",
|
||
"Fe(OH)₂ — вода даёт гидроксид"
|
||
],
|
||
a: 2,
|
||
ex: "3Fe + 4H₂O(пар) = Fe₃O₄ + 4H₂↑. Fe₃O₄ — магнетит, смешанный оксид FeO·Fe₂O₃. Тот же продукт и при горении Fe в O₂. С холодной водой Fe не реагирует."
|
||
},
|
||
{
|
||
q: "Укажите верное уравнение химической реакции:",
|
||
opts: [
|
||
"Cu + 2HCl = CuCl₂ + H₂↑",
|
||
"2Na + Cl₂ = 2NaCl",
|
||
"Fe + H₂O = FeO + H₂↑",
|
||
"Ag + H₂SO₄(разб.) = Ag₂SO₄ + H₂↑"
|
||
],
|
||
a: 1,
|
||
ex: "Верно: 2Na + Cl₂ = 2NaCl. Ошибки: Cu стоит правее H₂ (не реагирует с HCl); Fe + пар → Fe₃O₄, не FeO; Ag правее H₂ (не реагирует с разб. H₂SO₄)."
|
||
},
|
||
{
|
||
q: "Какое из уравнений имеет верно расставленные коэффициенты?",
|
||
opts: [
|
||
"Na + 2H₂O = NaOH + H₂↑",
|
||
"2Na + 2H₂O = 2NaOH + H₂↑",
|
||
"Na + H₂O = NaOH + 2H₂↑",
|
||
"2Na + H₂O = 2NaOH + H₂↑"
|
||
],
|
||
a: 1,
|
||
ex: "2Na + 2H₂O = 2NaOH + H₂↑. Проверка: Na — 2/2 ✓; H — 4/4 ✓; O — 2/2 ✓. В остальных вариантах нарушен атомный баланс."
|
||
},
|
||
{
|
||
q: "При взаимодействии алюминия с бромом образуется:",
|
||
opts: ["AlBr (бромид алюминия I)", "AlBr₂ (бромид алюминия II)", "AlBr₃ (бромид алюминия III)", "Al₂Br₃"],
|
||
a: 2,
|
||
ex: "Al имеет степень окисления +3, Br — −1. Формула соли: AlBr₃. Уравнение: 2Al + 3Br₂ = 2AlBr₃. Al образует только AlBr₃."
|
||
},
|
||
{
|
||
q: "Каков коэффициент перед HCl: 2Al + ?HCl = 2AlCl₃ + 3H₂↑?",
|
||
opts: ["2", "4", "6", "8"],
|
||
a: 2,
|
||
ex: "2Al + 6HCl = 2AlCl₃ + 3H₂↑. Проверка: Al — 2/2 ✓; Cl — 6/6 ✓; H — 6/6 ✓. Коэффициент перед HCl равен 6."
|
||
},
|
||
{
|
||
q: "С каким веществом железо НЕ реагирует?",
|
||
opts: [
|
||
"HCl (разбавленная соляная кислота)",
|
||
"CuSO₄ (сульфат меди II)",
|
||
"AgNO₃ (нитрат серебра)",
|
||
"ZnCl₂ (хлорид цинка)"
|
||
],
|
||
a: 3,
|
||
ex: "Fe стоит правее Zn: ...Al Zn Fe... → Fe не может вытеснить Zn из ZnCl₂ (Zn активнее Fe). С HCl, CuSO₄, AgNO₃ железо реагирует."
|
||
},
|
||
{
|
||
q: "Какое уравнение горения магния правильно?",
|
||
opts: [
|
||
"Mg + O₂ = MgO",
|
||
"2Mg + O₂ = 2MgO",
|
||
"Mg + 2O₂ = 2MgO",
|
||
"4Mg + O₂ = 4MgO"
|
||
],
|
||
a: 1,
|
||
ex: "2Mg + O₂ = 2MgO. Проверка: Mg — 2/2 ✓; O — 2/2 ✓. В варианте 1: Mg + O₂ = MgO — дисбаланс по O (2 слева, 1 справа)."
|
||
},
|
||
{
|
||
q: "Продукты реакции натрия с водой — это:",
|
||
opts: ["Na₂O + H₂↑", "NaOH + H₂↑", "NaH + O₂↑", "Na₂O₂ + H₂↑"],
|
||
a: 1,
|
||
ex: "2Na + 2H₂O = 2NaOH + H₂↑. Активные металлы + вода → гидроксид (щёлочь) + H₂. Реакция бурная, с шипением и нагревом."
|
||
},
|
||
{
|
||
q: "Для каких металлов верны оба утверждения: реагирует с H₂O (н.у.) И с HCl?",
|
||
opts: ["Fe, Cu", "Cu, Ag", "Na, Ca", "Fe, Pb"],
|
||
a: 2,
|
||
ex: "Na и Ca — активные металлы: реагируют с водой при н.у. (2Na + 2H₂O = 2NaOH + H₂↑) и с HCl. Fe реагирует с HCl, но не с водой при н.у. Cu и Ag — малоактивны."
|
||
},
|
||
{
|
||
q: "При реакции цинка с разбавленной серной кислотой образуются:",
|
||
opts: ["ZnS + H₂O", "ZnSO₄ + H₂↑", "ZnO + H₂S↑", "Zn(SO₄)₂ + H₂↑"],
|
||
a: 1,
|
||
ex: "Zn + H₂SO₄(разб.) = ZnSO₄ + H₂↑. Металл (левее H₂) + разбавленная кислота → соль + водород. Zn(SO₄)₂ неверно — у Zn степень окисления только +2."
|
||
},
|
||
{
|
||
q: "Металл II группы массой 2,4 г реагирует с HCl, выделяя 2,24 дм³ H₂ (н.у.). Рассчитайте молярную массу металла.",
|
||
hint: "Me + 2HCl = MeCl₂ + H₂↑. $n(\\text{Me}) = n(\\text{H}_2) = V/V_m$; $M = m/n$.",
|
||
unit: "г/моль", a: 24,
|
||
ex: "$n(\\text{H}_2) = 2{,}24/22{,}4 = 0{,}1\\,\\text{моль}$; $n(\\text{Me}) = 0{,}1\\,\\text{моль}$; $M = 2{,}4/0{,}1 = 24\\,\\text{г/моль}$ → <strong>магний Mg</strong>"
|
||
},
|
||
{
|
||
q: "Для восстановления 16 г CuO водородом (CuO + H₂ = Cu + H₂O) рассчитайте объём H₂ (н.у.).",
|
||
hint: "Соотношение CuO : H₂ = 1 : 1. $M(\\text{CuO}) = 80\\,\\text{г/моль}$.",
|
||
unit: "дм³", a: 4.48,
|
||
ex: "$n(\\text{CuO}) = 16/80 = 0{,}2\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}2\\,\\text{моль}$; $V = 0{,}2{\\cdot}22{,}4 = 4{,}48\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Рассчитайте, сколько граммов кальция потребуется для получения 11,2 дм³ H₂ (н.у.) по реакции с водой.",
|
||
hint: "Ca + 2H₂O = Ca(OH)₂ + H₂↑. Соотношение Ca : H₂ = 1 : 1. $M(\\text{Ca}) = 40\\,\\text{г/моль}$.",
|
||
unit: "г", a: 20,
|
||
ex: "$n(\\text{H}_2) = 11{,}2/22{,}4 = 0{,}5\\,\\text{моль}$; $n(\\text{Ca}) = 0{,}5\\,\\text{моль}$; $m(\\text{Ca}) = 0{,}5{\\cdot}40 = 20\\,\\text{г}$"
|
||
},
|
||
];
|
||
|
||
const TASKS_P43 = [
|
||
{
|
||
q: "Реагирует ли алюминий с раствором гидроксида натрия NaOH?",
|
||
opts: [
|
||
"Нет — Al не реагирует со щелочами",
|
||
"Да: 2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑",
|
||
"Да, но только при нагревании выше 300 °C",
|
||
"Только с расплавом NaOH, не с раствором"
|
||
],
|
||
a: 1,
|
||
ex: "Al — амфотерный металл: реагирует как с кислотами, так и со щелочами. 2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑. Это уникальное свойство Al среди распространённых металлов."
|
||
},
|
||
{
|
||
q: "Почему алюминий стоек к коррозии, несмотря на высокую активность?",
|
||
opts: [
|
||
"Al — инертный металл, не реагирует с воздухом",
|
||
"На поверхности образуется тонкая прочная оксидная плёнка Al₂O₃",
|
||
"Al реагирует с воздухом только при T > 500 °C",
|
||
"Оксид алюминия растворяется в воде и обновляется"
|
||
],
|
||
a: 1,
|
||
ex: "При контакте с воздухом Al мгновенно покрывается тонкой плёнкой Al₂O₃ (несколько нм), которая прочно защищает металл. Плёнка разрушается в кислотах и щелочах."
|
||
},
|
||
{
|
||
q: "Что такое оксид алюминия Al₂O₃ с точки зрения кислотно-основной классификации?",
|
||
opts: [
|
||
"Основной оксид (реагирует только с кислотами)",
|
||
"Кислотный оксид (реагирует только со щелочами)",
|
||
"Амфотерный оксид (реагирует и с кислотами, и со щелочами)",
|
||
"Несолеобразующий оксид"
|
||
],
|
||
a: 2,
|
||
ex: "Al₂O₃ — амфотерный оксид: Al₂O₃ + 6HCl = 2AlCl₃ + 3H₂O (как основной); Al₂O₃ + 2NaOH = 2NaAlO₂ + H₂O (как кислотный). Аналогично — Al(OH)₃ амфотерный гидроксид."
|
||
},
|
||
{
|
||
q: "Алюминий массой 5,4 г реагирует с соляной кислотой. Рассчитайте объём H₂ (н.у.).",
|
||
hint: "2Al + 6HCl = 2AlCl₃ + 3H₂↑. Соотношение Al : H₂ = 2 : 3.",
|
||
unit: "дм³", a: 6.72,
|
||
ex: "$n(\\text{Al}) = 5{,}4/27 = 0{,}2\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}2{\\cdot}\\frac{3}{2} = 0{,}3\\,\\text{моль}$; $V = 0{,}3{\\cdot}22{,}4 = 6{,}72\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Алюминий массой 2,7 г реагирует с раствором NaOH. Рассчитайте объём H₂ (н.у.).",
|
||
hint: "2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑. Соотношение Al : H₂ = 2 : 3.",
|
||
unit: "дм³", a: 3.36,
|
||
ex: "$n(\\text{Al}) = 2{,}7/27 = 0{,}1\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}1{\\cdot}\\frac{3}{2} = 0{,}15\\,\\text{моль}$; $V = 0{,}15{\\cdot}22{,}4 = 3{,}36\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Алюминий массой 2,7 г и цинк массой 3,25 г растворили в избытке HCl. Рассчитайте суммарный объём H₂ (н.у.).",
|
||
hint: "2Al + 6HCl = 2AlCl₃ + 3H₂↑;   Zn + 2HCl = ZnCl₂ + H₂↑. Сложите $n(\\text{H}_2)$ от каждого.",
|
||
unit: "дм³", a: 4.48,
|
||
ex: "$n(\\text{Al}) = 0{,}1\\,\\text{моль} \\Rightarrow n(\\text{H}_2) = 0{,}15$;   $n(\\text{Zn}) = 0{,}05\\,\\text{моль} \\Rightarrow n(\\text{H}_2) = 0{,}05$;   $V = (0{,}15+0{,}05){\\cdot}22{,}4 = 4{,}48\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "При сгорании 5,4 г алюминия (4Al + 3O₂ = 2Al₂O₃) рассчитайте массу оксида Al₂O₃.",
|
||
hint: "Соотношение Al : Al₂O₃ = 4 : 2 = 2 : 1. $M(\\text{Al}_2\\text{O}_3) = 102\\,\\text{г/моль}$.",
|
||
unit: "г", a: 10.2,
|
||
ex: "$n(\\text{Al}) = 5{,}4/27 = 0{,}2\\,\\text{моль}$;   $n(\\text{Al}_2\\text{O}_3) = 0{,}1\\,\\text{моль}$;   $m = 0{,}1{\\cdot}102 = 10{,}2\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Алюминий массой 5,4 г сожгли в хлоре. Рассчитайте массу AlCl₃.",
|
||
hint: "2Al + 3Cl₂ = 2AlCl₃. Соотношение Al : AlCl₃ = 1 : 1. $M(\\text{AlCl}_3) = 133{,}5\\,\\text{г/моль}$.",
|
||
unit: "г", a: 26.7,
|
||
ex: "$n(\\text{Al}) = 5{,}4/27 = 0{,}2\\,\\text{моль}$; $n(\\text{AlCl}_3) = 0{,}2\\,\\text{моль}$; $m = 0{,}2{\\cdot}133{,}5 = 26{,}7\\,\\text{г}$"
|
||
},
|
||
];
|
||
|
||
const TASKS_P44 = [
|
||
{
|
||
q: "Какой оксид железа образуется при горении железа в кислороде?",
|
||
opts: [
|
||
"FeO (оксид железа II, чёрный)",
|
||
"Fe₂O₃ (оксид железа III, бурый)",
|
||
"Fe₃O₄ (магнетит, чёрный)",
|
||
"Fe(OH)₃ (гидроксид железа III)"
|
||
],
|
||
a: 2,
|
||
ex: "3Fe + 2O₂ = Fe₃O₄ (магнетит, смешанный оксид FeO·Fe₂O₃). Такой же оксид Fe₃O₄ образуется при реакции Fe с водяным паром. Fe₂O₃ (ржавчина) — продукт медленного окисления."
|
||
},
|
||
{
|
||
q: "Какой цвет имеет свежеосаждённый гидроксид железа(II) Fe(OH)₂?",
|
||
opts: [
|
||
"Бурый (коричневый)",
|
||
"Белый (зеленоватый)",
|
||
"Жёлтый",
|
||
"Синий"
|
||
],
|
||
a: 1,
|
||
ex: "Fe(OH)₂ — белый (зеленоватый) осадок. На воздухе быстро буреет: 4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃↓ (бурый). Fe(OH)₃ — бурый (коричнево-красный) осадок."
|
||
},
|
||
{
|
||
q: "Что образуется при взаимодействии железа с разбавленной соляной кислотой?",
|
||
opts: [
|
||
"FeCl₃ (хлорид железа III, Fe³⁺)",
|
||
"FeCl₂ (хлорид железа II, Fe²⁺)",
|
||
"FeO (оксид железа II)",
|
||
"Fe₂O₃ (оксид железа III)"
|
||
],
|
||
a: 1,
|
||
ex: "Fe + 2HCl = FeCl₂ + H₂↑. С разбавленными кислотами Fe даёт Fe²⁺ (катион железа II). FeCl₃ образуется с хлором (более сильный окислитель): 2Fe + 3Cl₂ = 2FeCl₃."
|
||
},
|
||
{
|
||
q: "Железо массой 5,6 г растворили в соляной кислоте. Рассчитайте объём H₂ (н.у.).",
|
||
hint: "Fe + 2HCl = FeCl₂ + H₂↑. $M(\\text{Fe}) = 56$. Соотношение Fe : H₂ = 1 : 1.",
|
||
unit: "дм³", a: 2.24,
|
||
ex: "$n(\\text{Fe}) = 5{,}6/56 = 0{,}1\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}1\\,\\text{моль}$; $V = 0{,}1{\\cdot}22{,}4 = 2{,}24\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Смесь железа и меди 12 г обработали избытком HCl. Выделилось 2,24 дм³ H₂ (н.у.). Найдите массу Fe.",
|
||
hint: "Медь с HCl не реагирует! Fe + 2HCl = FeCl₂ + H₂↑. $n(\\text{Fe}) = n(\\text{H}_2) = V/V_m$.",
|
||
unit: "г", a: 5.6,
|
||
ex: "$n(\\text{H}_2) = 2{,}24/22{,}4 = 0{,}1\\,\\text{моль}$; $n(\\text{Fe}) = 0{,}1\\,\\text{моль}$; $m(\\text{Fe}) = 0{,}1{\\cdot}56 = 5{,}6\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Железную пластину массой 20 г опустили в CuSO₄. Масса пластины стала 20,4 г. Рассчитайте массу осевшей меди.",
|
||
hint: "Fe + CuSO₄ = FeSO₄ + Cu↓. Прирост массы = $m(\\text{Cu}) - m(\\text{Fe}) = (64-56){\\cdot}n = 8n$.",
|
||
unit: "г", a: 3.2,
|
||
ex: "$8n = 0{,}4\\,\\text{г} \\Rightarrow n = 0{,}05\\,\\text{моль}$;   $m(\\text{Cu}) = 0{,}05{\\cdot}64 = 3{,}2\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Какой реактив позволяет отличить раствор FeCl₂ от FeCl₃?",
|
||
opts: [
|
||
"Соляная кислота HCl — с FeCl₂ реагирует, с FeCl₃ нет",
|
||
"Роданид калия KSCN — с Fe³⁺ даёт кроваво-красное окрашивание",
|
||
"Хлорид натрия NaCl — осаждает Fe²⁺, но не Fe³⁺",
|
||
"Вода H₂O — FeCl₂ нерастворим, FeCl₃ растворим"
|
||
],
|
||
a: 1,
|
||
ex: "KSCN + FeCl₃ → Fe(SCN)₃ — кроваво-красный цвет. С FeCl₂ (Fe²⁺) KSCN не даёт красного окрашивания. Также: NaOH с FeCl₂ → белый осадок Fe(OH)₂; с FeCl₃ → бурый Fe(OH)₃."
|
||
},
|
||
];
|
||
|
||
const TASKS_P45 = [
|
||
{
|
||
q: "Электролиз — это процесс, протекающий под действием:",
|
||
opts: [
|
||
"Переменного тока через твёрдый электролит",
|
||
"Постоянного электрического тока через расплав или раствор электролита",
|
||
"Высокой температуры без тока",
|
||
"Ультрафиолетового излучения"
|
||
],
|
||
a: 1,
|
||
ex: "Электролиз — окислительно-восстановительный процесс на электродах при пропускании <strong>постоянного электрического тока</strong> через расплавы или растворы электролитов."
|
||
},
|
||
{
|
||
q: "Как называется отрицательно заряженный электрод в электролизёре?",
|
||
opts: ["Анод", "Диод", "Катод", "Электролит"],
|
||
a: 2,
|
||
ex: "<strong>Катод</strong> — отрицательно заряженный электрод. К нему движутся катионы (положительные ионы). Анод — положительно заряженный электрод, к нему движутся анионы."
|
||
},
|
||
{
|
||
q: "Какой процесс протекает на катоде при электролизе?",
|
||
opts: ["Окисление — ионы отдают e⁻", "Восстановление — ионы принимают e⁻", "Нейтрализация", "Гидролиз"],
|
||
a: 1,
|
||
ex: "На <strong>катоде</strong> — <strong>восстановление</strong>: катионы принимают электроны от катода и восстанавливаются. На аноде — окисление: анионы отдают электроны и окисляются."
|
||
},
|
||
{
|
||
q: "Что образуется на катоде при электролизе расплава NaCl?",
|
||
opts: ["Газ хлор Cl₂", "Газ водород H₂", "Металлический натрий Na", "Оксид натрия Na₂O"],
|
||
a: 2,
|
||
ex: "Катод (−): Na⁺ + 1e⁻ → Na⁰. Образуется <strong>металлический натрий</strong> — серебристое жидкое вещество (t°пл. 97,8 °C)."
|
||
},
|
||
{
|
||
q: "Что выделяется на аноде при электролизе расплава NaCl?",
|
||
opts: ["Металлический натрий Na", "Газ кислород O₂", "Газ хлор Cl₂", "Газ водород H₂"],
|
||
a: 2,
|
||
ex: "Анод (+): 2Cl⁻ − 2e⁻ → Cl₂↑. Выделяется <strong>зеленовато-жёлтый газ хлор</strong>. Суммарно: 2NaCl(расплав) → 2Na + Cl₂↑."
|
||
},
|
||
{
|
||
q: "При электролизе расплава CaF₂ на аноде выделяется:",
|
||
opts: ["Ca металл", "H₂ газ", "O₂ газ", "F₂ газ"],
|
||
a: 3,
|
||
ex: "Анод: 2F⁻ − 2e⁻ → F₂↑. На катоде: Ca²⁺ + 2e⁻ → Ca⁰. Суммарно: CaF₂(расплав) → Ca + F₂↑."
|
||
},
|
||
{
|
||
q: "Электролизу подвергли расплав NaCl массой 117 г. Рассчитайте массу натрия, выделившегося на катоде.",
|
||
hint: "$M(\\text{NaCl}) = 58{,}5\\,\\text{г/моль}$. Уравнение: $2\\text{NaCl} \\to 2\\text{Na} + \\text{Cl}_2\\uparrow$. $n(\\text{Na}) = n(\\text{NaCl})$. $M(\\text{Na}) = 23\\,\\text{г/моль}$.",
|
||
unit: "г", a: 46,
|
||
ex: "$n(\\text{NaCl}) = 117/58{,}5 = 2\\,\\text{моль}$; $n(\\text{Na}) = 2\\,\\text{моль}$; $m(\\text{Na}) = 2{\\cdot}23 = 46\\,\\text{г}$"
|
||
},
|
||
{
|
||
q: "Электролизу подвергли расплав NaCl массой 117 г. Рассчитайте объём хлора (н.у.), выделившегося на аноде.",
|
||
hint: "$n(\\text{NaCl}) = 2\\,\\text{моль}$. Уравнение: $2\\text{NaCl} \\to 2\\text{Na} + \\text{Cl}_2\\uparrow$. $n(\\text{Cl}_2) = n(\\text{NaCl})/2$. $V_m = 22{,}4\\,\\text{дм}^3/\\text{моль}$.",
|
||
unit: "дм³", a: 22.4,
|
||
ex: "$n(\\text{Cl}_2) = 2/2 = 1\\,\\text{моль}$; $V(\\text{Cl}_2) = 1{\\cdot}22{,}4 = 22{,}4\\,\\text{дм}^3$"
|
||
},
|
||
];
|
||
|
||
const TASKS_P46 = [
|
||
{
|
||
q: "Какие металлы группы IIA называются щёлочноземельными?",
|
||
opts: [
|
||
"Все металлы группы IIA, включая Mg и Be",
|
||
"Ca, Sr, Ba и Ra (без Mg и Be)",
|
||
"Только Ca и Ba",
|
||
"Mg, Ca и Sr"
|
||
],
|
||
a: 1,
|
||
ex: "Щёлочноземельными называют <strong>Ca, Sr, Ba и Ra</strong> — природное семейство группы IIA. Магний (Mg) и бериллий (Be) в это семейство <em>не входят</em>. Название дано потому, что оксиды этих металлов («земли») реагируют с водой, образуя щёлочи."
|
||
},
|
||
{
|
||
q: "Чем по строению атомов щёлочноземельные металлы отличаются от щелочных?",
|
||
opts: [
|
||
"Щёлочноземельные имеют 1 валентный электрон (ns¹), щелочные — 2 (ns²)",
|
||
"Щёлочноземельные имеют 2 валентных электрона (ns²), щелочные — 1 (ns¹)",
|
||
"Оба семейства имеют одинаковую конфигурацию ns¹",
|
||
"Щёлочноземельные имеют конфигурацию np², щелочные — ns¹"
|
||
],
|
||
a: 1,
|
||
ex: "У щелочных металлов на внешнем уровне <strong>1 электрон (ns¹)</strong>, у щёлочноземельных — <strong>2 электрона (ns²)</strong>. Поэтому ЩЗМ удерживают электроны сильнее и чуть менее активны, чем стоящие рядом щелочные металлы."
|
||
},
|
||
{
|
||
q: "Выберите более активный металл из пары Sr и Ba:",
|
||
opts: [
|
||
"Sr — у него меньший атомный номер, значит, он активнее",
|
||
"Ba — в ряду Mg→Ra химическая активность возрастает",
|
||
"Одинаково активны",
|
||
"Mg — он самый активный в группе IIA"
|
||
],
|
||
a: 1,
|
||
ex: "В ряду Mg → Ca → Sr → Ba → Ra <strong>химическая активность возрастает</strong>: радиус атома увеличивается, валентные электроны удерживаются ядром слабее. Поэтому <strong>Ba активнее, чем Sr</strong>."
|
||
},
|
||
{
|
||
q: "Как изменяются температуры плавления металлов в ряду Mg → Ba?",
|
||
opts: [
|
||
"Возрастают",
|
||
"Убывают",
|
||
"Не изменяются",
|
||
"Сначала возрастают, затем убывают"
|
||
],
|
||
a: 1,
|
||
ex: "В ряду Mg → Ra плотность металлов <strong>увеличивается</strong>, а температуры плавления <strong>уменьшаются</strong>. Это связано с увеличением радиуса атомов и ослаблением металлической связи."
|
||
},
|
||
{
|
||
q: "С какими из перечисленных веществ реагируют щёлочноземельные металлы?",
|
||
opts: [
|
||
"Только с кислотами и водой",
|
||
"Только с неметаллами",
|
||
"С галогенами, кислородом, серой, азотом, водой и кислотами",
|
||
"Только с галогенами и кислородом"
|
||
],
|
||
a: 2,
|
||
ex: "ЩЗМ реагируют с <strong>галогенами</strong> (Mg + I₂ = MgI₂), <strong>кислородом</strong> (2Mg + O₂ = 2MgO), <strong>серой</strong> (Sr + S = SrS), <strong>азотом</strong> (3Mg + N₂ = Mg₃N₂), <strong>водой</strong> и <strong>кислотами</strong>."
|
||
},
|
||
{
|
||
q: "Какова биологическая роль магния в растениях?",
|
||
opts: [
|
||
"Входит в состав гемоглобина — переносчика кислорода",
|
||
"Входит в состав хлорофилла — зелёного пигмента, участвующего в фотосинтезе",
|
||
"Является основным компонентом клеточных стенок",
|
||
"Участвует в синтезе белков как катализатор"
|
||
],
|
||
a: 1,
|
||
ex: "Магний входит в состав <strong>хлорофилла</strong> — зелёного пигмента растений, играющего ключевую роль в процессе <strong>фотосинтеза</strong>. В теле взрослого человека содержится около 70 г Mg."
|
||
},
|
||
{
|
||
q: "Кальций массой 8 г прореагировал с водой. Рассчитайте объём выделившегося водорода (н.у.).",
|
||
hint: "$\\text{Ca} + 2\\text{H}_2\\text{O} = \\text{Ca(OH)}_2 + \\text{H}_2\\uparrow$. $M(\\text{Ca}) = 40\\,\\text{г/моль}$. $n(\\text{H}_2) = n(\\text{Ca})$. $V_m = 22{,}4\\,\\text{дм}^3/\\text{моль}$.",
|
||
unit: "дм³", a: 4.48,
|
||
ex: "$n(\\text{Ca}) = 8/40 = 0{,}2\\,\\text{моль}$; $n(\\text{H}_2) = 0{,}2\\,\\text{моль}$; $V = 0{,}2{\\cdot}22{,}4 = 4{,}48\\,\\text{дм}^3$"
|
||
},
|
||
{
|
||
q: "Неизвестный щёлочноземельный металл прореагировал с водой. Выделился H₂ объёмом 3,36 дм³ (н.у.) и образовалось основание массой 25,65 г. Определите металл.",
|
||
opts: [
|
||
"Mg (M = 24 г/моль)",
|
||
"Ca (M = 40 г/моль)",
|
||
"Sr (M = 88 г/моль)",
|
||
"Ba (M = 137 г/моль)"
|
||
],
|
||
a: 3,
|
||
ex: "Me + 2H₂O = Me(OH)₂ + H₂↑. $n(\\text{H}_2) = 3{,}36/22{,}4 = 0{,}15\\,\\text{моль}$; $n(\\text{Me}) = 0{,}15\\,\\text{моль}$. $M(\\text{Me(OH)}_2) = 25{,}65/0{,}15 = 171\\,\\text{г/моль}$. $M(\\text{Me}) = 171 - 34 = 137\\,\\text{г/моль}$ → <strong>Ba (барий)</strong>."
|
||
},
|
||
];
|
||
|
||
const TASKS_P47 = [
|
||
{
|
||
q: "Как правильно называется вещество CaO?",
|
||
opts: [
|
||
"Гидроксид кальция (гашёная известь)",
|
||
"Карбонат кальция",
|
||
"Оксид кальция (негашёная известь)",
|
||
"Сульфат кальция (гипс)"
|
||
],
|
||
a: 2,
|
||
ex: "CaO — оксид кальция, в быту «негашёная известь». Ca(OH)₂ = гашёная известь, CaCO₃ = мрамор/мел, CaSO₄·2H₂O = гипс."
|
||
},
|
||
{
|
||
q: "Что происходит при реакции CaO + H₂O?",
|
||
opts: [
|
||
"Выделяется газ H₂",
|
||
"Образуется нерастворимый осадок MgO",
|
||
"Выделяется много теплоты, образуется Ca(OH)₂",
|
||
"Реакция не идёт при обычных условиях"
|
||
],
|
||
a: 2,
|
||
ex: "CaO + H₂O = Ca(OH)₂ + Q. Реакция «гашения» — бурная, выделяется большое количество теплоты. Продукт — гашёная известь Ca(OH)₂."
|
||
},
|
||
{
|
||
q: "Чем отличается алебастр от гипса?",
|
||
opts: [
|
||
"Это одно и то же вещество с разными названиями",
|
||
"Гипс — CaSO₄·2H₂O (дигидрат), алебастр — 2CaSO₄·H₂O (полугидрат)",
|
||
"Алебастр содержит карбонат кальция CaCO₃",
|
||
"Алебастр получают растворением гипса в воде"
|
||
],
|
||
a: 1,
|
||
ex: "Гипс (CaSO₄·2H₂O) содержит 2 молекулы воды. Алебастр — полугидрат (2CaSO₄·H₂O). Алебастр получают нагреванием гипса при 120–180°C. При добавлении воды алебастр снова твердеет в гипс."
|
||
},
|
||
{
|
||
q: "Что такое «известковая вода»?",
|
||
opts: [
|
||
"Взвесь CaCO₃ в воде",
|
||
"Прозрачный раствор Ca(OH)₂",
|
||
"Раствор CaCl₂",
|
||
"Суспензия CaO в воде"
|
||
],
|
||
a: 1,
|
||
ex: "Известковая вода — прозрачный раствор гидроксида кальция Ca(OH)₂. При пропускании CO₂ мутнеет: Ca(OH)₂ + CO₂ = CaCO₃↓ + H₂O. Используется для обнаружения CO₂."
|
||
},
|
||
{
|
||
q: "Какой катион окрашивает пламя в кирпично-красный цвет?",
|
||
opts: ["Mg²⁺", "Ba²⁺", "Ca²⁺", "Na⁺"],
|
||
a: 2,
|
||
ex: "Ca²⁺ — кирпично-красное пламя, Ba²⁺ — жёлто-зелёное, Na⁺ — ярко-жёлтое. Mg²⁺ не даёт характерного цвета пламени."
|
||
},
|
||
{
|
||
q: "Что происходит с раствором известковой воды при длительном пропускании избытка CO₂?",
|
||
opts: [
|
||
"Осадок CaCO₃ увеличивается в размерах",
|
||
"Осадок CaCO₃ растворяется, раствор снова становится прозрачным",
|
||
"Выделяется газ O₂",
|
||
"Раствор окрашивается в красный цвет"
|
||
],
|
||
a: 1,
|
||
ex: "При избытке CO₂: CaCO₃ + CO₂ + H₂O = Ca(HCO₃)₂. Гидрокарбонат кальция растворим — осадок исчезает. Это же объясняет растворение мрамора под действием кислых дождей."
|
||
},
|
||
{
|
||
q: "Какую массу CaO (г) получат при разложении 200 г CaCO₃? M(CaCO₃)=100, M(CaO)=56.",
|
||
hint: "CaCO₃ →(t) CaO + CO₂↑. $n(\\text{CaCO}_3) = m/M$, затем 1:1 по стехиометрии.",
|
||
unit: "г",
|
||
a: 112,
|
||
ex: "n(CaCO₃) = 200/100 = 2 моль. По уравнению 1 моль CaCO₃ → 1 моль CaO. n(CaO) = 2 моль. m(CaO) = 2 × 56 = 112 г."
|
||
},
|
||
{
|
||
q: "Какую массу алебастра 2CaSO₄·H₂O (г) получат из 4300 г гипса CaSO₄·2H₂O? M(гипса)=172, M(алебастра)=290.",
|
||
hint: "2(CaSO₄·2H₂O) →(t) 2CaSO₄·H₂O + 3H₂O. 2 моль гипса → 1 моль алебастра.",
|
||
unit: "г",
|
||
a: 3625,
|
||
ex: "n(гипса) = 4300/172 = 25 моль. По реакции 2 моль гипса → 1 моль алебастра (M=290 г/моль). n(алебастра) = 25/2 = 12,5 моль. m = 12,5 × 290 = 3625 г."
|
||
},
|
||
];
|
||
|
||
const TASKS_P48 = [
|
||
{
|
||
q: "Какой реагент используют для обнаружения иона Ca²⁺?",
|
||
opts: [
|
||
"Серная кислота H₂SO₄",
|
||
"Карбонат-ион CO₃²⁻ (р-р Na₂CO₃ или K₂CO₃)",
|
||
"Нитрат серебра AgNO₃",
|
||
"Гидроксид натрия NaOH"
|
||
],
|
||
a: 1,
|
||
ex: "Ca²⁺ + CO₃²⁻ = CaCO₃↓ (белый осадок) — качественная реакция на Ca²⁺. AgNO₃ — для галогенид-ионов, NaOH — для тяжёлых металлов."
|
||
},
|
||
{
|
||
q: "Какой осадок образуется при обнаружении Ba²⁺ с помощью сульфат-иона?",
|
||
opts: [
|
||
"Белый осадок BaSO₄, нерастворимый в кислотах",
|
||
"Голубой осадок Ba(OH)₂",
|
||
"Бурый осадок Ba₂O₃",
|
||
"Осадок не образуется"
|
||
],
|
||
a: 0,
|
||
ex: "Ba²⁺ + SO₄²⁻ = BaSO₄↓ — белый осадок, нерастворимый ни в разбавленных, ни в концентрированных кислотах. Это отличает его от CaCO₃ (растворяется в HCl)."
|
||
},
|
||
{
|
||
q: "Что такое «временная (карбонатная) жёсткость» воды?",
|
||
opts: [
|
||
"Присутствие ионов Ca²⁺ в виде CaSO₄",
|
||
"Присутствие Ca(HCO₃)₂ и Mg(HCO₃)₂, устраняемая кипячением",
|
||
"Жёсткость, которую нельзя устранить никакими методами",
|
||
"Жёсткость, вызванная хлоридами Ca и Mg"
|
||
],
|
||
a: 1,
|
||
ex: "Временная (карбонатная) жёсткость — содержание гидрокарбонатов Ca(HCO₃)₂ и Mg(HCO₃)₂. «Временная» — потому что устраняется кипячением: Ca(HCO₃)₂ →(t) CaCO₃↓ + H₂O + CO₂↑."
|
||
},
|
||
{
|
||
q: "Почему при кипячении жёсткой воды на стенках чайника образуется накипь?",
|
||
opts: [
|
||
"Испаряется CaCl₂",
|
||
"Ca(HCO₃)₂ разлагается, образуя нерастворимый CaCO₃↓",
|
||
"CaSO₄ нагревается и твердеет",
|
||
"Ионы Ca²⁺ окисляются до CaO"
|
||
],
|
||
a: 1,
|
||
ex: "Ca(HCO₃)₂ →(t) CaCO₃↓ + H₂O + CO₂↑. Нерастворимый CaCO₃ оседает на стенках — это и есть накипь. Она плохо проводит тепло и снижает КПД нагревателя."
|
||
},
|
||
{
|
||
q: "Как устранить постоянную (некарбонатную) жёсткость воды?",
|
||
opts: [
|
||
"Кипячением",
|
||
"Добавлением Na₂CO₃ (соды)",
|
||
"Добавлением HCl",
|
||
"Охлаждением воды до 0°C"
|
||
],
|
||
a: 1,
|
||
ex: "CaSO₄ + Na₂CO₃ = CaCO₃↓ + Na₂SO₄. Сода осаждает Ca²⁺ и Mg²⁺ в виде нерастворимых карбонатов. Кипячение постоянную жёсткость не устраняет."
|
||
},
|
||
{
|
||
q: "Чем отличается BaSO₄ от CaCO₃ по растворимости?",
|
||
opts: [
|
||
"BaSO₄ легко растворяется в HCl, CaCO₃ — нет",
|
||
"BaSO₄ нерастворим даже в концентрированных кислотах, CaCO₃ растворяется в HCl",
|
||
"Оба одинаково нерастворимы в любых кислотах",
|
||
"Оба растворяются в HCl, выделяя газ"
|
||
],
|
||
a: 1,
|
||
ex: "CaCO₃ + 2HCl = CaCl₂ + H₂O + CO₂↑ (растворяется с газом). BaSO₄ не растворяется ни в разб., ни в конц. кислотах — именно поэтому SO₄²⁻ является надёжным реагентом для обнаружения Ba²⁺."
|
||
},
|
||
{
|
||
q: "Какую массу CaCO₃ (г) получат при кипячении воды, содержащей 16,2 г Ca(HCO₃)₂? M(Ca(HCO₃)₂)=162, M(CaCO₃)=100.",
|
||
hint: "Ca(HCO₃)₂ →(t) CaCO₃↓ + H₂O + CO₂↑. Реакция 1:1. $n = m/M$.",
|
||
unit: "г",
|
||
a: 10,
|
||
ex: "n(Ca(HCO₃)₂) = 16,2/162 = 0,1 моль. По уравнению 1:1. n(CaCO₃) = 0,1 моль. m(CaCO₃) = 0,1 × 100 = 10 г."
|
||
},
|
||
{
|
||
q: "Какую массу Na₂CO₃ (г) нужно добавить, чтобы осадить Ca²⁺ из воды, содержащей 1,36 г CaSO₄? M(CaSO₄)=136, M(Na₂CO₃)=106.",
|
||
hint: "CaSO₄ + Na₂CO₃ = CaCO₃↓ + Na₂SO₄. Соотношение 1:1. $n = m/M$.",
|
||
unit: "г",
|
||
a: 1.06,
|
||
ex: "n(CaSO₄) = 1,36/136 = 0,01 моль. По уравнению 1:1. n(Na₂CO₃) = 0,01 моль. m(Na₂CO₃) = 0,01 × 106 = 1,06 г."
|
||
},
|
||
];
|
||
|
||
const TASKS_P49 = [
|
||
{
|
||
q: "В какой группе таблицы Менделеева находится алюминий и какова его степень окисления в соединениях?",
|
||
opts: [
|
||
"Группа IIA, с.о. +2",
|
||
"Группа IIIA, с.о. +3",
|
||
"Группа IVA, с.о. +4",
|
||
"Группа IA, с.о. +1"
|
||
],
|
||
a: 1,
|
||
ex: "Алюминий — элемент IIIA группы, 3-го периода. Электронная конфигурация [Ne]3s²3p¹. В соединениях отдаёт 3 электрона → с.о. +3."
|
||
},
|
||
{
|
||
q: "Почему алюминий в обычных условиях не реагирует с водой, хотя стоит в ряду активности левее водорода?",
|
||
opts: [
|
||
"У Al очень высокая температура плавления",
|
||
"Al покрыт прочной оксидной плёнкой Al₂O₃, которая защищает металл",
|
||
"Вода не является реагентом для Al",
|
||
"Al реагирует только с горячей водой"
|
||
],
|
||
a: 1,
|
||
ex: "На поверхности Al образуется тонкая (≈4 нм) плёнка Al₂O₃, которая не пропускает воду и кислоты к металлу. Если плёнку разрушить (щелочью или амальгамой), Al активно реагирует с водой."
|
||
},
|
||
{
|
||
q: "Что образуется при сжигании алюминия в хлоре (2Al + 3Cl₂ = ?)? Какова степень окисления Al?",
|
||
opts: [
|
||
"AlCl₂ — хлорид Al(II)",
|
||
"Al₂Cl₃ — нет такого вещества",
|
||
"2AlCl₃ — хлорид Al(III), с.о. +3",
|
||
"Al₆Cl₂ — оксохлорид"
|
||
],
|
||
a: 2,
|
||
ex: "2Al + 3Cl₂ = 2AlCl₃. С хлором Al всегда даёт хлорид алюминия(III). Cl — сильный окислитель, поэтому с.о. Al = +3."
|
||
},
|
||
{
|
||
q: "В чём отличие реакции Al с разбавленной H₂SO₄ от реакции Al с концентрированной H₂SO₄?",
|
||
opts: [
|
||
"Обе реакции одинаковы — образуется Al₂(SO₄)₃ и H₂",
|
||
"С разб. → Al₂(SO₄)₃ + H₂↑. С конц. — пассивация (реакции нет)",
|
||
"С конц. реакция идёт быстрее с выделением SO₃",
|
||
"Разбавленная H₂SO₄ не реагирует с Al"
|
||
],
|
||
a: 1,
|
||
ex: "2Al + 3H₂SO₄(разб.) = Al₂(SO₄)₃ + 3H₂↑. Конц. H₂SO₄ и конц. HNO₃ пассивируют Al — образуется плотная оксидная плёнка, реакция прекращается."
|
||
},
|
||
{
|
||
q: "Что выделяется при реакции алюминия со щёлочью: 2Al + 2NaOH + 2H₂O = 2NaAlO₂ + ?",
|
||
opts: [
|
||
"Cl₂ (хлор)",
|
||
"O₂ (кислород)",
|
||
"3H₂ (водород) — газ",
|
||
"CO₂ (углекислый газ)"
|
||
],
|
||
a: 2,
|
||
ex: "2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑. Это уникальное свойство Al — растворяться в щёлочах. Образуется алюминат натрия NaAlO₂ и водород H₂."
|
||
},
|
||
{
|
||
q: "Что такое алюминотермия?",
|
||
opts: [
|
||
"Производство Al электролизом Al₂O₃",
|
||
"Реакция Al с водой при высоких температурах",
|
||
"Восстановление металлов из оксидов алюминием: Fe₂O₃ + 2Al = Al₂O₃ + 2Fe",
|
||
"Окисление Al кислородом воздуха"
|
||
],
|
||
a: 2,
|
||
ex: "Алюминотермия — восстановление оксидов металлов алюминием. Реакция экзотермическая (t > 2000°C): Fe₂O₃+2Al = Al₂O₃+2Fe. Применяется для сварки рельсов (термит)."
|
||
},
|
||
{
|
||
q: "Вычислите массу Al (г), которая вступила в реакцию со щёлочью KOH, если выделилось 5600 см³ H₂ (н.у.). Реакция: 2Al + 2KOH + 2H₂O = 2KAlO₂ + 3H₂↑. M(Al)=27 г/моль, Vм=22400 см³/моль.",
|
||
hint: "По уравнению: 2 моль Al → 3 моль H₂. Найди n(H₂), затем n(Al).",
|
||
unit: "г",
|
||
a: 4.5,
|
||
ex: "n(H₂) = 5600/22400 = 0,25 моль. По уравнению: n(Al)/n(H₂) = 2/3. n(Al) = 2/3 × 0,25 = 1/6 моль. m(Al) = (1/6) × 27 = 4,5 г."
|
||
},
|
||
{
|
||
q: "Какую массу Al₂O₃ (г) получат при сжигании 54 г алюминия? Реакция: 4Al + 3O₂ = 2Al₂O₃. M(Al)=27, M(Al₂O₃)=102 г/моль.",
|
||
hint: "По уравнению 4 моль Al → 2 моль Al₂O₃. Найди n(Al), затем n(Al₂O₃).",
|
||
unit: "г",
|
||
a: 102,
|
||
ex: "n(Al) = 54/27 = 2 моль. По уравнению: 4 моль Al → 2 моль Al₂O₃. n(Al₂O₃) = 2/4 × 2 = 1 моль. m(Al₂O₃) = 1 × 102 = 102 г."
|
||
},
|
||
];
|
||
|
||
const TASKS_P50 = [
|
||
{
|
||
q: "Каким типом оксида является Al₂O₃?",
|
||
opts: [
|
||
"Кислотным оксидом — реагирует только со щелочами",
|
||
"Основным оксидом — реагирует только с кислотами",
|
||
"Амфотерным оксидом — реагирует и с кислотами, и со щелочами",
|
||
"Несолеобразующим оксидом"
|
||
],
|
||
a: 2,
|
||
ex: "Al₂O₃ — амфотерный оксид. С кислотами: Al₂O₃+6HCl=2AlCl₃+3H₂O. Со щелочами: Al₂O₃+2NaOH=2NaAlO₂+H₂O. Это характерно для переходных металлов и металлов с с.о. +3."
|
||
},
|
||
{
|
||
q: "Что образуется при сплавлении Al₂O₃ с NaOH?",
|
||
opts: [
|
||
"Al(OH)₃ + NaH",
|
||
"NaAlO₂ (метаалюминат натрия) + H₂O",
|
||
"Na[Al(OH)₄] + O₂",
|
||
"AlNaO₂ не существует — реакция не идёт"
|
||
],
|
||
a: 1,
|
||
ex: "Al₂O₃ + 2NaOH →(сплавл.) 2NaAlO₂ + H₂O. При сплавлении образуется метаалюминат натрия NaAlO₂. При растворении в р-ре NaOH: Al₂O₃+2NaOH+3H₂O=2Na[Al(OH)₄]."
|
||
},
|
||
{
|
||
q: "Al(OH)₃ + HCl →? Что образуется?",
|
||
opts: [
|
||
"AlCl₃ + H₂O — хлорид алюминия и вода",
|
||
"AlCl₂(OH) + H₂O — неполное замещение",
|
||
"H[Al(OH)₄] + Cl₂",
|
||
"Al₂Cl₆ + 3H₂O"
|
||
],
|
||
a: 0,
|
||
ex: "Al(OH)₃ + 3HCl = AlCl₃ + 3H₂O. Гидроксид Al реагирует с кислотами как основание — все три ОН-группы замещаются. Образуется AlCl₃ (хлорид Al(III)) и вода."
|
||
},
|
||
{
|
||
q: "Что образуется при нагревании Al(OH)₃?",
|
||
opts: [
|
||
"Al + H₂O + O₂",
|
||
"AlH₃ + O₂",
|
||
"Al₂O₃ + H₂O — оксид Al и вода",
|
||
"Al(OH)₂ + H₂O — частичное разложение"
|
||
],
|
||
a: 2,
|
||
ex: "2Al(OH)₃ →(t°) Al₂O₃ + 3H₂O. При нагревании гидроксид теряет воду — происходит дегидратация. Образуется оксид Al₂O₃ (корунд)."
|
||
},
|
||
{
|
||
q: "AlCl₃ + 3NaOH(недост.) = ? Что выпадает в осадок?",
|
||
opts: [
|
||
"Al(OH)₃↓ — белый студенистый осадок",
|
||
"NaAlO₂↓ — алюминат натрия",
|
||
"AlOOH↓ — метагидроксид",
|
||
"Al₂O₃↓ — оксид алюминия"
|
||
],
|
||
a: 0,
|
||
ex: "AlCl₃ + 3NaOH(недост.) = Al(OH)₃↓ + 3NaCl. При недостатке NaOH образуется белый осадок Al(OH)₃. При избытке NaOH осадок растворяется: AlCl₃+4NaOH(изб.)=Na[Al(OH)₄]+3NaCl."
|
||
},
|
||
{
|
||
q: "AlCl₃ + 4NaOH(избыток) = ? Почему осадок растворяется?",
|
||
opts: [
|
||
"AlCl₃ + 4NaOH = NaAlO₂ + 3NaCl + 2H₂O — растворяется как амфотерный гидроксид",
|
||
"AlCl₃ + 4NaOH = Na[Al(OH)₄] + 3NaCl — тетрагидроксоалюминат",
|
||
"AlCl₃ + 4NaOH = AlNa₄Cl + 3OH⁻",
|
||
"Осадок не растворяется при избытке NaOH"
|
||
],
|
||
a: 1,
|
||
ex: "AlCl₃ + 4NaOH(изб.) = Na[Al(OH)₄] + 3NaCl. Тетрагидроксоалюминат натрия — растворимая соль. Осадок Al(OH)₃ растворяется в избытке щёлочи — это и есть проявление амфотерности."
|
||
},
|
||
{
|
||
q: "Смесь Al₂O₃ (M=102) и Al(OH)₃ (M=78) массой 41,4 г прокалили. Масса остатка 30,6 г. Чему равна масса Al(OH)₃ (г) в смеси? Реакция: 2Al(OH)₃ →(t) Al₂O₃ + 3H₂O.",
|
||
hint: "Потеря массы — только за счёт разложения Al(OH)₃ в воду. Составь уравнение: потеря = 27·n(Al(OH)₃). Найди n, затем m.",
|
||
unit: "г",
|
||
a: 31.2,
|
||
ex: "Потеря массы = 41,4−30,6 = 10,8 г = 3H₂O на каждые 2 моль Al(OH)₃. Из 2Al(OH)₃→Al₂O₃+3H₂O: потеря = 3×18/2 = 27 г/моль Al(OH)₃. n(Al(OH)₃) = 10,8/27 = 0,4 моль. m = 0,4×78 = 31,2 г."
|
||
},
|
||
{
|
||
q: "Какую массу NaAlO₂ (г) получат при сплавлении 20,4 г Al₂O₃ с избытком NaOH? Реакция: Al₂O₃ + 2NaOH = 2NaAlO₂ + H₂O. M(Al₂O₃)=102, M(NaAlO₂)=82 г/моль.",
|
||
hint: "n(Al₂O₃) = m/M. По уравнению: 1 моль Al₂O₃ → 2 моль NaAlO₂.",
|
||
unit: "г",
|
||
a: 32.8,
|
||
ex: "n(Al₂O₃) = 20,4/102 = 0,2 моль. По уравнению: n(NaAlO₂) = 2×0,2 = 0,4 моль. m(NaAlO₂) = 0,4 × 82 = 32,8 г."
|
||
},
|
||
];
|
||
|
||
const TASKS_P51 = [
|
||
{
|
||
q: "В какой группе и каком периоде находится железо? Какова его электронная конфигурация?",
|
||
opts: [
|
||
"Группа IIB, период 4, [Ar]4s²3d⁸",
|
||
"Группа VIIIB, период 4, [Ar]3d⁶4s²",
|
||
"Группа VIB, период 5, [Kr]4d⁵5s¹",
|
||
"Группа VIII, период 3, [Ne]3s²3p⁶"
|
||
],
|
||
a: 1,
|
||
ex: "Железо — Fe, группа VIIIB, период 4. Электронная конфигурация [Ar]3d⁶4s². Переходный металл. Характерные степени окисления +2 и +3."
|
||
},
|
||
{
|
||
q: "Что образуется при реакции железа с разбавленными кислотами (HCl, H₂SO₄ разб.)? Какова с.о. Fe?",
|
||
opts: [
|
||
"FeCl₃ — соль Fe(III), с.о. +3",
|
||
"Fe₂O₃ — оксид Fe(III)",
|
||
"FeCl₂ — соль Fe(II), с.о. +2",
|
||
"FeSO₄ · 7H₂O — кристаллогидрат"
|
||
],
|
||
a: 2,
|
||
ex: "Fe + 2HCl = FeCl₂ + H₂↑. С разбавленными кислотами Fe даёт соли Fe(II) — с.о. +2. Разбавленные кислоты — слабые окислители, поэтому Fe окисляется только до +2."
|
||
},
|
||
{
|
||
q: "Что образуется при горении железа в хлоре? Почему не FeCl₂?",
|
||
opts: [
|
||
"FeCl₂ — так как Fe обычно +2",
|
||
"FeCl₃ — хлор сильный окислитель, Fe окисляется до +3",
|
||
"Fe₂Cl₆ — комплекс",
|
||
"FeОCl — оксохлорид"
|
||
],
|
||
a: 1,
|
||
ex: "2Fe + 3Cl₂ = 2FeCl₃. Хлор — сильный окислитель, отбирает 3 электрона у Fe → с.о. +3. FeCl₃ — хлорид железа(III), тёмно-коричневый. Та же картина с реакцией Fe+O₂ (горение): 3Fe+2O₂=Fe₃O₄."
|
||
},
|
||
{
|
||
q: "Что такое ржавчина и каково её уравнение образования?",
|
||
opts: [
|
||
"Fe₃O₄ — магнетит (окалина), 3Fe+2O₂=Fe₃O₄",
|
||
"Fe(OH)₂ — белый гидроксид",
|
||
"Fe(OH)₃ — красно-бурый гидроксид. 4Fe+3O₂+6H₂O=4Fe(OH)₃",
|
||
"FeO — чёрный оксид"
|
||
],
|
||
a: 2,
|
||
ex: "Ржавчина — это Fe(OH)₃ (гидроксид железа III). Уравнение: 4Fe + 3O₂ + 6H₂O = 4Fe(OH)₃. Процесс требует одновременного присутствия O₂ и H₂O. В сухом воздухе или без O₂ ржавчина не образуется."
|
||
},
|
||
{
|
||
q: "Что такое пассивация железа и при каких условиях она происходит?",
|
||
opts: [
|
||
"Fe растворяется в концентрированных кислотах быстрее, чем в разбавленных",
|
||
"Fe не реагирует с разбавленными кислотами",
|
||
"Конц. HNO₃ и конц. H₂SO₄ образуют на поверхности Fe плотную оксидную плёнку — реакция прекращается",
|
||
"Fe пассивируется при нагревании в воде"
|
||
],
|
||
a: 2,
|
||
ex: "Пассивация: конц. HNO₃ и конц. H₂SO₄ мгновенно окисляют поверхность Fe до Fe₂O₃, образуя прочную плёнку, которая останавливает дальнейшую реакцию. Пассивированное Fe можно хранить в конц. HNO₃."
|
||
},
|
||
{
|
||
q: "Какой из минералов железа имеет формулу Fe₃O₄?",
|
||
opts: [
|
||
"Гематит",
|
||
"Лимонит",
|
||
"Магнетит — Fe₃O₄, магнитный минерал",
|
||
"Пирит"
|
||
],
|
||
a: 2,
|
||
ex: "Fe₃O₄ — магнетит (магнитный железняк). Гематит — Fe₂O₃. Лимонит — Fe₂O₃·H₂O. Пирит — FeS₂ (не используется для получения Fe, только для серной кислоты)."
|
||
},
|
||
{
|
||
q: "Вычислите массу Fe (г), которая вступила в реакцию, если образовалось 50,8 г FeCl₂. Реакция: Fe + 2HCl = FeCl₂ + H₂↑. M(FeCl₂)=127, M(Fe)=56 г/моль.",
|
||
hint: "n(FeCl₂) = m/M. По уравнению n(Fe) = n(FeCl₂).",
|
||
unit: "г",
|
||
a: 22.4,
|
||
ex: "n(FeCl₂) = 50,8/127 = 0,4 моль. По уравнению: n(Fe) = n(FeCl₂) = 0,4 моль. m(Fe) = 0,4 × 56 = 22,4 г."
|
||
},
|
||
{
|
||
q: "Вычислите объём H₂ (дм³, н.у.), выделившегося при реакции Fe + 2HCl = FeCl₂ + H₂↑, если образовалось 50,8 г FeCl₂. M(FeCl₂)=127 г/моль, Vм=22,4 дм³/моль.",
|
||
hint: "n(FeCl₂) = m/M. По уравнению n(H₂) = n(FeCl₂). V = n × Vм.",
|
||
unit: "дм³",
|
||
a: 8.96,
|
||
ex: "n(FeCl₂) = 50,8/127 = 0,4 моль. n(H₂) = n(FeCl₂) = 0,4 моль. V(H₂) = 0,4 × 22,4 = 8,96 дм³."
|
||
},
|
||
];
|
||
|
||
const TASKS_P52 = [
|
||
{
|
||
q: "Какого цвета FeO и какова степень окисления Fe в нём?",
|
||
opts: [
|
||
"Красно-бурый, Fe³⁺ (+3)",
|
||
"Чёрный, Fe²⁺ (+2)",
|
||
"Белый, Fe²⁺ (+2)",
|
||
"Жёлтый, смешанная с.о."
|
||
],
|
||
a: 1,
|
||
ex: "FeO — чёрный порошок, с.о. Fe +2. FeO является основным оксидом и восстановителем: 6FeO + O₂ = 2Fe₃O₄. Не путать с Fe₂O₃ (красно-бурый, Fe³⁺) и Fe₃O₄ (чёрный, магнит, Fe²⁺+Fe³⁺)."
|
||
},
|
||
{
|
||
q: "Что образуется при реакции Fe₂O₃ с алюминием? Это какой тип реакции?",
|
||
opts: [
|
||
"Fe + Al₂O₃ — не бывает, Al не восстанавливает Fe",
|
||
"Al₂Fe₃O₆ — комплексный оксид",
|
||
"Al₂O₃ + 2Fe — алюминотермия (термит), Fe₂O₃+2Al=Al₂O₃+2Fe",
|
||
"Fe₂Al₂O₄ — шпинель"
|
||
],
|
||
a: 2,
|
||
ex: "Fe₂O₃ + 2Al = Al₂O₃ + 2Fe — это алюминотермия (термит). Al более активный металл, чем Fe, поэтому вытесняет Fe из его оксида. Реакция очень экзотермическая (t>2000°C). Применяется для сварки рельсов."
|
||
},
|
||
{
|
||
q: "Каков результат реакции Fe₃O₄ + 8HCl = ?",
|
||
opts: [
|
||
"FeCl₃ + 4H₂O (только Fe³⁺)",
|
||
"FeCl₂ + 4H₂O (только Fe²⁺)",
|
||
"FeCl₂ + 2FeCl₃ + 4H₂O (и Fe²⁺, и Fe³⁺)",
|
||
"Fe₃Cl₈ + 4H₂O"
|
||
],
|
||
a: 2,
|
||
ex: "Fe₃O₄ + 8HCl = FeCl₂ + 2FeCl₃ + 4H₂O. Fe₃O₄ = FeO·Fe₂O₃, содержит Fe²⁺ и Fe³⁺. При растворении образуются оба хлорида — FeCl₂ (Fe²⁺) и FeCl₃ (Fe³⁺)."
|
||
},
|
||
{
|
||
q: "Что происходит с Fe(OH)₂ на воздухе и почему?",
|
||
opts: [
|
||
"Остаётся белым — Fe(OH)₂ стабилен на воздухе",
|
||
"Растворяется в воде",
|
||
"Буреет: 4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃ — Fe²⁺ окисляется до Fe³⁺",
|
||
"Превращается в FeO + H₂O"
|
||
],
|
||
a: 2,
|
||
ex: "4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃. Fe(OH)₂ — белый/серо-зелёный осадок. На воздухе быстро буреет: O₂ окисляет Fe²⁺ → Fe³⁺, образуется красно-бурый Fe(OH)₃ (ржавчина!)."
|
||
},
|
||
{
|
||
q: "Какой реагент используют для обнаружения Fe³⁺? Что наблюдают?",
|
||
opts: [
|
||
"NaOH — серо-зелёный осадок (это Fe²⁺!)",
|
||
"KSCN — кроваво-красное окрашивание раствора: Fe³⁺ + 3SCN⁻ = Fe(SCN)₃",
|
||
"HCl — реакция есть, но без характерного цвета",
|
||
"Na₂CO₃ — белый осадок FeCO₃"
|
||
],
|
||
a: 1,
|
||
ex: "Fe³⁺ + 3SCN⁻ = Fe(SCN)₃ — родановое железо, кроваво-красный цвет. Это уникальная и очень чувствительная качественная реакция на Fe³⁺. Реагент — роданид калия KSCN или роданид аммония NH₄SCN."
|
||
},
|
||
{
|
||
q: "При нагревании Fe(OH)₃ что образуется?",
|
||
opts: [
|
||
"FeO + H₂O + H₂",
|
||
"Fe + O₂ + H₂O",
|
||
"Fe₂O₃ + H₂O: 2Fe(OH)₃ →(t) Fe₂O₃ + 3H₂O",
|
||
"Fe(OH)₂ + H₂O — частичное разложение"
|
||
],
|
||
a: 2,
|
||
ex: "2Fe(OH)₃ →(t°) Fe₂O₃ + 3H₂O. Гидроксид железа(III) при нагревании теряет воду. Образуется красно-бурый Fe₂O₃ (гематит). Аналогично: Al(OH)₃→Al₂O₃+H₂O."
|
||
},
|
||
{
|
||
q: "Вычислите массу Fe₃O₄ (г), если при растворении в HCl получили смесь хлоридов FeCl₂ и FeCl₃ общей массой 113 г. Реакция: Fe₃O₄ + 8HCl = FeCl₂ + 2FeCl₃ + 4H₂O. M(Fe₃O₄)=232, M(FeCl₂)=127, M(FeCl₃)=162,5 г/моль.",
|
||
hint: "Пусть n(Fe₃O₄)=x. Тогда n(FeCl₂)=x, n(FeCl₃)=2x. Запиши уравнение для суммарной массы хлоридов и реши его.",
|
||
unit: "г",
|
||
a: 58,
|
||
ex: "Пусть n(Fe₃O₄)=x моль. Тогда: m(FeCl₂)+m(FeCl₃) = 127x + 2×162,5x = 127x + 325x = 452x = 113. x = 113/452 = 0,25 моль. m(Fe₃O₄) = 0,25 × 232 = 58 г."
|
||
},
|
||
{
|
||
q: "Термитная смесь — это Fe₂O₃ + Al. Рассчитайте массу термитной смеси (г) для получения 18 моль железа. Реакция: Fe₂O₃ + 2Al = Al₂O₃ + 2Fe. M(Fe₂O₃)=160, M(Al)=27 г/моль.",
|
||
hint: "По уравнению: 1 моль Fe₂O₃ и 2 моль Al → 2 моль Fe. Найди количества Fe₂O₃ и Al, затем суммарную массу.",
|
||
unit: "г",
|
||
a: 1926,
|
||
ex: "По уравнению: 2 моль Fe → 1 моль Fe₂O₃ + 2 моль Al. n(Fe₂O₃) = 18/2 = 9 моль. n(Al) = 18 моль. m(Fe₂O₃) = 9×160 = 1440 г. m(Al) = 18×27 = 486 г. m(термит) = 1440+486 = 1926 г."
|
||
},
|
||
];
|
||
|
||
const TASKS_P53 = [
|
||
{q:"Что является сырьём для доменного производства (шихта)?",opts:["Железный колчедан + уголь","Железная руда + кокс + известняк","Только руда Fe₂O₃","Сталь + кокс"],a:1,ex:"Шихта доменной печи: железная руда (Fe₂O₃, Fe₃O₄), кокс (восстановитель, топливо), известняк (флюс для шлакования пустой породы)."},
|
||
{q:"Роль кокса в доменном процессе?",opts:["Только топливо","Флюс","Восстановитель и топливо (сгорает до CO, восстанавливающего Fe)","Катализатор"],a:2,ex:"Кокс: 1) топливо — C + O₂ = CO₂; 2) восстановитель — CO₂ + C = 2CO; 3) CO восстанавливает железо."},
|
||
{q:"Основная реакция восстановления железа в домне?",opts:["Fe₂O₃ + 3H₂ = 2Fe + 3H₂O","Fe₂O₃ + 3CO = 2Fe + 3CO₂","Fe₂O₃ + Al = Fe + Al₂O₃","Fe₂O₃ + C = Fe + CO₂"],a:1,ex:"Главный восстановитель в домне — CO. Fe₂O₃ + 3CO = 2Fe + 3CO₂. Также восстанавливается Fe₃O₄."},
|
||
{q:"Роль известняка в доменном процессе?",opts:["Восстановление железа","Топливо","Флюс: CaCO₃ → CaO + CO₂; CaO + SiO₂ → CaSiO₃ (шлак)","Легирующая добавка"],a:2,ex:"Известняк — флюс. Разлагается: CaCO₃ = CaO + CO₂. CaO связывает SiO₂ пустой породы → шлак CaSiO₃."},
|
||
{q:"Чугун и сталь — в чём отличие по содержанию углерода?",opts:["Чугун < 2% C, сталь > 2% C","Чугун > 2% C, сталь < 2% C","Оба содержат > 4% C","Оба содержат < 1% C"],a:1,ex:"Чугун: C > 2% (обычно 2–4%). Сталь: C < 2% (обычно 0,1–1,5%). Чугун хрупок, сталь — пластична."},
|
||
{q:"Как получают сталь из чугуна?",opts:["Охлаждением","Выжиганием лишнего углерода (конвертер, электропечь)","Добавлением углерода","Электролизом"],a:1,ex:"Сталь получают окислением лишнего углерода чугуна кислородом в конвертере или электропечи."},
|
||
{q:"Масса Fe (М=56), которую можно получить из 320 г Fe₂O₃ (М=160). Реакция: Fe₂O₃ + 3CO = 2Fe + 3CO₂.",hint:"n(Fe₂O₃)=320/160=2 моль; n(Fe)=2×2=4 моль",unit:"г",a:224,ex:"n(Fe₂O₃) = 320/160 = 2 моль. По уравнению: 1 Fe₂O₃ → 2 Fe. n(Fe) = 4 моль. m(Fe) = 4×56 = 224 г."},
|
||
{q:"Масса кокса C (М=12), необходимая для получения 280 г Fe из Fe₂O₃. Считать полное превращение C → CO → Fe.",hint:"Fe₂O₃+3CO=2Fe+3CO₂; CO из C+CO₂=2CO; суммарно: Fe₂O₃+3C=2Fe+3CO",unit:"г",a:90,ex:"n(Fe)=280/56=5 моль. По Fe₂O₃+3C=2Fe+3CO: n(C)=3/2×5=7,5 моль. m(C)=7,5×12=90 г."}
|
||
];
|
||
|
||
// ══════════════════════════════════════════
|
||
// СОСТОЯНИЕ
|
||
// ══════════════════════════════════════════
|
||
function mkState(pool) { return {idx:0, answered:false, results:Array(pool.length).fill(null)}; }
|
||
const STATE = {
|
||
p40: mkState(TASKS_P40),
|
||
p41: mkState(TASKS_P41),
|
||
p42: mkState(TASKS_P42),
|
||
p43: mkState(TASKS_P43),
|
||
p44: mkState(TASKS_P44),
|
||
p45: mkState(TASKS_P45),
|
||
p46: mkState(TASKS_P46),
|
||
p47: mkState(TASKS_P47),
|
||
p48: mkState(TASKS_P48),
|
||
p49: mkState(TASKS_P49),
|
||
p50: mkState(TASKS_P50),
|
||
p51: mkState(TASKS_P51),
|
||
p52: mkState(TASKS_P52),
|
||
p53: mkState(TASKS_P53),
|
||
p1: mkState(TASKS_P1),
|
||
p2: mkState(TASKS_P2),
|
||
p3: mkState(TASKS_P3),
|
||
p4: mkState(TASKS_P4),
|
||
p5: mkState(TASKS_P5),
|
||
p6: mkState(TASKS_P6),
|
||
p7: mkState(TASKS_P7),
|
||
p8: mkState(TASKS_P8),
|
||
p9: mkState(TASKS_P9),
|
||
p10: mkState(TASKS_P10),
|
||
p11: mkState(TASKS_P11),
|
||
p12: mkState(TASKS_P12),
|
||
p13: mkState(TASKS_P13),
|
||
p14: mkState(TASKS_P14),
|
||
p15: mkState(TASKS_P15),
|
||
p16: mkState(TASKS_P16),
|
||
p17: mkState(TASKS_P17),
|
||
p18: mkState(TASKS_P18),
|
||
p19: mkState(TASKS_P19),
|
||
p20: mkState(TASKS_P20),
|
||
p21: mkState(TASKS_P21),
|
||
p22: mkState(TASKS_P22),
|
||
p23: mkState(TASKS_P23),
|
||
p24: mkState(TASKS_P24),
|
||
p25: mkState(TASKS_P25),
|
||
p26: mkState(TASKS_P26),
|
||
p27: mkState(TASKS_P27),
|
||
p28: mkState(TASKS_P28),
|
||
p29: mkState(TASKS_P29),
|
||
p30: mkState(TASKS_P30),
|
||
p31: mkState(TASKS_P31),
|
||
p32: mkState(TASKS_P32),
|
||
p33: mkState(TASKS_P33),
|
||
p34: mkState(TASKS_P34),
|
||
p35: mkState(TASKS_P35),
|
||
p36: mkState(TASKS_P36),
|
||
p37: mkState(TASKS_P37),
|
||
p38: mkState(TASKS_P38),
|
||
p39: mkState(TASKS_P39),
|
||
};
|
||
|
||
function getPool(sec) {
|
||
if (sec === 'p40') return TASKS_P40;
|
||
if (sec === 'p41') return TASKS_P41;
|
||
if (sec === 'p42') return TASKS_P42;
|
||
if (sec === 'p43') return TASKS_P43;
|
||
if (sec === 'p44') return TASKS_P44;
|
||
if (sec === 'p45') return TASKS_P45;
|
||
if (sec === 'p46') return TASKS_P46;
|
||
if (sec === 'p47') return TASKS_P47;
|
||
if (sec === 'p48') return TASKS_P48;
|
||
if (sec === 'p49') return TASKS_P49;
|
||
if (sec === 'p50') return TASKS_P50;
|
||
if (sec === 'p51') return TASKS_P51;
|
||
if (sec === 'p52') return TASKS_P52;
|
||
if (sec === 'p53') return TASKS_P53;
|
||
if (sec === 'p1') return TASKS_P1;
|
||
if (sec === 'p2') return TASKS_P2;
|
||
if (sec === 'p3') return TASKS_P3;
|
||
if (sec === 'p4') return TASKS_P4;
|
||
if (sec === 'p5') return TASKS_P5;
|
||
if (sec === 'p6') return TASKS_P6;
|
||
if (sec === 'p7') return TASKS_P7;
|
||
if (sec === 'p8') return TASKS_P8;
|
||
if (sec === 'p9') return TASKS_P9;
|
||
if (sec === 'p10') return TASKS_P10;
|
||
if (sec === 'p11') return TASKS_P11;
|
||
if (sec === 'p12') return TASKS_P12;
|
||
if (sec === 'p13') return TASKS_P13;
|
||
if (sec === 'p14') return TASKS_P14;
|
||
if (sec === 'p15') return TASKS_P15;
|
||
if (sec === 'p16') return TASKS_P16;
|
||
if (sec === 'p17') return TASKS_P17;
|
||
if (sec === 'p18') return TASKS_P18;
|
||
if (sec === 'p19') return TASKS_P19;
|
||
if (sec === 'p20') return TASKS_P20;
|
||
if (sec === 'p21') return TASKS_P21;
|
||
if (sec === 'p22') return TASKS_P22;
|
||
if (sec === 'p23') return TASKS_P23;
|
||
if (sec === 'p24') return TASKS_P24;
|
||
if (sec === 'p25') return TASKS_P25;
|
||
if (sec === 'p26') return TASKS_P26;
|
||
if (sec === 'p27') return TASKS_P27;
|
||
if (sec === 'p28') return TASKS_P28;
|
||
if (sec === 'p29') return TASKS_P29;
|
||
if (sec === 'p30') return TASKS_P30;
|
||
if (sec === 'p31') return TASKS_P31;
|
||
if (sec === 'p32') return TASKS_P32;
|
||
if (sec === 'p33') return TASKS_P33;
|
||
if (sec === 'p34') return TASKS_P34;
|
||
if (sec === 'p35') return TASKS_P35;
|
||
if (sec === 'p36') return TASKS_P36;
|
||
if (sec === 'p37') return TASKS_P37;
|
||
if (sec === 'p38') return TASKS_P38;
|
||
if (sec === 'p39') return TASKS_P39;
|
||
return TASKS_P40;
|
||
}
|
||
function isOk(r) {
|
||
if (r === null) return null;
|
||
if (r === true || r === false) return r;
|
||
return r.ok;
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// KaTeX
|
||
// ══════════════════════════════════════════
|
||
function doRender(el) {
|
||
if (!window.renderMathInElement) return;
|
||
renderMathInElement(el, {
|
||
delimiters:[{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true}],
|
||
throwOnError:false
|
||
});
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// ТАБЫ
|
||
// ══════════════════════════════════════════
|
||
document.querySelectorAll('.tab').forEach(t => {
|
||
t.addEventListener('click', () => {
|
||
document.querySelectorAll('.tab').forEach(x => x.classList.remove('active'));
|
||
document.querySelectorAll('.content').forEach(x => x.classList.remove('active'));
|
||
t.classList.add('active');
|
||
document.getElementById('tab-' + t.dataset.tab).classList.add('active');
|
||
var sg = t.closest('.sec-group');
|
||
if (sg) {
|
||
document.querySelectorAll('.ch-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.sec-group').forEach(g => g.classList.remove('show'));
|
||
sg.classList.add('show');
|
||
var chBtn = document.querySelector('.ch-btn[data-ch="'+sg.dataset.chg+'"]');
|
||
if (chBtn) chBtn.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.ch-btn').forEach(function(btn) {
|
||
btn.addEventListener('click', function() {
|
||
document.querySelectorAll('.ch-btn').forEach(b => b.classList.remove('active'));
|
||
document.querySelectorAll('.sec-group').forEach(g => g.classList.remove('show'));
|
||
btn.classList.add('active');
|
||
var grp = document.querySelector('.sec-group[data-chg="'+btn.dataset.ch+'"]');
|
||
if (grp) {
|
||
grp.classList.add('show');
|
||
if (!grp.querySelector('.tab.active')) {
|
||
var first = grp.querySelector('.tab');
|
||
if (first) first.click();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
// ══════════════════════════════════════════
|
||
// ПАРАГРАФ-ФИЛЬТР
|
||
// ══════════════════════════════════════════
|
||
function setParaTab(para) {
|
||
['p1','p2','p3','p4','p5','p6','p7','p8','p9','p10','p11','p12','p13','p14','p15','p16','p17','p18','p19','p20','p21','p22','p23','p24','p25','p26','p27','p28','p29','p30','p31','p32','p33','p34','p35','p36','p37','p38','p39','p40','p41','p42','p43','p44','p45','p46','p47','p48','p49','p50','p51','p52','p53'].forEach(p => {
|
||
const el = document.getElementById('ptab-' + p);
|
||
if (el) el.style.display = p === para ? 'block' : 'none';
|
||
document.querySelectorAll('.para-pill[data-para="' + p + '"]').forEach(b =>
|
||
b.classList.toggle('active', p === para)
|
||
);
|
||
});
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// НАВИГАЦИЯ
|
||
// ══════════════════════════════════════════
|
||
function renderNav(sec) {
|
||
const pool = getPool(sec);
|
||
const s = STATE[sec];
|
||
const el = document.getElementById('navDots' + sec);
|
||
if (!el) return;
|
||
el.innerHTML = pool.map((_, i) => {
|
||
const ok = isOk(s.results[i]);
|
||
let cls = 'nav-dot';
|
||
if (i === s.idx) cls += ' nd-cur';
|
||
else if (ok === true) cls += ' nd-ok';
|
||
else if (ok === false) cls += ' nd-fail';
|
||
return `<button class="${cls}" onclick="goToTask('${sec}',${i})">${i+1}</button>`;
|
||
}).join('');
|
||
}
|
||
|
||
function goToTask(sec, idx) {
|
||
const s = STATE[sec];
|
||
s.idx = idx;
|
||
s.answered = s.results[idx] !== null;
|
||
renderTask(sec);
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// ОТРИСОВКА ЗАДАЧ
|
||
// ══════════════════════════════════════════
|
||
function renderTask(sec) {
|
||
const pool = getPool(sec);
|
||
const s = STATE[sec];
|
||
const area = document.getElementById('taskArea' + sec);
|
||
const fb = document.getElementById('fb' + sec);
|
||
if (!area || !fb) return;
|
||
document.getElementById('sum' + sec).classList.remove('show');
|
||
|
||
const q = pool[s.idx];
|
||
const prevResult = s.results[s.idx];
|
||
const done = prevResult !== null;
|
||
s.answered = done;
|
||
|
||
if (!q.opts) {
|
||
renderNumTask(sec, q, done, prevResult);
|
||
} else {
|
||
renderMcqTask(sec, q, done, prevResult);
|
||
}
|
||
|
||
if (done) {
|
||
const ok = isOk(prevResult);
|
||
fb.className = 'feedback show ' + (ok ? 'fb-ok' : 'fb-fail');
|
||
fb.innerHTML = ok ? '✓ Верно! ' + q.ex : '✗ Неверно. ' + q.ex;
|
||
document.getElementById('nextBtn' + sec).style.display = 'inline-flex';
|
||
doRender(fb);
|
||
} else {
|
||
fb.className = 'feedback';
|
||
document.getElementById('nextBtn' + sec).style.display = 'none';
|
||
}
|
||
|
||
updateScoreBar(sec);
|
||
renderNav(sec);
|
||
doRender(area);
|
||
}
|
||
|
||
function renderNumTask(sec, q, done) {
|
||
const s = STATE[sec];
|
||
const pool = getPool(sec);
|
||
document.getElementById('taskArea' + sec).innerHTML = `
|
||
<div class="task-card">
|
||
<div class="task-num">Задача ${s.idx+1} из ${pool.length}</div>
|
||
<div class="task-text">${q.q}</div>
|
||
<div class="task-hint">${ico('lightbulb')}<span>${q.hint}</span></div>
|
||
<div class="ans-row">
|
||
<label style="font-weight:700;font-size:.88rem">Ответ:</label>
|
||
<input class="ans-inp" type="text" id="ainp${sec}" placeholder="?" autocomplete="off"
|
||
${done ? `disabled style="border-color:var(--${isOk(STATE[sec].results[s.idx]) ? 'ok':'fail'})"` : ''}>
|
||
<span class="unit-lbl">${q.unit}</span>
|
||
${done ? '' : `<button class="btn btn-pri" onclick="checkNum('${sec}')">${ico('check')} Проверить</button>`}
|
||
</div>
|
||
</div>`;
|
||
if (!done) {
|
||
const inp = document.getElementById('ainp' + sec);
|
||
setTimeout(() => inp && inp.focus(), 80);
|
||
inp && inp.addEventListener('keydown', e => { if (e.key === 'Enter') checkNum(sec); });
|
||
}
|
||
}
|
||
|
||
function renderMcqTask(sec, q, done, prevResult) {
|
||
const s = STATE[sec];
|
||
const pool = getPool(sec);
|
||
const optsHtml = q.opts.map((o, i) => {
|
||
let cls = 'opt-btn';
|
||
if (done) {
|
||
if (i === q.a) cls += ' opt-correct';
|
||
else if (prevResult && prevResult.sel === i && !prevResult.ok) cls += ' opt-wrong';
|
||
}
|
||
return `<button class="${cls}" ${done ? 'disabled' : ''} onclick="checkMcq('${sec}',${i})">${o}</button>`;
|
||
}).join('');
|
||
document.getElementById('taskArea' + sec).innerHTML = `
|
||
<div class="task-card">
|
||
<div class="task-num">Вопрос ${s.idx+1} из ${pool.length}</div>
|
||
<div class="task-text">${q.q}</div>
|
||
<div class="opts-grid">${optsHtml}</div>
|
||
</div>`;
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// ПРОВЕРКА — числовые
|
||
// ══════════════════════════════════════════
|
||
function checkNum(sec) {
|
||
const s = STATE[sec];
|
||
if (s.answered) return;
|
||
const pool = getPool(sec);
|
||
const q = pool[s.idx];
|
||
const inp = document.getElementById('ainp' + sec);
|
||
const fb = document.getElementById('fb' + sec);
|
||
const val = inp.value.trim().replace(',', '.');
|
||
const num = parseFloat(val);
|
||
if (!val || isNaN(num)) {
|
||
fb.className = 'feedback show fb-fail';
|
||
fb.innerHTML = '⚠️ Введите числовой ответ!';
|
||
return;
|
||
}
|
||
s.answered = true;
|
||
const ok = Math.abs(num - q.a) < 0.05;
|
||
s.results[s.idx] = ok;
|
||
updateScoreBar(sec);
|
||
renderNav(sec);
|
||
inp.disabled = true;
|
||
inp.style.borderColor = ok ? 'var(--ok)' : 'var(--fail)';
|
||
fb.className = 'feedback show ' + (ok ? 'fb-ok' : 'fb-fail');
|
||
fb.innerHTML = ok ? '✓ Верно! ' + q.ex : '✗ Неверно. Правильный ответ: <strong>' + q.a + ' ' + q.unit + '</strong> ' + q.ex;
|
||
doRender(fb);
|
||
document.getElementById('nextBtn' + sec).style.display = 'inline-flex';
|
||
if (s.results.every(r => r !== null)) setTimeout(() => showSummary(sec), 2200);
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// ПРОВЕРКА — MCQ
|
||
// ══════════════════════════════════════════
|
||
function checkMcq(sec, sel) {
|
||
const s = STATE[sec];
|
||
if (s.answered) return;
|
||
const pool = getPool(sec);
|
||
const q = pool[s.idx];
|
||
s.answered = true;
|
||
const ok = sel === q.a;
|
||
s.results[s.idx] = {sel, ok};
|
||
updateScoreBar(sec);
|
||
renderNav(sec);
|
||
|
||
const btns = document.querySelectorAll('#taskArea' + sec + ' .opt-btn');
|
||
btns.forEach((b, i) => {
|
||
b.disabled = true;
|
||
if (i === q.a) b.classList.add('opt-correct');
|
||
else if (i === sel && !ok) b.classList.add('opt-wrong');
|
||
});
|
||
|
||
const fb = document.getElementById('fb' + sec);
|
||
fb.className = 'feedback show ' + (ok ? 'fb-ok' : 'fb-fail');
|
||
fb.innerHTML = (ok ? '✓ Верно! ' : '✗ Неверно. ') + q.ex;
|
||
doRender(fb);
|
||
document.getElementById('nextBtn' + sec).style.display = 'inline-flex';
|
||
if (s.results.every(r => r !== null)) setTimeout(() => showSummary(sec), 2500);
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// СЛЕДУЮЩАЯ / СБРОС
|
||
// ══════════════════════════════════════════
|
||
function nextTask(sec) {
|
||
const pool = getPool(sec);
|
||
const s = STATE[sec];
|
||
let next = -1;
|
||
for (let i = s.idx + 1; i < pool.length; i++) if (s.results[i] === null) { next = i; break; }
|
||
if (next === -1) for (let i = 0; i < s.idx; i++) if (s.results[i] === null) { next = i; break; }
|
||
if (next === -1) { showSummary(sec); return; }
|
||
s.idx = next; s.answered = false; renderTask(sec);
|
||
}
|
||
|
||
function resetTasks(sec) {
|
||
STATE[sec] = mkState(getPool(sec));
|
||
document.getElementById('sum' + sec).classList.remove('show');
|
||
renderTask(sec);
|
||
}
|
||
|
||
function updateScoreBar(sec) {
|
||
const pool = getPool(sec);
|
||
const s = STATE[sec];
|
||
const okCnt = s.results.filter(r => isOk(r) === true).length;
|
||
const doneCnt = s.results.filter(r => r !== null).length;
|
||
document.getElementById('ok' + sec).textContent = okCnt;
|
||
document.getElementById('cur' + sec).textContent = doneCnt;
|
||
document.getElementById('max' + sec).textContent = pool.length;
|
||
document.getElementById('prog' + sec).style.width = (doneCnt / pool.length * 100) + '%';
|
||
}
|
||
|
||
function showSummary(sec) {
|
||
const pool = getPool(sec);
|
||
const s = STATE[sec];
|
||
document.getElementById('prog' + sec).style.width = '100%';
|
||
document.getElementById('sum' + sec).classList.add('show');
|
||
const okCnt = s.results.filter(r => isOk(r) === true).length;
|
||
document.getElementById('sumScore' + sec).textContent = okCnt + ' / ' + pool.length;
|
||
const p = okCnt / pool.length;
|
||
document.getElementById('sumGrade' + sec).textContent =
|
||
p >= .9 ? '🏆 Отлично — параграф освоен!' :
|
||
p >= .75 ? '⭐ Хорошо! Разбери ошибки.' :
|
||
p >= .5 ? '👍 Неплохо. Повтори теорию и попробуй снова.' :
|
||
'📖 Изучи теорию параграфа и реши заново.';
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// ТЕМА
|
||
// ══════════════════════════════════════════
|
||
const themeBtn = document.getElementById('themeBtn');
|
||
themeBtn.addEventListener('click', () => {
|
||
const d = document.body.classList.toggle('dark');
|
||
themeBtn.innerHTML = d ? ico('sun') : ico('moon');
|
||
localStorage.setItem('chem9_theme', d ? '1' : '');
|
||
});
|
||
if (localStorage.getItem('chem9_theme') === '1') {
|
||
document.body.classList.add('dark');
|
||
themeBtn.innerHTML = ico('sun');
|
||
}
|
||
|
||
// ══════════════════════════════════════════
|
||
// СПРАВОЧНИК
|
||
// ══════════════════════════════════════════
|
||
const refToggle = document.getElementById('refToggle');
|
||
const refPanel = document.getElementById('refPanel');
|
||
refToggle.addEventListener('click', e => { e.stopPropagation(); refPanel.classList.toggle('show'); });
|
||
document.addEventListener('click', e => {
|
||
if (!refPanel.contains(e.target) && e.target !== refToggle) refPanel.classList.remove('show');
|
||
});
|
||
|
||
// ══════════════════════════════════════════
|
||
// ИНИЦИАЛИЗАЦИЯ
|
||
// ══════════════════════════════════════════
|
||
// ══ Интерактивный ряд активности ══
|
||
const ACT_DATA = [
|
||
{s:'K', n:'Калий', v:1, idx:0},{s:'Ba', n:'Барий', v:2, idx:1},
|
||
{s:'Ca', n:'Кальций', v:2, idx:2},{s:'Na', n:'Натрий', v:1, idx:3},
|
||
{s:'Mg', n:'Магний', v:2, idx:4},{s:'Al', n:'Алюминий', v:3, idx:5},
|
||
{s:'Zn', n:'Цинк', v:2, idx:6},{s:'Fe', n:'Железо', v:2, idx:7},
|
||
{s:'Ni', n:'Никель', v:2, idx:8},{s:'Sn', n:'Олово', v:2, idx:9},
|
||
{s:'Pb', n:'Свинец', v:2, idx:10},
|
||
{s:'H₂', n:'граница', v:0, idx:11, sep:true},
|
||
{s:'Cu', n:'Медь', v:2, idx:12},{s:'Hg', n:'Ртуть', v:2, idx:13},
|
||
{s:'Ag', n:'Серебро', v:1, idx:14},{s:'Pt', n:'Платина', v:2, idx:15},
|
||
{s:'Au', n:'Золото', v:3, idx:16},
|
||
];
|
||
const H_POS = 11;
|
||
let actMode = 'displace', actA = null, actB = null;
|
||
|
||
const ACT_HINTS = {
|
||
displace: 'Выберите металл <span style="background:#d1fae5;color:#065f46;font-weight:700;padding:0 5px;border-radius:4px">A</span>, затем металл <span style="background:#fef3c7;color:#92400e;font-weight:700;padding:0 5px;border-radius:4px">B</span> — проверьте реакцию замещения.',
|
||
water: 'Выберите металл — проверьте, реагирует ли он с водой (H₂O).',
|
||
acid: 'Выберите металл — проверьте, реагирует ли он с разбавленной HCl.',
|
||
};
|
||
|
||
function actInit() {
|
||
const row = document.getElementById('actBtns');
|
||
if (!row) return;
|
||
row.innerHTML = ACT_DATA.map(m =>
|
||
m.sep ? `<span class="act-btn ab-h" title="граница — водород">${m.s}</span>`
|
||
: `<button class="act-btn" id="ab_${m.s}" onclick="actClick('${m.s}')" title="${m.n}">${m.s}</button>`
|
||
).join('');
|
||
}
|
||
|
||
function actSetMode(mode) {
|
||
actMode = mode; actReset();
|
||
document.querySelectorAll('.act-mode-btn').forEach(b => b.classList.toggle('active', b.dataset.mode === mode));
|
||
document.getElementById('actSelInfo').innerHTML = ACT_HINTS[mode];
|
||
}
|
||
|
||
function actClick(sym) {
|
||
const m = ACT_DATA.find(x => x.s === sym);
|
||
if (!m || m.sep) return;
|
||
if (actMode !== 'displace') {
|
||
if (actA) document.getElementById('ab_' + actA)?.classList.remove('ab-a');
|
||
actA = sym;
|
||
document.getElementById('ab_' + sym).classList.add('ab-a');
|
||
actShowResult(); return;
|
||
}
|
||
if (!actA) {
|
||
actA = sym;
|
||
document.getElementById('ab_' + sym).classList.add('ab-a');
|
||
document.getElementById('actSelInfo').innerHTML = `A = <strong>${sym}</strong> выбран. Теперь выберите металл <span style="background:#fef3c7;color:#92400e;font-weight:700;padding:0 5px;border-radius:4px">B</span>.`;
|
||
document.getElementById('actResult').className = 'act-result'; return;
|
||
}
|
||
if (actA === sym) { actReset(); return; }
|
||
if (actB) document.getElementById('ab_' + actB)?.classList.remove('ab-b');
|
||
actB = sym;
|
||
document.getElementById('ab_' + sym).classList.add('ab-b');
|
||
actShowResult();
|
||
}
|
||
|
||
function actReset() {
|
||
if (actA) document.getElementById('ab_' + actA)?.classList.remove('ab-a');
|
||
if (actB) document.getElementById('ab_' + actB)?.classList.remove('ab-b');
|
||
actA = null; actB = null;
|
||
document.getElementById('actSelInfo').innerHTML = ACT_HINTS[actMode];
|
||
document.getElementById('actResult').className = 'act-result';
|
||
}
|
||
|
||
function actShowResult() {
|
||
const A = ACT_DATA.find(x => x.s === actA);
|
||
const el = document.getElementById('actResult');
|
||
|
||
if (actMode === 'water') {
|
||
const EQW = {K:'2K+2H₂O=2KOH+H₂↑',Ba:'Ba+2H₂O=Ba(OH)₂+H₂↑',Ca:'Ca+2H₂O=Ca(OH)₂+H₂↑',Na:'2Na+2H₂O=2NaOH+H₂↑'};
|
||
let h, c;
|
||
if (EQW[A.s]) {
|
||
h = `✅ <strong>${A.s} реагирует с водой при н.у.!</strong> (бурно!)<br><code style="font-family:'JetBrains Mono',monospace">${EQW[A.s]}</code>`; c='ar-ok';
|
||
} else if (A.s==='Mg') {
|
||
h='⚠️ <strong>Mg — только с горячей водой/паром:</strong><br><code style="font-family:\'JetBrains Mono\',monospace">Mg+2H₂O(гор.)=Mg(OH)₂+H₂↑</code>'; c='ar-ok';
|
||
} else if (A.s==='Fe') {
|
||
h='⚠️ <strong>Fe — только с водяным паром (накалённый):</strong><br><code style="font-family:\'JetBrains Mono\',monospace">3Fe+4H₂O(пар)=Fe₃O₄+4H₂↑</code>'; c='ar-ok';
|
||
} else if (A.idx < H_POS) {
|
||
h=`⚠️ <strong>${A.n} (${A.s}) — с водяным паром при высокой температуре.</strong> С холодной водой — нет.`; c='ar-ok';
|
||
} else {
|
||
h=`❌ <strong>${A.n} (${A.s}) с водой не реагирует.</strong> Стоит правее H₂.`; c='ar-fail';
|
||
}
|
||
el.innerHTML=h; el.className='act-result show '+c; return;
|
||
}
|
||
|
||
if (actMode === 'acid') {
|
||
const EQA = {
|
||
K:'2K+2HCl=2KCl+H₂↑ ⚠ очень бурно!',Na:'2Na+2HCl=2NaCl+H₂↑ ⚠ очень бурно!',
|
||
Ba:'Ba+2HCl=BaCl₂+H₂↑',Ca:'Ca+2HCl=CaCl₂+H₂↑',
|
||
Mg:'Mg+2HCl=MgCl₂+H₂↑',Al:'2Al+6HCl=2AlCl₃+3H₂↑',
|
||
Zn:'Zn+2HCl=ZnCl₂+H₂↑',Fe:'Fe+2HCl=FeCl₂+H₂↑',
|
||
Ni:'Ni+2HCl=NiCl₂+H₂↑',Sn:'Sn+2HCl=SnCl₂+H₂↑',
|
||
Pb:'Pb+2HCl=PbCl₂↓+H₂↑ (PbCl₂ мало растворим)',
|
||
};
|
||
let h, c;
|
||
if (A.idx < H_POS) {
|
||
h=`✅ <strong>${A.n} (${A.s}) реагирует с разб. HCl</strong> (стоит левее H₂):<br><code style="font-family:'JetBrains Mono',monospace">${EQA[A.s]||A.s+'+2HCl='+A.s+'Cl₂+H₂↑'}</code>`; c='ar-ok';
|
||
} else {
|
||
h=`❌ <strong>${A.n} (${A.s}) НЕ реагирует с разб. HCl.</strong> Стоит правее H₂.`; c='ar-fail';
|
||
}
|
||
el.innerHTML=h; el.className='act-result show '+c; return;
|
||
}
|
||
|
||
if (!actB) return;
|
||
const B = ACT_DATA.find(x => x.s === actB);
|
||
const ok = A.idx < B.idx;
|
||
const warn = ok && ['K','Ba','Ca','Na'].includes(A.s)
|
||
? `<br><span style="font-size:.79rem;opacity:.85">⚠️ ${A.n} в растворе сначала реагирует с водой — прямое вытеснение ${B.n} затруднено!</span>` : '';
|
||
const eq = ok ? buildActEq(A, B) : '';
|
||
el.innerHTML = ok
|
||
? `✅ <strong>${A.s} вытесняет ${B.s}!</strong> (${A.n} стоит левее ${B.n})<br><code style="font-family:'JetBrains Mono',monospace;font-size:.85rem">${eq}</code>${warn}`
|
||
: `❌ <strong>${A.s} НЕ вытесняет ${B.s}.</strong> ${A.n} стоит <em>правее</em> ${B.n} — менее активен.`;
|
||
el.className = 'act-result show ' + (ok ? 'ar-ok' : 'ar-fail');
|
||
}
|
||
|
||
function buildActEq(A, B) {
|
||
const va=A.v, vb=B.v;
|
||
if (!va||!vb) return '';
|
||
const g=(a,b)=>b?g(b,a%b):a, L=va*vb/g(va,vb), nA=L/va, nB=L/vb;
|
||
const sB = B.s==='Ag' ? {f:'AgNO₃',n:1} : vb===1?{f:B.s+'₂SO₄',n:2}:vb===2?{f:B.s+'SO₄',n:1}:{f:B.s+'₂(SO₄)₃',n:2};
|
||
const sA = B.s==='Ag'
|
||
? (va===1?{f:A.s+'NO₃',n:1}:va===2?{f:A.s+'(NO₃)₂',n:1}:{f:A.s+'(NO₃)₃',n:1})
|
||
: (va===1?{f:A.s+'₂SO₄',n:2}:va===2?{f:A.s+'SO₄',n:1}:{f:A.s+'₂(SO₄)₃',n:2});
|
||
const c=n=>n>1?n:'';
|
||
return `${c(nA)}${A.s} + ${c(nB/sB.n)}${sB.f} = ${c(nA/sA.n)}${sA.f} + ${c(nB)}${B.s}↓`;
|
||
}
|
||
|
||
actInit();
|
||
|
||
['p1','p2','p3','p4','p5','p6','p7','p8','p9','p10','p11','p12','p13','p14','p15','p16','p17','p18','p19','p20','p21','p22','p23','p24','p25','p26','p27','p28','p29','p30','p31','p32','p33','p34','p35','p36','p37','p38','p39','p40','p41','p42','p43','p44','p45','p46','p47','p48','p49','p50','p51','p52','p53'].forEach(p => renderTask(p));
|
||
setParaTab('p40');
|
||
|
||
/* ════════ §47 COMPOUND SELECTOR ════════ */
|
||
function show47(id, btn) {
|
||
document.querySelectorAll('.cmpd47-rxn').forEach(el => el.classList.remove('show'));
|
||
document.querySelectorAll('.cmpd47-btn').forEach(b => b.classList.remove('active'));
|
||
document.getElementById('cmpd47-' + id).classList.add('show');
|
||
btn.classList.add('active');
|
||
}
|
||
|
||
/* ════════ §47 CaO ГАШЕНИЕ ════════ */
|
||
let cao47on = false;
|
||
function cao47Step() {
|
||
cao47on = !cao47on;
|
||
const cnt = document.getElementById('cao47cnt');
|
||
const therm= document.getElementById('cao47therm');
|
||
const tlbl = document.getElementById('cao47tempLbl');
|
||
const stat = document.getElementById('cao47status');
|
||
const eq = document.getElementById('cao47eq');
|
||
const btn = document.getElementById('cao47btn');
|
||
const sc = document.getElementById('cao47steam');
|
||
if (cao47on) {
|
||
sc.innerHTML = '';
|
||
['💨','♨️','💨','♨️','💨'].forEach((e,i) => {
|
||
const d = document.createElement('div');
|
||
d.className = 'steam47p';
|
||
d.style.cssText = `left:${8+i*12}px;bottom:0;animation-delay:${i*.2}s`;
|
||
d.textContent = e;
|
||
sc.appendChild(d);
|
||
setTimeout(()=>d.remove(), 2200);
|
||
});
|
||
cnt.style.background = 'rgba(236,252,245,.85)';
|
||
cnt.innerHTML = '<div style="color:#059669;font-family:\'JetBrains Mono\',monospace;font-size:.65rem;font-weight:800">Ca(OH)₂</div>';
|
||
therm.style.height = '85%';
|
||
tlbl.style.opacity = '1';
|
||
stat.innerHTML = '<strong style="color:#dc2626">⚡ Бурная реакция!</strong> Выделяется огромное количество теплоты. Температура резко возрастает — CaO «кипит»!';
|
||
eq.textContent = 'CaO + H₂O → Ca(OH)₂ + Q';
|
||
eq.style.display = 'block';
|
||
btn.innerHTML = ico('rotate-right')+' Сбросить';
|
||
btn.className = 'btn btn-ghost';
|
||
} else {
|
||
cnt.style.background = 'rgba(229,231,235,.75)';
|
||
cnt.innerHTML = 'CaO';
|
||
therm.style.height = '20%';
|
||
tlbl.style.opacity = '.2';
|
||
stat.innerHTML = '<strong>CaO</strong> — белый порошок (негашёная известь). Добавим воду...';
|
||
eq.style.display = 'none';
|
||
btn.innerHTML = ico('droplet')+' Добавить воду';
|
||
btn.className = 'btn btn-pri';
|
||
}
|
||
}
|
||
|
||
/* ════════ §47 CO₂ TEST ════════ */
|
||
let co247state = 0;
|
||
const co247data = [
|
||
{ liqCls:'', sedShow:false, lbl:'Ca(OH)₂ (р-р)', statusHtml:'<strong>Прозрачный</strong> р-р Ca(OH)₂ — «известковая вода»', eq:'', btnHtml:ico('wind')+' Пропустить CO₂', btnCls:'btn btn-pri' },
|
||
{ liqCls:'co2-cloudy', sedShow:true, lbl:'помутнела!', statusHtml:'<strong style="color:#dc2626">Помутнела</strong> — выпал CaCO₃↓ (белый осадок)', eq:'Ca(OH)₂ + CO₂ = CaCO₃↓ + H₂O', btnHtml:ico('wind')+' Ещё CO₂ (избыток)', btnCls:'btn btn-pri' },
|
||
{ liqCls:'co2-clear2', sedShow:false, lbl:'снова прозрачная!', statusHtml:'<strong style="color:#059669">Снова прозрачная</strong> — CaCO₃ растворился, образовался Ca(HCO₃)₂', eq:'CaCO₃ + CO₂ + H₂O = Ca(HCO₃)₂', btnHtml:ico('rotate-right')+' Начать сначала', btnCls:'btn btn-ghost' },
|
||
];
|
||
function co247Step() {
|
||
co247state = (co247state + 1) % 3;
|
||
co247apply();
|
||
}
|
||
function co247Reset() { co247state = 0; co247apply(); }
|
||
function co247apply() {
|
||
const d = co247data[co247state];
|
||
const liq = document.getElementById('co2liq47');
|
||
const sed = document.getElementById('co2sed47');
|
||
const lbl = document.getElementById('co2lbl47');
|
||
const st = document.getElementById('co2status47');
|
||
const eq = document.getElementById('co2eq47');
|
||
const btn = document.getElementById('co2btn47');
|
||
liq.className = 'co2liq47' + (d.liqCls ? ' '+d.liqCls : '');
|
||
sed.classList.toggle('show', d.sedShow);
|
||
lbl.textContent = d.lbl;
|
||
st.innerHTML = d.statusHtml;
|
||
if (d.eq) { eq.textContent = d.eq; eq.style.display = 'block'; } else { eq.style.display = 'none'; }
|
||
btn.innerHTML = d.btnHtml;
|
||
btn.className = d.btnCls;
|
||
[0,1,2].forEach(i => {
|
||
const el = document.getElementById('co2step47-'+i);
|
||
if (el) el.style.background = i===co247state ? 'var(--pri)' : 'var(--border)';
|
||
if (el) el.style.color = i===co247state ? '#fff' : 'var(--muted)';
|
||
});
|
||
}
|
||
|
||
/* ════════ §48 ION DETECTOR ════════ */
|
||
let ion48Ion = null, ion48Rgt = null;
|
||
function sel48Ion(ion, btn) {
|
||
ion48Ion = ion;
|
||
document.querySelectorAll('.ion48-btn.ion-type').forEach(b => b.classList.remove('sel'));
|
||
btn.classList.add('sel');
|
||
ion48Check();
|
||
}
|
||
function sel48Rgt(rgt, btn) {
|
||
ion48Rgt = rgt;
|
||
document.querySelectorAll('.ion48-btn.rgt-type').forEach(b => b.classList.remove('sel'));
|
||
btn.classList.add('sel');
|
||
ion48Check();
|
||
}
|
||
function ion48Check() {
|
||
const el = document.getElementById('ion48Result');
|
||
if (!el || !ion48Ion || !ion48Rgt) return;
|
||
const RESULTS = {
|
||
'ca+co3': {ok:true, sedColor:'rgba(229,231,235,.95)', text:'Ca²⁺ + CO₃²⁻ → CaCO₃↓  <strong>белый осадок</strong> — качественная реакция на Ca²⁺'},
|
||
'ca+so4': {ok:false, sedColor:'', text:'Ca²⁺ + SO₄²⁻ → CaSO₄↓ — осадок нечёткий (мало растворим), не является надёжной качественной реакцией'},
|
||
'ca+oh': {ok:false, sedColor:'', text:'Ca(OH)₂ мало растворим, но осадок образуется нечётко — реакция OH⁻ не используется для обнаружения Ca²⁺'},
|
||
'ba+so4': {ok:true, sedColor:'rgba(229,231,235,.95)', text:'Ba²⁺ + SO₄²⁻ → BaSO₄↓  <strong>белый осадок, нерастворимый в кислотах</strong> — уникальная качественная реакция!'},
|
||
'ba+co3': {ok:false, sedColor:'', text:'BaCO₃↓ образуется, но растворяется в кислотах — не является характеристической реакцией для Ba²⁺'},
|
||
'ba+oh': {ok:false, sedColor:'', text:'Ba(OH)₂ — растворим, осадок не образуется (Ba(OH)₂ — сильное основание)'},
|
||
};
|
||
const r = RESULTS[ion48Ion + '+' + ion48Rgt];
|
||
// Update tube visual
|
||
const liq = document.getElementById('tube48liq');
|
||
const sed = document.getElementById('tube48sed');
|
||
const lbl = document.getElementById('tube48lbl');
|
||
if (liq && sed) {
|
||
if (r && r.ok) {
|
||
sed.style.background = r.sedColor;
|
||
sed.classList.remove('show');
|
||
void sed.offsetWidth; // force reflow for animation replay
|
||
sed.classList.add('show');
|
||
liq.style.background = 'rgba(219,234,254,.5)';
|
||
if (lbl) lbl.textContent = '⬇ осадок';
|
||
} else {
|
||
sed.classList.remove('show');
|
||
liq.style.background = 'rgba(219,234,254,.4)';
|
||
if (lbl) lbl.textContent = r ? 'нет ↓' : 'р-р';
|
||
}
|
||
}
|
||
if (!r) { el.className='ion48-result show ion48-fail'; el.innerHTML='❓ Реакция не характерна'; return; }
|
||
el.className = 'ion48-result show ' + (r.ok ? 'ion48-ok' : 'ion48-fail');
|
||
el.innerHTML = (r.ok ? '✅ ' : '❌ ') + r.text;
|
||
}
|
||
|
||
/* ════════ §48 HARDNESS REMOVAL ════════ */
|
||
function hard48Show(method, btn) {
|
||
document.querySelectorAll('.hard48-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const DATA = {
|
||
boil: {title:'Кипячение', text:'Устраняет только <strong>временную (карбонатную)</strong> жёсткость.<br><code>Ca(HCO₃)₂ →(t) CaCO₃↓ + H₂O + CO₂↑</code><br><code>Mg(HCO₃)₂ →(t) MgCO₃↓ + H₂O + CO₂↑</code><br>На постоянную жёсткость кипячение не действует.'},
|
||
lime: {title:'Известь Ca(OH)₂', text:'Устраняет <strong>временную</strong> жёсткость (известкование):<br><code>Ca(HCO₃)₂ + Ca(OH)₂ = 2CaCO₃↓ + 2H₂O</code><br>Применяется в промышленной водоподготовке.'},
|
||
soda: {title:'Сода Na₂CO₃', text:'Устраняет <strong>постоянную (некарбонатную)</strong> жёсткость:<br><code>CaSO₄ + Na₂CO₃ = CaCO₃↓ + Na₂SO₄</code><br><code>MgSO₄ + Na₂CO₃ = MgCO₃↓ + Na₂SO₄</code><br><code>CaCl₂ + Na₂CO₃ = CaCO₃↓ + 2NaCl</code>'},
|
||
ion: {title:'Ионный обмен', text:'Устраняет <strong>все виды</strong> жёсткости.<br>Ионообменные смолы заменяют Ca²⁺ и Mg²⁺ на Na⁺ или H⁺. Применяется в бытовых фильтрах и промышленности.'},
|
||
};
|
||
const d = DATA[method];
|
||
const el = document.getElementById('hard48Res');
|
||
el.innerHTML = '<strong>' + d.title + '</strong><br>' + d.text;
|
||
el.className = 'hard48-res show';
|
||
}
|
||
|
||
/* ════════ §45 CELL ANIMATION ════════ */
|
||
let s45CellOn=false;
|
||
function toggleCell45(){
|
||
s45CellOn=!s45CellOn;
|
||
document.getElementById('cellDiagram45').classList.toggle('cell-active',s45CellOn);
|
||
document.getElementById('cellIcon45').innerHTML=s45CellOn?ico('stop'):ico('play');
|
||
document.getElementById('cellBtnTxt45').textContent=s45CellOn?'Остановить':'Запустить ток';
|
||
}
|
||
|
||
/* ════════ §49 OXIDE FILM ════════ */
|
||
function filmShow49(mode) {
|
||
const film = document.getElementById('film49');
|
||
const stat = document.getElementById('filmStat49');
|
||
const lbl = document.getElementById('filmLbl49');
|
||
if (mode === 'protect') {
|
||
film.style.opacity = '1';
|
||
lbl.style.color = '#059669'; lbl.textContent = '✓ плёнка Al₂O₃';
|
||
stat.innerHTML = '<strong>Защитная плёнка Al₂O₃</strong> толщиной ~4 нм делает Al стойким к воде и разбавленным кислотам без нагрева. Сама плёнка нерастворима в воде.';
|
||
} else if (mode === 'passive') {
|
||
film.style.opacity = '1';
|
||
lbl.style.color = '#dc2626'; lbl.textContent = '🚫 пассивация';
|
||
stat.innerHTML = '<strong style="color:#dc2626">Пассивация</strong>: конц. HNO₃ и конц. H₂SO₄ мгновенно окисляют поверхность до плотной Al₂O₃ плёнки. Дальнейшая реакция прекращается. Поэтому конц. кислоты хранят в Al-посуде!';
|
||
} else if (mode === 'alkali') {
|
||
film.style.opacity = '0';
|
||
lbl.style.color = '#1d4ed8'; lbl.textContent = '⚡ плёнка разрушена';
|
||
stat.innerHTML = '<strong style="color:#1d4ed8">Щёлочь NaOH</strong> растворяет оксидную плёнку: Al₂O₃ + 2NaOH → 2NaAlO₂ + H₂O. После этого Al активно реагирует с водой и щёлочью:<br><code>2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑</code>';
|
||
}
|
||
}
|
||
|
||
/* ════════ §49 REACTION SELECTOR ════════ */
|
||
const RXN49_DATA = {
|
||
o2: { color:'#f59e0b', icon:'🔥', title:'Al + O₂',
|
||
eq:'4Al + 3O₂ = 2Al₂O₃',
|
||
note:'Горение Al — яркое белое пламя, t>2000°C. Образуется Al₂O₃ — белый тугоплавкий порошок (корунд).' },
|
||
cl2: { color:'#ca8a04', icon:'🟡', title:'Al + Cl₂',
|
||
eq:'2Al + 3Cl₂ = 2AlCl₃',
|
||
note:'С.О. Al = +3. Хлор сильный окислитель. AlCl₃ — белое кристаллическое вещество, хорошо растворимо в воде.' },
|
||
hcl: { color:'#16a34a', icon:'🧪', title:'Al + HCl(разб.)',
|
||
eq:'2Al + 6HCl = 2AlCl₃ + 3H₂↑',
|
||
note:'Плёнка растворяется в кислоте, Al реагирует. Выделяется H₂. Образуется AlCl₃ — соль Al³⁺.' },
|
||
h2so4: { color:'#0891b2', icon:'⚗️', title:'Al + H₂SO₄(разб.)',
|
||
eq:'2Al + 3H₂SO₄ = Al₂(SO₄)₃ + 3H₂↑',
|
||
note:'С разбавленной H₂SO₄ реакция идёт хорошо. Образуется сульфат алюминия Al₂(SO₄)₃ и водород.' },
|
||
naoh: { color:'#1d4ed8', icon:'🔬', title:'Al + NaOH + H₂O',
|
||
eq:'2Al + 2NaOH + 2H₂O = 2NaAlO₂ + 3H₂↑',
|
||
note:'Уникальное свойство Al! Растворяется в щелочах с выделением H₂. Продукт NaAlO₂ — алюминат натрия.' },
|
||
cucl2: { color:'#7c3aed', icon:'🔵', title:'Al + CuCl₂ (вытеснение)',
|
||
eq:'2Al + 3CuCl₂ = 2AlCl₃ + 3Cu↓',
|
||
note:'Al стоит левее Cu в ряду активности → вытесняет Cu. На поверхности Al появляется красный налёт меди.' },
|
||
fe2o3: { color:'#dc2626', icon:'⚡', title:'Алюминотермия: Al + Fe₂O₃',
|
||
eq:'Fe₂O₃ + 2Al = Al₂O₃ + 2Fe + Q(термит)',
|
||
note:'<span style="font-size:.85rem">⚡</span> Термит — алюминотермия. Температура >2000°C! Расплавленное Fe вытекает. Применяется для сварки рельсов. Al восстанавливает Fe из оксида.' },
|
||
hno3c: { color:'#6b7280', icon:'🚫', title:'Al + HNO₃(конц.) — ПАССИВАЦИЯ',
|
||
eq:'Реакция не идёт — пассивация!',
|
||
note:'Конц. HNO₃ мгновенно окисляет поверхность Al до плотной плёнки Al₂O₃. Дальнейшая реакция прекращается. Al можно хранить в конц. HNO₃.' },
|
||
h2o: { color:'#0369a1', icon:'💧', title:'Al + H₂O (медленно)',
|
||
eq:'2Al + 6H₂O → 2Al(OH)₃ + 3H₂↑ (очень медленно)',
|
||
note:'В обычных условиях оксидная плёнка защищает Al от воды. После удаления плёнки (амальгама Hg, щёлочь) реакция идёт активно.' },
|
||
};
|
||
function rxn49(key, btn) {
|
||
document.querySelectorAll('.rxn49-btn').forEach(b => b.classList.remove('sel'));
|
||
btn.classList.add('sel');
|
||
const d = RXN49_DATA[key];
|
||
const res = document.getElementById('rxn49Res');
|
||
res.style.borderLeftColor = d.color;
|
||
res.innerHTML = `<div style="font-size:.85rem;font-weight:700;margin-bottom:8px">${d.icon} ${d.title}</div>
|
||
<span class="eq">${d.eq}</span>
|
||
<p style="font-size:.8rem;color:var(--muted);margin-top:8px;line-height:1.65">${d.note}</p>`;
|
||
res.classList.add('show');
|
||
}
|
||
|
||
/* ════════ §50 AMPHOTERY ════════ */
|
||
const AMP50_DATA = {
|
||
hcl: { liqBg:'rgba(209,250,229,.6)', sedH:'0%', liqTxt:'AlCl₃ р-р',
|
||
stat:'<strong style="color:#dc2626">Кислота растворила осадок!</strong> Al(OH)₃ + 3HCl = AlCl₃ + 3H₂O.<br>Al(OH)₃ проявил основные свойства.',
|
||
eq:'Al(OH)₃ + 3HCl = AlCl₃ + 3H₂O' },
|
||
naoh_conc:{ liqBg:'rgba(219,234,254,.6)', sedH:'0%', liqTxt:'NaAlO₂ р-р',
|
||
stat:'<strong style="color:#1d4ed8">Щёлочь растворила осадок!</strong> Al(OH)₃ + NaOH = NaAlO₂ + 2H₂O. (Сплавление или конц.)<br>Al(OH)₃ проявил кислотные свойства.',
|
||
eq:'Al(OH)₃ + NaOH(конц.) = NaAlO₂ + 2H₂O' },
|
||
naoh_aq: { liqBg:'rgba(219,234,254,.6)', sedH:'0%', liqTxt:'Na[Al(OH)₄]',
|
||
stat:'<strong style="color:#1d4ed8">Щёлочь (р-р) растворила осадок!</strong><br>Al(OH)₃ + NaOH(р-р) = Na[Al(OH)₄] — тетрагидроксоалюминат натрия.',
|
||
eq:'Al(OH)₃ + NaOH(р-р) = Na[Al(OH)₄]' },
|
||
heat: { liqBg:'rgba(229,231,235,.4)', sedH:'20%', liqTxt:'Al₂O₃ (порошок)',
|
||
stat:'<strong style="color:#f59e0b">Нагрев → дегидратация!</strong> 2Al(OH)₃ → Al₂O₃ + 3H₂O.<br>Образуется корунд Al₂O₃ (тугоплавкий белый порошок).',
|
||
eq:'2Al(OH)₃ →(t°) Al₂O₃ + 3H₂O' },
|
||
reset: { liqBg:'rgba(248,250,252,.5)', sedH:'30%', liqTxt:'Al(OH)₃↓',
|
||
stat:'Осадок Al(OH)₃ — белый, студенистый. Выберите действие.', eq:'' },
|
||
};
|
||
function amp50(mode, btn) {
|
||
const d = AMP50_DATA[mode];
|
||
const liq = document.getElementById('amp50liq');
|
||
const sed = document.getElementById('amp50sed');
|
||
const lbl = document.getElementById('amp50lbl');
|
||
const stat = document.getElementById('amp50stat');
|
||
const eq = document.getElementById('amp50eq');
|
||
liq.style.background = d.liqBg;
|
||
sed.style.height = d.sedH;
|
||
sed.classList.toggle('show', parseFloat(d.sedH) > 0);
|
||
lbl.textContent = d.liqTxt;
|
||
stat.innerHTML = d.stat;
|
||
if (d.eq) { eq.textContent = d.eq; eq.classList.add('show'); } else { eq.classList.remove('show'); }
|
||
document.querySelectorAll('.amp50-btn').forEach(b => b.classList.remove('sel'));
|
||
if (mode !== 'reset' && btn) btn.classList.add('sel');
|
||
}
|
||
|
||
/* ════════ §51 CORROSION ════════ */
|
||
let fe51timer = null;
|
||
function feCorr51(mode) {
|
||
clearTimeout(fe51timer);
|
||
const bar = document.getElementById('feBar51');
|
||
const stat = document.getElementById('feStat51');
|
||
const eq = document.getElementById('feEq51');
|
||
bar.className = 'fe51-bar';
|
||
eq.style.display = 'none';
|
||
if (mode === 'dry') {
|
||
stat.textContent = 'Сухой воздух — ржавчина не образуется';
|
||
eq.textContent = 'Fe + O₂(сухой) → медленное окисление, ржавчины НЕТ';
|
||
eq.style.display = 'block';
|
||
} else if (mode === 'wet') {
|
||
stat.textContent = 'Идёт коррозия…';
|
||
fe51timer = setTimeout(() => {
|
||
bar.classList.add('rusting');
|
||
stat.textContent = 'Ржавчина! Fe → Fe(OH)₃';
|
||
}, 1800);
|
||
eq.textContent = '4Fe + 3O₂ + 6H₂O = 4Fe(OH)₃ (ржавчина)';
|
||
eq.style.display = 'block';
|
||
} else if (mode === 'fire') {
|
||
bar.style.background = 'linear-gradient(135deg,#f59e0b,#d97706)';
|
||
bar.style.borderColor = '#92400e';
|
||
bar.style.color = '#fff';
|
||
stat.textContent = 'Горение в O₂ → Fe₃O₄ (окалина)';
|
||
eq.textContent = '3Fe + 2O₂ = Fe₃O₄ (окалина, 570–1400°C)';
|
||
eq.style.display = 'block';
|
||
} else {
|
||
stat.textContent = 'исходное состояние';
|
||
bar.style.background = '';
|
||
bar.style.borderColor = '';
|
||
bar.style.color = '';
|
||
}
|
||
}
|
||
|
||
/* ════════ §1 LAMP TEST ════════ */
|
||
function lamp1test(name, isElec, eq) {
|
||
const lamp = document.getElementById('lamp1');
|
||
const status = document.getElementById('lamp1status');
|
||
const eqEl = document.getElementById('lamp1eq');
|
||
if (isElec) {
|
||
lamp.style.background = '#fef08a';
|
||
lamp.style.boxShadow = '0 0 16px 6px rgba(250,204,21,.6)';
|
||
lamp.textContent = '💡';
|
||
status.textContent = name + ' — ЭЛЕКТРОЛИТ, лампа горит!';
|
||
status.style.color = '#d97706';
|
||
} else {
|
||
lamp.style.background = '#374151';
|
||
lamp.style.boxShadow = 'none';
|
||
lamp.textContent = '💡';
|
||
status.textContent = name + ' — НЕЭЛЕКТРОЛИТ, лампа не горит.';
|
||
status.style.color = '#6b7280';
|
||
}
|
||
eqEl.textContent = eq;
|
||
}
|
||
|
||
/* ════════ §3 ALPHA SHOW ════════ */
|
||
function alpha3show(name, alpha, eq, type) {
|
||
const box = document.getElementById('alpha3box');
|
||
document.getElementById('alpha3val').textContent = name + ': α = ' + alpha;
|
||
document.getElementById('alpha3eq').textContent = eq;
|
||
document.getElementById('alpha3type').textContent = 'Тип: ' + type + ' электролит';
|
||
box.style.display = 'block';
|
||
}
|
||
|
||
/* ════════ §4 ACID SHOW ════════ */
|
||
function acid4show(name, eq, info) {
|
||
const box = document.getElementById('acid4box');
|
||
document.getElementById('acid4eq').textContent = eq;
|
||
document.getElementById('acid4info').textContent = info;
|
||
box.style.display = 'block';
|
||
}
|
||
|
||
/* ════════ §5 INDICATOR SHOW ════════ */
|
||
function ind5show(env) {
|
||
document.getElementById('ind5table').style.display = 'table';
|
||
const cells = {
|
||
'acid': ['ind5-lk-a','ind5-ff-a','ind5-mo-a'],
|
||
'neutral': ['ind5-lk-n','ind5-ff-n','ind5-mo-n'],
|
||
'base': ['ind5-lk-b','ind5-ff-b','ind5-mo-b']
|
||
};
|
||
// Reset all
|
||
['a','n','b'].forEach(s => {
|
||
['ind5-lk-','ind5-ff-','ind5-mo-'].forEach(p => {
|
||
const el = document.getElementById(p+s);
|
||
if (el) el.style.fontWeight = '';
|
||
});
|
||
});
|
||
// Highlight selected
|
||
cells[env].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) el.style.fontWeight = '800';
|
||
});
|
||
}
|
||
|
||
/* ════════ §7 RIO SHOW ════════ */
|
||
const RIO7 = {
|
||
a: {
|
||
mol: 'AgNO₃ + NaCl = AgCl↓ + NaNO₃',
|
||
full: 'Ag⁺ + NO₃⁻ + Na⁺ + Cl⁻ = AgCl↓ + Na⁺ + NO₃⁻',
|
||
short: 'Ag⁺ + Cl⁻ = AgCl↓'
|
||
},
|
||
b: {
|
||
mol: 'HCl + NaOH = NaCl + H₂O',
|
||
full: 'H⁺ + Cl⁻ + Na⁺ + OH⁻ = Na⁺ + Cl⁻ + H₂O',
|
||
short: 'H⁺ + OH⁻ = H₂O'
|
||
},
|
||
c: {
|
||
mol: 'Na₂CO₃ + H₂SO₄ = Na₂SO₄ + H₂O + CO₂↑',
|
||
full: '2Na⁺ + CO₃²⁻ + 2H⁺ + SO₄²⁻ = 2Na⁺ + SO₄²⁻ + H₂O + CO₂↑',
|
||
short: 'CO₃²⁻ + 2H⁺ = H₂O + CO₂↑'
|
||
}
|
||
};
|
||
function rio7show(key) {
|
||
const d = RIO7[key];
|
||
const box = document.getElementById('rio7box');
|
||
document.getElementById('rio7mol').textContent = d.mol;
|
||
document.getElementById('rio7full').textContent = d.full;
|
||
document.getElementById('rio7short').textContent = d.short;
|
||
box.style.display = 'block';
|
||
}
|
||
|
||
/* ════════ §8 RIO CHECK ════════ */
|
||
function rio8check(pair, result, why, eq) {
|
||
const box = document.getElementById('rio8res');
|
||
const verdict = document.getElementById('rio8verdict');
|
||
if (result === 'yes') {
|
||
box.style.background = '#d1fae5';
|
||
box.style.borderLeft = '4px solid #059669';
|
||
verdict.style.color = '#059669';
|
||
verdict.textContent = '✅ Реакция идёт: ' + pair;
|
||
} else {
|
||
box.style.background = '#fee2e2';
|
||
box.style.borderLeft = '4px solid #dc2626';
|
||
verdict.style.color = '#dc2626';
|
||
verdict.textContent = '❌ Реакция не идёт: ' + pair;
|
||
}
|
||
document.getElementById('rio8why').textContent = why;
|
||
document.getElementById('rio8eq').textContent = eq;
|
||
box.style.display = 'block';
|
||
}
|
||
|
||
/* ════════ §9 HYDROLYSIS ════════ */
|
||
function hyd9show(salt, phType, why, bg, color) {
|
||
const box = document.getElementById('hyd9box');
|
||
const verdict = document.getElementById('hyd9verdict');
|
||
box.style.background = bg;
|
||
box.style.border = '1px solid ' + color;
|
||
box.style.display = 'block';
|
||
verdict.style.color = color;
|
||
verdict.textContent = salt + ': pH ' + phType + ' (' + (phType === '=7' ? 'нейтральная среда' : phType === '7+' ? 'щелочная среда' : 'кислая среда') + ')';
|
||
document.getElementById('hyd9why').textContent = why;
|
||
}
|
||
|
||
/* ════════ §16 OVR SHOW ════════ */
|
||
function ovr16show(name, role, why, bg, color) {
|
||
const box = document.getElementById('ovr16box');
|
||
const roleEl = document.getElementById('ovr16role');
|
||
box.style.background = bg;
|
||
box.style.border = '1px solid ' + color;
|
||
box.style.display = 'block';
|
||
roleEl.style.color = color;
|
||
roleEl.textContent = name + ' — ' + role;
|
||
document.getElementById('ovr16why').textContent = why;
|
||
}
|
||
|
||
/* ════════ §26 CO/CO2 SHOW ════════ */
|
||
const CO26 = {
|
||
CO: {
|
||
name: 'CO — угарный газ',
|
||
info: 'Бесцветный, без запаха, ядовит. Связывается с гемоглобином: CO+Hb→HbCO. Горит синим пламенем: 2CO+O₂=2CO₂. Восстановитель: CO+CuO=Cu+CO₂'
|
||
},
|
||
CO2: {
|
||
name: 'CO₂ — углекислый газ',
|
||
info: 'Кислотный оксид. CO₂+H₂O=H₂CO₃. CO₂+2NaOH=Na₂CO₃+H₂O. Качественная реакция: мутит известковую воду Ca(OH)₂. Применение: газировка, огнетушители, парниковый газ.'
|
||
}
|
||
};
|
||
function co26show(type) {
|
||
const d = CO26[type];
|
||
const box = document.getElementById('co26box');
|
||
document.getElementById('co26name').textContent = d.name;
|
||
document.getElementById('co26info').textContent = d.info;
|
||
box.style.display = 'block';
|
||
}
|
||
|
||
/* ════════ §35 H2SO4 ════════ */
|
||
const H2SO435 = {
|
||
dil: {
|
||
title: 'Разбавленная H₂SO₄ (обычные свойства кислоты)',
|
||
content: 'Zn + H₂SO₄ = ZnSO₄ + H₂↑\nFe + H₂SO₄ = FeSO₄ + H₂↑\nZnO + H₂SO₄ = ZnSO₄ + H₂O\nNaOH + H₂SO₄ = Na₂SO₄ + H₂O\nBa²⁺ + SO₄²⁻ = BaSO₄↓ (качеств. р-я)'
|
||
},
|
||
conc: {
|
||
title: 'Концентрированная H₂SO₄ (окислитель)',
|
||
content: 'Cu + 2H₂SO₄(конц) = CuSO₄ + SO₂↑ + 2H₂O\nS + 2H₂SO₄(конц) = 3SO₂↑ + 2H₂O\nC + 2H₂SO₄(конц) = CO₂↑ + 2SO₂↑ + 2H₂O\nВнимание: Fe, Al пассивируются на холоде!\nОбугливает органику!'
|
||
}
|
||
};
|
||
function h2so435(type) {
|
||
const d = H2SO435[type];
|
||
const box = document.getElementById('h2so435box');
|
||
document.getElementById('h2so435title').textContent = d.title;
|
||
document.getElementById('h2so435content').textContent = d.content;
|
||
box.style.display = 'block';
|
||
}
|
||
|
||
/* ════════ §52 Fe(OH)₂ COLOR CHANGE ════════ */
|
||
function feoh52Step(state) {
|
||
const liq = document.getElementById('feohLiq52');
|
||
const lbl = document.getElementById('feohLbl52');
|
||
const stat = document.getElementById('feohStat52');
|
||
const eq = document.getElementById('feohEq52');
|
||
if (state === 'white') {
|
||
liq.className = 'feoh52-liq';
|
||
lbl.textContent = 'Fe(OH)₂ — белый/серо-зелёный';
|
||
lbl.style.color = '#6b7280';
|
||
stat.innerHTML = 'Свежеосаждённый <strong>Fe(OH)₂</strong> — белый или серо-зелёный осадок. Получается: FeCl₂ + 2NaOH = Fe(OH)₂↓ + 2NaCl';
|
||
eq.style.display = 'none';
|
||
} else if (state === 'grey') {
|
||
liq.className = 'feoh52-liq grey';
|
||
lbl.textContent = 'серо-зелёный → начало окисления';
|
||
lbl.style.color = '#4b5563';
|
||
stat.innerHTML = 'Начинается окисление Fe²⁺ → Fe³⁺. Осадок темнеет. Контакт с O₂ воздуха запускает реакцию…';
|
||
eq.style.display = 'none';
|
||
} else if (state === 'brown') {
|
||
liq.className = 'feoh52-liq brown';
|
||
lbl.textContent = '→ Fe(OH)₃ красно-бурый';
|
||
lbl.style.color = '#92400e';
|
||
stat.innerHTML = '<strong style="color:#92400e">Буреет!</strong> Fe(OH)₂ окислился до Fe(OH)₃ под действием O₂ и H₂O воздуха.';
|
||
eq.textContent = '4Fe(OH)₂ + O₂ + 2H₂O = 4Fe(OH)₃';
|
||
eq.style.display = 'block';
|
||
}
|
||
}
|
||
|
||
/* ════════ §52 QUALITATIVE REACTIONS ════════ */
|
||
const QUAL52 = {
|
||
a: { liqFinal:'rgba(156,163,175,.4)', sedH:'28%', sedBg:'rgba(156,163,175,.85)',
|
||
res:'Fe²⁺ + 2OH⁻ = Fe(OH)₂↓ — <strong style="color:#6b7280">серо-зелёный</strong> осадок. Буреет на воздухе!' },
|
||
b: { liqFinal:'rgba(219,234,254,.4)', sedH:'28%', sedBg:'rgba(180,83,9,.5)',
|
||
res:'Fe³⁺ + 3OH⁻ = Fe(OH)₃↓ — <strong style="color:#92400e">красно-бурый</strong> осадок.' },
|
||
c: { liqFinal:'rgba(220,38,38,.35)', sedH:'0%', sedBg:'',
|
||
res:'Fe³⁺ + 3SCN⁻ = Fe(SCN)₃ — <strong style="color:#dc2626">кроваво-красное</strong> окрашивание раствора.' },
|
||
d: { liqFinal:'rgba(219,234,254,.4)', sedH:'28%', sedBg:'rgba(180,83,9,.5)',
|
||
res:'FeCl₃ + 3KOH = Fe(OH)₃↓ + 3KCl — <strong style="color:#92400e">красно-бурый</strong> Fe(OH)₃↓.' },
|
||
};
|
||
function qual52(id, btn) {
|
||
const d = QUAL52[id];
|
||
const liq = document.getElementById('ql52'+id+'-liq');
|
||
const sed = document.getElementById('ql52'+id+'-sed');
|
||
const res = document.getElementById('ql52'+id+'-res');
|
||
liq.style.background = d.liqFinal;
|
||
if (d.sedBg) sed.style.background = d.sedBg;
|
||
sed.classList.toggle('show', parseFloat(d.sedH) > 0);
|
||
res.innerHTML = d.res;
|
||
if (btn) btn.classList.add('sel');
|
||
}
|
||
|
||
|
||
|
||
|
||
// ══ PHASE A: Global Foundations (stub — HUD/toast/dark removed) ══
|
||
const CHEM = (() => {
|
||
const state = {
|
||
progress: JSON.parse(localStorage.getItem('chem9_progress')||'{}'),
|
||
score: +localStorage.getItem('chem9_score')||0,
|
||
badges: JSON.parse(localStorage.getItem('chem9_badges')||'[]'),
|
||
};
|
||
const save = () => {
|
||
localStorage.setItem('chem9_progress', JSON.stringify(state.progress));
|
||
localStorage.setItem('chem9_score', String(state.score));
|
||
localStorage.setItem('chem9_badges', JSON.stringify(state.badges));
|
||
};
|
||
const updateHUD = () => {};
|
||
const toast = () => {};
|
||
const addScore = (n) => { state.score += n; save(); };
|
||
const markDone = (id) => { state.progress[id] = true; save(); };
|
||
const award = (badge) => { if(!state.badges.includes(badge)){ state.badges.push(badge); save(); } };
|
||
const checkBadge = () => {};
|
||
|
||
// IntersectionObserver for .reveal-on-view
|
||
const io = new IntersectionObserver(es =>
|
||
es.forEach(e => { if(e.isIntersecting) e.target.classList.add('in'); }), {threshold:.15});
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
document.querySelectorAll('.reveal-on-view').forEach(el => io.observe(el));
|
||
});
|
||
return { state, save, addScore, markDone, award, checkBadge, toast, updateHUD };
|
||
})();
|
||
|
||
// Helper: qNCheck used by quizzes
|
||
window.qNCheck = function(el, chosen, ans, explanation) {
|
||
const wrap = el.closest('[id]') || el.parentElement;
|
||
const opts = wrap.querySelectorAll('.quiz-opt');
|
||
opts.forEach(o => o.style.pointerEvents = 'none');
|
||
if (chosen === ans) {
|
||
el.classList.add('ok');
|
||
el.classList.add('correct-flash');
|
||
CHEM.addScore(5);
|
||
} else {
|
||
el.classList.add('err');
|
||
el.classList.add('wrong-shake');
|
||
opts.forEach(o => { if (o.textContent.trim() === ans) o.classList.add('ok'); });
|
||
}
|
||
};
|
||
|
||
// ══ Phase B: §1–§12 Widget JS ══
|
||
|
||
// ── §1 Bohr Atom ──────────────────────────────────────────────────────────────
|
||
const ELEMENTS = {
|
||
1:'H',2:'He',3:'Li',4:'Be',5:'B',6:'C',7:'N',8:'O',9:'F',10:'Ne',
|
||
11:'Na',12:'Mg',13:'Al',14:'Si',15:'P',16:'S',17:'Cl',18:'Ar',19:'K',20:'Ca'
|
||
};
|
||
const ISOTOPES = {
|
||
1:[1,2,3],2:[4],3:[7],4:[9],5:[11],6:[12,13],7:[14],8:[16,17,18],9:[19],10:[20],
|
||
11:[23],12:[24,25,26],13:[27],14:[28,29,30],15:[31],16:[32,33,34],17:[35,37],18:[40],19:[39,41],20:[40,42,44]
|
||
};
|
||
let atom1Explored = new Set();
|
||
|
||
function atom1Render() {
|
||
const zEl = document.getElementById('atom1-z');
|
||
const aEl = document.getElementById('atom1-a');
|
||
if (!zEl) return;
|
||
const Z = +zEl.value;
|
||
let A = +aEl.value;
|
||
const sym = ELEMENTS[Z] || '?';
|
||
document.getElementById('atom1-zlabel').textContent = `${sym} (Z=${Z})`;
|
||
document.getElementById('atom1-alabel').textContent = `A=${A}`;
|
||
const N = A - Z;
|
||
const info = document.getElementById('atom1-info');
|
||
if (info) {
|
||
info.innerHTML = `<b>${sym}</b><br>Z=${Z} A=${A} N=${N >= 0 ? N : '?'}<br>
|
||
${N<0 ? '<span style="color:#dc2626">A < Z — нереально!</span>' :
|
||
`<span style="color:#475569">e⁻: ${Z} | p⁺: ${Z} | n⁰: ${N}</span>`}`;
|
||
}
|
||
// Draw
|
||
const stage = document.getElementById('atom1-stage');
|
||
if (!stage) return;
|
||
stage.innerHTML = '';
|
||
// Nucleus
|
||
const nuc = document.createElement('div');
|
||
nuc.className = 'a-nucleus';
|
||
nuc.innerHTML = `${Z}p<br>${N>=0?N+'n':'?'}`;
|
||
stage.appendChild(nuc);
|
||
// Shells: 2, 8, 8, 2 (for Z<=20)
|
||
const shellDist = [0, 50, 90, 120, 140];
|
||
const shellCap = [2, 8, 8, 2];
|
||
let rem = Z;
|
||
for (let sh = 0; sh < 4 && rem > 0; sh++) {
|
||
const cnt = Math.min(shellCap[sh], rem); rem -= cnt;
|
||
const r = shellDist[sh+1];
|
||
const shell = document.createElement('div');
|
||
shell.className = 'a-shell';
|
||
shell.style.cssText = `width:${r*2}px;height:${r*2}px;left:${140-r}px;top:${140-r}px`;
|
||
stage.appendChild(shell);
|
||
// Electrons
|
||
for (let e = 0; e < cnt; e++) {
|
||
const angle = (360 / cnt) * e;
|
||
const el = document.createElement('div');
|
||
el.className = 'a-electron';
|
||
const rad = r - 5;
|
||
// orbit: use wrapper for rotation + child for position
|
||
const wrap = document.createElement('div');
|
||
wrap.style.cssText = `position:absolute;width:${r*2}px;height:${r*2}px;left:${140-r}px;top:${140-r}px;animation:orbit ${2+sh*1.5}s linear infinite;animation-delay:-${(e/cnt)*(2+sh*1.5)}s;transform-origin:center;`;
|
||
const dot = document.createElement('div');
|
||
dot.className = 'a-electron';
|
||
dot.style.cssText = `position:absolute;top:${r-5}px;left:${r*2-5}px;`;
|
||
wrap.appendChild(dot);
|
||
stage.appendChild(wrap);
|
||
}
|
||
}
|
||
// Track exploration
|
||
atom1Explored.add(Z);
|
||
if (atom1Explored.size >= 5) {
|
||
CHEM.addScore(10, '5 элементов исследовано!');
|
||
CHEM.markDone('p1_atom');
|
||
CHEM.award('Атомщик');
|
||
}
|
||
}
|
||
document.addEventListener('DOMContentLoaded', () => { if(document.getElementById('atom1-z')) atom1Render(); });
|
||
|
||
// ── §2 Sublevel filler ────────────────────────────────────────────────────────
|
||
const SUBLEVELS = [
|
||
{n:'1s',cap:2},{n:'2s',cap:2},{n:'2p',cap:6},{n:'3s',cap:2},
|
||
{n:'3p',cap:6},{n:'4s',cap:2},{n:'3d',cap:10},{n:'4p',cap:6}
|
||
];
|
||
const CONF_MAP = {
|
||
1:'1s¹',2:'1s²',3:'1s²2s¹',4:'1s²2s²',5:'1s²2s²2p¹',6:'1s²2s²2p²',
|
||
7:'1s²2s²2p³',8:'1s²2s²2p⁴',9:'1s²2s²2p⁵',10:'1s²2s²2p⁶',
|
||
11:'1s²2s²2p⁶3s¹',12:'1s²2s²2p⁶3s²',13:'1s²2s²2p⁶3s²3p¹',
|
||
14:'1s²2s²2p⁶3s²3p²',15:'1s²2s²2p⁶3s²3p³',16:'1s²2s²2p⁶3s²3p⁴',
|
||
17:'1s²2s²2p⁶3s²3p⁵',18:'1s²2s²2p⁶3s²3p⁶',19:'1s²2s²2p⁶3s²3p⁶4s¹',
|
||
20:'1s²2s²2p⁶3s²3p⁶4s²'
|
||
};
|
||
let econf2Timer = null;
|
||
|
||
function econf2Reset() {
|
||
clearTimeout(econf2Timer);
|
||
const grid = document.getElementById('econf2-grid');
|
||
if (!grid) return;
|
||
grid.querySelectorAll('.subl-box').forEach(b => {
|
||
b.classList.remove('filled','active');
|
||
b.querySelectorAll('.e-up,.e-dn').forEach(e => e.textContent = '');
|
||
});
|
||
const res = document.getElementById('econf2-result');
|
||
if (res) res.textContent = '';
|
||
}
|
||
|
||
function econf2Anim() {
|
||
econf2Reset();
|
||
const Z = +document.getElementById('econf2-sel').value;
|
||
const grid = document.getElementById('econf2-grid');
|
||
if (!grid) return;
|
||
// Build grid first
|
||
grid.innerHTML = SUBLEVELS.map((sl,i) => {
|
||
const orbCnt = sl.cap / 2;
|
||
const orbs = Array(orbCnt).fill(0).map((_,j) =>
|
||
`<div class="s-orb" id="econf2-orb-${i}-${j}"><span class="e-up"></span><span class="e-dn"></span></div>`
|
||
).join('');
|
||
return `<div class="subl-box" id="econf2-sl-${i}"><div class="subl-name">${sl.n}</div><div class="subl-orbs">${orbs}</div></div>`;
|
||
}).join('');
|
||
// Animate filling
|
||
let rem = Z, slIdx = 0, confStr = '';
|
||
const steps = [];
|
||
while (rem > 0 && slIdx < SUBLEVELS.length) {
|
||
const sl = SUBLEVELS[slIdx];
|
||
const fill = Math.min(sl.cap, rem);
|
||
steps.push({slIdx, fill, cap:sl.cap, name:sl.n});
|
||
confStr += sl.n + (fill > 0 ? fill.toString().replace(/(\d)/g, c => '⁰¹²³⁴⁵⁶⁷⁸⁹¹⁰'[+c]||c) : '');
|
||
rem -= fill; slIdx++;
|
||
}
|
||
// Superscript helper
|
||
const sup = n => n.toString().split('').map(c => '⁰¹²³⁴⁵⁶⁷⁸⁹'[+c]||c).join('');
|
||
let stepI = 0;
|
||
function runStep() {
|
||
if (stepI >= steps.length) {
|
||
const res = document.getElementById('econf2-result');
|
||
if (res) res.textContent = CONF_MAP[Z] || confStr;
|
||
CHEM.addScore(3, 'Конфигурация заполнена');
|
||
CHEM.markDone('p2_econf');
|
||
CHEM.award('Конфигуратор');
|
||
return;
|
||
}
|
||
const s = steps[stepI++];
|
||
const box = document.getElementById('econf2-sl-'+s.slIdx);
|
||
if (!box) { econf2Timer = setTimeout(runStep, 200); return; }
|
||
box.classList.add('active');
|
||
let e = 0;
|
||
const orbCnt = s.cap / 2;
|
||
// Fill up arrows first (Hund), then down
|
||
function fillOrb() {
|
||
if (e >= s.fill) {
|
||
box.classList.remove('active'); box.classList.add('filled');
|
||
econf2Timer = setTimeout(runStep, 300);
|
||
return;
|
||
}
|
||
const orbIdx = e < orbCnt ? e : (e - orbCnt);
|
||
const orbEl = document.getElementById(`econf2-orb-${s.slIdx}-${orbIdx}`);
|
||
if (orbEl) {
|
||
const arrow = e < orbCnt ? orbEl.querySelector('.e-up') : orbEl.querySelector('.e-dn');
|
||
if (arrow) { arrow.textContent = e < orbCnt ? '↑' : '↓'; }
|
||
}
|
||
e++;
|
||
econf2Timer = setTimeout(fillOrb, 120);
|
||
}
|
||
fillOrb();
|
||
}
|
||
econf2Timer = setTimeout(runStep, 200);
|
||
}
|
||
|
||
// ── §4 EO comparator ──────────────────────────────────────────────────────────
|
||
const EO_DATA = [
|
||
{sym:'H',eo:2.20,z:1},{sym:'Li',eo:.98,z:3},{sym:'C',eo:2.55,z:6},
|
||
{sym:'N',eo:3.04,z:7},{sym:'O',eo:3.44,z:8},{sym:'F',eo:3.98,z:9},
|
||
{sym:'Na',eo:.93,z:11},{sym:'Mg',eo:1.31,z:12},{sym:'Al',eo:1.61,z:13},
|
||
{sym:'Si',eo:1.90,z:14},{sym:'P',eo:2.19,z:15},{sym:'S',eo:2.58,z:16},
|
||
{sym:'Cl',eo:3.16,z:17},{sym:'K',eo:.82,z:19},{sym:'Ca',eo:1.00,z:20}
|
||
];
|
||
|
||
function eo4Update() {
|
||
const aVal = (document.getElementById('eo4-a')?.value||'O,3.44').split(',');
|
||
const bVal = (document.getElementById('eo4-b')?.value||'H,2.20').split(',');
|
||
const [aSym, aEo] = [aVal[0], +aVal[1]];
|
||
const [bSym, bEo] = [bVal[0], +bVal[1]];
|
||
const delta = Math.abs(aEo - bEo).toFixed(2);
|
||
const more = aEo > bEo ? 'right' : 'left';
|
||
// atom colors
|
||
const aAtom = document.getElementById('eo4-a-atom');
|
||
const bAtom = document.getElementById('eo4-b-atom');
|
||
const conn = document.getElementById('eo4-conn');
|
||
const dp = document.getElementById('eo4-dp');
|
||
const dm = document.getElementById('eo4-dm');
|
||
const cls = document.getElementById('eo4-class');
|
||
const dv = document.getElementById('eo4-delta-val');
|
||
if (!aAtom) return;
|
||
aAtom.textContent = aSym;
|
||
bAtom.textContent = bSym;
|
||
// gradient between electronegativities
|
||
const aPct = Math.round((aEo/4)*100), bPct = Math.round((bEo/4)*100);
|
||
conn.style.background = `linear-gradient(90deg,hsl(${aPct*2},70%,60%),hsl(${bPct*2},70%,60%))`;
|
||
if (dv) dv.textContent = `ΔЭО = ${delta}`;
|
||
let type, typeCls;
|
||
if (delta < 0.4) { type='Неполярная ковалентная'; typeCls='eo-nonpolar'; dp.style.display='none'; dm.style.display='none'; }
|
||
else if (delta < 1.7) { type='Полярная ковалентная'; typeCls='eo-polar'; dp.style.display=''; dm.style.display='';
|
||
if (aEo > bEo) { dp.textContent='δ+'; dp.style.left='4px'; dm.textContent='δ−'; dm.style.right='4px'; dm.style.left=''; }
|
||
else { dm.textContent='δ−'; dm.style.left='4px'; dm.style.right=''; dp.textContent='δ+'; dp.style.right='4px'; dp.style.left=''; }
|
||
}
|
||
else { type='Ионная'; typeCls='eo-ionic'; dp.style.display='none'; dm.style.display='none'; }
|
||
if (cls) { cls.textContent=type; cls.className='eo-class-tag '+typeCls; }
|
||
}
|
||
|
||
function eo4BuildHeatmap() {
|
||
const hm = document.getElementById('eo4-heatmap');
|
||
if (!hm) return;
|
||
hm.innerHTML = EO_DATA.map(el => {
|
||
const h = Math.round(240 - el.eo * 55);
|
||
const l = Math.round(40 + el.eo * 5);
|
||
return `<div class="eo-cell" style="background:hsl(${h},75%,${l}%)"
|
||
onclick="eo4SelectEl('${el.sym}',${el.eo})" title="${el.sym}: ${el.eo}">
|
||
${el.sym}<div class="eo-tooltip">${el.eo}</div></div>`;
|
||
}).join('');
|
||
}
|
||
|
||
window.eo4SelectEl = function(sym, eo) {
|
||
const selA = document.getElementById('eo4-a');
|
||
if (selA) {
|
||
for (const o of selA.options) if (o.value.startsWith(sym+',')) { selA.value=o.value; break; }
|
||
eo4Update();
|
||
}
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { eo4Update(); eo4BuildHeatmap(); });
|
||
|
||
// ── §6 Ionic bond animation ───────────────────────────────────────────────────
|
||
let ion6State = 'idle';
|
||
function ion6Play() {
|
||
if (ion6State === 'done') { ion6Reset(); return; }
|
||
ion6State = 'playing';
|
||
const eEl = document.getElementById('ion6-e');
|
||
if (!eEl) return;
|
||
eEl.style.transition = 'all 1s ease-in';
|
||
eEl.style.transform = 'translateX(140px)';
|
||
eEl.style.opacity = '0';
|
||
setTimeout(() => {
|
||
// Show charges
|
||
const naCharge = document.getElementById('ion6-na-charge');
|
||
const clCharge = document.getElementById('ion6-cl-charge');
|
||
const naAtom = document.getElementById('ion6-na');
|
||
const clAtom = document.getElementById('ion6-cl');
|
||
if (naCharge) { naCharge.style.opacity='1'; naCharge.classList.add('pop-in'); }
|
||
if (clCharge) { clCharge.style.opacity='1'; clCharge.classList.add('pop-in'); }
|
||
if (naAtom) { naAtom.style.transform='scale(.85)'; naAtom.style.background='#fde68a'; }
|
||
if (clAtom) { clAtom.style.transform='scale(1.1)'; clAtom.style.background='#bbf7d0'; }
|
||
const eq = document.getElementById('ion6-eq');
|
||
if (eq) eq.innerHTML = 'Na⁰ - e⁻ → Na⁺ | Cl⁰ + e⁻ → Cl⁻ → Na⁺Cl⁻ (ионная связь)';
|
||
ion6State = 'done';
|
||
CHEM.addScore(5, 'Ионная связь изучена!');
|
||
CHEM.markDone('p6_ionic');
|
||
}, 1100);
|
||
}
|
||
function ion6Reset() {
|
||
ion6State = 'idle';
|
||
const eEl = document.getElementById('ion6-e');
|
||
if (eEl) { eEl.style.transition=''; eEl.style.transform=''; eEl.style.opacity='1'; }
|
||
['ion6-na-charge','ion6-cl-charge'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) { el.style.opacity='0'; el.classList.remove('pop-in'); }
|
||
});
|
||
const naAtom = document.getElementById('ion6-na');
|
||
const clAtom = document.getElementById('ion6-cl');
|
||
if (naAtom) { naAtom.style.transform=''; naAtom.style.background=''; }
|
||
if (clAtom) { clAtom.style.transform=''; clAtom.style.background=''; }
|
||
const eq = document.getElementById('ion6-eq');
|
||
if (eq) eq.innerHTML = '';
|
||
}
|
||
|
||
// ── §8 3D Lattices ────────────────────────────────────────────────────────────
|
||
const LATT_DATA = {
|
||
ionic: {
|
||
title:'Ионная решётка (NaCl)',
|
||
caption:'Na⁺ (оранжевые) и Cl⁻ (синие) чередуются в кубической сетке',
|
||
props:[
|
||
{l:'T пл.', v:'Высокая (800°C NaCl)'},
|
||
{l:'Проводимость', v:'В расплаве / р-ре'},
|
||
{l:'Примеры', v:'NaCl, KBr, MgO'}
|
||
],
|
||
nodes:[
|
||
// 8 corners + 6 faces (simplified as 8 alternating)
|
||
{x:10,y:10,z:10,cls:'pos',t:'+'},{x:10,y:10,z:90,cls:'neg',t:'−'},
|
||
{x:10,y:90,z:10,cls:'neg',t:'−'},{x:10,y:90,z:90,cls:'pos',t:'+'},
|
||
{x:90,y:10,z:10,cls:'neg',t:'−'},{x:90,y:10,z:90,cls:'pos',t:'+'},
|
||
{x:90,y:90,z:10,cls:'pos',t:'+'},{x:90,y:90,z:90,cls:'neg',t:'−'},
|
||
{x:50,y:50,z:50,cls:'neg',t:'−'},{x:50,y:10,z:50,cls:'pos',t:'+'},
|
||
{x:50,y:90,z:50,cls:'pos',t:'+'},{x:10,y:50,z:50,cls:'neg',t:'−'},
|
||
]
|
||
},
|
||
atomic: {
|
||
title:'Атомная решётка (алмаз)',
|
||
caption:'Все атомы C связаны прочными σ-связями, образуя жёсткий каркас',
|
||
props:[
|
||
{l:'T пл.', v:'Очень высокая (>3500°C)'},
|
||
{l:'Твёрдость', v:'Максимальная'},
|
||
{l:'Примеры', v:'Алмаз, Si, SiO₂'}
|
||
],
|
||
nodes:[
|
||
{x:10,y:10,z:10,cls:'atom-c',t:'C'},{x:10,y:10,z:90,cls:'atom-c',t:'C'},
|
||
{x:10,y:90,z:10,cls:'atom-c',t:'C'},{x:10,y:90,z:90,cls:'atom-c',t:'C'},
|
||
{x:90,y:10,z:10,cls:'atom-c',t:'C'},{x:90,y:10,z:90,cls:'atom-c',t:'C'},
|
||
{x:90,y:90,z:10,cls:'atom-c',t:'C'},{x:90,y:90,z:90,cls:'atom-c',t:'C'},
|
||
{x:50,y:50,z:50,cls:'atom-c',t:'C'},{x:50,y:50,z:10,cls:'atom-c',t:'C'},
|
||
]
|
||
},
|
||
molecular: {
|
||
title:'Молекулярная решётка (I₂)',
|
||
caption:'Молекулы I₂ удерживаются слабыми ван-дер-ваальсовыми силами',
|
||
props:[
|
||
{l:'T пл.', v:'Низкая (113°C I₂)'},
|
||
{l:'Летучесть', v:'Высокая'},
|
||
{l:'Примеры', v:'I₂, CO₂, H₂O (лёд), сахар'}
|
||
],
|
||
nodes:[
|
||
{x:15,y:15,z:15,cls:'mol',t:'I'},{x:25,y:15,z:15,cls:'mol',t:'I'},
|
||
{x:75,y:15,z:15,cls:'mol',t:'I'},{x:85,y:15,z:15,cls:'mol',t:'I'},
|
||
{x:15,y:85,z:15,cls:'mol',t:'I'},{x:25,y:85,z:15,cls:'mol',t:'I'},
|
||
{x:75,y:85,z:15,cls:'mol',t:'I'},{x:85,y:85,z:15,cls:'mol',t:'I'},
|
||
{x:50,y:50,z:50,cls:'mol',t:'I'},{x:60,y:50,z:50,cls:'mol',t:'I'},
|
||
]
|
||
},
|
||
metallic: {
|
||
title:'Металлическая решётка (Fe)',
|
||
caption:'Катионы металла в «море» свободных электронов',
|
||
props:[
|
||
{l:'Проводимость', v:'Высокая (е⁻ свободны)'},
|
||
{l:'Пластичность', v:'Высокая'},
|
||
{l:'Примеры', v:'Fe, Cu, Al, Au'}
|
||
],
|
||
nodes:[
|
||
{x:10,y:10,z:10,cls:'met',t:'Fe²⁺'},{x:10,y:10,z:90,cls:'met',t:''},
|
||
{x:10,y:90,z:10,cls:'met',t:''},{x:10,y:90,z:90,cls:'met',t:''},
|
||
{x:90,y:10,z:10,cls:'met',t:''},{x:90,y:10,z:90,cls:'met',t:''},
|
||
{x:90,y:90,z:10,cls:'met',t:''},{x:90,y:90,z:90,cls:'met',t:''},
|
||
{x:50,y:50,z:50,cls:'met',t:''},
|
||
]
|
||
}
|
||
};
|
||
|
||
window.latt8Show = function(type, btn) {
|
||
const cube = document.getElementById('latt8-cube');
|
||
const cap = document.getElementById('latt8-caption');
|
||
const props= document.getElementById('latt8-props');
|
||
if (!cube) return;
|
||
document.querySelectorAll('.latt-tab-btn').forEach(b => b.classList.remove('active'));
|
||
if (btn) btn.classList.add('active');
|
||
const d = LATT_DATA[type];
|
||
if (!d) return;
|
||
cube.innerHTML = d.nodes.map(n =>
|
||
`<div class="l-node ${n.cls}" style="left:${n.x-9}px;top:${n.y-9}px;transform:translateZ(${n.z-50}px)">${n.t}</div>`
|
||
).join('');
|
||
if (cap) cap.textContent = d.caption;
|
||
if (props) props.innerHTML = d.props.map(p =>
|
||
`<div style="background:#f8fafc;border-radius:8px;padding:8px;border:1px solid #e2e8f0"><b style="font-size:11px;color:#475569">${p.l}</b><br><span style="font-size:12px">${p.v}</span></div>`
|
||
).join('');
|
||
CHEM.addScore(3, `${d.title} изучена`);
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { latt8Show('ionic'); });
|
||
|
||
// ── §11 Dissociation ──────────────────────────────────────────────────────────
|
||
function dissoc11Play() {
|
||
const sel = document.getElementById('dissoc11-sel');
|
||
if (!sel) return;
|
||
const [formula, cat, ani, alphaStr] = sel.value.split(',');
|
||
const alpha = +alphaStr;
|
||
const scene = document.getElementById('dissoc11-scene');
|
||
if (!scene) return;
|
||
scene.innerHTML = '';
|
||
// Add water droplets
|
||
for (let i=0;i<8;i++) {
|
||
const w = document.createElement('div');
|
||
w.className = 'dissoc-water';
|
||
w.textContent = '💧';
|
||
w.style.cssText = `left:${10+Math.random()*80}%;top:${10+Math.random()*80}%;`;
|
||
scene.appendChild(w);
|
||
}
|
||
// Molecules
|
||
const total = alpha >= 0.1 ? 6 : 8;
|
||
const ionized = Math.max(1, Math.round(total * alpha));
|
||
for (let i=0;i<total;i++) {
|
||
const mol = document.createElement('div');
|
||
mol.className = 'dissoc-molecule';
|
||
mol.textContent = formula;
|
||
mol.style.cssText = `left:${15+Math.random()*65}%;top:${10+Math.random()*75}%;`;
|
||
scene.appendChild(mol);
|
||
if (i < ionized) {
|
||
setTimeout(() => {
|
||
mol.style.opacity = '0';
|
||
mol.style.transform = 'scale(0)';
|
||
// Create ions
|
||
const catEl = document.createElement('div');
|
||
catEl.className = 'dissoc-ion cat';
|
||
catEl.textContent = cat + '⁺' ;
|
||
const l = parseFloat(mol.style.left);
|
||
const t = parseFloat(mol.style.top);
|
||
catEl.style.cssText = `left:${Math.max(5,l-12)}%;top:${t}%;`;
|
||
scene.appendChild(catEl);
|
||
const aniEl = document.createElement('div');
|
||
aniEl.className = 'dissoc-ion ani';
|
||
aniEl.textContent = ani + '⁻';
|
||
aniEl.style.cssText = `left:${Math.min(85,l+10)}%;top:${t}%;`;
|
||
scene.appendChild(aniEl);
|
||
setTimeout(() => { catEl.style.opacity='1'; aniEl.style.opacity='1'; }, 50);
|
||
}, 300 + i*180);
|
||
}
|
||
}
|
||
const eq = document.getElementById('dissoc11-eq');
|
||
if (eq) {
|
||
const arrow = alpha >= 0.1 ? '→' : '⇌';
|
||
eq.textContent = `${formula} ${arrow} ${cat}⁺ + ${ani.replace('-','')}⁻ (α ≈ ${Math.round(alpha*100)}%)`;
|
||
}
|
||
CHEM.addScore(5, 'Диссоциация изучена');
|
||
CHEM.markDone('p11_dissoc');
|
||
CHEM.award('Ионный мастер');
|
||
}
|
||
|
||
function dissoc11Reset() {
|
||
const scene = document.getElementById('dissoc11-scene');
|
||
if (scene) scene.innerHTML = '';
|
||
const eq = document.getElementById('dissoc11-eq');
|
||
if (eq) eq.textContent = '';
|
||
}
|
||
|
||
// ── §12 MU→PIU→KIU ────────────────────────────────────────────────────────────
|
||
const IEU_REACTIONS = [
|
||
{
|
||
mu: 'NaOH + HCl → NaCl + H₂O',
|
||
piu: 'Na⁺ + OH⁻ + H⁺ + Cl⁻ → Na⁺ + Cl⁻ + H₂O',
|
||
kiu: 'H⁺ + OH⁻ → H₂O',
|
||
spectators: ['Na⁺','Cl⁻'],
|
||
hint: 'Na⁺ и Cl⁻ — зрители: входят в МУ и выходят без изменений'
|
||
},
|
||
{
|
||
mu: 'Na₂SO₄ + BaCl₂ → BaSO₄↓ + 2NaCl',
|
||
piu: '2Na⁺ + SO₄²⁻ + Ba²⁺ + 2Cl⁻ → BaSO₄↓ + 2Na⁺ + 2Cl⁻',
|
||
kiu: 'Ba²⁺ + SO₄²⁻ → BaSO₄↓',
|
||
spectators: ['Na⁺','Cl⁻'],
|
||
hint: 'BaSO₄ — нерастворимый осадок, не распадается на ионы'
|
||
},
|
||
{
|
||
mu: 'CuSO₄ + 2NaOH → Cu(OH)₂↓ + Na₂SO₄',
|
||
piu: 'Cu²⁺ + SO₄²⁻ + 2Na⁺ + 2OH⁻ → Cu(OH)₂↓ + 2Na⁺ + SO₄²⁻',
|
||
kiu: 'Cu²⁺ + 2OH⁻ → Cu(OH)₂↓',
|
||
spectators: ['Na⁺','SO₄²⁻'],
|
||
hint: 'Cu(OH)₂ — нерастворимый осадок'
|
||
},
|
||
{
|
||
mu: 'AgNO₃ + NaCl → AgCl↓ + NaNO₃',
|
||
piu: 'Ag⁺ + NO₃⁻ + Na⁺ + Cl⁻ → AgCl↓ + Na⁺ + NO₃⁻',
|
||
kiu: 'Ag⁺ + Cl⁻ → AgCl↓',
|
||
spectators: ['Na⁺','NO₃⁻'],
|
||
hint: 'AgCl — нерастворимый осадок'
|
||
}
|
||
];
|
||
let ieu12Step_cur = 0;
|
||
let ieu12Reaction = 0;
|
||
|
||
function ieu12Load() {
|
||
ieu12Reaction = +document.getElementById('ieu12-sel').value;
|
||
ieu12Step_cur = 0;
|
||
ieu12Render();
|
||
}
|
||
|
||
function ieu12Render() {
|
||
const r = IEU_REACTIONS[ieu12Reaction];
|
||
['mu','piu','kiu'].forEach((k,i) => {
|
||
const step = document.getElementById('ieu12-'+k);
|
||
const txt = document.getElementById('ieu12-'+k+'-txt');
|
||
if (!step || !txt) return;
|
||
step.classList.toggle('active', ieu12Step_cur > i);
|
||
step.style.display = ieu12Step_cur > i ? '' : 'none';
|
||
if (k==='piu' && ieu12Step_cur > 1) {
|
||
// highlight spectators
|
||
let html = r.piu;
|
||
r.spectators.forEach(s => {
|
||
html = html.split(s).join(`<span class="ieu-term spectator">${s}</span>`);
|
||
});
|
||
txt.innerHTML = html;
|
||
} else {
|
||
txt.textContent = r[k];
|
||
}
|
||
});
|
||
document.getElementById('ieu12-stepnum').textContent = `Шаг ${ieu12Step_cur}/3`;
|
||
document.getElementById('ieu12-prev').disabled = ieu12Step_cur <= 0;
|
||
document.getElementById('ieu12-next').disabled = ieu12Step_cur >= 3;
|
||
document.getElementById('ieu12-hint').textContent = ieu12Step_cur >= 3 ? r.hint : '';
|
||
if (ieu12Step_cur >= 3) {
|
||
CHEM.addScore(5, 'Ионное уравнение составлено!');
|
||
CHEM.markDone('p12_ieu');
|
||
CHEM.award('Ионик');
|
||
}
|
||
}
|
||
|
||
window.ieu12Step = function(d) {
|
||
ieu12Step_cur = Math.max(0, Math.min(3, ieu12Step_cur + d));
|
||
ieu12Render();
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { ieu12Load(); });
|
||
|
||
|
||
// ══ Phase B: §18–§34 Widget JS ══
|
||
|
||
// ── §18 Genetic Row ───────────────────────────────────────────────────────────
|
||
const GENROW_DATA = [
|
||
{
|
||
name: 'Na (металл)',
|
||
answer: ['Na','Na₂O','NaOH','Na₂SO₄','NaCl'],
|
||
pool: ['Na','Na₂O','NaOH','Na₂SO₄','NaCl','CuO','H₂SO₄','KCl']
|
||
},
|
||
{
|
||
name: 'S (неметалл)',
|
||
answer: ['S','SO₂','SO₃','H₂SO₄','Na₂SO₄'],
|
||
pool: ['S','SO₂','SO₃','H₂SO₄','Na₂SO₄','NO₂','HCl','CaSO₄']
|
||
}
|
||
];
|
||
let genrow18Current = 0;
|
||
let genrow18Sel = null; // selected chip
|
||
|
||
function genrow18Switch(idx, btn) {
|
||
genrow18Current = idx;
|
||
document.querySelectorAll('.genrow-tab').forEach(b => b.classList.remove('active'));
|
||
if (btn) btn.classList.add('active');
|
||
genrow18Build();
|
||
}
|
||
|
||
function genrow18Build() {
|
||
const d = GENROW_DATA[genrow18Current];
|
||
const pool = document.getElementById('genrow18-pool');
|
||
const slots = document.getElementById('genrow18-slots');
|
||
if (!pool || !slots) return;
|
||
genrow18Sel = null;
|
||
// Shuffle pool
|
||
const shuffled = [...d.pool].sort(() => Math.random()-.5);
|
||
pool.innerHTML = shuffled.map(f =>
|
||
`<div class="genrow-chip" data-val="${f}" onclick="genrow18Select(this)">${f}</div>`
|
||
).join('');
|
||
slots.innerHTML = '';
|
||
for (let i=0; i<d.answer.length; i++) {
|
||
if (i > 0) slots.innerHTML += '<div class="genrow-arrow">→</div>';
|
||
slots.innerHTML += `<div class="genrow-slot" data-idx="${i}" onclick="genrow18Place(${i})" id="grs-${i}"></div>`;
|
||
}
|
||
document.getElementById('genrow18-result').textContent = '';
|
||
}
|
||
|
||
window.genrow18Select = function(el) {
|
||
document.querySelectorAll('.genrow-chip.selected').forEach(c => c.classList.remove('selected'));
|
||
el.classList.add('selected');
|
||
genrow18Sel = el;
|
||
el.style.borderColor = '#3b82f6';
|
||
};
|
||
|
||
window.genrow18Place = function(idx) {
|
||
if (!genrow18Sel) return;
|
||
const slot = document.getElementById('grs-'+idx);
|
||
if (!slot) return;
|
||
slot.textContent = genrow18Sel.dataset.val;
|
||
slot.dataset.placed = genrow18Sel.dataset.val;
|
||
genrow18Sel.classList.add('used');
|
||
genrow18Sel.style.borderColor = '';
|
||
genrow18Sel = null;
|
||
};
|
||
|
||
window.genrow18Check = function() {
|
||
const d = GENROW_DATA[genrow18Current];
|
||
let allOk = true;
|
||
d.answer.forEach((ans, i) => {
|
||
const slot = document.getElementById('grs-'+i);
|
||
if (!slot) return;
|
||
if (slot.dataset.placed === ans) {
|
||
slot.classList.add('filled');
|
||
} else {
|
||
slot.classList.add('wrong');
|
||
setTimeout(() => slot.classList.remove('wrong'), 500);
|
||
allOk = false;
|
||
}
|
||
});
|
||
const res = document.getElementById('genrow18-result');
|
||
if (allOk) {
|
||
if (res) res.innerHTML = '<span style="color:#16a34a;font-weight:700">✓ Верно! Генетический ряд построен!</span>';
|
||
CHEM.addScore(10, 'Генетический ряд построен!');
|
||
CHEM.markDone('p18_genrow');
|
||
CHEM.award('Металлург');
|
||
} else {
|
||
if (res) res.innerHTML = '<span style="color:#dc2626">Есть ошибки. Попробуй ещё раз.</span>';
|
||
}
|
||
};
|
||
|
||
window.genrow18Reset = function() { genrow18Build(); };
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { genrow18Build(); });
|
||
|
||
// ── §19 Vocab Memory ──────────────────────────────────────────────────────────
|
||
const VOCAB_PAIRS = [
|
||
['Окисление','Отдача e⁻ (СО растёт)'],
|
||
['Восстановление','Приём e⁻ (СО падает)'],
|
||
['Окислитель','Принимает e⁻, сам восстанавливается'],
|
||
['Восстановитель','Отдаёт e⁻, сам окисляется'],
|
||
['ОВР','Реакция с переносом e⁻'],
|
||
['ЭБ метод','Подбор коэф. из переходов e⁻'],
|
||
['Полуреакция','Процесс на одном электроде'],
|
||
['НОК','Наим. общ. кратное переходов e⁻']
|
||
];
|
||
let vocab19State = {};
|
||
let vocab19First = null;
|
||
let vocab19Matches = 0;
|
||
|
||
function vocab19Init() {
|
||
vocab19State = {}; vocab19First = null; vocab19Matches = 0;
|
||
const grid = document.getElementById('vocab19-grid');
|
||
if (!grid) return;
|
||
// Create pairs
|
||
const items = [];
|
||
VOCAB_PAIRS.forEach(([t,d],i) => {
|
||
items.push({id:'t'+i, pairId:i, text:t, side:'front'});
|
||
items.push({id:'d'+i, pairId:i, text:d, side:'back'});
|
||
});
|
||
items.sort(() => Math.random()-.5);
|
||
grid.innerHTML = items.map(it =>
|
||
`<div class="vocab-card" id="vc-${it.id}" data-pair="${it.pairId}" data-side="${it.side}" onclick="vocab19Flip('${it.id}','${it.pairId}','${it.side}')">
|
||
<div class="vocab-inner">
|
||
<div class="vocab-face vocab-front">${it.side==='front'?it.text:'?'}</div>
|
||
<div class="vocab-face vocab-back">${it.side==='back'?it.text:'?'}</div>
|
||
</div>
|
||
</div>`
|
||
).join('');
|
||
document.getElementById('vocab19-score').textContent = '';
|
||
}
|
||
|
||
window.vocab19Flip = function(id, pairId, side) {
|
||
const el = document.getElementById('vc-'+id);
|
||
if (!el || el.classList.contains('matched') || el.classList.contains('flipped') && !vocab19First) return;
|
||
el.classList.add('flipped');
|
||
if (!vocab19First) {
|
||
vocab19First = {id, pairId, side, el};
|
||
} else {
|
||
const second = {id, pairId, side};
|
||
if (vocab19First.pairId === +pairId && vocab19First.side !== side) {
|
||
// Match!
|
||
vocab19First.el.classList.add('matched');
|
||
el.classList.add('matched');
|
||
vocab19Matches++;
|
||
CHEM.addScore(3, 'Пара найдена!');
|
||
vocab19First = null;
|
||
const sc = document.getElementById('vocab19-score');
|
||
if (sc) sc.textContent = `Найдено: ${vocab19Matches}/${VOCAB_PAIRS.length}`;
|
||
if (vocab19Matches >= VOCAB_PAIRS.length) {
|
||
CHEM.markDone('p19_vocab');
|
||
CHEM.award('Редоксник');
|
||
CHEM.toast('Все пары найдены! 🎉','ok');
|
||
}
|
||
} else {
|
||
// Wrong
|
||
setTimeout(() => {
|
||
vocab19First.el.classList.remove('flipped');
|
||
el.classList.remove('flipped');
|
||
vocab19First = null;
|
||
}, 900);
|
||
}
|
||
}
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { vocab19Init(); });
|
||
|
||
// ── §20 Electron balance stepper ─────────────────────────────────────────────
|
||
const EBAL_DATA = [
|
||
{
|
||
title: 'KMnO₄ + HCl → KCl + MnCl₂ + Cl₂ + H₂O',
|
||
steps: [
|
||
{ name:'Шаг 1: Найти изменившиеся СО', html:'KMn<span class="so-before">⁺⁷</span>O₄ + H<span class="so-before">−1</span>Cl → ... (Mn и Cl меняют СО)' },
|
||
{ name:'Шаг 2: Записать переходы e⁻', html:'Mn⁺⁷ + <span class="e-chip">5e⁻</span> → Mn²⁺ (восстановление)<br>2Cl⁻¹ − <span class="e-chip">2e⁻</span> → Cl₂⁰ (окисление)' },
|
||
{ name:'Шаг 3: НОК (5 и 2) = 10', html:'×2: Mn⁺⁷ + <span class="e-chip">5e⁻</span> → Mn²⁺ | коэф. 2<br>×5: 2Cl⁻¹ − <span class="e-chip">2e⁻</span> → Cl₂⁰ | коэф. 5' },
|
||
{ name:'Шаг 4: Расставить коэффициенты', html:'<b>2</b>KMnO₄ + <b>16</b>HCl → <b>2</b>KCl + <b>2</b>MnCl₂ + <b>5</b>Cl₂ + <b>8</b>H₂O' },
|
||
]
|
||
},
|
||
{
|
||
title: 'Cu + HNO₃ (разб.) → Cu(NO₃)₂ + NO + H₂O',
|
||
steps: [
|
||
{ name:'Шаг 1: СО', html:'Cu⁰ → Cu²⁺ (окисл.) | N⁺⁵ → N²⁺ (восст.)' },
|
||
{ name:'Шаг 2: Переходы', html:'Cu⁰ − <span class="e-chip">2e⁻</span> → Cu²⁺ (восстановитель)<br>N⁺⁵ + <span class="e-chip">3e⁻</span> → N²⁺ (окислитель)' },
|
||
{ name:'Шаг 3: НОК (2 и 3) = 6', html:'×3: Cu⁰ − <span class="e-chip">2e⁻</span> → Cu²⁺ | ×3<br>×2: N⁺⁵ + <span class="e-chip">3e⁻</span> → N²⁺ | ×2' },
|
||
{ name:'Шаг 4: Результат', html:'<b>3</b>Cu + <b>8</b>HNO₃(разб.) → <b>3</b>Cu(NO₃)₂ + <b>2</b>NO↑ + <b>4</b>H₂O' },
|
||
]
|
||
},
|
||
{
|
||
title: 'Al + O₂ → Al₂O₃',
|
||
steps: [
|
||
{ name:'Шаг 1: СО', html:'Al⁰ и O⁰ меняют СО' },
|
||
{ name:'Шаг 2: Переходы', html:'Al⁰ − <span class="e-chip">3e⁻</span> → Al³⁺ (окисление)<br>O₂⁰ + <span class="e-chip">4e⁻</span> → 2O²⁻ (восстановление)' },
|
||
{ name:'Шаг 3: НОК (3 и 4) = 12', html:'×4: Al − <span class="e-chip">3e⁻</span> | ×3: O₂ + <span class="e-chip">4e⁻</span>' },
|
||
{ name:'Шаг 4: Результат', html:'<b>4</b>Al + <b>3</b>O₂ → <b>2</b>Al₂O₃' },
|
||
]
|
||
},
|
||
{
|
||
title: 'Na + H₂O → NaOH + H₂',
|
||
steps: [
|
||
{ name:'Шаг 1: СО', html:'Na⁰ → Na⁺ (окисл.) | H⁺¹ → H⁰ (восст.)' },
|
||
{ name:'Шаг 2: Переходы', html:'Na⁰ − <span class="e-chip">1e⁻</span> → Na⁺ (восстановитель)<br>2H⁺ + <span class="e-chip">2e⁻</span> → H₂⁰ (окислитель)' },
|
||
{ name:'Шаг 3: НОК (1 и 2) = 2', html:'×2 Na − <span class="e-chip">1e⁻</span> | ×1 H₂' },
|
||
{ name:'Шаг 4: Результат', html:'<b>2</b>Na + <b>2</b>H₂O → <b>2</b>NaOH + H₂↑' },
|
||
]
|
||
}
|
||
];
|
||
let ebal20Cur = 0;
|
||
let ebal20Reaction = 0;
|
||
|
||
function ebal20Load() {
|
||
ebal20Reaction = +document.getElementById('ebal20-sel').value;
|
||
ebal20Cur = 0;
|
||
ebal20Render();
|
||
}
|
||
|
||
function ebal20Render() {
|
||
const d = EBAL_DATA[ebal20Reaction];
|
||
const scene = document.getElementById('ebal20-scene');
|
||
if (!scene) return;
|
||
scene.innerHTML = d.steps.map((s,i) =>
|
||
`<div class="ebal-step ${i<=ebal20Cur?'active':''}" id="ebal20-s${i}">
|
||
<div style="font-size:11px;font-weight:700;color:#475569;margin-bottom:4px">${s.name}</div>
|
||
<div class="ebal-half">${s.html}</div>
|
||
</div>`
|
||
).join('');
|
||
const fill = document.getElementById('ebal20-fill');
|
||
if (fill) fill.style.width = ((ebal20Cur+1)/d.steps.length*100)+'%';
|
||
const sn = document.getElementById('ebal20-stepname');
|
||
if (sn) sn.textContent = `Шаг ${ebal20Cur+1} из ${d.steps.length}`;
|
||
if (ebal20Cur >= d.steps.length - 1) {
|
||
CHEM.addScore(8, 'Электронный баланс расставлен!');
|
||
CHEM.markDone('p20_ebal');
|
||
CHEM.award('Редоксник');
|
||
}
|
||
}
|
||
|
||
window.ebal20Go = function(d) {
|
||
const max = EBAL_DATA[ebal20Reaction].steps.length - 1;
|
||
ebal20Cur = Math.max(0, Math.min(max, ebal20Cur + d));
|
||
ebal20Render();
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { ebal20Load(); });
|
||
|
||
// ── §21 KMnO4 ─────────────────────────────────────────────────────────────────
|
||
window.kmno4Animate = function() {
|
||
const targets = [
|
||
{id:'km-acid', to:'rgba(209,213,219,0.4)', prod:'Mn²⁺ (бесцветн.)'},
|
||
{id:'km-neut', to:'rgba(146,91,14,0.8)', prod:'MnO₂ (бурый осадок)'},
|
||
{id:'km-base', to:'rgba(34,197,94,0.7)', prod:'MnO₄²⁻ (зелёный)'},
|
||
];
|
||
targets.forEach((t,i) => {
|
||
setTimeout(() => {
|
||
const el = document.getElementById(t.id);
|
||
if (el) { el.style.transition='background 1.5s'; el.style.background=t.to; }
|
||
}, i*400);
|
||
});
|
||
const eqs = document.getElementById('kmno4-eqs');
|
||
if (eqs) setTimeout(() => {
|
||
eqs.innerHTML = 'MnO₄⁻ + 8H⁺ + 5e⁻ → Mn²⁺ + 4H₂O (кислая)<br>MnO₄⁻ + 2H₂O + 3e⁻ → MnO₂ + 4OH⁻ (нейтр.)<br>MnO₄⁻ + e⁻ → MnO₄²⁻ (щелочная)';
|
||
}, 1500);
|
||
CHEM.addScore(5, 'Среды KMnO₄ изучены'); CHEM.markDone('p21_kmno4');
|
||
};
|
||
|
||
window.kmno4Reset = function() {
|
||
['km-acid','km-neut','km-base'].forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) { el.style.transition=''; el.style.background='#7c3aed'; }
|
||
});
|
||
const eqs = document.getElementById('kmno4-eqs');
|
||
if (eqs) eqs.innerHTML = '';
|
||
};
|
||
|
||
// ── §22 pH meter ──────────────────────────────────────────────────────────────
|
||
const PH_EXAMPLES = [
|
||
{ph:0,name:'HCl 1M'},{ph:1.5,name:'Желудочный сок'},{ph:2.5,name:'Уксус'},
|
||
{ph:4,name:'Кофе'},{ph:5.5,name:'Дождь'},{ph:6.5,name:'Молоко'},
|
||
{ph:7,name:'Чистая вода'},{ph:7.4,name:'Кровь'},{ph:8.5,name:'Морская вода'},
|
||
{ph:10,name:'Мыло'},{ph:12,name:'NaOH 0.01M'},{ph:14,name:'NaOH 1M'}
|
||
];
|
||
|
||
function ph22Update() {
|
||
const slider = document.getElementById('ph22-slider');
|
||
if (!slider) return;
|
||
const ph = +slider.value;
|
||
// Thumb position
|
||
const thumb = document.getElementById('ph22-thumb');
|
||
if (thumb) {
|
||
thumb.style.top = ((14-ph)/14*100) + '%';
|
||
thumb.setAttribute('data-ph', ph.toFixed(1));
|
||
}
|
||
// Indicator colors
|
||
const litmus = document.getElementById('ph22-litmus');
|
||
const mo = document.getElementById('ph22-mo');
|
||
const phInd = document.getElementById('ph22-ph');
|
||
if (litmus) litmus.style.background = ph < 7 ? '#dc2626' : ph > 7 ? '#3b82f6' : '#7c3aed';
|
||
if (mo) mo.style.background = ph < 4 ? '#dc2626' : ph < 6.5 ? '#f97316' : '#f0fdf4';
|
||
if (phInd) phInd.style.background = ph < 8.2 ? 'transparent' : '#f0abfc';
|
||
// Info
|
||
const val = document.getElementById('ph22-val');
|
||
const med = document.getElementById('ph22-medium');
|
||
const conc = document.getElementById('ph22-conc');
|
||
if (val) val.textContent = ph.toFixed(1);
|
||
if (med) {
|
||
if (ph < 7) { med.textContent = 'Кислая среда'; med.style.color='#dc2626'; }
|
||
else if (ph > 7) { med.textContent = 'Щелочная среда'; med.style.color='#2563eb'; }
|
||
else { med.textContent = 'Нейтральная среда'; med.style.color='#16a34a'; }
|
||
}
|
||
if (conc) {
|
||
const hConc = Math.pow(10, -ph);
|
||
const ohConc = Math.pow(10, ph-14);
|
||
conc.textContent = `[H⁺] = 10⁻${ph.toFixed(1)} M | [OH⁻] = 10⁻${(14-ph).toFixed(1)} M`;
|
||
}
|
||
// Examples
|
||
const exEl = document.getElementById('ph22-examples');
|
||
if (exEl) {
|
||
exEl.innerHTML = PH_EXAMPLES.map(e =>
|
||
`<div class="ph-example ${Math.abs(e.ph-ph)<1?'active':''}">${e.ph}: ${e.name}</div>`
|
||
).join('');
|
||
}
|
||
CHEM.addScore(1, 'pH изучен');
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { ph22Update(); });
|
||
|
||
// ── §23 Galvanic pair ─────────────────────────────────────────────────────────
|
||
const ACTIVITY = {Zn:-0.76,Fe:-0.44,Ni:-0.25,Pb:-0.13,H:0.00,Cu:0.34,Ag:0.80,Au:1.50};
|
||
let galv23Timer = null;
|
||
|
||
function galv23Init() {
|
||
const aVal = (document.getElementById('galv23-a')?.value||'Zn,-0.76').split(',');
|
||
const bVal = (document.getElementById('galv23-b')?.value||'Cu,0.34').split(',');
|
||
const [aSym, aE] = [aVal[0], +aVal[1]];
|
||
const [bSym, bE] = [bVal[0], +bVal[1]];
|
||
// Lower potential = anode (negative)
|
||
const [anode, cathode, anodeE, cathodeE] = aE < bE
|
||
? [aSym, bSym, aE, bE] : [bSym, aSym, bE, aE];
|
||
const emf = (cathodeE - anodeE).toFixed(2);
|
||
const anodeEl = document.getElementById('galv23-anode');
|
||
const cathodeEl = document.getElementById('galv23-cathode');
|
||
if (anodeEl) anodeEl.textContent = anode;
|
||
if (cathodeEl) cathodeEl.textContent = cathode;
|
||
const emfEl = document.getElementById('galv23-emf');
|
||
if (emfEl) emfEl.textContent = `ЭДС = ${emf} В`;
|
||
const aLbl = document.getElementById('galv23-a-lbl');
|
||
const cLbl = document.getElementById('galv23-c-lbl');
|
||
if (aLbl) aLbl.textContent = `${anode} — анод (−)`;
|
||
if (cLbl) cLbl.textContent = `${cathode} — катод (+)`;
|
||
const reacts = document.getElementById('galv23-reactions');
|
||
if (reacts) reacts.innerHTML = `Анод: ${anode} − 2e⁻ → ${anode}²⁺ (растворяется)<br>Катод: 2${cathode}²⁺ + 4e⁻ → 2${cathode}↓ (осаждается)`;
|
||
}
|
||
|
||
window.galv23Start = function() {
|
||
galv23Init();
|
||
galv23Stop();
|
||
const scene = document.getElementById('galv23-scene');
|
||
if (!scene) return;
|
||
// Remove old electrons/bubbles
|
||
scene.querySelectorAll('.galv-e,.galv-bubble,.galv-pit').forEach(e=>e.remove());
|
||
let step = 0;
|
||
galv23Timer = setInterval(() => {
|
||
// Animate electron along wire
|
||
const wire = document.getElementById('galv23-wire');
|
||
if (!wire) return;
|
||
const wr = wire.getBoundingClientRect();
|
||
const sr = scene.getBoundingClientRect();
|
||
const e = document.createElement('div');
|
||
e.className = 'galv-e';
|
||
e.style.cssText = `left:${wr.left-sr.left}px;top:${wr.top-sr.top+10}px`;
|
||
scene.appendChild(e);
|
||
e.animate([
|
||
{left:(wr.left-sr.left)+'px',top:(wr.top-sr.top+10)+'px'},
|
||
{left:(wr.right-sr.right-10)+'px',top:(wr.top-sr.top+10)+'px'}
|
||
], {duration:1200, easing:'linear', fill:'forwards'});
|
||
setTimeout(() => e.remove(), 1300);
|
||
// Cathode bubbles
|
||
const ca = document.getElementById('galv23-cathode');
|
||
if (ca) {
|
||
const cr = ca.getBoundingClientRect();
|
||
const b = document.createElement('div');
|
||
b.className = 'galv-bubble';
|
||
b.style.cssText = `left:${cr.left-sr.left+12}px;top:${cr.top-sr.top-10}px;animation-delay:${Math.random()*1}s`;
|
||
scene.appendChild(b);
|
||
setTimeout(() => b.remove(), 2500);
|
||
}
|
||
// Anode pitting
|
||
if (step % 3 === 0) {
|
||
const an = document.getElementById('galv23-anode');
|
||
if (an) {
|
||
const ar = an.getBoundingClientRect();
|
||
const p = document.createElement('div');
|
||
p.className = 'galv-pit';
|
||
p.style.cssText = `left:${ar.left-sr.left+Math.random()*30}px;top:${ar.top-sr.top+Math.random()*80}px;animation-delay:${step*0.1}s`;
|
||
scene.appendChild(p);
|
||
}
|
||
}
|
||
step++;
|
||
if (step > 15) { galv23Stop(); CHEM.addScore(5,'Коррозия изучена'); CHEM.markDone('p23_galv'); CHEM.award('Победитель коррозии'); }
|
||
}, 800);
|
||
};
|
||
|
||
window.galv23Stop = function() { clearInterval(galv23Timer); };
|
||
document.addEventListener('DOMContentLoaded', () => { galv23Init(); });
|
||
|
||
// ── §24 Electrolysis ──────────────────────────────────────────────────────────
|
||
const ELECTRO_DATA = [
|
||
{
|
||
name: 'NaCl (расплав)',
|
||
anIons: ['Na⁺','Na⁺','Na⁺'],
|
||
caIons: ['Cl⁻','Cl⁻','Cl⁻'],
|
||
anProd: '↑ Na (металл)', caProd: '↑ Cl₂ (газ)',
|
||
eqs: 'Катод: Na⁺ + e⁻ → Na\nАнод: 2Cl⁻ − 2e⁻ → Cl₂↑'
|
||
},
|
||
{
|
||
name: 'NaCl (р-р)',
|
||
anIons: ['Na⁺','H₂O','Na⁺'],
|
||
caIons: ['Cl⁻','Cl⁻','H₂O'],
|
||
anProd: '↑ H₂ + NaOH', caProd: '↑ Cl₂ (газ)',
|
||
eqs: 'Катод: 2H₂O + 2e⁻ → H₂↑ + 2OH⁻\nАнод: 2Cl⁻ − 2e⁻ → Cl₂↑'
|
||
},
|
||
{
|
||
name: 'CuSO₄ (р-р)',
|
||
anIons: ['Cu²⁺','Cu²⁺','H₂O'],
|
||
caIons: ['SO₄²⁻','H₂O','SO₄²⁻'],
|
||
anProd: '↓ Cu (осадок)', caProd: '↑ O₂ + H₂SO₄',
|
||
eqs: 'Катод: Cu²⁺ + 2e⁻ → Cu↓\nАнод: 2H₂O − 4e⁻ → O₂↑ + 4H⁺'
|
||
},
|
||
{
|
||
name: 'H₂O + H₂SO₄',
|
||
anIons: ['H⁺','H⁺','H⁺'],
|
||
caIons: ['SO₄²⁻','H₂O','SO₄²⁻'],
|
||
anProd: '↑ H₂ (газ)', caProd: '↑ O₂ (газ)',
|
||
eqs: 'Катод: 2H⁺ + 2e⁻ → H₂↑\nАнод: 2H₂O − 4e⁻ → O₂↑ + 4H⁺'
|
||
}
|
||
];
|
||
let elec24Timer = null;
|
||
|
||
function elec24Load() {
|
||
elec24Stop();
|
||
const idx = +document.getElementById('elec24-sel').value;
|
||
const d = ELECTRO_DATA[idx];
|
||
const elEl = document.getElementById('elec24-electrolyte');
|
||
if (elEl) elEl.textContent = d.name;
|
||
const anIons = document.getElementById('elec24-an-ions');
|
||
const caIons = document.getElementById('elec24-ca-ions');
|
||
if (anIons) anIons.innerHTML = '';
|
||
if (caIons) caIons.innerHTML = '';
|
||
const anProd = document.getElementById('elec24-an-prod');
|
||
const caProd = document.getElementById('elec24-ca-prod');
|
||
if (anProd) anProd.textContent = '';
|
||
if (caProd) caProd.textContent = '';
|
||
const eqs = document.getElementById('elec24-eqs');
|
||
if (eqs) eqs.textContent = '';
|
||
}
|
||
|
||
window.elec24Start = function() {
|
||
elec24Load();
|
||
const idx = +document.getElementById('elec24-sel').value;
|
||
const d = ELECTRO_DATA[idx];
|
||
const anHalf = document.querySelector('#elec24-cell .an');
|
||
const caHalf = document.querySelector('#elec24-cell .ca');
|
||
if (!anHalf || !caHalf) return;
|
||
const anRect = anHalf.getBoundingClientRect();
|
||
const caRect = caHalf.getBoundingClientRect();
|
||
let step = 0;
|
||
elec24Timer = setInterval(() => {
|
||
if (step >= d.anIons.length) {
|
||
clearInterval(elec24Timer);
|
||
const anProd = document.getElementById('elec24-an-prod');
|
||
const caProd = document.getElementById('elec24-ca-prod');
|
||
if (anProd) { anProd.textContent = d.anProd; anProd.style.animation='fadeUp .5s'; }
|
||
if (caProd) { caProd.textContent = d.caProd; caProd.style.animation='fadeUp .5s'; }
|
||
const eqs = document.getElementById('elec24-eqs');
|
||
if (eqs) eqs.textContent = d.eqs;
|
||
CHEM.addScore(6,'Электролиз изучен!'); CHEM.markDone('p24_electro'); CHEM.award('Электрохимик');
|
||
return;
|
||
}
|
||
// Animate cation to anode
|
||
const anIonEl = document.createElement('div');
|
||
anIonEl.className = 'electro-ion';
|
||
anIonEl.textContent = d.anIons[step];
|
||
anIonEl.style.cssText = `left:50%;top:20px;background:#fef3c7;color:#92400e;border:1px solid #fbbf24;`;
|
||
anHalf.appendChild(anIonEl);
|
||
anIonEl.animate([{opacity:0,top:'20px'},{opacity:1,top:'80px'}],{duration:600,fill:'forwards'});
|
||
setTimeout(() => anIonEl.remove(), 700);
|
||
// Animate anion to cathode
|
||
const caIonEl = document.createElement('div');
|
||
caIonEl.className = 'electro-ion';
|
||
caIonEl.textContent = d.caIons[step];
|
||
caIonEl.style.cssText = `left:50%;top:20px;background:#dbeafe;color:#1e40af;border:1px solid #60a5fa;`;
|
||
caHalf.appendChild(caIonEl);
|
||
caIonEl.animate([{opacity:0,top:'20px'},{opacity:1,top:'80px'}],{duration:600,fill:'forwards'});
|
||
setTimeout(() => caIonEl.remove(), 700);
|
||
step++;
|
||
}, 700);
|
||
};
|
||
|
||
window.elec24Stop = function() { clearInterval(elec24Timer); };
|
||
document.addEventListener('DOMContentLoaded', () => { elec24Load(); });
|
||
|
||
// ── §25 Energy diagram ────────────────────────────────────────────────────────
|
||
let en25Mode = 'exo';
|
||
|
||
window.en25Switch = function(mode) {
|
||
en25Mode = mode;
|
||
document.getElementById('en25-exo')?.classList.toggle('active', mode==='exo');
|
||
document.getElementById('en25-endo')?.classList.toggle('active', mode==='endo');
|
||
en25Draw();
|
||
};
|
||
|
||
function en25Draw() {
|
||
const dh = +document.getElementById('en25-dh')?.value || 178;
|
||
document.getElementById('en25-dhval').textContent = dh;
|
||
const svg = document.getElementById('en25-svg');
|
||
if (!svg) return;
|
||
const isExo = en25Mode === 'exo';
|
||
// Curve: reactants at y=160, peak at y=50, products at y= isExo? 160+dh*0.2 : 160-dh*0.2
|
||
const rY = 160, peakY = 50;
|
||
const pY = isExo ? Math.max(80, rY - dh * 0.2) : Math.min(140, rY + dh * 0.2);
|
||
// Cubic bezier: M30,rY C100,rY 140,peakY 210,peakY S320,pY 390,pY
|
||
const d = `M40,${rY} C100,${rY} 140,${peakY} 210,${peakY} S350,${pY} 390,${pY}`;
|
||
const curve = document.getElementById('en25-curve');
|
||
if (curve) { curve.setAttribute('d',d); curve.classList.remove('drawn'); }
|
||
// Labels
|
||
const reactBg = document.getElementById('en25-react-bg');
|
||
const reactLbl= document.getElementById('en25-react-lbl');
|
||
const prodBg = document.getElementById('en25-prod-bg');
|
||
const prodLbl = document.getElementById('en25-prod-lbl');
|
||
const dhLbl = document.getElementById('en25-dh-lbl');
|
||
const dhLine = document.getElementById('en25-dh-line');
|
||
const eaLbl = document.getElementById('en25-ea-lbl');
|
||
if (reactBg) { reactBg.setAttribute('y', rY-25); reactBg.style.opacity=1; }
|
||
if (reactLbl) { reactLbl.setAttribute('y', rY-10); reactLbl.style.opacity=1; }
|
||
if (prodBg) { prodBg.setAttribute('y', pY-25); prodBg.style.opacity=1; }
|
||
if (prodLbl) { prodLbl.setAttribute('y', pY-10); prodLbl.style.opacity=1; }
|
||
if (dhLbl) {
|
||
dhLbl.textContent = `ΔH = ${isExo?'-':'+'} ${dh} кДж/моль`;
|
||
dhLbl.setAttribute('x','350'); dhLbl.setAttribute('y', (rY+pY)/2);
|
||
dhLbl.style.fill = isExo ? '#dc2626' : '#2563eb';
|
||
dhLbl.style.opacity = 1;
|
||
}
|
||
if (dhLine) {
|
||
dhLine.setAttribute('x1','390'); dhLine.setAttribute('y1', String(rY));
|
||
dhLine.setAttribute('x2','390'); dhLine.setAttribute('y2', String(pY));
|
||
dhLine.style.opacity=1;
|
||
}
|
||
if (eaLbl) { eaLbl.setAttribute('y','40'); eaLbl.style.opacity=1; }
|
||
const eq = document.getElementById('en25-eq');
|
||
if (eq) eq.textContent = isExo
|
||
? `H₂ + ½O₂ → H₂O ΔH = −${dh} кДж/моль (тепло выделяется)`
|
||
: `N₂ + O₂ → 2NO ΔH = +${dh} кДж/моль (тепло поглощается)`;
|
||
}
|
||
|
||
window.en25Animate = function() {
|
||
en25Draw();
|
||
setTimeout(() => {
|
||
document.getElementById('en25-curve')?.classList.add('drawn');
|
||
CHEM.addScore(5,'Энергетическая диаграмма изучена'); CHEM.markDone('p25_enthalpy'); CHEM.award('Термохимик');
|
||
}, 50);
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { en25Draw(); });
|
||
|
||
// ── §27 NH3 ───────────────────────────────────────────────────────────────────
|
||
window.nh3DonorPlay = function() {
|
||
const lone = document.getElementById('nh3-lone');
|
||
const inner = document.getElementById('nh3-27-inner');
|
||
if (lone) { lone.style.transform='scale(0)'; lone.style.opacity='0'; lone.style.transition='all .5s'; }
|
||
if (inner) inner.style.animationPlayState = 'paused';
|
||
const scene = document.getElementById('nh3-donor-scene');
|
||
if (scene) {
|
||
setTimeout(() => {
|
||
scene.innerHTML = '<span style="font-weight:700;color:#1e40af;animation:fadeUp .5s">NH₃ + H⁺ → NH₄⁺ (донорно-акцепторный механизм)</span>';
|
||
CHEM.addScore(5,'Донорно-акцепторная связь изучена');
|
||
CHEM.markDone('p27_nh3');
|
||
CHEM.award('Азотчик');
|
||
}, 600);
|
||
}
|
||
};
|
||
|
||
let fountainPlaying = false;
|
||
window.nh3Fountain = function() {
|
||
if (fountainPlaying) return;
|
||
fountainPlaying = true;
|
||
const gas = document.getElementById('nh3-gas');
|
||
const fountain = document.getElementById('nh3-fountain');
|
||
const water = document.getElementById('nh3-water');
|
||
const eq = document.getElementById('nh3-fountain-eq');
|
||
if (gas) { gas.style.opacity='0'; gas.style.transition='opacity 1s'; }
|
||
setTimeout(() => {
|
||
if (fountain) {
|
||
fountain.style.background = 'rgba(147,197,253,0.7)';
|
||
fountain.style.height = '60px';
|
||
fountain.style.transition = 'all .8s';
|
||
}
|
||
if (water) {
|
||
water.style.height = '70px';
|
||
water.style.background = 'rgba(252,165,165,0.6)';
|
||
}
|
||
if (eq) eq.textContent = 'NH₃ + H₂O ⇌ NH₄⁺ + OH⁻ (раствор становится щелочным, индикатор краснеет)';
|
||
CHEM.addScore(5,'Опыт с фонтаном изучен');
|
||
}, 1200);
|
||
};
|
||
|
||
window.nh3FountainReset = function() {
|
||
fountainPlaying = false;
|
||
const gas = document.getElementById('nh3-gas');
|
||
const fountain = document.getElementById('nh3-fountain');
|
||
const water = document.getElementById('nh3-water');
|
||
if (gas) { gas.style.opacity='1'; gas.style.transition=''; }
|
||
if (fountain) { fountain.style.height='0'; fountain.style.background='rgba(147,197,253,0)'; }
|
||
if (water) { water.style.height='50px'; water.style.background='rgba(219,234,254,0.5)'; }
|
||
const eq = document.getElementById('nh3-fountain-eq');
|
||
if (eq) eq.textContent='';
|
||
};
|
||
|
||
// ── §34 Carbon allotropes ─────────────────────────────────────────────────────
|
||
const ALLOTROPE_DATA = [
|
||
{
|
||
name:'Алмаз',
|
||
formula:'Csp³',
|
||
color:'#60a5fa',
|
||
props:'Твёрдость: 10 (Моос) | Диэлектрик | T пл. >3500°C',
|
||
use:'Резка, бурение, ювелирное дело',
|
||
coords:[
|
||
{x:10,y:10,z:10},{x:10,y:80,z:10},{x:80,y:10,z:10},{x:80,y:80,z:10},
|
||
{x:40,y:40,z:40},{x:10,y:10,z:80},{x:80,y:80,z:80}
|
||
]
|
||
},
|
||
{
|
||
name:'Графит',
|
||
formula:'Csp²',
|
||
color:'#374151',
|
||
props:'Слоистая структура | Проводит ток | Мягкий',
|
||
use:'Электроды, смазки, карандаши',
|
||
coords:[
|
||
{x:10,y:40,z:10},{x:35,y:40,z:10},{x:55,y:40,z:10},{x:80,y:40,z:10},
|
||
{x:10,y:40,z:50},{x:35,y:40,z:50},{x:55,y:40,z:50},{x:80,y:40,z:50},
|
||
{x:22,y:40,z:30},{x:70,y:40,z:30}
|
||
]
|
||
},
|
||
{
|
||
name:'Фуллерен C₆₀',
|
||
formula:'C60',
|
||
color:'#a78bfa',
|
||
props:'Сферическая молекула | Полупроводник | Растворим',
|
||
use:'Нанотехнологии, медицина',
|
||
coords: (() => {
|
||
const pts = [];
|
||
for(let i=0;i<12;i++) {
|
||
const phi = Math.acos(-1+2*(i+.5)/12);
|
||
const theta = Math.PI*(1+Math.sqrt(5))*i;
|
||
pts.push({x:Math.round(40+35*Math.sin(phi)*Math.cos(theta)),y:Math.round(40+35*Math.sin(phi)*Math.sin(theta)),z:Math.round(40+35*Math.cos(phi))});
|
||
}
|
||
return pts;
|
||
})()
|
||
},
|
||
{
|
||
name:'Сажа',
|
||
formula:'Cаморф',
|
||
color:'#1f2937',
|
||
props:'Аморфная форма | Развитая поверхность',
|
||
use:'Краски, резина, фильтры',
|
||
coords: Array.from({length:8},()=>({x:Math.round(Math.random()*80),y:Math.round(Math.random()*80),z:Math.round(Math.random()*80)}))
|
||
}
|
||
];
|
||
|
||
function allot34Build() {
|
||
const scene = document.getElementById('allot34-scene');
|
||
if (!scene) return;
|
||
scene.innerHTML = ALLOTROPE_DATA.map((a,i) => `
|
||
<div class="allotrope-card" onclick="allot34Show(${i})">
|
||
<div class="allotrope-3d">
|
||
<div class="allotrope-inner" id="allot34-${i}">
|
||
${a.coords.map(c=>`<div class="allotrope-node" style="left:${c.x*.7}px;top:${c.y*.7}px;transform:translateZ(${c.z-40}px);background:radial-gradient(circle,${a.color},${a.color}aa)"></div>`).join('')}
|
||
</div>
|
||
</div>
|
||
<div class="allotrope-name">${a.name}</div>
|
||
</div>
|
||
`).join('');
|
||
}
|
||
|
||
window.allot34Show = function(idx) {
|
||
const a = ALLOTROPE_DATA[idx];
|
||
const detail = document.getElementById('allot34-detail');
|
||
if (!detail) return;
|
||
detail.innerHTML = `<b>${a.name}</b> (${a.formula})<br>
|
||
<span style="font-size:12px;color:#475569">${a.props}</span><br>
|
||
<span style="font-size:12px"><b>Применение:</b> ${a.use}</span>`;
|
||
detail.style.animation = 'fadeUp .4s';
|
||
CHEM.addScore(3, `${a.name} изучен`);
|
||
if (idx===3) { CHEM.markDone('p34_allotropes'); CHEM.award('Исследователь'); }
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { allot34Build(); });
|
||
|
||
|
||
// ══ Phase B Final: §10, §29, §32, §36, §39 JS ══
|
||
|
||
// ── §10 Tyndall ───────────────────────────────────────────────────────────────
|
||
window.tyndall10Play = function() {
|
||
const laserTrue = document.getElementById('tyn-true-laser');
|
||
const laserCol = document.getElementById('tyn-col-laser');
|
||
const laserSusp = document.getElementById('tyn-susp-laser');
|
||
if (laserTrue) { laserTrue.style.transition='background .5s'; laserTrue.style.background='rgba(255,255,100,0.25)'; }
|
||
setTimeout(() => {
|
||
if (laserCol) {
|
||
laserCol.style.transition='all .5s'; laserCol.style.background='rgba(255,240,100,0.9)';
|
||
laserCol.style.boxShadow='0 0 12px rgba(255,240,0,0.6)';
|
||
// scatter particles
|
||
const b = document.getElementById('tyn-colloid');
|
||
for(let i=0;i<6;i++) {
|
||
const p=document.createElement('div'); p.className='tyndall-particle';
|
||
p.style.cssText=`width:4px;height:4px;background:rgba(255,240,100,0.8);left:${15+Math.random()*50}%;top:${10+Math.random()*70}%;--dur:${1.5+Math.random()}s;--d:${Math.random()*2}s`;
|
||
b.appendChild(p);
|
||
}
|
||
}
|
||
if (laserSusp) { laserSusp.style.transition='all .5s'; laserSusp.style.background='rgba(255,240,100,0.35)'; }
|
||
}, 400);
|
||
const res = document.getElementById('tyndall10-result');
|
||
if (res) setTimeout(() => {
|
||
res.innerHTML = '<b>Истинный р-р</b>: луч не виден — частицы <1нм, меньше длины волны.<br><b>Коллоид</b>: конус Тиндаля! — частицы 1–100нм рассеивают свет.<br><b>Суспензия</b>: частицы >100нм видны, оседают.';
|
||
CHEM.addScore(5,'Эффект Тиндаля изучен'); CHEM.markDone('p10_tyndall');
|
||
}, 800);
|
||
};
|
||
|
||
window.tyndall10Reset = function() {
|
||
['tyn-true-laser','tyn-col-laser','tyn-susp-laser'].forEach(id => {
|
||
const el=document.getElementById(id);
|
||
if(el){el.style.transition='';el.style.background='';el.style.boxShadow='';}
|
||
});
|
||
document.getElementById('tyn-colloid')?.querySelectorAll('.tyndall-particle').forEach(p=>p.remove());
|
||
const r=document.getElementById('tyndall10-result');
|
||
if(r)r.innerHTML='';
|
||
};
|
||
|
||
// ── §29 HNO3 ──────────────────────────────────────────────────────────────────
|
||
window.p29Play = function() {
|
||
// Beaker 1: passivation (no reaction, shimmer on Cu)
|
||
const cu1 = document.getElementById('p29-cu1');
|
||
if (cu1) { cu1.style.background='linear-gradient(180deg,#f97316,#c2410c)'; cu1.style.boxShadow='0 0 12px rgba(200,200,200,0.8)'; }
|
||
// Beaker 2: conc hot → NO2 brown gas, Cu shrinks
|
||
setTimeout(() => {
|
||
const cu2=document.getElementById('p29-cu2'); const gas2=document.getElementById('p29-gas2');
|
||
if(cu2) cu2.style.height='20px';
|
||
if(gas2) { gas2.style.height='40px'; gas2.textContent='NO₂'; }
|
||
}, 600);
|
||
// Beaker 3: dilute → NO colorless, Cu shrinks
|
||
setTimeout(() => {
|
||
const cu3=document.getElementById('p29-cu3');
|
||
if(cu3) cu3.style.height='15px';
|
||
const bub=document.getElementById('p29-bub3');
|
||
if(bub) {
|
||
bub.style.height='40px';
|
||
for(let i=0;i<5;i++){
|
||
const b=document.createElement('div');
|
||
b.style.cssText=`position:absolute;width:6px;height:6px;border-radius:50%;border:1.5px solid rgba(150,200,255,.7);left:${10+i*12}px;bottom:0;animation:bubble ${1.2+Math.random()*.6}s ${Math.random()*1}s infinite`;
|
||
bub.appendChild(b);
|
||
}
|
||
}
|
||
}, 1000);
|
||
const eqs=document.getElementById('p29-eqs');
|
||
if(eqs) setTimeout(()=>{
|
||
eqs.innerHTML='Конц. хол.: Cu + 4HNO₃(конц.) → Cu(NO₃)₂ + 2NO₂↑ + 2H₂O (при нагрев.)<br>Cu пассивируется на холоду!<br>Разб.: 3Cu + 8HNO₃(разб.) → 3Cu(NO₃)₂ + 2NO↑ + 4H₂O';
|
||
CHEM.addScore(6,'HNO₃ изучена'); CHEM.markDone('p29_hno3'); CHEM.award('Хранитель кислот');
|
||
},1400);
|
||
};
|
||
window.p29Reset = function() {
|
||
const cu1=document.getElementById('p29-cu1');
|
||
const cu2=document.getElementById('p29-cu2');
|
||
const cu3=document.getElementById('p29-cu3');
|
||
const gas2=document.getElementById('p29-gas2');
|
||
const bub3=document.getElementById('p29-bub3');
|
||
if(cu1){cu1.style.height='60px';cu1.style.boxShadow='';}
|
||
if(cu2){cu2.style.height='60px';}
|
||
if(cu3){cu3.style.height='60px';}
|
||
if(gas2){gas2.style.height='0';gas2.textContent='';}
|
||
if(bub3){bub3.style.height='0';bub3.innerHTML='';}
|
||
const eqs=document.getElementById('p29-eqs');
|
||
if(eqs)eqs.innerHTML='';
|
||
};
|
||
|
||
// ── §32 Dilution safety ───────────────────────────────────────────────────────
|
||
window.dil32Play = function() {
|
||
// Wrong: water into acid → splatter
|
||
const wAcid=document.getElementById('dil-wrong-acid');
|
||
if(wAcid) wAcid.style.height='40px';
|
||
setTimeout(()=>{
|
||
const b=document.getElementById('dil-wrong');
|
||
if(b){
|
||
for(let i=0;i<6;i++){
|
||
const s=document.createElement('div');
|
||
s.className='splatter';
|
||
s.style.cssText=`width:${4+Math.random()*8}px;height:${4+Math.random()*8}px;left:${Math.random()*60}px;top:${-10-Math.random()*30}px;--d:${Math.random()*.3}s;animation-duration:.8s`;
|
||
b.appendChild(s);
|
||
setTimeout(()=>s.remove(),900);
|
||
}
|
||
}
|
||
const wr=document.getElementById('dil-wrong-result');
|
||
if(wr)wr.innerHTML='<span style="color:#dc2626">💥 Выброс кислоты!</span>';
|
||
},600);
|
||
// Right: correct → gentle mix
|
||
const rAcid=document.getElementById('dil-right-acid');
|
||
if(rAcid) setTimeout(()=>{ rAcid.style.height='30px'; },800);
|
||
const rr=document.getElementById('dil-right-result');
|
||
if(rr) setTimeout(()=>{ rr.innerHTML='<span style="color:#16a34a">✓ Безопасно. Тепло поглощается водой.</span>'; },1200);
|
||
CHEM.addScore(5,'Правило разбавления изучено'); CHEM.markDone('p32_dilute');
|
||
};
|
||
window.dil32Reset = function() {
|
||
const wAcid=document.getElementById('dil-wrong-acid');
|
||
const rAcid=document.getElementById('dil-right-acid');
|
||
if(wAcid)wAcid.style.height='0';
|
||
if(rAcid)rAcid.style.height='0';
|
||
const wr=document.getElementById('dil-wrong-result');
|
||
const rr=document.getElementById('dil-right-result');
|
||
if(wr)wr.innerHTML='';
|
||
if(rr)rr.innerHTML='';
|
||
};
|
||
|
||
window.sugar32Play = function() {
|
||
const cube=document.getElementById('sugar-cube');
|
||
const col=document.getElementById('sugar-column');
|
||
const eq=document.getElementById('sugar-eq');
|
||
if(cube){ cube.style.background='#1f2937'; cube.style.color='#fff'; cube.textContent='C (углерод)'; }
|
||
if(col){ setTimeout(()=>{ col.style.height='80px'; },400); }
|
||
if(eq) setTimeout(()=>{ eq.textContent='C₁₂H₂₂O₁₁ → 12C + 11H₂O (H₂SO₄ — водоотнимающее средство)'; CHEM.addScore(5,'Обугливание изучено'); },1200);
|
||
};
|
||
window.sugar32Reset = function() {
|
||
const cube=document.getElementById('sugar-cube');
|
||
const col=document.getElementById('sugar-column');
|
||
if(cube){ cube.style.background='#fef9c3'; cube.style.color='#92400e'; cube.textContent='C₁₂H₂₂O₁₁'; }
|
||
if(col) col.style.height='0';
|
||
const eq=document.getElementById('sugar-eq');
|
||
if(eq)eq.textContent='';
|
||
};
|
||
|
||
// ── §36 Water hardness ────────────────────────────────────────────────────────
|
||
window.hard36Soap = function() {
|
||
const foamS=document.getElementById('foam-soft');
|
||
const scumH=document.getElementById('scum-hard');
|
||
if(foamS) foamS.style.height='30px';
|
||
if(scumH) scumH.style.height='12px';
|
||
const info=document.getElementById('hard36-info');
|
||
if(info) info.textContent='Мягкая: мыло пенится. Жёсткая: Ca²⁺/Mg²⁺ осаждают мыло — пена не образуется.';
|
||
CHEM.addScore(4,'Жёсткость воды изучена');
|
||
};
|
||
window.hard36Boil = function() {
|
||
const scaleH=document.getElementById('scale-hard');
|
||
if(scaleH) scaleH.style.height='20px';
|
||
const info=document.getElementById('hard36-info');
|
||
if(info) { info.textContent='Кипячение: Ca(HCO₃)₂ → CaCO₃↓ + CO₂↑ + H₂O (временная жёсткость устраняется)'; CHEM.markDone('p36_hardness'); }
|
||
};
|
||
window.hard36Reset = function() {
|
||
const f=document.getElementById('foam-soft');
|
||
const sc=document.getElementById('scum-hard');
|
||
const sl=document.getElementById('scale-hard');
|
||
if(f)f.style.height='0'; if(sc)sc.style.height='0'; if(sl)sl.style.height='0';
|
||
const info=document.getElementById('hard36-info'); if(info)info.textContent='';
|
||
};
|
||
|
||
// ── §39 Factory flowchart ──────────────────────────────────────────────────────
|
||
const FACTORY_DATA = {
|
||
glass: {
|
||
steps:[
|
||
{icon:'🪨',name:'SiO₂ (кварц)',color:'#dbeafe'},
|
||
{icon:'🧂',name:'Na₂CO₃',color:'#dcfce7'},
|
||
{icon:'🪨',name:'CaCO₃',color:'#fef3c7'},
|
||
{icon:'🔥',name:'Плавка ~1400°C',color:'#fee2e2'},
|
||
{icon:'💧',name:'Формовка',color:'#e0e7ff'},
|
||
{icon:'🪟',name:'Стекло',color:'#f0fdf4'},
|
||
],
|
||
detail:'Стекло: Na₂O·CaO·6SiO₂<br>Реакция: Na₂CO₃ + SiO₂ → Na₂SiO₃ + CO₂↑<br>CaCO₃ + SiO₂ → CaSiO₃ + CO₂↑'
|
||
},
|
||
cement: {
|
||
steps:[
|
||
{icon:'🪨',name:'Известняк CaCO₃',color:'#dbeafe'},
|
||
{icon:'🟤',name:'Глина Al₂Si₂O₇',color:'#fef3c7'},
|
||
{icon:'🔥',name:'Обжиг ~1450°C',color:'#fee2e2'},
|
||
{icon:'⚙️',name:'Помол',color:'#e0e7ff'},
|
||
{icon:'💧',name:'+ H₂O (схватывание)',color:'#dcfce7'},
|
||
{icon:'🏗️',name:'Цемент/бетон',color:'#f0fdf4'},
|
||
],
|
||
detail:'Цемент: 3CaO·SiO₂ (алит), 2CaO·SiO₂ (белит)<br>CaCO₃ → CaO + CO₂↑ при обжиге'
|
||
},
|
||
ceramics: {
|
||
steps:[
|
||
{icon:'🟤',name:'Каолин Al₂Si₂O₇',color:'#fef3c7'},
|
||
{icon:'💦',name:'Замес массы',color:'#dbeafe'},
|
||
{icon:'🏺',name:'Формовка',color:'#e0e7ff'},
|
||
{icon:'☀️',name:'Сушка',color:'#fef3c7'},
|
||
{icon:'🔥',name:'Обжиг ~1200°C',color:'#fee2e2'},
|
||
{icon:'🍽️',name:'Фарфор/керамика',color:'#f0fdf4'},
|
||
],
|
||
detail:'Фарфор: каолин + полевой шпат + кварц<br>Al₂Si₂O₇ → Al₂O₃ + 2SiO₂ при обжиге'
|
||
}
|
||
};
|
||
|
||
window.factory39Show = function(type, btn) {
|
||
document.querySelectorAll('.genrow-tab').forEach(b=>b.classList.remove('active'));
|
||
if(btn) btn.classList.add('active');
|
||
const d=FACTORY_DATA[type];
|
||
if(!d) return;
|
||
const flow=document.getElementById('factory39-flow');
|
||
if(flow) {
|
||
flow.innerHTML=d.steps.map((s,i)=>`
|
||
${i>0?'<div style="font-size:22px;color:#94a3b8">→</div>':''}
|
||
<div onclick="factory39Detail(${i},'${type}')" style="background:${s.color};border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;text-align:center;cursor:pointer;min-width:70px;transition:transform .2s;font-size:20px" class="interactive" title="${s.name}">
|
||
<div>${s.icon}</div><div style="font-size:10px;font-weight:600;color:#1e293b;margin-top:2px">${s.name}</div>
|
||
</div>`).join('');
|
||
}
|
||
const det=document.getElementById('factory39-detail');
|
||
if(det) det.innerHTML=d.detail;
|
||
CHEM.addScore(3,'Производство изучено'); CHEM.markDone('p39_factory'); CHEM.award('Силикатчик');
|
||
};
|
||
|
||
window.factory39Detail = function(idx, type) {
|
||
const d=FACTORY_DATA[type];
|
||
if(!d) return;
|
||
const s=d.steps[idx];
|
||
const det=document.getElementById('factory39-detail');
|
||
if(det) det.innerHTML=`<b>${s.icon} ${s.name}</b><br>${d.detail}`;
|
||
};
|
||
|
||
document.addEventListener('DOMContentLoaded', () => { factory39Show('glass'); });
|
||
|
||
// ══ §1–39 Interactive JS ══
|
||
|
||
// §1 — атом: выбор элемента
|
||
function atom1Show(){
|
||
const sel=document.getElementById('atom1sel');
|
||
const box=document.getElementById('atom1box');
|
||
const res=document.getElementById('atom1res');
|
||
if(!sel.value){box.classList.remove('vis');return;}
|
||
const [sym,Z,A]=sel.value.split(',');
|
||
const N=parseInt(A)-parseInt(Z);
|
||
res.innerHTML=`
|
||
<div class="fcard"><div style="font-size:1.4rem;font-weight:900;color:var(--pri)">${sym}</div><div style="font-size:.75rem">Символ</div></div>
|
||
<div class="fcard"><div style="font-size:1.4rem;font-weight:900;color:var(--pri)">Z = ${Z}</div><div style="font-size:.75rem">Протонов (= электронов)</div></div>
|
||
<div class="fcard"><div style="font-size:1.4rem;font-weight:900;color:var(--pri)">A = ${A}</div><div style="font-size:.75rem">Массовое число</div></div>
|
||
<div class="fcard"><div style="font-size:1.4rem;font-weight:900;color:var(--pri)">N = ${N}</div><div style="font-size:.75rem">Нейтронов = A − Z</div></div>
|
||
`;
|
||
box.classList.add('vis');
|
||
}
|
||
|
||
// §2 — электронные конфигурации
|
||
function econf2Show(){
|
||
const sel=document.getElementById('econf2sel');
|
||
const box=document.getElementById('econf2box');
|
||
const res=document.getElementById('econf2res');
|
||
if(!sel.value){box.classList.remove('vis');return;}
|
||
const [sym,Z,conf]=sel.value.split(',');
|
||
res.innerHTML=`<div style="font-size:.95rem;font-weight:700;margin-bottom:8px">${sym} (Z=${Z}): <span style="color:var(--pri)">${conf}</span></div>
|
||
<div style="font-size:.8rem;color:var(--muted)">Число валентных электронов: ${getValE(conf)} | Период: ${getPeriod(Z)} | Группа: ${getGroup(Z)}</div>`;
|
||
box.classList.add('vis');
|
||
}
|
||
function getValE(conf){
|
||
const m=conf.match(/([0-9]+[spdf][0-9¹²³⁴⁵⁶]+)/g)||[];
|
||
if(!m.length)return'?';
|
||
let last=m[m.length-1];
|
||
const n=last.match(/^[0-9]+/)[0];
|
||
let sum=0;
|
||
for(const t of m) if(t.startsWith(n)) sum+=parseInt(t.replace(/[^0-9]/g,'').slice(-1))||1;
|
||
return sum;
|
||
}
|
||
function getPeriod(Z){Z=parseInt(Z);return Z<=2?1:Z<=10?2:Z<=18?3:Z<=36?4:4;}
|
||
function getGroup(Z){Z=parseInt(Z);
|
||
const g=[1,2,13,14,15,16,17,18,1,2,13,14,15,16,17,18,1,2,13,14,15,16,17,18];
|
||
const zg=[1,2,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26];
|
||
for(let i=0;i<zg.length;i++) if(zg[i]===Z) return 'I–VIII';
|
||
return '?';
|
||
}
|
||
|
||
// §5 — кратные связи
|
||
function krat5Show(id,btn){
|
||
document.querySelectorAll('.krat-panel').forEach(p=>p.classList.remove('active'));
|
||
document.querySelectorAll('.krat-tab').forEach(b=>b.classList.remove('active'));
|
||
const el=document.getElementById('krat5-'+id);
|
||
if(el) el.classList.add('active');
|
||
if(btn) btn.classList.add('active');
|
||
}
|
||
|
||
// §7 — СО квиз
|
||
(function(){
|
||
const q7=[
|
||
{q:'СО серы в SO₂?', a:'+4', opts:['+4','+6','-2','+2']},
|
||
{q:'СО азота в NH₃?', a:'-3', opts:['-3','+3','+5','0']},
|
||
{q:'СО хрома в K₂CrO₄?', a:'+6', opts:['+4','+6','+3','+7']},
|
||
{q:'СО хлора в HClO₃?', a:'+5', opts:['+5','+7','+3','-1']},
|
||
{q:'СО Fe в Fe₂O₃?', a:'+3', opts:['+2','+3','+6','0']},
|
||
];
|
||
function initQ7(){
|
||
const w=document.getElementById('sox7-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q7.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q7Check(this,'${o}','${item.a}')">${o}</div>`).join('')}
|
||
</div>`).join('');
|
||
}
|
||
window.q7Check=function(el,chosen,ans){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>{b.onclick=null;});
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ7);
|
||
setTimeout(initQ7,300);
|
||
})();
|
||
|
||
// §8 — решётки квиз
|
||
(function(){
|
||
const q8=[
|
||
{q:'Алмаз', a:'Атомная', opts:['Атомная','Молекулярная','Ионная','Металлическая']},
|
||
{q:'CO₂ (сухой лёд)', a:'Молекулярная', opts:['Атомная','Молекулярная','Ионная','Металлическая']},
|
||
{q:'NaCl', a:'Ионная', opts:['Атомная','Молекулярная','Ионная','Металлическая']},
|
||
{q:'Cu', a:'Металлическая', opts:['Атомная','Молекулярная','Ионная','Металлическая']},
|
||
{q:'SiO₂', a:'Атомная', opts:['Атомная','Молекулярная','Ионная','Металлическая']},
|
||
{q:'I₂', a:'Молекулярная', opts:['Атомная','Молекулярная','Ионная','Металлическая']},
|
||
];
|
||
function initQ8(){
|
||
const w=document.getElementById('latt8-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q8.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q8Check(this,'${o}','${item.a}')">${o}</div>`).join('')}
|
||
</div>`).join('');
|
||
}
|
||
window.q8Check=function(el,chosen,ans){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>b.onclick=null);
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ8);
|
||
setTimeout(initQ8,300);
|
||
})();
|
||
|
||
// §9 — смеси
|
||
window.mix9Check=function(el,isOk){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.mix-btn').forEach(b=>b.onclick=null);
|
||
el.classList.add(isOk?'ok':'err');
|
||
};
|
||
|
||
// §10 — дисперсные системы квиз
|
||
(function(){
|
||
const q10=[
|
||
{q:'Раствор NaCl', a:'Истинный', opts:['Истинный','Коллоид','Взвесь']},
|
||
{q:'Молоко', a:'Коллоид', opts:['Истинный','Коллоид','Взвесь']},
|
||
{q:'Туман', a:'Коллоид', opts:['Истинный','Коллоид','Взвесь']},
|
||
{q:'Мел в воде', a:'Взвесь', opts:['Истинный','Коллоид','Взвесь']},
|
||
{q:'Раствор сахара', a:'Истинный', opts:['Истинный','Коллоид','Взвесь']},
|
||
{q:'Дым', a:'Коллоид', opts:['Истинный','Коллоид','Взвесь']},
|
||
];
|
||
function initQ10(){
|
||
const w=document.getElementById('disp10-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q10.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q10Check(this,'${o}','${item.a}')">${o}</div>`).join('')}
|
||
</div>`).join('');
|
||
}
|
||
window.q10Check=function(el,chosen,ans){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>b.onclick=null);
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ10);
|
||
setTimeout(initQ10,300);
|
||
})();
|
||
|
||
// §13 — гидролиз квиз
|
||
(function(){
|
||
const q13=[
|
||
{q:'Na₂CO₃', a:'Щелочная', opts:['Кислая','Нейтральная','Щелочная']},
|
||
{q:'NH₄Cl', a:'Кислая', opts:['Кислая','Нейтральная','Щелочная']},
|
||
{q:'NaCl', a:'Нейтральная', opts:['Кислая','Нейтральная','Щелочная']},
|
||
{q:'FeCl₃', a:'Кислая', opts:['Кислая','Нейтральная','Щелочная']},
|
||
{q:'KNO₃', a:'Нейтральная', opts:['Кислая','Нейтральная','Щелочная']},
|
||
{q:'Na₂S', a:'Щелочная', opts:['Кислая','Нейтральная','Щелочная']},
|
||
];
|
||
function initQ13(){
|
||
const w=document.getElementById('hyd13-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q13.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. Среда р-ра ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q13Check(this,'${o}','${item.a}')">${o}</div>`).join('')}
|
||
</div>`).join('');
|
||
}
|
||
window.q13Check=function(el,chosen,ans){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>b.onclick=null);
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ13);
|
||
setTimeout(initQ13,300);
|
||
})();
|
||
|
||
// §15 — основания квиз
|
||
(function(){
|
||
const q15=[
|
||
{q:'NaOH + HNO₃', a:'Да', opts:['Да','Нет']},
|
||
{q:'Cu(OH)₂ + HCl', a:'Да', opts:['Да','Нет']},
|
||
{q:'NaOH + NaCl', a:'Нет', opts:['Да','Нет']},
|
||
{q:'NaOH + CuSO₄', a:'Да', opts:['Да','Нет']},
|
||
{q:'Ca(OH)₂ + CO₂', a:'Да', opts:['Да','Нет']},
|
||
{q:'NaOH + KNO₃', a:'Нет', opts:['Да','Нет']},
|
||
];
|
||
const ex15=['Нейтрализация: NaOH+HNO₃→NaNO₃+H₂O','Нейтрализация: Cu(OH)₂+2HCl→CuCl₂+2H₂O','Нет — все растворимы, нет осадка/газа/воды слаб.эл.','Cu(OH)₂↓: Cu²⁺+2OH⁻→Cu(OH)₂↓','CaCO₃↓: Ca(OH)₂+CO₂→CaCO₃↓+H₂O','Нет — нет осадка/газа'];
|
||
function initQ15(){
|
||
const w=document.getElementById('base15-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q15.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q15Check(this,'${o}','${item.a}','${ex15[i].replace(/'/g,"\'")}',${i})">${o}</div>`).join('')}
|
||
</div><div id="q15ex${i}" style="font-size:.78rem;color:var(--pri);display:none;padding:4px 8px"></div>`).join('');
|
||
}
|
||
window.q15Check=function(el,chosen,ans,ex,i){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>b.onclick=null);
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
const exEl=document.getElementById('q15ex'+i);
|
||
if(exEl){exEl.textContent=ex;exEl.style.display='block';}
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ15);
|
||
setTimeout(initQ15,300);
|
||
})();
|
||
|
||
// §16 — кислоты: металл + кислота
|
||
(function(){
|
||
const q16=[
|
||
{q:'Zn + HCl (разб.)', a:'Да', opts:['Да','Нет'], ex:'Zn+2HCl→ZnCl₂+H₂↑ (Zn до H₂ в ряду)'},
|
||
{q:'Cu + HCl (разб.)', a:'Нет', opts:['Да','Нет'], ex:'Cu после H₂ в ряду → не реагирует с разб. HCl'},
|
||
{q:'Fe + H₂SO₄ (разб.)', a:'Да', opts:['Да','Нет'], ex:'Fe+H₂SO₄→FeSO₄+H₂↑'},
|
||
{q:'Ag + HNO₃ (разб.)', a:'Да', opts:['Да','Нет'], ex:'Ag+2HNO₃→AgNO₃+NO₂+H₂O (HNO₃ — окислитель)'},
|
||
{q:'Fe + конц. HNO₃ (хол.)', a:'Нет', opts:['Да','Нет'], ex:'Пассивация: оксидная плёнка на поверхности Fe'},
|
||
{q:'Al + HCl (разб.)', a:'Да', opts:['Да','Нет'], ex:'2Al+6HCl→2AlCl₃+3H₂↑'},
|
||
];
|
||
function initQ16(){
|
||
const w=document.getElementById('acid16-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q16.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q16Check(this,'${o}','${item.a}',\`${item.ex}\`,${i})">${o}</div>`).join('')}
|
||
</div><div id="q16ex${i}" style="font-size:.78rem;color:var(--pri);display:none;padding:4px 8px"></div>`).join('');
|
||
}
|
||
window.q16Check=function(el,chosen,ans,ex,i){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>b.onclick=null);
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
const exEl=document.getElementById('q16ex'+i);
|
||
if(exEl){exEl.textContent=ex;exEl.style.display='block';}
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ16);
|
||
setTimeout(initQ16,300);
|
||
})();
|
||
|
||
// §22 — ОВР в средах
|
||
(function(){
|
||
const q22=[
|
||
{q:'Cu + конц. HNO₃', a:'NO₂↑', opts:['NO↑','NO₂↑','N₂O↑','NH₄⁺'], ex:'Cu+4HNO₃(к)→Cu(NO₃)₂+2NO₂↑+2H₂O'},
|
||
{q:'Cu + разб. HNO₃', a:'NO↑', opts:['NO↑','NO₂↑','N₂O↑','NH₄⁺'], ex:'3Cu+8HNO₃(р)→3Cu(NO₃)₂+2NO↑+4H₂O'},
|
||
{q:'Zn + оч. разб. HNO₃', a:'NH₄⁺', opts:['NO↑','NO₂↑','N₂O↑','NH₄⁺'], ex:'4Zn+10HNO₃→4Zn(NO₃)₂+NH₄NO₃+3H₂O'},
|
||
{q:'Zn + конц. H₂SO₄', a:'SO₂↑', opts:['H₂S↑','SO₂↑','S↓','H₂↑'], ex:'Zn+2H₂SO₄(к)→ZnSO₄+SO₂↑+2H₂O'},
|
||
];
|
||
function initQ22(){
|
||
const w=document.getElementById('med22-quiz');
|
||
if(!w)return;
|
||
w.innerHTML=q22.map((item,i)=>`<div class="quiz-row">
|
||
<div class="qlbl">${i+1}. ${item.q}</div>
|
||
${item.opts.map(o=>`<div class="quiz-opt" onclick="q22Check(this,'${o}','${item.a}',\`${item.ex}\`,${i})">${o}</div>`).join('')}
|
||
</div><div id="q22ex${i}" style="font-size:.78rem;color:var(--pri);display:none;padding:4px 8px"></div>`).join('');
|
||
}
|
||
window.q22Check=function(el,chosen,ans,ex,i){
|
||
const row=el.parentNode;
|
||
row.querySelectorAll('.quiz-opt').forEach(b=>b.onclick=null);
|
||
el.classList.add(chosen===ans?'ok':'err');
|
||
if(chosen!==ans) row.querySelectorAll('.quiz-opt').forEach(b=>{if(b.textContent===ans)b.classList.add('ok');});
|
||
const exEl=document.getElementById('q22ex'+i);
|
||
if(exEl){exEl.textContent=ex;exEl.style.display='block';}
|
||
};
|
||
document.addEventListener('DOMContentLoaded',initQ22);
|
||
setTimeout(initQ22,300);
|
||
})();
|
||
|
||
</script>
|
||
</div><!-- /main-content -->
|
||
</div><!-- /page-layout -->
|
||
<script src="/js/api.js"></script>
|
||
<script src="/js/textbook-tracker.js"></script>
|
||
</body>
|
||
</html>
|