maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
97966ba2dfd2fbbed6bc24ca6b87c65cf98f6b9b
Learn_System/frontend/textbooks/math_6_ch3.html
T
Maxim Dolgolyov 8edab2196f feat(math6): stepPlayer — все «Разборы по шагам» стали интерактивными 
Math6Anim.stepPlayer (DOM): пошаговый плеер с кнопками Назад/Дальше/Авто
и точками прогресса, рендерит KaTeX по шагам. Math6Anim.stepifyExamples
сканирует секцию и превращает карточки «Разбор по шагам» (<ol> в теле) в
такой плеер. Движок зовёт stepifyExamples в goTo (guarded) → автоматически
во ВСЕХ главах и параграфах, включая простые работы с дробями/столбиком.
Подключён math6_anim в Гл.2,3 (теперь во всех 6). Тесты math6: 20/20.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-02 21:44:34 +03:00

463 lines
47 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Математика 6 · Глава 3 · Множество</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<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:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/math6.css">
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<script src="/js/math6_svg.js" defer></script>
<script src="/js/math6_anim.js" defer></script>
<script src="/js/math6_engine.js" defer></script>
<style>:root{--pri:#7c3aed;--pri2:#6d28d9;--pri-soft:#ede9fe;--acc:#8b5cf6;--acc2:#7c3aed;--acc-soft:#f5f3ff}</style>
</head>
<body>
<header class="hdr" data-wm="∪">
<div class="hdr-row">
<div>
<h1>Математика 6 · Глава 3</h1>
<div class="hdr-sub">Множество и его элементы · способы задания · пересечение и объединение · круги Эйлера</div>
</div>
<div class="hdr-side">
<a href="/textbook/math-6" class="hdr-btn" title="Ко всем главам"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> К математике 6</a>
<button id="search-btn" class="hdr-btn" title="Поиск (Ctrl+K)"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg> <span>Поиск</span></button>
<button id="sidebar-btn" class="hdr-btn" title="Шпаргалка"><svg class="ic" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg> Шпаргалка</button>
<button id="theme-btn" class="hdr-btn" title="Сменить тему"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg> <span id="theme-lab">Тёмная</span></button>
</div>
</div>
</header>
<main class="main">
<div class="col-main">
<section class="hero" data-wm="∪">
<h2>Множество</h2>
<p>Множество — одно из самых простых и самых важных понятий математики: это набор объектов, объединённых общим признаком. Мы научимся <b>задавать множества</b> перечислением и свойством, находить их <b>пересечение и объединение</b> и решать жизненные задачи с помощью наглядных <b>кругов Эйлера</b>.</p>
<div class="hero-row">
<button class="btn-primary" onclick="goTo('p1')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 1</button>
<div class="hero-progress"><span class="hp-label">Прогресс по главе</span><div class="hp-bar"><div id="hero-hp-fill" class="hp-fill"></div></div><span id="hero-hp-text" class="hp-text">0%</span></div>
<div id="hero-xp-badge" class="hero-xp-badge" title="Опыт" data-gamified></div>
</div>
</section>
<section class="psel"><div class="psel-title">Параграфы главы</div><div id="psel-grid" class="psel-grid"></div></section>
<div id="sections"></div>
</div>
<aside class="col-side" id="col-side"><div id="sidebar-content"></div></aside>
<div class="col-side-backdrop" id="col-side-backdrop"></div>
</main>
<footer class="foot" id="m6-foot">Интерактивный учебник «Математика 6» · Глава 3 · Множество · LearnSpace</footer>
<div id="ach-popup" class="ach-popup"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><polygon points="12,2 22,20 2,20"/></svg><span id="ach-text">Достижение!</span></div>
<div id="gloss-tip" class="gloss-tip"></div>
<div id="search-modal" class="search-modal" role="dialog" aria-label="Поиск по главе">
<div class="search-box">
<input type="text" id="search-input" class="search-input" placeholder="Поиск: понятие, действие, параграф…" autocomplete="off">
<div id="search-results" class="search-results"></div>
<div class="search-foot"><span><kbd>&#8593;&#8595;</kbd> навигация</span><span><kbd>Enter</kbd> открыть</span><span><kbd>Esc</kbd> закрыть</span></div>
</div>
</div>
<script>
'use strict';
window.M6 = {
slug: 'math-6-ch3', lsPrefix: 'math6_ch3', xpKey: 'math6_xp', wm: '∪',
paras: [
{ id:'p1', num:'§ 1', name:'Множество. Элементы. Пустое множество', sub:'∈, ∉, ∅' },
{ id:'p2', num:'§ 2', name:'Способы задания множеств', sub:'Перечисление и свойство' },
{ id:'p3', num:'§ 3', name:'Операции над множествами', sub:'Пересечение и объединение' },
{ id:'p4', num:'§ 4', name:'Круги Эйлера', sub:'Решение задач с кругами Эйлера' },
{ id:'final', num:'★', name:'Финал главы', sub:'Тест · боссы главы 3', final:true }
],
achLabels: {
start:'Начало главы 3!', p1_done:'Множества и элементы — ясно!', p2_done:'Задаю множества двумя способами!',
p3_done:'Пересечение и объединение освоены!', p4_done:'Круги Эйлера — мастер!', ch3_done:'Глава 3 пройдена!'
},
startAch: ['start','Начало главы 3!'],
finalAch: ['ch3_done','Глава 3 пройдена!'],
sidebars: {}, tips: [], glossary: [], builders: {},
footer: 'Интерактивный учебник «Математика 6» · Глава 3 · Множество · LearnSpace'
};
/* ===================== ВСПОМОГАТЕЛЬНОЕ ===================== */
function _ri(a,b){ return a + Math.floor(Math.random()*(b-a+1)); }
function _pick(a){ return a[_ri(0,a.length-1)]; }
function _setStr(arr){ return '{' + arr.join(', ') + '}'; }
function _distinct(n,lo,hi){ var s=[],seen={}; while(s.length<n){ var v=_ri(lo,hi); if(!seen[v]){seen[v]=1;s.push(v);} } return s; }
function _inter(A,B){ return A.filter(function(x){ return B.indexOf(x)>=0; }); }
function _union(A,B){ var u=A.slice(); B.forEach(function(x){ if(u.indexOf(x)<0)u.push(x); }); return u; }
/* ===================== § 1. МНОЖЕСТВО. ЭЛЕМЕНТЫ. ПУСТОЕ МНОЖЕСТВО ===================== */
function buildP1(){
var box=document.getElementById('p1-body'); var h='';
h+=makeCard('oral','Где это в жизни','1.0',
'<p>Множества — это буквально всё вокруг нас. Список покупок в магазине — множество товаров. Состав футбольной команды — множество игроков. Коллекция марок, набор инструментов, список друзей — везде одна и та же идея: несколько разных объектов, собранных вместе. В программировании массивы и коллекции данных — прямые родственники математических множеств.</p>');
h+=makeCard('theory','Множество и его элементы','1.1',
'<p><b>Множество</b> — это набор различных объектов, объединённых общим признаком. Объекты множества — его <b>элементы</b>. Множества обозначают большими буквами, элементы перечисляют в фигурных скобках: $A=\\{2;4;6;8\\}$.</p>'
+'<p>Запись $3\\in A$ читается «$3$ принадлежит $A$», $5\\notin A$ — «$5$ не принадлежит $A$».</p>');
h+=makeCard('example','Разбор по шагам','1.2',
'<p>Дано: $A=\\{1;3;5;7;9\\}$. Принадлежит ли $5$ множеству $A$? А $4$?</p>'
+'<ol><li>Смотрим на элементы $A$: $1, 3, 5, 7, 9$.</li>'
+'<li>Ищем $5$ в списке: $5$ есть — значит $5\\in A$.</li>'
+'<li>Ищем $4$ в списке: $4$ нет — значит $4\\notin A$.</li>'
+'<li>Сколько элементов? Считаем: $1, 2, 3, 4, 5$ — итого $|A|=5$.</li></ol>');
h+=makeCard('rule','Пустое множество','1.3',
'<p><b>Пустое множество</b> $\\varnothing$ не содержит ни одного элемента (например, множество натуральных решений уравнения $x+1=0$).</p>'
+'<p>Множества <b>равны</b>, если состоят из одних и тех же элементов; порядок и повторы не важны: $\\{1;2;3\\}=\\{3;1;2\\}$.</p>');
h+=makeCard('theory','А знаешь ли ты?','1.4',
'<p>Теорию множеств создал немецкий математик Георг Кантор в конце XIX века. Поначалу его идеи казались настолько странными, что коллеги не принимали их всерьёз. Сегодня теория множеств — фундамент всей современной математики: на ней строятся числа, функции и вся высшая математика.</p>');
h+='<div class="wg" id="p1-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Принадлежит или нет?</div></div>'
+'<div class="wg-help">Определи, принадлежит ли элемент данному множеству.</div>'
+'<div class="score-display"><span>Вопрос <b id="p1-i">1</b> / 6</span><span>Очки: <b id="p1-s">0</b> / 6</span></div>'
+'<div id="p1-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-v="1">∈ принадлежит</button><button class="btn primary" data-v="0">∉ не принадлежит</button></div>'
+'<div class="feedback" id="p1-fb"></div></div>';
h+='<div class="wg" id="p1-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Сколько элементов?</div></div>'
+'<div class="wg-help">Сосчитай число элементов множества (у пустого — ноль).</div>'
+'<div class="score-display"><span>Вопрос <b id="p1-ci">1</b> / 5</span><span>Очки: <b id="p1-cs">0</b> / 5</span></div>'
+'<div id="p1-cq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p1-ca" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p1-cgo">Проверить</button></div>'
+'<div class="feedback" id="p1-cfb"></div></div>';
h+='<div class="wg" id="p1-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Составь множество</div></div>'
+'<div class="wg-help">Выбери все числа, которые принадлежат описанному множеству. Нажми нужные и проверь.</div>'
+'<div id="p1-sv3-q" class="qbox"></div>'
+'<div id="p1-sv3-chips" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0"></div>'
+'<div style="display:flex;gap:10px;justify-content:center"><button class="btn primary" id="p1-sv3-go">Проверить</button><button class="btn" id="p1-sv3-next">Следующее</button></div>'
+'<div class="feedback" id="p1-sv3-fb"></div></div>';
h+=secNav(null,'p2')+readBtn('p1');
box.innerHTML=h; renderMath(box);
(function(){
var i=0,score=0,cur=null;
function gen(){ var A=_distinct(_ri(3,5),1,9), inside=_pick([true,false]); var e; if(inside)e=_pick(A); else { do{e=_ri(1,9);}while(A.indexOf(e)>=0); } cur={A:A,e:e,in:A.indexOf(e)>=0}; }
function show(){ if(i>=6){ document.getElementById('p1-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p1-iv1');bumpProgress('p1',30);}else if(score>=3){addXp(8,'p1-iv1');bumpProgress('p1',16);} return; }
gen(); document.getElementById('p1-i').textContent=i+1; document.getElementById('p1-q').innerHTML='$A = '+_setStr(cur.A)+'$. Верно ли, что $'+cur.e+' \\in A$?'; renderMath(document.getElementById('p1-q'));
document.getElementById('p1-fb').style.display='none'; }
function ans(v){ if(i>=6)return; var fb=document.getElementById('p1-fb'), correct=cur.in?1:0;
if(v===correct){ score++; feedback(fb,true,'✓ Верно: $'+cur.e+(cur.in?' \\in ':' \\notin ')+'A$.'); } else feedback(fb,false,'✗ Нет: $'+cur.e+(cur.in?' \\in ':' \\notin ')+'A$.');
document.getElementById('p1-s').textContent=score; i++; setTimeout(show,1300); }
document.querySelectorAll('#p1-iv1 [data-v]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-v')); }); }); show();
})();
(function(){
var i=0,score=0,cur=null;
function gen(){ if(_ri(1,6)===1){ cur={str:'\\varnothing', n:0}; } else { var A=_distinct(_ri(2,6),1,12); cur={str:_setStr(A), n:A.length}; } }
function show(){ if(i>=5){ document.getElementById('p1-cq').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p1-iv2');bumpProgress('p1',30);}else if(score>=2){addXp(8,'p1-iv2');bumpProgress('p1',16);} return; }
gen(); document.getElementById('p1-ci').textContent=i+1; document.getElementById('p1-cq').innerHTML='Сколько элементов в множестве $'+cur.str+'$?'; renderMath(document.getElementById('p1-cq'));
document.getElementById('p1-ca').value=''; document.getElementById('p1-cfb').style.display='none'; }
function go(){ if(i>=5)return; var fb=document.getElementById('p1-cfb'), v=parseInt(document.getElementById('p1-ca').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===cur.n){ score++; feedback(fb,true,'✓ Верно: '+cur.n+'.'); } else feedback(fb,false,'✗ Нет. Элементов: '+cur.n+'.');
document.getElementById('p1-cs').textContent=score; i++; setTimeout(show,1200); }
document.getElementById('p1-cgo').addEventListener('click',go);
document.getElementById('p1-ca').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
(function(){
var TASKS=[
{desc:'чётные числа от 1 до 10', nums:[1,2,3,4,5,6,7,8,9,10], correct:[2,4,6,8,10]},
{desc:'делители числа 8', nums:[1,2,3,4,5,6,7,8], correct:[1,2,4,8]},
{desc:'однозначные нечётные числа', nums:[1,2,3,4,5,6,7,8,9,10], correct:[1,3,5,7,9]},
{desc:'числа, кратные 4, до 20', nums:[2,4,6,8,10,12,14,16,18,20], correct:[4,8,12,16,20]}
];
var ti=0, sel=[];
function render(){
var t=TASKS[ti];
document.getElementById('p1-sv3-q').innerHTML='Выбери все числа: <b>'+t.desc+'</b>';
var chips=''; t.nums.forEach(function(n){ chips+='<button class="btn sv3-chip" data-n="'+n+'">'+n+'</button>'; });
document.getElementById('p1-sv3-chips').innerHTML=chips;
sel=[]; document.getElementById('p1-sv3-fb').style.display='none';
document.querySelectorAll('#p1-iv3 .sv3-chip').forEach(function(b){
b.addEventListener('click',function(){
var n=+b.getAttribute('data-n'), idx=sel.indexOf(n);
if(idx>=0){ sel.splice(idx,1); b.classList.remove('primary'); } else { sel.push(n); b.classList.add('primary'); }
});
});
}
document.getElementById('p1-sv3-go').addEventListener('click',function(){
var t=TASKS[ti], fb=document.getElementById('p1-sv3-fb');
var ok=t.correct.slice().sort().join(',')===[].concat(sel).sort().join(',');
if(ok){ feedback(fb,true,'Верно! Множество: {'+t.correct.join('; ')+'}'); addXp(10,'p1-iv3'); bumpProgress('p1',20); }
else { feedback(fb,false,'Не совсем. Правильный ответ: {'+t.correct.join('; ')+'}'); }
});
document.getElementById('p1-sv3-next').addEventListener('click',function(){
ti=(ti+1)%TASKS.length; render();
});
render();
})();
}
/* ===================== § 2. СПОСОБЫ ЗАДАНИЯ МНОЖЕСТВ ===================== */
function buildP2(){
var box=document.getElementById('p2-body'); var h='';
h+=makeCard('oral','Где это в жизни','2.0',
'<p>Когда составляют расписание уроков, можно написать список предметов — это перечисление. А можно написать правило: «предметы, которые идут в понедельник» — это задание свойством. В базах данных программисты постоянно используют оба способа: хранят конкретные списки и создают запросы-условия. Правильно выбрать способ задания множества — значит сэкономить время и избежать ошибок.</p>');
h+=makeCard('theory','Два способа задания','2.1',
'<p><b>Перечислением</b> — выписывают все элементы: $A=\\{2;4;6;8\\}$.</p>'
+'<p><b>Характеристическим свойством</b> — указывают признак: $A=\\{x \\mid x$ — чётное, $0<x<10\\}$ (читается «множество всех $x$ таких, что …»).</p>');
h+=makeCard('example','Разбор по шагам','2.2',
'<p>Задано свойство: $B=\\{x\\mid x$ — делитель числа $12\\}$. Запишем $B$ перечислением.</p>'
+'<ol><li>Находим все делители $12$: числа, на которые $12$ делится без остатка.</li>'
+'<li>Проверяем по очереди: $1, 2, 3, 4, 6, 12$ — все делят $12$ нацело.</li>'
+'<li>Числа $5, 7, 8, 9, 10, 11$ — не делители: остаток не ноль.</li>'
+'<li>Итог: $B=\\{1;2;3;4;6;12\\}$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','2.3',
'<p>Запись $\\{x\\mid\\ldots\\}$ придумали, чтобы задавать бесконечные множества. Например, множество всех чётных чисел $\\{x\\mid x$ кратно $2\\}$ нельзя задать перечислением — элементов бесконечно много. А свойством — одна строчка!</p>');
h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Свойство → множество</div></div>'
+'<div class="wg-help">Выбери множество, заданное перечислением, которое соответствует описанию.</div>'
+'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
+'<div id="p2-q" class="qbox"></div><div id="p2-opts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
+'<div class="feedback" id="p2-fb"></div></div>';
h+='<div class="wg" id="p2-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Принадлежит ли свойству?</div></div>'
+'<div class="wg-help">Принадлежит ли число множеству, заданному характеристическим свойством?</div>'
+'<div class="score-display"><span>Вопрос <b id="p2-vi">1</b> / 6</span><span>Очки: <b id="p2-vs">0</b> / 6</span></div>'
+'<div id="p2-vq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-v="1">Да, принадлежит</button><button class="btn primary" data-v="0">Нет</button></div>'
+'<div class="feedback" id="p2-vfb"></div></div>';
h+=secNav('p1','p3')+readBtn('p2');
box.innerHTML=h; renderMath(box);
(function(){
var Q=[
{d:'натуральные числа меньше 5', set:'\\{1;2;3;4\\}', wrong:['\\{0;1;2;3;4;5\\}','\\{1;2;3;4;5\\}']},
{d:'чётные числа от 1 до 10', set:'\\{2;4;6;8;10\\}', wrong:['\\{1;3;5;7;9\\}','\\{2;4;6;8\\}']},
{d:'делители числа 12', set:'\\{1;2;3;4;6;12\\}', wrong:['\\{1;2;3;4;6\\}','\\{2;3;4;6;12\\}']},
{d:'однозначные числа, кратные 3', set:'\\{3;6;9\\}', wrong:['\\{0;3;6;9\\}','\\{3;6;9;12\\}']},
{d:'нечётные числа от 1 до 7', set:'\\{1;3;5;7\\}', wrong:['\\{1;3;5\\}','\\{2;4;6\\}']}
];
var order=Q.map(function(_,k){return k;}); for(var j=order.length-1;j>0;j--){var k=_ri(0,j),t=order[j];order[j]=order[k];order[k]=t;}
var i=0,score=0,cur=null;
function show(){ if(i>=5){ document.getElementById('p2-q').innerHTML='<b>Готово!</b> '+score+' / 5'; document.getElementById('p2-opts').innerHTML=''; if(score>=4){addXp(15,'p2-iv1');bumpProgress('p2',30);}else if(score>=2){addXp(8,'p2-iv1');bumpProgress('p2',16);} return; }
cur=Q[order[i]]; document.getElementById('p2-i').textContent=i+1;
document.getElementById('p2-q').innerHTML='Какое множество — это «'+cur.d+'»?';
var opts=[cur.set,cur.wrong[0],cur.wrong[1]]; for(var j=opts.length-1;j>0;j--){var k=_ri(0,j),t=opts[j];opts[j]=opts[k];opts[k]=t;}
document.getElementById('p2-opts').innerHTML=opts.map(function(o){ return '<button class="btn primary" data-o="'+o+'">$'+o+'$</button>'; }).join('');
document.querySelectorAll('#p2-opts [data-o]').forEach(function(b){ b.addEventListener('click',function(){ ans(b.getAttribute('data-o')); }); }); renderMath(document.getElementById('p2-opts')); renderMath(document.getElementById('p2-q'));
document.getElementById('p2-fb').style.display='none'; }
function ans(o){ if(i>=5)return; var fb=document.getElementById('p2-fb');
if(o===cur.set){ score++; feedback(fb,true,'✓ Верно: $'+cur.set+'$.'); } else feedback(fb,false,'✗ Нет. Правильно: $'+cur.set+'$.');
document.getElementById('p2-s').textContent=score; i++; setTimeout(show,1400); }
show();
})();
(function(){
var PROPS=[
{t:'чётное число',f:function(n){return n%2===0;}},
{t:'число, кратное 3',f:function(n){return n%3===0;}},
{t:'число, большее 5',f:function(n){return n>5;}},
{t:'делитель числа 12',f:function(n){return 12%n===0;}},
{t:'нечётное число',f:function(n){return n%2===1;}}
];
var i=0,score=0,cur=null;
function gen(){ var p=_pick(PROPS), n=_ri(1,12); cur={p:p,n:n,ok:p.f(n)}; }
function show(){ if(i>=6){ document.getElementById('p2-vq').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p2-iv2');bumpProgress('p2',30);}else if(score>=3){addXp(8,'p2-iv2');bumpProgress('p2',16);} return; }
gen(); document.getElementById('p2-vi').textContent=i+1; document.getElementById('p2-vq').innerHTML='Принадлежит ли $'+cur.n+'$ множеству $\\{x \\mid x$ — '+cur.p.t+'$\\}$?'; renderMath(document.getElementById('p2-vq'));
document.getElementById('p2-vfb').style.display='none'; }
function ans(v){ if(i>=6)return; var fb=document.getElementById('p2-vfb'), correct=cur.ok?1:0;
if(v===correct){ score++; feedback(fb,true,'✓ Верно!'); } else feedback(fb,false,'✗ Нет. $'+cur.n+'$ '+(cur.ok?'принадлежит':'не принадлежит')+'.');
document.getElementById('p2-vs').textContent=score; i++; setTimeout(show,1300); }
document.querySelectorAll('#p2-iv2 [data-v]').forEach(function(b){ b.addEventListener('click',function(){ ans(+b.getAttribute('data-v')); }); }); show();
})();
}
/* ===================== § 3. ОПЕРАЦИИ НАД МНОЖЕСТВАМИ ===================== */
function buildP3(){
var box=document.getElementById('p3-body'); var h='';
h+=makeCard('oral','Где это в жизни','3.0',
'<p>Представь: $A$ — ученики, которые занимаются футболом, $B$ — те, кто ходит на плавание. Пересечение $A\\cap B$ — те, кто занимается обоими видами спорта. Объединение $A\\cup B$ — все, кто занимается хотя бы одним. Такие операции каждый день используют составители расписаний, маркетологи («покупатели, которые брали и A, и B») и врачи, анализируя симптомы.</p>');
h+=makeCard('theory','Пересечение и объединение','3.1',
'<p><b>Пересечение</b> $A\\cap B$ — множество элементов, принадлежащих <b>обоим</b> множествам сразу.</p>'
+'<p><b>Объединение</b> $A\\cup B$ — множество элементов, принадлежащих <b>хотя бы одному</b> из множеств.</p>'
+'<p>$A=\\{1;2;3;4\\}$, $B=\\{3;4;5;6\\}$: $A\\cap B=\\{3;4\\}$, $A\\cup B=\\{1;2;3;4;5;6\\}$.</p>');
h+=makeCard('example','Разбор по шагам','3.2',
'<p>Найти $A\\cap B$ и $A\\cup B$, если $A=\\{2;4;6;8\\}$, $B=\\{4;6;10;12\\}$.</p>'
+'<ol><li>Для <b>пересечения</b> берём только общие элементы: смотрим, что есть и в $A$, и в $B$. Это $4$ и $6$. Значит, $A\\cap B=\\{4;6\\}$.</li>'
+'<li>Для <b>объединения</b> берём все элементы из обоих: $2, 4, 6, 8$ из $A$, добавляем новые из $B$ — $10$ и $12$. Повторы ($4$ и $6$) пишем один раз.</li>'
+'<li>Итог: $A\\cup B=\\{2;4;6;8;10;12\\}$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','3.3',
'<p>Символы $\\cap$ (пересечение) и $\\cup$ (объединение) ввёл итальянский математик Джузеппе Пеано в 1888 году. Символ $\\cup$ напоминает букву U — от слова <i>union</i> (союз, объединение по-английски). Сегодня эти символы используют во всём мире в математике, логике и программировании.</p>');
h+='<div class="wg" id="p3-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Операции наглядно</div></div>'
+'<div class="wg-help">Нажми операцию — увидишь закрашенную область и результат для $A=\\{1;2;3;4\\}$, $B=\\{3;4;5;6\\}$.</div>'
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"><button class="btn primary" data-op="inter">$A\\cap B$</button><button class="btn" data-op="union">$A\\cup B$</button></div>'
+'<div id="p3-fig"></div><div id="p3-out" class="qbox"></div></div>';
h+='<div class="wg" id="p3-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Сосчитай результат</div></div>'
+'<div class="wg-help">Сколько элементов в указанном множестве?</div>'
+'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
+'<div id="p3-q" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p3-a" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p3-go">Проверить</button></div>'
+'<div class="feedback" id="p3-fb"></div></div>';
h+=secNav('p2','p4')+readBtn('p3');
box.innerHTML=h; renderMath(box);
(function(){
var A=[1,2,3,4], B=[3,4,5,6], fig=document.getElementById('p3-fig'), out=document.getElementById('p3-out');
function render(op){ var regions={aOnly:'1, 2', inter:'3, 4', bOnly:'5, 6'};
fig.innerHTML=Math6.venn({a:'A',b:'B',shade:op,regions:regions});
if(op==='inter') out.innerHTML='<div style="font-weight:700;color:var(--pri2)">$A\\cap B = \\{3;4\\}$ — общие элементы</div>';
else out.innerHTML='<div style="font-weight:700;color:var(--pri2)">$A\\cup B = \\{1;2;3;4;5;6\\}$ — все элементы</div>';
renderMath(out); }
document.querySelectorAll('#p3-iv1 [data-op]').forEach(function(b){ b.addEventListener('click',function(){ document.querySelectorAll('#p3-iv1 [data-op]').forEach(function(x){x.classList.remove('primary');}); b.classList.add('primary'); render(b.getAttribute('data-op')); }); });
render('inter');
})();
(function(){
var i=0,score=0,cur=null;
function gen(){ var A=_distinct(_ri(3,5),1,8), B=_distinct(_ri(3,5),1,8), op=_pick(['inter','union']); var r=op==='inter'?_inter(A,B):_union(A,B); cur={A:A,B:B,op:op,n:r.length}; }
function show(){ if(i>=6){ document.getElementById('p3-q').innerHTML='<b>Готово!</b> '+score+' / 6'; if(score>=5){addXp(15,'p3-iv2');bumpProgress('p3',30);}else if(score>=3){addXp(8,'p3-iv2');bumpProgress('p3',16);} return; }
gen(); document.getElementById('p3-i').textContent=i+1;
document.getElementById('p3-q').innerHTML='$A='+_setStr(cur.A)+'$, $B='+_setStr(cur.B)+'$.<br>Сколько элементов в $A'+(cur.op==='inter'?'\\cap':'\\cup')+'B$?'; renderMath(document.getElementById('p3-q'));
document.getElementById('p3-a').value=''; document.getElementById('p3-fb').style.display='none'; }
function go(){ if(i>=6)return; var fb=document.getElementById('p3-fb'), v=parseInt(document.getElementById('p3-a').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
var r=cur.op==='inter'?_inter(cur.A,cur.B):_union(cur.A,cur.B);
if(v===cur.n){ score++; feedback(fb,true,'✓ Верно: '+_setStr(r)+' — '+cur.n+' элем.'); } else feedback(fb,false,'✗ Нет. '+(cur.op==='inter'?'A\\cap B':'A\\cup B')+' = '+_setStr(r)+' ('+cur.n+').');
document.getElementById('p3-s').textContent=score; i++; setTimeout(show,1500); }
document.getElementById('p3-go').addEventListener('click',go);
document.getElementById('p3-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
}
/* ===================== § 4. КРУГИ ЭЙЛЕРА ===================== */
function buildP4(){
var box=document.getElementById('p4-body'); var h='';
h+=makeCard('oral','Где это в жизни','4.0',
'<p>Круги Эйлера — не просто красивые картинки. Врачи рисуют их, чтобы понять, у скольких пациентов сочетаются два симптома. Маркетологи — чтобы узнать, кто смотрит и кино, и сериалы. Задача «в классе 30 учеников, 18 занимаются музыкой, 14 — танцами, 5 — и тем и тем; сколько не занимаются ничем?» — классический круг Эйлера. Один рисунок заменяет три уравнения.</p>');
h+=makeCard('theory','Круги Эйлера','4.1',
'<p>Множества удобно изображать кругами (круги Эйлера). Пересекающиеся круги показывают общую часть. Если в $A$ — $a$ элементов, в $B$ — $b$, а в пересечении — $c$, то в объединении: $|A\\cup B| = a + b - c$ (общие посчитаны дважды — вычитаем один раз).</p>');
h+=makeCard('example','Разбор по шагам','4.2',
'<p>В классе 30 учеников. Математику любят 18, физику — 14, оба предмета — 6. Сколько не любят ни то, ни другое?</p>'
+'<ol><li>Рисуем два пересекающихся круга: «Математика» и «Физика».</li>'
+'<li>В центр (пересечение) пишем $6$ — те, кто любит оба.</li>'
+'<li>Только математику: $18-6=12$. Только физику: $14-6=8$.</li>'
+'<li>Любят хотя бы один предмет: $12+6+8=26$.</li>'
+'<li>Не любят ни один: $30-26=4$.</li></ol>');
h+=makeCard('theory','А знаешь ли ты?','4.3',
'<p>Круги Эйлера придумал швейцарский математик Леонард Эйлер в XVIII веке — один из самых плодовитых математиков в истории. Он опубликовал более 800 работ и продолжал трудиться, даже ослепнув на оба глаза. Его именем названы и формула $e^{i\\pi}+1=0$, и данный метод наглядного изображения множеств.</p>');
h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Задача с кругами Эйлера</div></div>'
+'<div class="wg-help">Разнеси данные по кругам и ответь на вопрос.</div>'
+'<div class="score-display"><span>Задача <b id="p4-i">1</b> / 5</span><span>Очки: <b id="p4-s">0</b> / 5</span></div>'
+'<div id="p4-fig"></div><div id="p4-q" class="qbox" style="font-size:1rem"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p4-a" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p4-go">Проверить</button></div>'
+'<div class="feedback" id="p4-fb"></div></div>';
h+='<div class="wg" id="p4-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Формула объединения</div></div>'
+'<div class="wg-help">Используй $|A\\cup B| = |A| + |B| - |A\\cap B|$.</div>'
+'<div class="score-display"><span>Задача <b id="p4-fi">1</b> / 5</span><span>Очки: <b id="p4-fs">0</b> / 5</span></div>'
+'<div id="p4-fq" class="qbox"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="p4-fa" class="tinp" style="width:80px;text-align:center"><button class="btn primary" id="p4-fgo">Проверить</button></div>'
+'<div class="feedback" id="p4-ffb"></div></div>';
h+=secNav('p3','final')+readBtn('p4');
box.innerHTML=h; renderMath(box);
(function(){
var i=0,score=0,cur=null;
function gen(){ var c=_ri(3,8), aOnly=_ri(4,12), bOnly=_ri(4,12), neither=_ri(0,6); var a=aOnly+c, b=bOnly+c, T=a+b-c+neither;
var ask=_pick(['aOnly','bOnly','neither']); cur={a:a,b:b,c:c,aOnly:aOnly,bOnly:bOnly,neither:neither,T:T,ask:ask}; }
function show(){ if(i>=5){ document.getElementById('p4-fig').innerHTML=''; document.getElementById('p4-q').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p4-iv1');bumpProgress('p4',30);}else if(score>=2){addXp(8,'p4-iv1');bumpProgress('p4',16);} return; }
gen(); document.getElementById('p4-i').textContent=i+1;
document.getElementById('p4-fig').innerHTML=Math6.venn({a:'Матем.',b:'Физика',shade:'none',regions:{aOnly:cur.aOnly,inter:cur.c,bOnly:cur.bOnly,outside:cur.neither}});
var qq={aOnly:'Сколько любят <b>только математику</b>?', bOnly:'Сколько любят <b>только физику</b>?', neither:'Сколько <b>не любят ни то, ни другое</b>?'};
document.getElementById('p4-q').innerHTML='В классе '+cur.T+' учеников: '+cur.a+' любят математику, '+cur.b+' — физику, '+cur.c+' — оба предмета. '+qq[cur.ask];
document.getElementById('p4-a').value=''; document.getElementById('p4-fb').style.display='none'; }
function go(){ if(i>=5)return; var fb=document.getElementById('p4-fb'), v=parseInt(document.getElementById('p4-a').value,10), ans=cur[cur.ask];
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===ans){ score++; feedback(fb,true,'✓ Верно: '+ans+'.'); } else feedback(fb,false,'✗ Нет. Правильно: '+ans+' (см. круги).');
document.getElementById('p4-s').textContent=score; i++; setTimeout(show,1600); }
document.getElementById('p4-go').addEventListener('click',go);
document.getElementById('p4-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
(function(){
var i=0,score=0,cur=null;
function gen(){ var c=_ri(2,8), a=c+_ri(2,10), b=c+_ri(2,10); cur={a:a,b:b,c:c,ans:a+b-c}; }
function show(){ if(i>=5){ document.getElementById('p4-fq').innerHTML='<b>Готово!</b> '+score+' / 5'; if(score>=4){addXp(15,'p4-iv2');bumpProgress('p4',30);}else if(score>=2){addXp(8,'p4-iv2');bumpProgress('p4',16);} return; }
gen(); document.getElementById('p4-fi').textContent=i+1; document.getElementById('p4-fq').innerHTML='$|A|='+cur.a+'$, $|B|='+cur.b+'$, $|A\\cap B|='+cur.c+'$. Найди $|A\\cup B|$.'; renderMath(document.getElementById('p4-fq'));
document.getElementById('p4-fa').value=''; document.getElementById('p4-ffb').style.display='none'; }
function go(){ if(i>=5)return; var fb=document.getElementById('p4-ffb'), v=parseInt(document.getElementById('p4-fa').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===cur.ans){ score++; feedback(fb,true,'✓ Верно: '+cur.a+'+'+cur.b+'−'+cur.c+'='+cur.ans+'.'); } else feedback(fb,false,'✗ Нет. '+cur.a+'+'+cur.b+'−'+cur.c+'='+cur.ans+'.');
document.getElementById('p4-fs').textContent=score; i++; setTimeout(show,1500); }
document.getElementById('p4-fgo').addEventListener('click',go);
document.getElementById('p4-fa').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
}
/* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */
function buildFinal(){
var box=document.getElementById('final-body'); var h='';
h+=makeCard('theory','Финал главы 3','★','<p>Пять боссов проверят множества, операции и круги Эйлера. Победи всех!</p>');
h+='<div class="wg" id="fin"><div class="wg-header"><span class="wg-badge">Боссы</span><div class="wg-title">Сразись с главой 3</div></div>'
+'<div class="hp-boss"><div class="hp-boss-fill" id="fin-hp" style="width:100%"></div></div>'
+'<div class="score-display"><span>Босс <b id="fin-i">1</b> / 5</span><span>Побеждено: <b id="fin-s">0</b> / 5</span></div>'
+'<div id="fin-name" style="font-weight:800;color:#b91c1c;text-align:center;margin-bottom:6px"></div>'
+'<div id="fin-q" class="boss-q"></div>'
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="number" id="fin-a" class="tinp" style="width:120px;text-align:center" placeholder="ответ"><button class="btn primary" id="fin-go">Удар!</button></div>'
+'<div class="feedback" id="fin-fb"></div></div>';
h+=secNav('p4',null)+readBtn('final','Завершить главу 3 (+10 XP)');
box.innerHTML=h; renderMath(box);
(function(){
var bosses=[
function(){ var A=_distinct(_ri(4,6),1,9); return {name:'Счётчик', q:'Сколько элементов в множестве $'+_setStr(A)+'$?', ans:A.length}; },
function(){ var A=_distinct(4,1,8),B=_distinct(4,1,8); return {name:'Пересечение', q:'$A='+_setStr(A)+'$, $B='+_setStr(B)+'$. Сколько элементов в $A\\cap B$?', ans:_inter(A,B).length}; },
function(){ var A=_distinct(4,1,8),B=_distinct(4,1,8); return {name:'Объединение', q:'$A='+_setStr(A)+'$, $B='+_setStr(B)+'$. Сколько элементов в $A\\cup B$?', ans:_union(A,B).length}; },
function(){ var c=_ri(2,7),a=c+_ri(2,9),b=c+_ri(2,9); return {name:'Эйлер', q:'$|A|='+a+'$, $|B|='+b+'$, $|A\\cap B|='+c+'$. Найди $|A\\cup B|$.', ans:a+b-c}; },
function(){ var c=_ri(3,7),aOnly=_ri(5,12),bOnly=_ri(5,12),nei=_ri(1,5); var a=aOnly+c,b=bOnly+c,T=a+b-c+nei; return {name:'Класс', q:'В классе '+T+' человек: '+a+' играют в шахматы, '+b+' — в шашки, '+c+' — в обе игры. Сколько не играют ни в одну?', ans:nei}; }
];
var i=0,score=0,cur=null,done=false;
function show(){ if(i>=5){ done=true; document.getElementById('fin-name').textContent=''; document.getElementById('fin-q').innerHTML=(score>=4?'<b>Победа!</b> Глава 3 пройдена. ':'<b>Бой окончен.</b> ')+'Побеждено боссов: '+score+' / 5.'; document.getElementById('fin-hp').style.width=(score>=4?0:40)+'%';
if(score>=4){ addXp(40,'final'); bumpProgress('final',100); if(window.confetti)try{confetti();}catch(e){} } else bumpProgress('final',60); return; }
cur=bosses[i](); document.getElementById('fin-i').textContent=i+1; document.getElementById('fin-s').textContent=score;
document.getElementById('fin-name').textContent='Босс '+(i+1)+': '+cur.name; document.getElementById('fin-hp').style.width=(100-i*20)+'%';
document.getElementById('fin-q').innerHTML=cur.q; renderMath(document.getElementById('fin-q'));
document.getElementById('fin-a').value=''; document.getElementById('fin-fb').style.display='none'; }
function go(){ if(done||i>=5)return; var fb=document.getElementById('fin-fb'), v=parseInt(document.getElementById('fin-a').value,10);
if(isNaN(v)){ feedback(fb,false,'Введи число.'); return; }
if(v===cur.ans){ score++; feedback(fb,true,'✓ Босс повержен! Ответ '+cur.ans+'.'); } else feedback(fb,false,'✗ Босс устоял. Верно: '+cur.ans+'.');
document.getElementById('fin-s').textContent=score; i++; setTimeout(show,1400); }
document.getElementById('fin-go').addEventListener('click',go);
document.getElementById('fin-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
})();
}
/* ===================== ДАННЫЕ ===================== */
var SIDEBARS = {
p1:{ title:'Шпаргалка § 1', rows:[ ['Множество','набор различных элементов'], ['$\\in$','принадлежит'], ['$\\notin$','не принадлежит'], ['$\\varnothing$','пустое множество'], ['Равенство','одни и те же элементы'] ]},
p2:{ title:'Шпаргалка § 2', rows:[ ['Перечисление','$\\{2;4;6\\}$'], ['Свойство','$\\{x\\mid x$ чётное$\\}$'], ['Читается','«$x$ такие, что …»'] ]},
p3:{ title:'Шпаргалка § 3', rows:[ ['$A\\cap B$','общие элементы (и в A, и в B)'], ['$A\\cup B$','все элементы (хотя бы в одном)'], ['Пример','$\\{1;2;3;4\\}\\cap\\{3;4;5\\}=\\{3;4\\}$'] ]},
p4:{ title:'Шпаргалка § 4', rows:[ ['Круги Эйлера','наглядное изображение множеств'], ['Объединение','$|A\\cup B|=|A|+|B|-|A\\cap B|$'], ['Только A','$|A|-|A\\cap B|$'] ]},
final:{ title:'Финал главы 3', rows:[ ['5 боссов','множества, операции, круги Эйлера'], ['Победа','4 из 5 и больше'], ['Награда','+40 XP и достижение «Глава 3 пройдена»'] ]}
};
var TIPS = [
{ sec:'p1', html:'В множестве элементы <b>различны</b> и порядок не важен: $\\{1;2;3\\}=\\{3;2;1\\}$, а повтор не добавляет нового элемента.' },
{ sec:'p2', html:'Характеристическое свойство $\\{x\\mid \\ldots\\}$ читается «множество всех $x$ таких, что …». Проверь признак для каждого числа.' },
{ sec:'p3', html:'Пересечение — «И» (элемент в обоих). Объединение — «ИЛИ» (хотя бы в одном). При объединении общие элементы пишут один раз.' },
{ sec:'p4', html:'Начинай с пересечения (центр). «Только A» = всё A минус пересечение. Не забывай тех, кто вне обоих кругов.' }
];
var GLOSSARY = [
{ term:'множество', def:'Набор различных объектов (элементов), объединённых признаком.', sec:'p1', aliases:['множество','множества','множеств','множестве','множеству'] },
{ term:'элемент', def:'Объект, входящий в множество. $a\\in A$ — $a$ принадлежит $A$.', sec:'p1', aliases:['элемент','элемента','элементы','элементов'] },
{ term:'пустое множество', def:'Множество без элементов, обозначается $\\varnothing$.', sec:'p1', aliases:['пустое множество','пустого множества','пустым множеством'] },
{ term:'пересечение', def:'$A\\cap B$ — элементы, принадлежащие обоим множествам.', sec:'p3', aliases:['пересечение','пересечения','пересечении'] },
{ term:'объединение', def:'$A\\cup B$ — элементы, принадлежащие хотя бы одному множеству.', sec:'p3', aliases:['объединение','объединения','объединении'] },
{ term:'круги Эйлера', def:'Изображение множеств кругами; пересечение — общая область.', sec:'p4', aliases:['круги эйлера','кругов эйлера','кругами эйлера','круги Эйлера'] }
];
var BUILDERS = { p1:buildP1, p2:buildP2, p3:buildP3, p4:buildP4, final:buildFinal };
Object.assign(window.M6, { sidebars:SIDEBARS, tips:TIPS, glossary:GLOSSARY, builders:BUILDERS });
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink