Рассмотрим прямоугольный треугольник с острым углом $\\alpha$. Относительно $\\alpha$ катеты делятся на противолежащий (лежит напротив $\\alpha$) и прилежащий (образует $\\alpha$ вместе с гипотенузой).
+ Все прямоугольные треугольники с одним и тем же острым углом $\\alpha$ подобны. У подобных треугольников отношения сторон совпадают. Поэтому $\\sin \\alpha$, $\\cos \\alpha$ и $\\tan \\alpha$ зависят только от угла, а не от размера треугольника.
+
Прямоугольный треугольник с гипотенузой $c$, катетами $a$ (противолежащий $\\alpha$) и $b$ (прилежащий $\\alpha$). Какое из четырёх отношений равно указанному выражению?
+
Задача 1 / 8Очки: 0 / 8
+
+
+
+
+
+
+
+
+
`;
+
+ /* IV4 — Тренажёр */
+ html += `
+
ИНТЕРАКТИВ 4
Тренажёр
+
Реши задачу и введи число (округли до 2 знаков, если получается дробное).
+
Задача 1 / 6Очки: 0 / 6
+
+
+ ответ =
+
+
+
+
+
+
`;
+
+ html += secNav(null, 'p2');
+ html += readButton('p1');
+
+ box.innerHTML = html;
+ renderMath(box);
+
+ /* IV1 — слайдер + SVG */
+ (function(){
+ const sl = document.getElementById('p1-iv1-a');
+ const lab = document.getElementById('p1-iv1-aval');
+ const svg = document.getElementById('p1-iv1-svg');
+ const out = document.getElementById('p1-iv1-out');
+ const seen = new Set();
+ function draw(){
+ const aDeg = +sl.value;
+ lab.textContent = aDeg;
+ const aRad = deg2rad(aDeg);
+ const c = 220; // гипотенуза в пикселях
+ // Геометрические вершины: A (внизу слева), B (верх — прямой угол), C (внизу справа).
+ // Прямой угол при B. Угол α при C.
+ // BC = c·cos α (горизонтальный катет, прилежащий к α)
+ // AB = c·sin α (вертикальный катет, противолежащий α)
+ const BCpx = c * Math.cos(aRad);
+ const ABpx = c * Math.sin(aRad);
+ const cx = 60, cyBase = 270; // позиция A
+ const A = {x: cx, y: cyBase};
+ const C = {x: cx + BCpx, y: cyBase};
+ const B = {x: cx, y: cyBase - ABpx};
+ // Внутренние векторы в B (прямой угол): по BA — вниз, по BC — вправо-вниз
+ const uBA = unitVec(B, A);
+ const uBC = unitVec(B, C);
+ const uCA = unitVec(C, A); // вдоль гипотенузы из C
+ const uCB = unitVec(C, B); // вдоль катета из C
+ let s = '';
+ // фон
+ s += '';
+ // треугольник
+ s += '';
+ // маркер прямого угла в B (внутренние векторы — uBA и uBC)
+ s += '';
+ // дуга угла α при C (от CA к CB)
+ s += '';
+ // подпись α
+ const aMid = {x: C.x + 44*Math.cos(Math.atan2((uCA.y+uCB.y)/2,(uCA.x+uCB.x)/2)), y: C.y + 44*Math.sin(Math.atan2((uCA.y+uCB.y)/2,(uCA.x+uCB.x)/2))};
+ s += 'α';
+ // вершины
+ s += '';
+ s += '';
+ s += '';
+ s += 'A';
+ s += 'B';
+ s += 'C';
+ // подписи сторон
+ const labBC = 'BC='+(BCpx/22).toFixed(2);
+ const labAB = 'AB='+(ABpx/22).toFixed(2);
+ const labAC = 'AC='+(c/22).toFixed(2);
+ s += ''+labBC+'';
+ s += ''+labAB+'';
+ // подпись гипотенузы — поднимем над линией AC
+ const midAC = {x:(A.x+C.x)/2, y:(A.y+C.y)/2};
+ const nAC = {x:-(C.y-A.y), y:(C.x-A.x)};
+ const nL = Math.sqrt(nAC.x*nAC.x+nAC.y*nAC.y)||1;
+ const labP = {x: midAC.x + 16*nAC.x/nL, y: midAC.y + 16*nAC.y/nL};
+ s += ''+labAC+'';
+ svg.innerHTML = s;
+ // числовые значения
+ const sn = Math.sin(aRad), cs = Math.cos(aRad), tn = Math.tan(aRad), ct = 1/Math.tan(aRad);
+ out.innerHTML = '$\\sin '+aDeg+'^\\circ \\approx '+sn.toFixed(3)+'$ · $\\cos '+aDeg+'^\\circ \\approx '+cs.toFixed(3)+'$ '
+ + '$\\tan '+aDeg+'^\\circ \\approx '+tn.toFixed(3)+'$ · $\\cot '+aDeg+'^\\circ \\approx '+ct.toFixed(3)+'$';
+ renderMath(out);
+ seen.add(aDeg);
+ if(seen.size >= 6 && !seen.has('done')){ addXp(10,'p1-iv1'); bumpProgress('p1', 15); seen.add('done'); }
+ }
+ sl.addEventListener('input', draw);
+ draw();
+ })();
+
+ /* IV2 — калькулятор сторон */
+ (function(){
+ const aI = document.getElementById('p1-iv2-a');
+ const cI = document.getElementById('p1-iv2-c');
+ const go = document.getElementById('p1-iv2-go');
+ const out= document.getElementById('p1-iv2-out');
+ const fb = document.getElementById('p1-iv2-fb');
+ let solved = 0;
+ function calc(){
+ const aDeg = parseFloat(aI.value), c = parseFloat(cI.value);
+ if(isNaN(aDeg) || isNaN(c)){ feedback(fb, false, '✗ Введи число для $\\alpha$ и $c$.'); return; }
+ if(aDeg<=0 || aDeg>=90){ feedback(fb, false, '✗ Угол должен быть в диапазоне (0°; 90°). Лучше 10..80.'); return; }
+ if(c<=0){ feedback(fb, false, '✗ Гипотенуза должна быть положительной.'); return; }
+ const r = deg2rad(aDeg);
+ const a = c * Math.sin(r);
+ const b = c * Math.cos(r);
+ out.innerHTML = '$a = c \\sin \\alpha = '+c+' \\cdot \\sin '+aDeg+'^\\circ \\approx '+a.toFixed(2)+'$ (противолежащий) '
+ + '$b = c \\cos \\alpha = '+c+' \\cdot \\cos '+aDeg+'^\\circ \\approx '+b.toFixed(2)+'$ (прилежащий)';
+ renderMath(out);
+ feedback(fb, true, '✓ Катеты найдены.');
+ solved++;
+ if(solved === 1){ addXp(10,'p1-iv2'); bumpProgress('p1', 15); }
+ }
+ go.addEventListener('click', calc);
+ calc();
+ })();
+
+ /* IV3 — Какое отношение? */
+ (function(){
+ const Q = [
+ { expr:'$\\sin \\alpha$', ans:'ac', why:'противолежащий $a$ к гипотенузе $c$' },
+ { expr:'$\\cos \\alpha$', ans:'bc', why:'прилежащий $b$ к гипотенузе $c$' },
+ { expr:'$\\tan \\alpha$', ans:'ab', why:'противолежащий $a$ к прилежащему $b$' },
+ { expr:'$\\cot \\alpha$', ans:'ba', why:'прилежащий $b$ к противолежащему $a$' },
+ { expr:'$\\cos(90^\\circ - \\alpha)$', ans:'ac', why:'$= \\sin \\alpha = a/c$' },
+ { expr:'$\\sin(90^\\circ - \\alpha)$', ans:'bc', why:'$= \\cos \\alpha = b/c$' },
+ { expr:'$\\dfrac{1}{\\cot \\alpha}$', ans:'ab', why:'$= \\tan \\alpha = a/b$' },
+ { expr:'$\\dfrac{\\sin \\alpha \\cdot \\cos \\alpha}{\\sin \\alpha}$', ans:'bc', why:'$= \\cos \\alpha = b/c$' },
+ ];
+ let i = 0, score = 0;
+ function show(){
+ if(i >= Q.length){
+ document.getElementById('p1-iv3-q').innerHTML = 'Готово! Результат: ' + score + ' / ' + Q.length;
+ if(score === Q.length){ addXp(15,'p1-iv3'); bumpProgress('p1', 25); }
+ else if(score >= Q.length - 2){ addXp(8,'p1-iv3'); bumpProgress('p1', 15); }
+ return;
+ }
+ document.getElementById('p1-iv3-i').textContent = (i+1);
+ document.getElementById('p1-iv3-s').textContent = score;
+ document.getElementById('p1-iv3-q').innerHTML = Q[i].expr;
+ renderMath(document.getElementById('p1-iv3-q'));
+ document.getElementById('p1-iv3-fb').style.display = 'none';
+ }
+ function answer(a){
+ if(i >= Q.length) return;
+ const fb = document.getElementById('p1-iv3-fb');
+ if(a === Q[i].ans){ score++; feedback(fb, true, '✓ Верно! '+Q[i].why+'. Дальше ▶'); }
+ else feedback(fb, false, '✗ Нет. '+Q[i].why+'. Дальше ▶');
+ document.getElementById('p1-iv3-s').textContent = score;
+ i++;
+ setTimeout(show, 1100);
+ }
+ ['ac','bc','ab','ba'].forEach(k=>{
+ const b = document.getElementById('p1-iv3-'+k); if(b) b.addEventListener('click', ()=>answer(k));
+ });
+ show();
+ })();
+
+ /* IV4 — Тренажёр */
+ (function(){
+ const Q = [
+ { q:'$\\sin 30^\\circ = ?$', ans:0.5, tol:0.02, hint:'эталон: $\\sin 30^\\circ = 1/2$' },
+ { q:'$\\cos 60^\\circ = ?$', ans:0.5, tol:0.02, hint:'эталон: $\\cos 60^\\circ = 1/2$' },
+ { q:'В прямоуг. треугольнике катет $a = 3$, гипотенуза $c = 5$. Найди $\\sin \\alpha$ ($\\alpha$ — угол, противолежащий $a$).', ans:0.6, tol:0.02, hint:'$\\sin \\alpha = a/c = 3/5 = 0{,}6$' },
+ { q:'В прямоуг. треугольнике катеты 3 и 4. Чему равна гипотенуза?', ans:5, tol:0.05, hint:'$c = \\sqrt{9+16} = \\sqrt{25} = 5$' },
+ { q:'$\\tan 45^\\circ = ?$', ans:1, tol:0.02, hint:'эталон: $\\tan 45^\\circ = 1$' },
+ { q:'$c = 10$, $\\alpha = 30^\\circ$. Найди катет, противолежащий $\\alpha$.', ans:5, tol:0.05, hint:'$a = c \\sin \\alpha = 10 \\cdot 0{,}5 = 5$' },
+ ];
+ let i = 0, score = 0;
+ function show(){
+ if(i >= Q.length){
+ document.getElementById('p1-iv4-q').innerHTML = 'Готово! Результат: ' + score + ' / ' + Q.length;
+ if(score === Q.length){ addXp(15,'p1-iv4'); bumpProgress('p1', 25); }
+ else if(score >= 4){ addXp(8,'p1-iv4'); bumpProgress('p1', 15); }
+ return;
+ }
+ document.getElementById('p1-iv4-i').textContent = (i+1);
+ document.getElementById('p1-iv4-s').textContent = score;
+ document.getElementById('p1-iv4-q').innerHTML = Q[i].q;
+ document.getElementById('p1-iv4-ans').value = '';
+ renderMath(document.getElementById('p1-iv4-q'));
+ document.getElementById('p1-iv4-fb').style.display = 'none';
+ }
+ function go(){
+ if(i >= Q.length) return;
+ const fb = document.getElementById('p1-iv4-fb');
+ const ans = parseFloat(document.getElementById('p1-iv4-ans').value);
+ if(isNaN(ans)){ feedback(fb, false, '✗ Введи число.'); return; }
+ if(Math.abs(ans - Q[i].ans) <= Q[i].tol){ score++; feedback(fb, true, '✓ Верно! '+Q[i].hint+'. Дальше ▶'); }
+ else feedback(fb, false, '✗ Неверно. Ответ: '+Q[i].ans+' ('+Q[i].hint+'). Дальше ▶');
+ document.getElementById('p1-iv4-s').textContent = score;
+ i++;
+ setTimeout(show, 1300);
+ }
+ document.getElementById('p1-iv4-go').addEventListener('click', go);
+ document.getElementById('p1-iv4-ans').addEventListener('keydown', e=>{ if(e.key==='Enter') go(); });
+ document.getElementById('p1-iv4-start').addEventListener('click', ()=>{ i=0; score=0; show(); });
+ show();
+ })();
+
+ wireReadBtn('p1');
+}
+
+/* ===== §2 Решение прямоугольного треугольника ===== */
+function buildP2(){
+ const box = document.getElementById('p2-body');
+ let html = '';
+
+ html += makeCard('theory', 'Что значит «решить треугольник»', '2.1', `
+
Решить треугольник — найти все его неизвестные элементы (стороны и углы) по заданным.
+
В прямоугольном треугольнике один угол всегда равен $90^\\circ$. Поэтому, чтобы найти все остальные элементы, достаточно знать любые два из них (кроме случая «два угла» — там стороны определяются с точностью до подобия):
+
+
две стороны (два катета; катет и гипотенузу), или
+
одну сторону и один из острых углов.
+
+
Обозначения: пусть $A, B, C$ — вершины (угол $C = 90^\\circ$), $a = BC$ — катет, лежащий напротив $A$, $b = AC$ — катет, лежащий напротив $B$, $c = AB$ — гипотенуза. Тогда $A + B = 90^\\circ$.
Случай 4. Даны гипотенуза $c$ и угол $A$.
+ $a = c \\sin A$; $b = c \\cos A$; $B = 90^\\circ - A$.
+ Совет по выбору формулы
+
+
Есть обе стороны без угла — теорема Пифагора + $\\tan$.
+
Есть гипотенуза и катет — Пифагор для второго катета, $\\sin$ для угла.
+
Есть сторона и угол — выбирай функцию так, чтобы данный отрезок встал в числитель или знаменатель: $\\sin$ для пары «противолежащий–гипотенуза», $\\cos$ — «прилежащий–гипотенуза», $\\tan$ — два катета.
+
+
`);
+
+ html += makeCard('example', 'Пример: даны два катета', '2.3', `
+