Maxim Dolgolyov
203807ada8
§1 множество/элементы/∅ (∈ или ∉ + счёт элементов); §2 способы задания (свойство→множество + проверка по свойству); §3 операции ∩/∪ (наглядно через Math6.venn + счёт результата); §4 круги Эйлера (задача с числами в областях + формула |A∪B|=|A|+|B|−|A∩B|); финал — 5 боссов. Добавлен Math6.venn (две окружности с заливкой областей и числами). Тесты math6: 16/16. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
383 lines
37 KiB
HTML
383 lines
37 KiB
HTML
<!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_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>↑↓</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('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('rule','Пустое множество','1.2',
|
||
'<p><b>Пустое множество</b> $\\varnothing$ не содержит ни одного элемента (например, множество натуральных решений уравнения $x+1=0$).</p>'
|
||
+'<p>Множества <b>равны</b>, если состоят из одних и тех же элементов; порядок и повторы не важны: $\\{1;2;3\\}=\\{3;1;2\\}$.</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+=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();
|
||
})();
|
||
}
|
||
|
||
/* ===================== § 2. СПОСОБЫ ЗАДАНИЯ МНОЖЕСТВ ===================== */
|
||
function buildP2(){
|
||
var box=document.getElementById('p2-body'); var h='';
|
||
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+='<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('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+='<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('theory','Круги Эйлера','4.1',
|
||
'<p>Множества удобно изображать кругами (круги Эйлера). Пересекающиеся круги показывают общую часть. Если в $A$ — $a$ элементов, в $B$ — $b$, а в пересечении — $c$, то в объединении: $|A\\cup B| = a + b - c$ (общие посчитаны дважды — вычитаем один раз).</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>
|