feat(alg10 W2): §5-§7 главы 1 (графики sin/cos/tg/ctg + обратные)
Реализованы 3 параграфа главы 1: §5 y = sin x и y = cos x. Свойства и графики: - Большой график sin x на [-2π;2π] с отметками экстремумов (640x240, ALG10.func.canvas + plot) - График cos x с тем же оформлением - Совмещённый график sin/cos с легендой и точкой пересечения π/4 - Полные таблицы свойств (D, E, период, чётность, нули, монотонность) - Алгоритм преобразований y = A·sin(ωx+φ) + b - Интерактив 1: 4 ползунка (A/ω/φ/b) → real-time перерисовка графика с базовым sin пунктиром для сравнения - Интерактив 2: 7 заданий на свойства - Босс §5: 5 этапов §6 y = tg x и y = ctg x. Свойства и графики: - График tg x с авто-обрывами у асимптот (±12 порог) + красные вертикальные асимптоты - График ctg x аналогично - Таблицы свойств с подсветкой ключевых отличий (период π!) - Интерактив 1: 6 заданий на свойства - Интерактив 2: сравнение значений по графику (< / = / >) с использованием монотонности (tg возр., ctg убыв.) - Босс §6: 5 этапов §7 Арксинус, арккосинус, арктангенс, арккотангенс: - 4 маленьких графика 280x240 (arcsin/arccos/arctg/arcctg) с правильными областями значений [-π/2;π/2] / [0;π] - Таблицы главных значений для sin/cos - Подсветка: arccos и arcctg НЕ нечётные - Связки: arcsin a + arccos a = π/2 - Интерактив 1: 8 заданий на главные значения - Интерактив 2: arcsin(sin α) — тонкая разница, 5 заданий - Босс §7: 5 этапов (включая тонкий вопрос про arcsin(sin(5π/6))) Обновлены ACH_LABELS (+p5/p6/p7_done), bumpProgress, SIDEBARS (шпаргалки), TIPS (подсказки для каждого §). Файл вырос с 96 KB до 141 KB (1321 → 1888 строк).
This commit is contained in:
Maxim Dolgolyov
@@ -252,6 +252,9 @@ const ACH_LABELS = {
|
||||
p2_done:'sin α и cos α — на ладони!',
|
||||
p3_done:'tg α и ctg α — понимаешь!',
|
||||
p4_done:'Тождества — твои!',
|
||||
p5_done:'Графики sin x и cos x — мастер!',
|
||||
p6_done:'Графики tg x и ctg x — знаешь!',
|
||||
p7_done:'Обратные тригонометрические — освоены!',
|
||||
ch1_done:'Глава 1 — Тригонометрия пройдена!',
|
||||
};
|
||||
|
||||
@@ -279,6 +282,9 @@ function bumpProgress(key, delta){
|
||||
else if(key==='p2') achievement('p2_done');
|
||||
else if(key==='p3') achievement('p3_done');
|
||||
else if(key==='p4') achievement('p4_done');
|
||||
else if(key==='p5') achievement('p5_done');
|
||||
else if(key==='p6') achievement('p6_done');
|
||||
else if(key==='p7') achievement('p7_done');
|
||||
else if(key==='final1') achievement('ch1_done');
|
||||
}
|
||||
}
|
||||
@@ -355,9 +361,7 @@ function buildParaSelector(){
|
||||
|
||||
const BUILT=new Set();
|
||||
const BUILDERS = { p1:()=>buildP1(), p2:()=>buildP2(), p3:()=>buildP3(), p4:()=>buildP4(),
|
||||
p5:()=>buildStub('p5','§5 — Графики функций sin x и cos x'),
|
||||
p6:()=>buildStub('p6','§6 — Графики функций tg x и ctg x'),
|
||||
p7:()=>buildStub('p7','§7 — Арксинус, арккосинус, арктангенс, арккотангенс'),
|
||||
p5:()=>buildP5(), p6:()=>buildP6(), p7:()=>buildP7(),
|
||||
p8:()=>buildStub('p8','§8 — Тригонометрические уравнения'),
|
||||
p9:()=>buildStub('p9','§9 — Формулы приведения'),
|
||||
p10:()=>buildStub('p10','§10 — Синус, косинус, тангенс суммы и разности'),
|
||||
@@ -411,6 +415,36 @@ const SIDEBARS = {
|
||||
['Связь','$\\tg\\alpha \\cdot \\ctg\\alpha = 1$'],
|
||||
['Знать одно','найти все 4'],
|
||||
]},
|
||||
p5:{title:'Шпаргалка §5',rows:[
|
||||
['Период','$T = 2\\pi$'],
|
||||
['$D(\\sin)$','$\\mathbb{R}$'],
|
||||
['$E(\\sin)$','$[-1;\\,1]$'],
|
||||
['sin — нечётная','$\\sin(-x) = -\\sin x$'],
|
||||
['cos — чётная','$\\cos(-x) = \\cos x$'],
|
||||
['Нули sin','$x = \\pi n$'],
|
||||
['Нули cos','$x = \\frac{\\pi}{2} + \\pi n$'],
|
||||
['Связь','$\\cos x = \\sin(x + \\frac{\\pi}{2})$'],
|
||||
]},
|
||||
p6:{title:'Шпаргалка §6',rows:[
|
||||
['Период tg / ctg','$T = \\pi$'],
|
||||
['$D(\\tg)$','$x \\ne \\frac{\\pi}{2} + \\pi n$'],
|
||||
['$D(\\ctg)$','$x \\ne \\pi n$'],
|
||||
['$E(\\tg) = E(\\ctg)$','$\\mathbb{R}$'],
|
||||
['Асимптоты tg','$x = \\frac{\\pi}{2} + \\pi n$'],
|
||||
['Асимптоты ctg','$x = \\pi n$'],
|
||||
['tg — нечётная','$\\tg(-x) = -\\tg x$'],
|
||||
['ctg — нечётная','$\\ctg(-x) = -\\ctg x$'],
|
||||
]},
|
||||
p7:{title:'Шпаргалка §7',rows:[
|
||||
['$\\arcsin a$','$\\in [-\\frac{\\pi}{2};\\,\\frac{\\pi}{2}]$, $a \\in [-1;1]$'],
|
||||
['$\\arccos a$','$\\in [0;\\,\\pi]$, $a \\in [-1;1]$'],
|
||||
['$\\arctg a$','$\\in (-\\frac{\\pi}{2};\\,\\frac{\\pi}{2})$, $a \\in \\mathbb{R}$'],
|
||||
['$\\arcctg a$','$\\in (0;\\,\\pi)$, $a \\in \\mathbb{R}$'],
|
||||
['Связь','$\\arcsin a + \\arccos a = \\frac{\\pi}{2}$'],
|
||||
['','$\\arctg a + \\arcctg a = \\frac{\\pi}{2}$'],
|
||||
['Нечётные','$\\arcsin(-a) = -\\arcsin a$, $\\arctg$'],
|
||||
['Не нечётные','$\\arccos(-a) = \\pi - \\arccos a$'],
|
||||
]},
|
||||
};
|
||||
|
||||
const TIPS=[
|
||||
@@ -418,6 +452,9 @@ const TIPS=[
|
||||
{sec:'p2',html:'Запомни: <b>sin = ордината (y)</b>, <b>cos = абсцисса (x)</b>. Точка $P_\\alpha$ — это и есть пара $(\\cos\\alpha;\\,\\sin\\alpha)$.'},
|
||||
{sec:'p3',html:'<b>Ось тангенсов</b> — касательная к окружности при $x=1$. Продолжение радиуса $OP_\\alpha$ упирается в эту ось — там и сидит значение tg α.'},
|
||||
{sec:'p4',html:'Алгоритм «знаю одну → найду все»: 1) основное тождество даёт пару sin/cos; 2) знак выбираем по четверти; 3) tg = sin/cos; 4) ctg = 1/tg.'},
|
||||
{sec:'p5',html:'$\\cos x$ — это $\\sin x$, сдвинутый <b>влево на $\\frac{\\pi}{2}$</b>. Графики выглядят одинаково, но смещены: где у sin ноль — у cos максимум, и наоборот.'},
|
||||
{sec:'p6',html:'<b>tg x</b> имеет вертикальные асимптоты в $\\frac{\\pi}{2} + \\pi n$ (там, где $\\cos x = 0$). <b>ctg x</b> — в $\\pi n$ (там, где $\\sin x = 0$). Период <b>$\\pi$</b>, а не $2\\pi$ — это короче, чем у sin/cos.'},
|
||||
{sec:'p7',html:'Главные значения: $\\arcsin$ и $\\arctg$ — <b>от $-\\frac{\\pi}{2}$ до $\\frac{\\pi}{2}$</b>; $\\arccos$ и $\\arcctg$ — <b>от $0$ до $\\pi$</b>. Это всегда!'},
|
||||
];
|
||||
|
||||
function buildSidebar(id){
|
||||
@@ -1338,6 +1375,560 @@ function buildP4(){
|
||||
wireReadBtn('p4');
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
§ 5 — Функции y = sin x и y = cos x. Свойства и графики
|
||||
============================================================ */
|
||||
function buildP5(){
|
||||
const box = document.getElementById('p5-body');
|
||||
const A = window.ALG10;
|
||||
let html = '';
|
||||
|
||||
/* === SVG 1: график y = sin x на [-2π; 2π] === */
|
||||
let svgSin = '';
|
||||
if(A){
|
||||
const f = A.func.canvas({id:'p5-sin', W:640, H:240, xRange:[-2*Math.PI, 2*Math.PI], yRange:[-1.6, 1.6], bg:'#fff'});
|
||||
let s = f.open
|
||||
+ f.grid({xStep:Math.PI/2, yStep:0.5, color:'#f1f5f9'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[
|
||||
{val:-2*Math.PI, label:'-2π'},{val:-3*Math.PI/2, label:'-3π/2'},
|
||||
{val:-Math.PI, label:'-π'},{val:-Math.PI/2, label:'-π/2'},
|
||||
{val:Math.PI/2, label:'π/2'},{val:Math.PI, label:'π'},
|
||||
{val:3*Math.PI/2, label:'3π/2'},{val:2*Math.PI, label:'2π'}
|
||||
],
|
||||
yTicks:[{val:-1, label:'-1'}, {val:1, label:'1'}]
|
||||
})
|
||||
/* Полупрозрачные горизонтальные полоски области значений */
|
||||
+ '<line x1="0" y1="'+f.pxY(1)+'" x2="'+f.W+'" y2="'+f.pxY(1)+'" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 3"/>'
|
||||
+ '<line x1="0" y1="'+f.pxY(-1)+'" x2="'+f.W+'" y2="'+f.pxY(-1)+'" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 3"/>'
|
||||
+ f.plot(x => Math.sin(x), {color:'#0d9488', width:2.8})
|
||||
/* Точки максимума и минимума */
|
||||
+ f.pointXY(Math.PI/2, 1, {color:'#dc2626', r:3.5, label:'max', dx:6, dy:-8, fontSize:10})
|
||||
+ f.pointXY(-Math.PI/2, -1, {color:'#dc2626', r:3.5, label:'min', dx:6, dy:14, fontSize:10})
|
||||
+ f.pointXY(3*Math.PI/2, -1, {color:'#dc2626', r:3.5})
|
||||
+ f.pointXY(-3*Math.PI/2, 1, {color:'#dc2626', r:3.5})
|
||||
+ f.close;
|
||||
svgSin = s;
|
||||
}
|
||||
|
||||
/* === SVG 2: график y = cos x === */
|
||||
let svgCos = '';
|
||||
if(A){
|
||||
const f = A.func.canvas({id:'p5-cos', W:640, H:240, xRange:[-2*Math.PI, 2*Math.PI], yRange:[-1.6, 1.6], bg:'#fff'});
|
||||
let s = f.open
|
||||
+ f.grid({xStep:Math.PI/2, yStep:0.5, color:'#f1f5f9'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[
|
||||
{val:-2*Math.PI, label:'-2π'},{val:-Math.PI, label:'-π'},
|
||||
{val:Math.PI, label:'π'},{val:2*Math.PI, label:'2π'}
|
||||
],
|
||||
yTicks:[{val:-1, label:'-1'}, {val:1, label:'1'}]
|
||||
})
|
||||
+ '<line x1="0" y1="'+f.pxY(1)+'" x2="'+f.W+'" y2="'+f.pxY(1)+'" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 3"/>'
|
||||
+ '<line x1="0" y1="'+f.pxY(-1)+'" x2="'+f.W+'" y2="'+f.pxY(-1)+'" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3 3"/>'
|
||||
+ f.plot(x => Math.cos(x), {color:'#0891b2', width:2.8})
|
||||
+ f.pointXY(0, 1, {color:'#dc2626', r:3.5, label:'max', dx:6, dy:-8, fontSize:10})
|
||||
+ f.pointXY(Math.PI, -1, {color:'#dc2626', r:3.5, label:'min', dx:6, dy:14, fontSize:10})
|
||||
+ f.pointXY(-Math.PI, -1, {color:'#dc2626', r:3.5})
|
||||
+ f.pointXY(2*Math.PI, 1, {color:'#dc2626', r:3.5})
|
||||
+ f.pointXY(-2*Math.PI, 1, {color:'#dc2626', r:3.5})
|
||||
+ f.close;
|
||||
svgCos = s;
|
||||
}
|
||||
|
||||
/* === SVG 3: совмещённые sin и cos === */
|
||||
let svgBoth = '';
|
||||
if(A){
|
||||
const f = A.func.canvas({id:'p5-both', W:640, H:240, xRange:[-2*Math.PI, 2*Math.PI], yRange:[-1.6, 1.6], bg:'#fff'});
|
||||
let s = f.open
|
||||
+ f.grid({xStep:Math.PI/2, yStep:0.5, color:'#f1f5f9'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[{val:-Math.PI, label:'-π'},{val:Math.PI, label:'π'},{val:2*Math.PI, label:'2π'}],
|
||||
yTicks:[{val:-1, label:'-1'}, {val:1, label:'1'}]
|
||||
})
|
||||
+ f.plot(x => Math.sin(x), {color:'#0d9488', width:2.5})
|
||||
+ f.plot(x => Math.cos(x), {color:'#0891b2', width:2.5, dash:'5 4'})
|
||||
/* Точка пересечения при x = π/4: sin = cos = √2/2 */
|
||||
+ f.pointXY(Math.PI/4, Math.sqrt(2)/2, {color:'#dc2626', r:4, label:'π/4', dx:6, dy:-6, fontSize:10})
|
||||
/* Легенда */
|
||||
+ '<rect x="'+(f.W-130)+'" y="10" width="120" height="46" rx="6" fill="#fff" stroke="#cbd5e1" stroke-width="1"/>'
|
||||
+ '<line x1="'+(f.W-120)+'" y1="25" x2="'+(f.W-100)+'" y2="25" stroke="#0d9488" stroke-width="2.5"/>'
|
||||
+ '<text x="'+(f.W-94)+'" y="29" font-size="12" font-family="JetBrains Mono,monospace" fill="#0d9488" font-weight="700">sin x</text>'
|
||||
+ '<line x1="'+(f.W-120)+'" y1="45" x2="'+(f.W-100)+'" y2="45" stroke="#0891b2" stroke-width="2.5" stroke-dasharray="5 4"/>'
|
||||
+ '<text x="'+(f.W-94)+'" y="49" font-size="12" font-family="JetBrains Mono,monospace" fill="#0891b2" font-weight="700">cos x</text>'
|
||||
+ f.close;
|
||||
svgBoth = s;
|
||||
}
|
||||
|
||||
html += makeCard('rule', 'Свойства функции y = sin x', '5.1', `
|
||||
<p>На каждом числе $x$ значение $\\sin x$ — это ордината точки $P_x$ единичной окружности.</p>
|
||||
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:.92rem">
|
||||
<tr style="background:var(--sec-acc-soft)"><th style="padding:6px;border:1px solid var(--border);text-align:left">Свойство</th><th style="padding:6px;border:1px solid var(--border);text-align:left">Значение</th></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Область определения</b></td><td style="padding:6px;border:1px solid var(--border)">$D(\\sin) = \\mathbb{R}$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Область значений</b></td><td style="padding:6px;border:1px solid var(--border)">$E(\\sin) = [-1;\\,1]$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Период</b></td><td style="padding:6px;border:1px solid var(--border)">$T = 2\\pi$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Чётность</b></td><td style="padding:6px;border:1px solid var(--border)">Нечётная: $\\sin(-x) = -\\sin x$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Нули</b></td><td style="padding:6px;border:1px solid var(--border)">$x = \\pi n$, $n \\in \\mathbb{Z}$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Возрастает</b></td><td style="padding:6px;border:1px solid var(--border)">на $\\left[-\\frac{\\pi}{2} + 2\\pi n;\\,\\frac{\\pi}{2} + 2\\pi n\\right]$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>max</b></td><td style="padding:6px;border:1px solid var(--border)">$1$ при $x = \\frac{\\pi}{2} + 2\\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>min</b></td><td style="padding:6px;border:1px solid var(--border)">$-1$ при $x = -\\frac{\\pi}{2} + 2\\pi n$</td></tr>
|
||||
</table>`);
|
||||
|
||||
html += makeCard('rule', 'График y = sin x', '5.2', `
|
||||
<p>График — <b>синусоида</b>. Повторяется каждые $2\\pi$.</p>
|
||||
<div class="svg-host">${svgSin}</div>
|
||||
<p>Красные точки — экстремумы. Кривая всегда лежит между $y = -1$ и $y = 1$.</p>`);
|
||||
|
||||
html += makeCard('rule', 'Свойства y = cos x', '5.3', `
|
||||
<p>Свойства аналогичны синусу, но с двумя ключевыми отличиями:</p>
|
||||
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:.92rem">
|
||||
<tr style="background:var(--sec-acc-soft)"><th style="padding:6px;border:1px solid var(--border);text-align:left">Свойство</th><th style="padding:6px;border:1px solid var(--border);text-align:left">Значение</th></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Область определения</b></td><td style="padding:6px;border:1px solid var(--border)">$D(\\cos) = \\mathbb{R}$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Область значений</b></td><td style="padding:6px;border:1px solid var(--border)">$E(\\cos) = [-1;\\,1]$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Период</b></td><td style="padding:6px;border:1px solid var(--border)">$T = 2\\pi$</td></tr>
|
||||
<tr style="background:var(--warn-bg)"><td style="padding:6px;border:1px solid var(--border)"><b>Чётность</b></td><td style="padding:6px;border:1px solid var(--border)"><b>Чётная: $\\cos(-x) = \\cos x$</b></td></tr>
|
||||
<tr style="background:var(--warn-bg)"><td style="padding:6px;border:1px solid var(--border)"><b>Нули</b></td><td style="padding:6px;border:1px solid var(--border)">$x = \\frac{\\pi}{2} + \\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>max</b></td><td style="padding:6px;border:1px solid var(--border)">$1$ при $x = 2\\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>min</b></td><td style="padding:6px;border:1px solid var(--border)">$-1$ при $x = \\pi + 2\\pi n$</td></tr>
|
||||
</table>`);
|
||||
|
||||
html += makeCard('rule', 'График y = cos x', '5.4', `
|
||||
<p>График $y = \\cos x$ — та же синусоида, но <b>сдвинутая на $\\dfrac{\\pi}{2}$ влево</b>.</p>
|
||||
<div class="svg-host">${svgCos}</div>
|
||||
<p>Это значит: $\\cos x = \\sin\\left(x + \\dfrac{\\pi}{2}\\right)$.</p>
|
||||
<div class="svg-host">${svgBoth}</div>
|
||||
<p>На совмещённом графике видно: где у $\\sin x$ нули — у $\\cos x$ экстремумы, и наоборот.</p>`);
|
||||
|
||||
html += makeCard('algo', 'Преобразования графиков', '5.5', `
|
||||
<p>Общий вид: $y = A \\sin(\\omega x + \\varphi) + b$, где:</p>
|
||||
<ul style="padding-left:22px;line-height:1.85">
|
||||
<li><b>$A$</b> — <b>амплитуда</b>: растяжение по оси $y$. $E = [-|A| + b;\\,|A| + b]$.</li>
|
||||
<li><b>$\\omega$</b> — <b>частота</b>: новый период $T = \\dfrac{2\\pi}{|\\omega|}$.</li>
|
||||
<li><b>$\\varphi$</b> — <b>начальная фаза</b>: сдвиг по оси $x$ на $-\\dfrac{\\varphi}{\\omega}$.</li>
|
||||
<li><b>$b$</b> — сдвиг по оси $y$ (вверх или вниз).</li>
|
||||
</ul>
|
||||
<p>Поэкспериментируй с параметрами на следующем интерактиве!</p>`);
|
||||
|
||||
/* === ИНТЕРАКТИВ 1: Slider-эксперимент === */
|
||||
html += '<div class="wg" id="p5-iv1">'
|
||||
+'<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">y = A · sin(ωx + φ) + b — крути параметры</div></div>'
|
||||
+'<div class="wg-help">Двигай ползунки и смотри, как меняется график синусоиды.</div>'
|
||||
+'<div class="slider-ctrl"><label>A (амплитуда):</label><input type="range" id="p5-A" min="-3" max="3" step="0.1" value="1"><span class="val" id="p5-Av">1.0</span></div>'
|
||||
+'<div class="slider-ctrl"><label>ω (частота):</label><input type="range" id="p5-w" min="0.25" max="3" step="0.05" value="1"><span class="val" id="p5-wv">1.00</span></div>'
|
||||
+'<div class="slider-ctrl"><label>φ (фаза):</label><input type="range" id="p5-ph" min="-3.14" max="3.14" step="0.05" value="0"><span class="val" id="p5-phv">0.00</span></div>'
|
||||
+'<div class="slider-ctrl"><label>b (сдвиг):</label><input type="range" id="p5-b" min="-2" max="2" step="0.1" value="0"><span class="val" id="p5-bv">0.0</span></div>'
|
||||
+'<div id="p5-formula" style="text-align:center;font-family:JetBrains Mono,monospace;font-size:1rem;color:var(--pri2);margin:10px 0;padding:8px;background:var(--sec-acc-soft);border-radius:8px"></div>'
|
||||
+'<div class="svg-host" id="p5-iv1-svg"></div>'
|
||||
+'</div>';
|
||||
|
||||
/* === ИНТЕРАКТИВ 2: Найди свойство === */
|
||||
html += '<div class="wg" id="p5-iv2">'
|
||||
+'<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Свойства функций sin x и cos x</div></div>'
|
||||
+'<div class="wg-help">Ответы — числа (период в виде «2pi», «pi/2» и т.д.), названия («чётная»/«нечётная»), или градусы.</div>'
|
||||
+trainerHTML('p5-iv2', 7, 'ответ')
|
||||
+'</div>';
|
||||
|
||||
/* === БОСС === */
|
||||
html += '<h3 style="font-family:Unbounded,sans-serif;font-size:1.05rem;color:var(--pri2);margin:20px 0 12px">Босс §5 — Графики sin и cos</h3>';
|
||||
html += makeBoss('p5', {
|
||||
color:'#0d9488',
|
||||
title:'Босс §5 — Графики sin и cos',
|
||||
steps:[
|
||||
{ q:'Период функции $y = \\sin 2x$ — введи как pi/n или 2pi/n.', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi'||s==='π';}, hint:'$T = 2\\pi / \\omega = 2\\pi / 2 = \\pi$.' },
|
||||
{ q:'$y = \\cos x$ — чётная или нечётная? Введи слово.', verify:(v)=>String(v).trim().toLowerCase().startsWith('чёт')||String(v).trim().toLowerCase().startsWith('чет'), hint:'$\\cos(-x) = \\cos x$.' },
|
||||
{ q:'На каком из промежутков $[0;\\,2\\pi]$ функция $\\sin x$ <b>возрастает</b>? Введи правую границу как градусы: $\\pi/2$ → 90.', verify:(v)=>+v===90, hint:'$\\sin x$ возрастает на $[0; \\pi/2]$.' },
|
||||
{ q:'Чему равно $\\sin\\left(\\dfrac{\\pi}{2} + 4\\pi\\right)$? (используй период)', verify:(v)=>+v===1, hint:'$4\\pi = 2 \\cdot 2\\pi$ — два полных периода. Эквивалентно $\\sin\\frac{\\pi}{2} = 1$.' },
|
||||
{ q:'Сколько корней у уравнения $\\sin x = 0$ на $[0;\\,2\\pi]$?', verify:(v)=>+v===3, hint:'$x = 0, \\pi, 2\\pi$.' },
|
||||
]
|
||||
});
|
||||
|
||||
html += secNav('p4', 'p6') + readButton('p5');
|
||||
box.innerHTML = html; renderMath(box);
|
||||
|
||||
/* IV1: slider experiment */
|
||||
(function(){
|
||||
const A_in = document.getElementById('p5-A');
|
||||
const w_in = document.getElementById('p5-w');
|
||||
const ph_in = document.getElementById('p5-ph');
|
||||
const b_in = document.getElementById('p5-b');
|
||||
const Av = document.getElementById('p5-Av');
|
||||
const wv = document.getElementById('p5-wv');
|
||||
const phv = document.getElementById('p5-phv');
|
||||
const bv = document.getElementById('p5-bv');
|
||||
const formula = document.getElementById('p5-formula');
|
||||
const svgHost = document.getElementById('p5-iv1-svg');
|
||||
function redraw(){
|
||||
if(!A) return;
|
||||
const Av0 = parseFloat(A_in.value);
|
||||
const wv0 = parseFloat(w_in.value);
|
||||
const phv0 = parseFloat(ph_in.value);
|
||||
const bv0 = parseFloat(b_in.value);
|
||||
Av.textContent = Av0.toFixed(1);
|
||||
wv.textContent = wv0.toFixed(2);
|
||||
phv.textContent = phv0.toFixed(2);
|
||||
bv.textContent = bv0.toFixed(1);
|
||||
formula.textContent = 'y = ' + Av0.toFixed(1) + ' · sin(' + wv0.toFixed(2) + 'x + ' + phv0.toFixed(2) + ') + ' + bv0.toFixed(1);
|
||||
const f = A.func.canvas({id:'p5-iv1-c', W:640, H:240, xRange:[-2*Math.PI, 2*Math.PI], yRange:[-4.5, 4.5], bg:'#fff'});
|
||||
let svg = f.open
|
||||
+ f.grid({xStep:Math.PI/2, yStep:1, color:'#f1f5f9'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[{val:-Math.PI, label:'-π'},{val:Math.PI, label:'π'},{val:2*Math.PI, label:'2π'}],
|
||||
yTicks:[{val:-3, label:'-3'},{val:-1, label:'-1'},{val:1, label:'1'},{val:3, label:'3'}]
|
||||
})
|
||||
/* Базовый sin x пунктиром */
|
||||
+ f.plot(x => Math.sin(x), {color:'#cbd5e1', width:1.5, dash:'4 3'})
|
||||
/* Преобразованный график */
|
||||
+ f.plot(x => Av0 * Math.sin(wv0 * x + phv0) + bv0, {color:'#0d9488', width:2.8})
|
||||
+ f.close;
|
||||
svgHost.innerHTML = svg;
|
||||
}
|
||||
[A_in, w_in, ph_in, b_in].forEach(el => el.addEventListener('input', redraw));
|
||||
redraw();
|
||||
})();
|
||||
|
||||
/* IV2: properties */
|
||||
makeTrainer({
|
||||
idPrefix:'p5-iv2',
|
||||
parser:(v)=>v,
|
||||
questions:[
|
||||
{ q:'Чему равен период функции $y = \\sin x$? (введи как 2pi)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='2pi'||s==='2π';}, show:'$2\\pi$' },
|
||||
{ q:'Период функции $y = \\cos 3x$? (введи как 2pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='2pi/3'||s==='2π/3';}, show:'$2\\pi/3$' },
|
||||
{ q:'$y = \\sin x$ — чётная или нечётная? Введи слово.', a:(v)=>String(v).trim().toLowerCase().startsWith('нечёт')||String(v).trim().toLowerCase().startsWith('нечет'), show:'нечётная' },
|
||||
{ q:'$y = \\cos x$ — чётная или нечётная? Введи слово.', a:(v)=>String(v).trim().toLowerCase().startsWith('чёт')||String(v).trim().toLowerCase().startsWith('чет'), show:'чётная' },
|
||||
{ q:'Сколько нулей у $\\sin x$ на $[0;\\,2\\pi]$?', a:(v)=>+v===3, show:'3 (это $0, \\pi, 2\\pi$)' },
|
||||
{ q:'Сколько нулей у $\\cos x$ на $[0;\\,2\\pi]$?', a:(v)=>+v===2, show:'2 (это $\\pi/2, 3\\pi/2$)' },
|
||||
{ q:'Наибольшее значение $y = 3\\sin x + 1$? ', a:(v)=>+v===4, show:'4 (при sin = 1)' },
|
||||
],
|
||||
onComplete:(s,n)=>{ if(s===n){addXp(20,'p5-iv2');bumpProgress('p5',35);} else if(s>=4){addXp(10,'p5-iv2');bumpProgress('p5',16);} }
|
||||
});
|
||||
|
||||
wireReadBtn('p5');
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
§ 6 — Функции y = tg x и y = ctg x
|
||||
============================================================ */
|
||||
function buildP6(){
|
||||
const box = document.getElementById('p6-body');
|
||||
const A = window.ALG10;
|
||||
let html = '';
|
||||
|
||||
/* === SVG 1: график y = tg x === */
|
||||
let svgTg = '';
|
||||
if(A){
|
||||
const f = A.func.canvas({id:'p6-tg', W:640, H:280, xRange:[-2*Math.PI, 2*Math.PI], yRange:[-5, 5], bg:'#fff'});
|
||||
let s = f.open
|
||||
+ f.grid({xStep:Math.PI/2, yStep:1, color:'#f1f5f9'})
|
||||
/* Асимптоты */
|
||||
+ f.asymptoteV(-3*Math.PI/2, {color:'#dc2626'})
|
||||
+ f.asymptoteV(-Math.PI/2, {color:'#dc2626'})
|
||||
+ f.asymptoteV(Math.PI/2, {color:'#dc2626'})
|
||||
+ f.asymptoteV(3*Math.PI/2, {color:'#dc2626'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[
|
||||
{val:-3*Math.PI/2, label:'-3π/2'},
|
||||
{val:-Math.PI, label:'-π'},
|
||||
{val:-Math.PI/2, label:'-π/2'},
|
||||
{val:Math.PI/2, label:'π/2'},
|
||||
{val:Math.PI, label:'π'},
|
||||
{val:3*Math.PI/2, label:'3π/2'}
|
||||
],
|
||||
yTicks:[{val:-3, label:'-3'},{val:-1, label:'-1'},{val:1, label:'1'},{val:3, label:'3'}]
|
||||
})
|
||||
/* Tg x с авто-разрывами */
|
||||
+ f.plot(x => {
|
||||
/* Избегаем точек слишком близко к асимптотам */
|
||||
const t = Math.tan(x);
|
||||
if (Math.abs(t) > 12) return NaN;
|
||||
return t;
|
||||
}, {color:'#16a34a', width:2.8})
|
||||
+ f.close;
|
||||
svgTg = s;
|
||||
}
|
||||
|
||||
/* === SVG 2: график y = ctg x === */
|
||||
let svgCtg = '';
|
||||
if(A){
|
||||
const f = A.func.canvas({id:'p6-ctg', W:640, H:280, xRange:[-2*Math.PI, 2*Math.PI], yRange:[-5, 5], bg:'#fff'});
|
||||
let s = f.open
|
||||
+ f.grid({xStep:Math.PI/2, yStep:1, color:'#f1f5f9'})
|
||||
+ f.asymptoteV(-2*Math.PI, {color:'#dc2626'})
|
||||
+ f.asymptoteV(-Math.PI, {color:'#dc2626'})
|
||||
+ f.asymptoteV(0, {color:'#dc2626'})
|
||||
+ f.asymptoteV(Math.PI, {color:'#dc2626'})
|
||||
+ f.asymptoteV(2*Math.PI, {color:'#dc2626'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[
|
||||
{val:-3*Math.PI/2, label:'-3π/2'},
|
||||
{val:-Math.PI/2, label:'-π/2'},
|
||||
{val:Math.PI/2, label:'π/2'},
|
||||
{val:3*Math.PI/2, label:'3π/2'}
|
||||
],
|
||||
yTicks:[{val:-3, label:'-3'},{val:-1, label:'-1'},{val:1, label:'1'},{val:3, label:'3'}]
|
||||
})
|
||||
+ f.plot(x => {
|
||||
const c = 1 / Math.tan(x);
|
||||
if (Math.abs(c) > 12) return NaN;
|
||||
return c;
|
||||
}, {color:'#7c3aed', width:2.8})
|
||||
+ f.close;
|
||||
svgCtg = s;
|
||||
}
|
||||
|
||||
html += makeCard('rule', 'Свойства y = tg x', '6.1', `
|
||||
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:.92rem">
|
||||
<tr style="background:var(--sec-acc-soft)"><th style="padding:6px;border:1px solid var(--border);text-align:left">Свойство</th><th style="padding:6px;border:1px solid var(--border);text-align:left">Значение</th></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>$D(\\tg)$</b></td><td style="padding:6px;border:1px solid var(--border)">$x \\ne \\dfrac{\\pi}{2} + \\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>$E(\\tg)$</b></td><td style="padding:6px;border:1px solid var(--border)">$\\mathbb{R}$ — все действительные числа</td></tr>
|
||||
<tr style="background:var(--warn-bg)"><td style="padding:6px;border:1px solid var(--border)"><b>Период</b></td><td style="padding:6px;border:1px solid var(--border)"><b>$T = \\pi$</b> (вдвое короче, чем у sin/cos!)</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Чётность</b></td><td style="padding:6px;border:1px solid var(--border)">Нечётная: $\\tg(-x) = -\\tg x$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Нули</b></td><td style="padding:6px;border:1px solid var(--border)">$x = \\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Асимптоты</b></td><td style="padding:6px;border:1px solid var(--border)">$x = \\dfrac{\\pi}{2} + \\pi n$ (вертикальные)</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Монотонность</b></td><td style="padding:6px;border:1px solid var(--border)">Возрастает на $\\left(-\\dfrac{\\pi}{2} + \\pi n;\\,\\dfrac{\\pi}{2} + \\pi n\\right)$</td></tr>
|
||||
</table>`);
|
||||
|
||||
html += makeCard('rule', 'График y = tg x', '6.2', `
|
||||
<p>Тангенс не похож на синусоиду — это <b>«ветви»</b>, разорванные вертикальными асимптотами.</p>
|
||||
<div class="svg-host">${svgTg}</div>
|
||||
<p>Красные пунктирные линии — асимптоты. На каждом промежутке между ними функция возрастает от $-\\infty$ до $+\\infty$.</p>`);
|
||||
|
||||
html += makeCard('rule', 'Свойства y = ctg x', '6.3', `
|
||||
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:.92rem">
|
||||
<tr style="background:var(--sec-acc-soft)"><th style="padding:6px;border:1px solid var(--border);text-align:left">Свойство</th><th style="padding:6px;border:1px solid var(--border);text-align:left">Значение</th></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>$D(\\ctg)$</b></td><td style="padding:6px;border:1px solid var(--border)">$x \\ne \\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>$E(\\ctg)$</b></td><td style="padding:6px;border:1px solid var(--border)">$\\mathbb{R}$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Период</b></td><td style="padding:6px;border:1px solid var(--border)">$T = \\pi$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Чётность</b></td><td style="padding:6px;border:1px solid var(--border)">Нечётная</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Нули</b></td><td style="padding:6px;border:1px solid var(--border)">$x = \\dfrac{\\pi}{2} + \\pi n$</td></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>Асимптоты</b></td><td style="padding:6px;border:1px solid var(--border)">$x = \\pi n$</td></tr>
|
||||
<tr style="background:var(--warn-bg)"><td style="padding:6px;border:1px solid var(--border)"><b>Монотонность</b></td><td style="padding:6px;border:1px solid var(--border)"><b>Убывает</b> на $(\\pi n;\\,\\pi + \\pi n)$</td></tr>
|
||||
</table>`);
|
||||
|
||||
html += makeCard('rule', 'График y = ctg x', '6.4', `
|
||||
<p>Котангенс — «зеркало» тангенса: те же ветви, но <b>убывающие</b>, и сдвинуты на $\\frac{\\pi}{2}$.</p>
|
||||
<div class="svg-host">${svgCtg}</div>
|
||||
<p>Связь: $\\ctg x = \\tg\\left(\\dfrac{\\pi}{2} - x\\right)$.</p>`);
|
||||
|
||||
/* === ИНТЕРАКТИВ === */
|
||||
html += '<div class="wg" id="p6-iv1">'
|
||||
+'<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Свойства tg x и ctg x</div></div>'
|
||||
+'<div class="wg-help">Период обоих $= \\pi$. Асимптоты — там, где знаменатель = 0.</div>'
|
||||
+trainerHTML('p6-iv1', 6, 'ответ')
|
||||
+'</div>';
|
||||
|
||||
html += '<div class="wg" id="p6-iv2">'
|
||||
+'<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">Сравни значения по графику</div></div>'
|
||||
+'<div class="wg-help">Используй монотонность: $\\tg$ <b>возрастает</b>, $\\ctg$ <b>убывает</b> на главном промежутке.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="p6-iv2-i">1</b> / 5</span><span>Очки: <b id="p6-iv2-s">0</b> / 5</span></div>'
|
||||
+'<div id="p6-iv2-q" style="padding:14px;background:var(--sec-acc-soft);border-radius:10px;font-size:1rem;text-align:center;margin-bottom:10px"></div>'
|
||||
+'<div style="display:flex;gap:8px;justify-content:center"><button class="btn primary" id="p6-iv2-lt" style="background:#10b981;border-color:#10b981"><</button><button class="btn primary" id="p6-iv2-eq" style="background:#f59e0b;border-color:#f59e0b">=</button><button class="btn primary" id="p6-iv2-gt" style="background:#dc2626;border-color:#dc2626">></button></div>'
|
||||
+'<div class="feedback" id="p6-iv2-fb"></div></div>';
|
||||
|
||||
/* === БОСС === */
|
||||
html += '<h3 style="font-family:Unbounded,sans-serif;font-size:1.05rem;color:var(--pri2);margin:20px 0 12px">Босс §6 — Графики tg и ctg</h3>';
|
||||
html += makeBoss('p6', {
|
||||
color:'#16a34a',
|
||||
title:'Босс §6 — Графики tg и ctg',
|
||||
steps:[
|
||||
{ q:'Период функции $y = \\tg x$ — введи как pi/n или просто pi.', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi'||s==='π';}, hint:'$T = \\pi$.' },
|
||||
{ q:'Период функции $y = \\tg 2x$? (введи pi/n)', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/2'||s==='π/2';}, hint:'$T = \\pi / 2$.' },
|
||||
{ q:'Где у $\\tg x$ вертикальные асимптоты? Введи общую формулу в виде «pi/2+pi*n» (без пробелов).', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/2+pi*n'||s==='pi/2+pin'||s==='π/2+πn'||s==='π/2+π*n';}, hint:'Там, где $\\cos x = 0$.' },
|
||||
{ q:'$\\tg x$ — возрастает или убывает на главном промежутке? Введи слово.', verify:(v)=>String(v).trim().toLowerCase().startsWith('возр'), hint:'От $-\\infty$ до $+\\infty$.' },
|
||||
{ q:'$\\ctg x$ — возрастает или убывает? Введи слово.', verify:(v)=>String(v).trim().toLowerCase().startsWith('убыв'), hint:'От $+\\infty$ до $-\\infty$.' },
|
||||
]
|
||||
});
|
||||
|
||||
html += secNav('p5', 'p7') + readButton('p6');
|
||||
box.innerHTML = html; renderMath(box);
|
||||
|
||||
/* IV1 */
|
||||
makeTrainer({
|
||||
idPrefix:'p6-iv1',
|
||||
parser:(v)=>v,
|
||||
questions:[
|
||||
{ q:'Период $y = \\tg x$? (введи pi)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi'||s==='π';}, show:'$\\pi$' },
|
||||
{ q:'Период $y = \\ctg 3x$? (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/3'||s==='π/3';}, show:'$\\pi/3$' },
|
||||
{ q:'$\\tg x$ — чётная или нечётная? Введи слово.', a:(v)=>String(v).trim().toLowerCase().startsWith('нечёт')||String(v).trim().toLowerCase().startsWith('нечет'), show:'нечётная' },
|
||||
{ q:'Сколько нулей у $\\tg x$ на $[0;\\,2\\pi]$?', a:(v)=>+v===3, show:'3 (0, π, 2π)' },
|
||||
{ q:'Сколько вертикальных асимптот у $\\tg x$ на $(0;\\,2\\pi)$?', a:(v)=>+v===2, show:'2 (π/2 и 3π/2)' },
|
||||
{ q:'$\\tg 0 = ?$', a:(v)=>+v===0, show:'0' },
|
||||
],
|
||||
onComplete:(s,n)=>{ if(s===n){addXp(15,'p6-iv1');bumpProgress('p6',30);} else if(s>=4){addXp(8,'p6-iv1');bumpProgress('p6',14);} }
|
||||
});
|
||||
|
||||
/* IV2: compare */
|
||||
(function(){
|
||||
const Q=[
|
||||
{ e:'Сравни $\\tg 30°$ и $\\tg 45°$', ans:'lt' },
|
||||
{ e:'Сравни $\\tg 60°$ и $\\tg 80°$', ans:'lt' },
|
||||
{ e:'Сравни $\\ctg 30°$ и $\\ctg 60°$', ans:'gt' },
|
||||
{ e:'Сравни $\\tg(-30°)$ и $\\tg 30°$', ans:'lt' },
|
||||
{ e:'Сравни $\\tg 45°$ и $\\ctg 45°$', ans:'eq' },
|
||||
];
|
||||
let i=0,score=0;
|
||||
function show(){
|
||||
if(i>=Q.length){ document.getElementById('p6-iv2-q').innerHTML='<b>Готово!</b> '+score+' / '+Q.length; if(score===Q.length){addXp(15,'p6-iv2');bumpProgress('p6',25);} else if(score>=3){addXp(8,'p6-iv2');bumpProgress('p6',12);} return; }
|
||||
document.getElementById('p6-iv2-i').textContent=(i+1);
|
||||
document.getElementById('p6-iv2-s').textContent=score;
|
||||
document.getElementById('p6-iv2-q').innerHTML=Q[i].e;
|
||||
renderMath(document.getElementById('p6-iv2-q'));
|
||||
document.getElementById('p6-iv2-fb').style.display='none';
|
||||
}
|
||||
function ans(a){
|
||||
if(i>=Q.length) return;
|
||||
const fb=document.getElementById('p6-iv2-fb');
|
||||
if(a===Q[i].ans){ score++; feedback(fb,true,'✓ Верно!'); }
|
||||
else{ const lab={lt:'<',eq:'=',gt:'>'}; feedback(fb,false,'✗ Правильно: <b>'+lab[Q[i].ans]+'</b>'); }
|
||||
document.getElementById('p6-iv2-s').textContent=score;
|
||||
i++; setTimeout(show,1200);
|
||||
}
|
||||
document.getElementById('p6-iv2-lt').addEventListener('click',()=>ans('lt'));
|
||||
document.getElementById('p6-iv2-eq').addEventListener('click',()=>ans('eq'));
|
||||
document.getElementById('p6-iv2-gt').addEventListener('click',()=>ans('gt'));
|
||||
show();
|
||||
})();
|
||||
|
||||
wireReadBtn('p6');
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
§ 7 — Арксинус, арккосинус, арктангенс, арккотангенс
|
||||
============================================================ */
|
||||
function buildP7(){
|
||||
const box = document.getElementById('p7-body');
|
||||
const A = window.ALG10;
|
||||
let html = '';
|
||||
|
||||
/* === SVG: 4 графика обратных функций === */
|
||||
function plotInverse(id, fn, xRange, yRange, color, title){
|
||||
if(!A) return '';
|
||||
const f = A.func.canvas({id, W:280, H:240, xRange, yRange, bg:'#fff'});
|
||||
let s = f.open
|
||||
+ f.grid({xStep:1, yStep:0.5, color:'#f1f5f9'})
|
||||
+ f.axes({color:'#475569',
|
||||
xTicks:[{val:-1, label:'-1'},{val:1, label:'1'}],
|
||||
yTicks:[
|
||||
{val:-Math.PI/2, label:'-π/2'},
|
||||
{val:0, label:'0'},
|
||||
{val:Math.PI/2, label:'π/2'},
|
||||
{val:Math.PI, label:'π'}
|
||||
].filter(t => t.val >= yRange[0] && t.val <= yRange[1])
|
||||
})
|
||||
+ f.plot(fn, {color, width:2.5, step:(xRange[1]-xRange[0])/200})
|
||||
+ '<text x="140" y="22" text-anchor="middle" font-size="13" font-family="Unbounded,Inter,sans-serif" font-weight="800" fill="'+color+'">'+title+'</text>'
|
||||
+ f.close;
|
||||
return s;
|
||||
}
|
||||
const svgAsin = plotInverse('p7-asin', Math.asin, [-1.05, 1.05], [-Math.PI/2 - 0.2, Math.PI/2 + 0.2], '#0d9488', 'y = arcsin x');
|
||||
const svgAcos = plotInverse('p7-acos', Math.acos, [-1.05, 1.05], [-0.2, Math.PI + 0.2], '#0891b2', 'y = arccos x');
|
||||
const svgAtg = plotInverse('p7-atg', Math.atan, [-4, 4], [-Math.PI/2 - 0.2, Math.PI/2 + 0.2], '#16a34a', 'y = arctg x');
|
||||
const svgActg = plotInverse('p7-actg', x => Math.PI/2 - Math.atan(x), [-4, 4], [-0.2, Math.PI + 0.2], '#7c3aed', 'y = arcctg x');
|
||||
|
||||
html += makeCard('theory', 'Зачем обратные функции', '7.1', `
|
||||
<p>Уравнение $\\sin x = \\dfrac{1}{2}$ имеет бесконечно много решений ($x = \\dfrac{\\pi}{6} + 2\\pi n$ и $x = \\pi - \\dfrac{\\pi}{6} + 2\\pi n$).</p>
|
||||
<p>Если хочется записать <b>одно</b> «опорное» решение, мы выбираем <b>главное значение</b> — это и есть $\\arcsin\\dfrac{1}{2}$.</p>`);
|
||||
|
||||
html += makeCard('rule', 'arcsin a', '7.2', `
|
||||
<p style="background:var(--sec-acc-soft);padding:10px 14px;border-radius:8px"><b>Определение.</b> $\\arcsin a$ — это <b>такое число</b> $\\alpha \\in \\left[-\\dfrac{\\pi}{2};\\,\\dfrac{\\pi}{2}\\right]$, что $\\sin\\alpha = a$.</p>
|
||||
<p>Существует только при $a \\in [-1;\\,1]$. Главные значения:</p>
|
||||
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:.94rem">
|
||||
<tr style="background:var(--sec-acc-soft)"><th style="padding:6px;border:1px solid var(--border)">$a$</th><th>$0$</th><th>$\\frac{1}{2}$</th><th>$\\frac{\\sqrt{2}}{2}$</th><th>$\\frac{\\sqrt{3}}{2}$</th><th>$1$</th></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>$\\arcsin a$</b></td><td style="padding:6px;border:1px solid var(--border);text-align:center">$0$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{6}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{4}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{3}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{2}$</td></tr>
|
||||
</table>
|
||||
<p>$\\arcsin$ — <b>нечётная</b>: $\\arcsin(-a) = -\\arcsin a$.</p>
|
||||
<div class="svg-host">${svgAsin}</div>`);
|
||||
|
||||
html += makeCard('rule', 'arccos a', '7.3', `
|
||||
<p style="background:var(--sec-acc-soft);padding:10px 14px;border-radius:8px"><b>Определение.</b> $\\arccos a$ — это <b>такое число</b> $\\alpha \\in [0;\\,\\pi]$, что $\\cos\\alpha = a$.</p>
|
||||
<p>Существует только при $a \\in [-1;\\,1]$. Главные значения:</p>
|
||||
<table style="width:100%;border-collapse:collapse;margin:8px 0;font-size:.94rem">
|
||||
<tr style="background:var(--sec-acc-soft)"><th style="padding:6px;border:1px solid var(--border)">$a$</th><th>$1$</th><th>$\\frac{\\sqrt{3}}{2}$</th><th>$\\frac{\\sqrt{2}}{2}$</th><th>$\\frac{1}{2}$</th><th>$0$</th><th>$-1$</th></tr>
|
||||
<tr><td style="padding:6px;border:1px solid var(--border)"><b>$\\arccos a$</b></td><td style="padding:6px;border:1px solid var(--border);text-align:center">$0$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{6}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{4}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{3}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\frac{\\pi}{2}$</td><td style="padding:6px;border:1px solid var(--border);text-align:center">$\\pi$</td></tr>
|
||||
</table>
|
||||
<p style="background:var(--warn-bg);padding:9px 13px;border-radius:8px;border-left:4px solid var(--warn)"><b>Важно:</b> $\\arccos$ <b>не является нечётной</b>! $\\arccos(-a) = \\pi - \\arccos a$.</p>
|
||||
<div class="svg-host">${svgAcos}</div>`);
|
||||
|
||||
html += makeCard('rule', 'arctg a и arcctg a', '7.4', `
|
||||
<p style="background:var(--sec-acc-soft);padding:10px 14px;border-radius:8px"><b>Определение.</b></p>
|
||||
<ul style="padding-left:22px;line-height:1.85">
|
||||
<li>$\\arctg a$ — такое $\\alpha \\in \\left(-\\dfrac{\\pi}{2};\\,\\dfrac{\\pi}{2}\\right)$, что $\\tg\\alpha = a$. Определено для всех $a \\in \\mathbb{R}$.</li>
|
||||
<li>$\\arcctg a$ — такое $\\alpha \\in (0;\\,\\pi)$, что $\\ctg\\alpha = a$. Определено для всех $a \\in \\mathbb{R}$.</li>
|
||||
</ul>
|
||||
<p>Главные значения: $\\arctg 0 = 0$, $\\arctg 1 = \\dfrac{\\pi}{4}$, $\\arctg\\sqrt{3} = \\dfrac{\\pi}{3}$, $\\arctg\\dfrac{1}{\\sqrt{3}} = \\dfrac{\\pi}{6}$.</p>
|
||||
<p>$\\arctg$ — <b>нечётная</b>: $\\arctg(-a) = -\\arctg a$. $\\arcctg$ — нет: $\\arcctg(-a) = \\pi - \\arcctg a$.</p>
|
||||
<div class="svg-host-row">${svgAtg}${svgActg}</div>`);
|
||||
|
||||
html += makeCard('rule', 'Полезные связки', '7.5', `
|
||||
<p>Эти две формулы стоит запомнить:</p>
|
||||
<p style="text-align:center;font-size:1.1rem;margin:10px 0">$\\arcsin a + \\arccos a = \\dfrac{\\pi}{2}$</p>
|
||||
<p style="text-align:center;font-size:1.1rem;margin:10px 0">$\\arctg a + \\arcctg a = \\dfrac{\\pi}{2}$</p>
|
||||
<p>Например, $\\arccos\\dfrac{1}{2} = \\dfrac{\\pi}{2} - \\arcsin\\dfrac{1}{2} = \\dfrac{\\pi}{2} - \\dfrac{\\pi}{6} = \\dfrac{\\pi}{3}$.</p>`);
|
||||
|
||||
/* === ИНТЕРАКТИВ 1: Главные значения === */
|
||||
html += '<div class="wg" id="p7-iv1">'
|
||||
+'<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 1</span><div class="wg-title">Найди главное значение</div></div>'
|
||||
+'<div class="wg-help">Ответ — в виде дроби: <b>pi/6</b>, <b>pi/3</b>, <b>-pi/4</b>, или просто число (для нуля).</div>'
|
||||
+trainerHTML('p7-iv1', 8, 'значение')
|
||||
+'</div>';
|
||||
|
||||
/* === ИНТЕРАКТИВ 2: arc(sin(α)) vs α === */
|
||||
html += '<div class="wg" id="p7-iv2">'
|
||||
+'<div class="wg-header"><span class="wg-badge">ИНТЕРАКТИВ 2</span><div class="wg-title">arcsin(sin α) vs α</div></div>'
|
||||
+'<div class="wg-help">$\\sin(\\arcsin a) = a$ всегда. Но $\\arcsin(\\sin\\alpha) = \\alpha$ <b>только если</b> $\\alpha \\in [-\\pi/2;\\,\\pi/2]$. Иначе нужно привести!</div>'
|
||||
+trainerHTML('p7-iv2', 5, 'ответ')
|
||||
+'</div>';
|
||||
|
||||
/* === БОСС === */
|
||||
html += '<h3 style="font-family:Unbounded,sans-serif;font-size:1.05rem;color:var(--pri2);margin:20px 0 12px">Босс §7 — Обратные функции</h3>';
|
||||
html += makeBoss('p7', {
|
||||
color:'#7c3aed',
|
||||
title:'Босс §7 — Обратные функции',
|
||||
steps:[
|
||||
{ q:'Чему равен $\\arcsin 0$?', verify:(v)=>+v===0, hint:'$\\sin 0 = 0$.' },
|
||||
{ q:'$\\arcsin\\dfrac{1}{2} = ?$ (введи как pi/n)', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/6'||s==='π/6';}, hint:'$\\sin(\\pi/6) = 1/2$.' },
|
||||
{ q:'$\\arccos(-1) = ?$ (введи как pi или 0)', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi'||s==='π';}, hint:'$\\cos\\pi = -1$.' },
|
||||
{ q:'$\\arcsin\\dfrac{\\sqrt{3}}{2} + \\arccos\\dfrac{\\sqrt{3}}{2} = ?$ (введи pi/n)', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/2'||s==='π/2';}, hint:'Сумма всегда $= \\pi/2$.' },
|
||||
{ q:'$\\arcsin\\left(\\sin\\dfrac{5\\pi}{6}\\right) = ?$ (внимание, $5\\pi/6$ вне $[-\\pi/2;\\,\\pi/2]$! Введи pi/n.)', verify:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/6'||s==='π/6';}, hint:'$\\sin(5\\pi/6) = \\sin(\\pi - \\pi/6) = \\sin(\\pi/6) = 1/2$. arcsin(1/2) = $\\pi/6$.' },
|
||||
]
|
||||
});
|
||||
|
||||
html += secNav('p6', 'p8') + readButton('p7');
|
||||
box.innerHTML = html; renderMath(box);
|
||||
|
||||
/* IV1: главные значения */
|
||||
makeTrainer({
|
||||
idPrefix:'p7-iv1',
|
||||
parser:(v)=>v,
|
||||
questions:[
|
||||
{ q:'$\\arcsin 1 = ?$ (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/2'||s==='π/2';}, show:'$\\pi/2$' },
|
||||
{ q:'$\\arcsin(-1) = ?$ (введи -pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='-pi/2'||s==='-π/2';}, show:'$-\\pi/2$' },
|
||||
{ q:'$\\arccos 1 = ?$', a:(v)=>+v===0, show:'$0$' },
|
||||
{ q:'$\\arccos 0 = ?$ (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/2'||s==='π/2';}, show:'$\\pi/2$' },
|
||||
{ q:'$\\arctg 1 = ?$ (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/4'||s==='π/4';}, show:'$\\pi/4$' },
|
||||
{ q:'$\\arctg(-1) = ?$ (введи -pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='-pi/4'||s==='-π/4';}, show:'$-\\pi/4$' },
|
||||
{ q:'$\\arccos\\dfrac{1}{2} = ?$ (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/3'||s==='π/3';}, show:'$\\pi/3$' },
|
||||
{ q:'$\\arccos\\left(-\\dfrac{1}{2}\\right) = ?$ (введи 2pi/3)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='2pi/3'||s==='2π/3';}, show:'$2\\pi/3$ ($\\pi - \\pi/3$)' },
|
||||
],
|
||||
onComplete:(s,n)=>{ if(s===n){addXp(20,'p7-iv1');bumpProgress('p7',32);} else if(s>=5){addXp(10,'p7-iv1');bumpProgress('p7',15);} }
|
||||
});
|
||||
|
||||
/* IV2: arcsin(sin α) */
|
||||
makeTrainer({
|
||||
idPrefix:'p7-iv2',
|
||||
parser:(v)=>v,
|
||||
questions:[
|
||||
{ q:'$\\sin(\\arcsin 0{,}5) = ?$', a:(v)=>+v===0.5, show:'$0{,}5$' },
|
||||
{ q:'$\\arcsin\\left(\\sin\\dfrac{\\pi}{4}\\right) = ?$ (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/4'||s==='π/4';}, show:'$\\pi/4$ — внутри $[-\\pi/2;\\pi/2]$' },
|
||||
{ q:'$\\arcsin\\left(\\sin\\dfrac{3\\pi}{4}\\right) = ?$ (введи pi/n)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='pi/4'||s==='π/4';}, show:'$\\pi/4$ ($\\sin(3\\pi/4) = \\sin(\\pi/4)$)' },
|
||||
{ q:'$\\cos(\\arccos(-0{,}3)) = ?$', a:(v)=>+v===-0.3, show:'$-0{,}3$' },
|
||||
{ q:'$\\arccos\\left(\\cos\\dfrac{5\\pi}{4}\\right) = ?$ (введи как 3pi/4)', a:(v)=>{const s=String(v).replace(/\\s/g,'').toLowerCase(); return s==='3pi/4'||s==='3π/4';}, show:'$3\\pi/4$ ($\\cos(5\\pi/4) = -\\frac{\\sqrt{2}}{2}$, $\\arccos = 3\\pi/4$)' },
|
||||
],
|
||||
onComplete:(s,n)=>{ if(s===n){addXp(18,'p7-iv2');bumpProgress('p7',28);} else if(s>=3){addXp(9,'p7-iv2');bumpProgress('p7',14);} }
|
||||
});
|
||||
|
||||
wireReadBtn('p7');
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user