feat(math6): обогащение всех глав — хук, разбор по шагам, факты в каждом §
Каждый содержательный параграф 6 глав дополнен (Sonnet, по главе): - карточка «Где это в жизни» (реальный контекст темы); - «Разбор по шагам» (нумерованный алгоритм решения); - «А знаешь ли ты?» (интересный факт/история); - доведено до ≥2 рабочих интерактивов (где было меньше — добавлены). Движок/общие файлы не трогались; структура M6/порядок init сохранены. Проверено: тесты math6 18/18, честный рендер 4 глав — контент появляется, рантайм-ошибок нет (только jsdom scrollTo-заглушка). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim Dolgolyov
@@ -153,11 +153,22 @@ var TRIS=[
|
||||
/* ===================== § 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>), палатка — <b>призма</b>, египетские сооружения — <b>пирамида</b>, банка — <b>цилиндр</b>, рожок мороженого — <b>конус</b>.</p>'
|
||||
+'<p>У многогранников есть <b>грани</b> (плоские стороны), <b>рёбра</b> (линии стыка граней) и <b>вершины</b> (точки стыка рёбер).</p>'
|
||||
+'<div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center">'
|
||||
+['cube','prism','pyramid','cylinder','cone'].map(function(k){ return '<div style="text-align:center">'+svgWrap(140,120,SOLIDS[k])+'<div style="font-size:.8rem;color:var(--muted)">'+SOLID_NAME[k]+'</div></div>'; }).join('')+'</div>');
|
||||
h+=makeCard('example','Разбор по шагам: считаем грани, рёбра и вершины куба','1.1e',
|
||||
'<ol>'
|
||||
+'<li>Смотрим на куб. Он ограничен плоскими <b>квадратами</b> — это грани. Считаем: верхняя, нижняя и 4 боковых = <b>6 граней</b>.</li>'
|
||||
+'<li>Там, где встречаются две грани, проходит <b>ребро</b>. На каждом квадрате 4 ребра, но каждое ребро общее для двух граней: $6 \\cdot 4 \\div 2 = $ <b>12 рёбер</b>.</li>'
|
||||
+'<li>Там, где сходятся три ребра, стоит <b>вершина</b>. У куба: $12 \\cdot 2 \\div 3 = $ <b>8 вершин</b>.</li>'
|
||||
+'<li>Проверяем формулой Эйлера: $F - E + V = 2$, то есть $6 - 12 + 8 = 2$ — верно!</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','1.2t',
|
||||
'<p>Формула Эйлера $F - E + V = 2$ (грани минус рёбра плюс вершины равно 2) выполняется для <b>любого</b> выпуклого многогранника — куба, призмы, пирамиды и даже футбольного мяча (из 20 шестиугольников и 12 пятиугольников). Леонард Эйлер доказал это ещё в 1752 году.</p>');
|
||||
h+=makeCard('theory','Развёртка тела','1.2',
|
||||
'<p><b>Развёртка</b> — это фигура на плоскости, из которой можно склеить тело. У куба развёртка состоит из 6 квадратов, у цилиндра — из прямоугольника и двух кругов.</p>'
|
||||
+'<div style="display:flex;flex-wrap:wrap;gap:10px;justify-content:center">'+svgWrap(160,160,NETS.cube)+svgWrap(160,160,NETS.cylinder)+'</div>');
|
||||
@@ -173,9 +184,20 @@ function buildP1(){
|
||||
+'<div id="p1-dfig"></div>'
|
||||
+'<div id="p1-dopts" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"></div>'
|
||||
+'<div class="feedback" id="p1-dfb"></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">Перетащи каждое тело в нужную группу. <b>Многогранники</b> ограничены плоскими гранями; <b>тела вращения</b> получаются вращением фигуры вокруг оси.</div>'
|
||||
+'<div id="p1-sorter"></div>'
|
||||
+'<div class="feedback" id="p1-s3fb"></div></div>';
|
||||
h+=secNav(null,'p2')+readBtn('p1');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
setupSorter('p1-sorter',{
|
||||
items:['Куб','Призма','Пирамида','Цилиндр','Конус'],
|
||||
groups:['Многогранник','Тело вращения'],
|
||||
answers:{'Куб':'Многогранник','Призма':'Многогранник','Пирамида':'Многогранник','Цилиндр':'Тело вращения','Конус':'Тело вращения'},
|
||||
onDone:function(ok,total){ var fb=document.getElementById('p1-s3fb'); if(ok===total){ feedback(fb,true,'Все '+total+' верно!'); addXp(12,'p1-iv3'); bumpProgress('p1',20); } else { feedback(fb,false,'Верно '+ok+' из '+total+'. Попробуй ещё.'); } }
|
||||
});
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null, polys=['cube','prism','pyramid'], lbl=['граней','рёбер','вершин'];
|
||||
function gen(){ var k=_pick(polys), j=_ri(0,2); cur={k:k, j:j, ans:SOLID_FEV[k][j]}; }
|
||||
@@ -212,12 +234,23 @@ function buildP1(){
|
||||
/* ===================== § 2. ОКРУЖНОСТЬ. КРУГ ===================== */
|
||||
function buildP2(){
|
||||
var box=document.getElementById('p2-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','2.0',
|
||||
'<p>Колёса, монеты, блины, циферблаты, пицца, батуты, тарелки — всё это круги или окружности. Инженеры рассчитывают, сколько краски нужно на круглую разметку стадиона, используя формулу $S = \\pi r^2$. Велосипедисты знают, что чем больше колесо, тем дальше оно катится за один оборот — ведь длина окружности $C = 2\\pi r$ растёт вместе с радиусом.</p>');
|
||||
h+=makeCard('theory','Окружность и круг','2.1',
|
||||
'<p><b>Окружность</b> — замкнутая линия, все точки которой одинаково удалены от центра. <b>Круг</b> — часть плоскости, ограниченная окружностью.</p>'
|
||||
+'<p><b>Радиус</b> $r$ — расстояние от центра до окружности; <b>диаметр</b> $d=2r$.</p>');
|
||||
h+=makeCard('rule','Длина окружности и площадь круга','2.2',
|
||||
'<p>Длина окружности: $C = 2\\pi r = \\pi d$. Площадь круга: $S = \\pi r^2$.</p>'
|
||||
+'<p>Число $\\pi \\approx 3{,}14$ — отношение длины окружности к диаметру (одинаково для любой окружности).</p>');
|
||||
h+=makeCard('example','Разбор по шагам: найди C и S при r = 5','2.1e',
|
||||
'<ol>'
|
||||
+'<li>Записываем данные: $r = 5$, $\\pi = 3{,}14$.</li>'
|
||||
+'<li>Длина окружности: $C = 2 \\cdot \\pi \\cdot r = 2 \\cdot 3{,}14 \\cdot 5 = 31{,}4$.</li>'
|
||||
+'<li>Площадь круга: $S = \\pi \\cdot r^2 = 3{,}14 \\cdot 5^2 = 3{,}14 \\cdot 25 = 78{,}5$.</li>'
|
||||
+'<li>Проверяем единицы: длина — в тех же единицах, что и $r$; площадь — в квадратных единицах.</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','2.2t',
|
||||
'<p>Число $\\pi$ известно человечеству более 4000 лет. Вавилоняне использовали значение $3{,}125$, а египтяне — $(4/3)^2 \\approx 1{,}78$... нет, они считали $\\pi \\approx 3{,}16$. Сейчас $\\pi$ вычислено до <b>более 100 триллионов знаков</b> после запятой — и всё равно конца не видно, потому что $\\pi$ иррационально.</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">Двигай радиус — смотри, как меняются длина окружности и площадь круга ($\\pi=3{,}14$).</div>'
|
||||
+'<div class="sliders"><label>Радиус $r$ = <b id="p2-rv">3</b><input type="range" id="p2-r" min="1" max="8" value="3"></label></div>'
|
||||
@@ -260,10 +293,21 @@ function buildP2(){
|
||||
/* ===================== § 3. ВИДЫ ТРЕУГОЛЬНИКОВ ===================== */
|
||||
function buildP3(){
|
||||
var box=document.getElementById('p3-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','3.0',
|
||||
'<p>Треугольники — самая жёсткая геометрическая фигура: именно поэтому треугольные фермы держат мосты и крыши. Дорожный знак «Уступи дорогу» — равносторонний треугольник. Египетские пирамиды в разрезе дают равнобедренный треугольник. А строители, чтобы убедиться, что угол ровно прямой, проверяют соотношение сторон 3:4:5 — это прямоугольный треугольник.</p>');
|
||||
h+=makeCard('rule','По сторонам','3.1',
|
||||
'<p><b>Разносторонний</b> — все стороны разные. <b>Равнобедренный</b> — две стороны равны. <b>Равносторонний</b> — все три стороны равны (равные стороны отмечают одинаковыми штрихами).</p>');
|
||||
h+=makeCard('rule','По углам','3.2',
|
||||
'<p><b>Остроугольный</b> — все углы острые ($<90°$). <b>Прямоугольный</b> — есть прямой угол ($=90°$). <b>Тупоугольный</b> — есть тупой угол ($>90°$).</p>');
|
||||
'<p><b>Остроугольный</b> — все углы острые ($<90°$). <b>Прямоугольный</b> — есть прямой угол ($=90°$). <b>Тупоугольный</b> — есть тупой угол ($>90°$).</p>');
|
||||
h+=makeCard('example','Разбор по шагам: определи вид треугольника со сторонами 3, 4, 5','3.1e',
|
||||
'<ol>'
|
||||
+'<li>Проверяем стороны: $3 \\ne 4$, $4 \\ne 5$, $3 \\ne 5$ — все разные. По сторонам: <b>разносторонний</b>.</li>'
|
||||
+'<li>Проверяем, прямоугольный ли он: $3^2 + 4^2 = 9 + 16 = 25 = 5^2$. Теорема Пифагора выполнена!</li>'
|
||||
+'<li>Значит, есть угол $90°$. По углам: <b>прямоугольный</b>.</li>'
|
||||
+'<li>Итог: треугольник <b>прямоугольный разносторонний</b>. Это знаменитый египетский треугольник!</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','3.2t',
|
||||
'<p>Треугольник со сторонами $3$, $4$, $5$ называют «египетским» — строители Древнего Египта натягивали верёвку с 12 узлами (3+4+5) в виде треугольника, чтобы получить идеальный прямой угол для кладки стен пирамид. Этим приёмом пользуются строители до сих пор!</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">Определи вид треугольника по сторонам (штрихи отмечают равные стороны).</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p3-i">1</b> / 5</span><span>Очки: <b id="p3-s">0</b> / 5</span></div>'
|
||||
@@ -276,9 +320,20 @@ function buildP3(){
|
||||
+'<div id="p3-afig"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-a="остроугольный">остроугольный</button><button class="btn primary" data-a="прямоугольный">прямоугольный</button><button class="btn primary" data-a="тупоугольный">тупоугольный</button></div>'
|
||||
+'<div class="feedback" id="p3-afb"></div></div>';
|
||||
h+='<div class="wg" id="p3-iv3"><div class="wg-header"><span class="wg-badge">Интерактив 3</span><div class="wg-title">Классификатор треугольников</div></div>'
|
||||
+'<div class="wg-help">Перетащи каждое слово в нужный столбец: «По сторонам» или «По углам».</div>'
|
||||
+'<div id="p3-sorter"></div>'
|
||||
+'<div class="feedback" id="p3-s3fb"></div></div>';
|
||||
h+=secNav('p2','p4')+readBtn('p3');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
setupSorter('p3-sorter',{
|
||||
items:['Равносторонний','Равнобедренный','Разносторонний','Остроугольный','Прямоугольный','Тупоугольный'],
|
||||
groups:['По сторонам','По углам'],
|
||||
answers:{'Равносторонний':'По сторонам','Равнобедренный':'По сторонам','Разносторонний':'По сторонам','Остроугольный':'По углам','Прямоугольный':'По углам','Тупоугольный':'По углам'},
|
||||
onDone:function(ok,total){ var fb=document.getElementById('p3-s3fb'); if(ok===total){ feedback(fb,true,'Все '+total+' верно! Классификация усвоена.'); addXp(12,'p3-iv3'); bumpProgress('p3',20); } else { feedback(fb,false,'Верно '+ok+' из '+total+'. Попробуй ещё раз.'); } }
|
||||
});
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var t=_pick(TRIS), info=triClass(t[0],t[1],t[2]); cur={t:t,info:info}; }
|
||||
@@ -309,18 +364,50 @@ function buildP3(){
|
||||
/* ===================== § 4. СИММЕТРИЯ ОТНОСИТЕЛЬНО ТОЧКИ ===================== */
|
||||
function buildP4(){
|
||||
var box=document.getElementById('p4-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','4.0',
|
||||
'<p>Центральная симметрия — это поворот на $180°$ вокруг точки. Именно поэтому игральная карта «туз» выглядит одинаково при повороте вверх ногами: центр карты является центром симметрии. Точно так же симметричны относительно центра дорожный знак «Движение в обоих направлениях» и многие кристаллы в природе.</p>');
|
||||
h+=makeCard('theory','Центральная симметрия','4.1',
|
||||
'<p>Точки $A$ и $A\'$ <b>симметричны относительно точки</b> $O$, если $O$ — <b>середина</b> отрезка $AA\'$. Точка $O$ — <b>центр симметрии</b>.</p>'
|
||||
+'<p>Координаты образа: если $A(x;\\,y)$ и центр $O(a;\\,b)$, то $A\'(2a-x;\\;2b-y)$. Относительно начала координат: $A(x;y)\\to A\'(-x;-y)$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам: найди образ точки A(3; -2) относительно O(1; 1)','4.1e',
|
||||
'<ol>'
|
||||
+'<li>Записываем формулу: $A\'(2a - x;\\; 2b - y)$, где $a=1$, $b=1$, $x=3$, $y=-2$.</li>'
|
||||
+'<li>Считаем $x\'$: $2 \\cdot 1 - 3 = 2 - 3 = -1$.</li>'
|
||||
+'<li>Считаем $y\'$: $2 \\cdot 1 - (-2) = 2 + 2 = 4$.</li>'
|
||||
+'<li>Ответ: $A\'(-1;\\; 4)$. Проверяем: середина $AA\'$ — точка $\\left(\\tfrac{3+(-1)}{2};\\,\\tfrac{-2+4}{2}\\right) = (1;\\,1) = O$. Верно!</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','4.2t',
|
||||
'<p>Центральная симметрия — это то же самое, что поворот на $180°$. Именно поэтому многие буквы при повороте переходят сами в себя: буква «N», цифра «8», буква «S». А вот буква «R» симметрией центра не обладает — она превратится в зеркальную копию.</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">Найди координаты точки $A\'$, симметричной $A$ относительно центра $O$.</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"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x\'=$ <input type="number" id="p4-x" class="tinp" style="width:70px;text-align:center"> $y\'=$ <input type="number" id="p4-y" class="tinp" style="width:70px;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\'$, симметричной $A$ относительно <b>начала координат $O(0;0)$</b>.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="p4-i2">1</b> / 5</span><span>Очки: <b id="p4-s2">0</b> / 5</span></div>'
|
||||
+'<div id="p4-q2" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x\'=$ <input type="number" id="p4-x2" class="tinp" style="width:70px;text-align:center"> $y\'=$ <input type="number" id="p4-y2" class="tinp" style="width:70px;text-align:center"><button class="btn primary" id="p4-go2">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p4-fb2"></div></div>';
|
||||
h+=secNav('p3','p5')+readBtn('p4');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
(function(){
|
||||
var i2=0,score2=0,cur2=null;
|
||||
function gen2(){ var ax=_pick([-5,-4,-3,-2,-1,1,2,3,4,5]),ay=_pick([-5,-4,-3,-2,-1,1,2,3,4,5]); cur2={ax:ax,ay:ay,rx:-ax,ry:-ay}; }
|
||||
function show2(){ if(i2>=5){ document.getElementById('p4-q2').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(12,'p4-iv2');bumpProgress('p4',30);}else if(score2>=2){addXp(6,'p4-iv2');bumpProgress('p4',15);} return; }
|
||||
gen2(); document.getElementById('p4-i2').textContent=i2+1;
|
||||
document.getElementById('p4-q2').innerHTML='$A('+cur2.ax+';\\,'+cur2.ay+')$, центр симметрии $O(0;\\,0)$. Найди $A\'$.'; renderMath(document.getElementById('p4-q2'));
|
||||
document.getElementById('p4-x2').value=''; document.getElementById('p4-y2').value=''; document.getElementById('p4-fb2').style.display='none'; }
|
||||
function go2(){ if(i2>=5)return; var fb=document.getElementById('p4-fb2'), x=parseInt(document.getElementById('p4-x2').value,10), y=parseInt(document.getElementById('p4-y2').value,10);
|
||||
if(isNaN(x)||isNaN(y)){ feedback(fb,false,'Введи обе координаты.'); return; }
|
||||
if(x===cur2.rx&&y===cur2.ry){ score2++; feedback(fb,true,'✓ Верно: $A\'('+cur2.rx+';\\,'+cur2.ry+')$. Знаки меняются на противоположные.'); } else feedback(fb,false,'✗ Нет. $A\'(-x;\\,-y)=('+cur2.rx+';\\,'+cur2.ry+')$.');
|
||||
document.getElementById('p4-s2').textContent=score2; i2++; setTimeout(show2,1500); }
|
||||
document.getElementById('p4-go2').addEventListener('click',go2);
|
||||
document.getElementById('p4-y2').addEventListener('keydown',function(e){ if(e.key==='Enter')go2(); }); show2();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var ax=_ri(-4,4),ay=_ri(-4,4),ox=_ri(-2,2),oy=_ri(-2,2); cur={ax:ax,ay:ay,ox:ox,oy:oy,rx:2*ox-ax,ry:2*oy-ay}; }
|
||||
@@ -341,18 +428,48 @@ function buildP4(){
|
||||
/* ===================== § 5. СИММЕТРИЯ ОТНОСИТЕЛЬНО ПРЯМОЙ ===================== */
|
||||
function buildP5(){
|
||||
var box=document.getElementById('p5-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','5.0',
|
||||
'<p>Осевая симметрия — это «зеркало». Бабочки, листья деревьев, буква «А», лицо человека — все они (почти) симметричны относительно вертикальной оси. Архитекторы используют осевую симметрию при проектировании дворцов и соборов — симметричные фасады смотрятся строго и красиво. В компьютерной графике отражение объекта — это тоже осевая симметрия.</p>');
|
||||
h+=makeCard('theory','Осевая симметрия','5.1',
|
||||
'<p>Точки $A$ и $A\'$ <b>симметричны относительно прямой</b> (оси), если эта прямая — <b>серединный перпендикуляр</b> отрезка $AA\'$: она проходит через середину $AA\'$ под прямым углом.</p>'
|
||||
+'<p>Относительно оси $Oy$: $A(x;\\,y)\\to A\'(-x;\\,y)$. Относительно оси $Ox$: $A(x;\\,y)\\to A\'(x;\\,-y)$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам: найди образ точки A(-3; 4) относительно осей Ox и Oy','5.1e',
|
||||
'<ol>'
|
||||
+'<li>Исходная точка: $A(-3;\\;4)$.</li>'
|
||||
+'<li><b>Относительно $Oy$</b>: меняем знак $x$, $y$ остаётся. $A\'(3;\\;4)$. Точка «перепрыгнула» ось $Oy$ на то же расстояние.</li>'
|
||||
+'<li><b>Относительно $Ox$</b>: меняем знак $y$, $x$ остаётся. $A\'\'(-3;\\;-4)$. Точка «перепрыгнула» ось $Ox$.</li>'
|
||||
+'<li>Запоминаем: ось $Oy$ — меняется $x$; ось $Ox$ — меняется $y$. «Меняется та координата, которая перпендикулярна оси».</li>'
|
||||
+'</ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','5.2t',
|
||||
'<p>Знаменитый Тадж-Махал в Индии построен с идеальной осевой симметрией. Главная ось проходит через центральный купол. Даже отражение в водоёме перед мавзолеем задумано архитектором — так симметрия удваивается! Многие природные снежинки тоже симметричны, но уже шестикратно — относительно шести осей.</p>');
|
||||
h+='<div class="wg" id="p5-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Зеркало относительно оси</div></div>'
|
||||
+'<div class="wg-help">Найди координаты точки, симметричной $A$ относительно указанной оси.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="p5-i">1</b> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
|
||||
+'<div id="p5-fig"></div><div id="p5-q" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap">$x\'=$ <input type="number" id="p5-x" class="tinp" style="width:70px;text-align:center"> $y\'=$ <input type="number" id="p5-y" class="tinp" style="width:70px;text-align:center"><button class="btn primary" id="p5-go">Проверить</button></div>'
|
||||
+'<div class="feedback" id="p5-fb"></div></div>';
|
||||
h+='<div class="wg" id="p5-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Какая ось: Ox или Oy?</div></div>'
|
||||
+'<div class="wg-help">Тебе даны точка $A$ и её образ $A\'$. Определи, относительно какой оси сделано отражение.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p5-i2">1</b> / 5</span><span>Очки: <b id="p5-s2">0</b> / 5</span></div>'
|
||||
+'<div id="p5-q2" class="qbox"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-ax2="Oy">Ось $Oy$</button><button class="btn primary" data-ax2="Ox">Ось $Ox$</button></div>'
|
||||
+'<div class="feedback" id="p5-fb2"></div></div>';
|
||||
h+=secNav('p4','final')+readBtn('p5');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
(function(){
|
||||
var i2=0,score2=0,cur2=null;
|
||||
function gen2(){ var ax=_pick([-4,-3,-2,-1,1,2,3,4]),ay=_pick([-4,-3,-2,-1,1,2,3,4]),axis=_pick(['Oy','Ox']); cur2={ax:ax,ay:ay,axis:axis,rx:axis==='Oy'?-ax:ax,ry:axis==='Oy'?ay:-ay}; }
|
||||
function show2(){ if(i2>=5){ document.getElementById('p5-q2').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(12,'p5-iv2');bumpProgress('p5',30);}else if(score2>=2){addXp(6,'p5-iv2');bumpProgress('p5',15);} return; }
|
||||
gen2(); document.getElementById('p5-i2').textContent=i2+1;
|
||||
document.getElementById('p5-q2').innerHTML='$A('+cur2.ax+';\\,'+cur2.ay+')$ и её образ $A\'('+cur2.rx+';\\,'+cur2.ry+')$. Относительно какой оси?'; renderMath(document.getElementById('p5-q2'));
|
||||
document.getElementById('p5-fb2').style.display='none'; }
|
||||
function ans2(axis){ if(i2>=5)return; var fb=document.getElementById('p5-fb2');
|
||||
if(axis===cur2.axis){ score2++; feedback(fb,true,'✓ Верно — ось $'+cur2.axis+'$!'); } else feedback(fb,false,'✗ Нет. Это отражение относительно оси $'+cur2.axis+'$.');
|
||||
document.getElementById('p5-s2').textContent=score2; i2++; setTimeout(show2,1400); }
|
||||
document.querySelectorAll('#p5-iv2 [data-ax2]').forEach(function(b){ b.addEventListener('click',function(){ ans2(b.getAttribute('data-ax2')); }); }); show2();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var i=0,score=0,cur=null;
|
||||
function gen(){ var ax=_pick([-4,-3,-2,-1,1,2,3,4]),ay=_pick([-4,-3,-2,-1,1,2,3,4]),axis=_pick(['Oy','Ox']); cur={ax:ax,ay:ay,axis:axis,rx:axis==='Oy'?-ax:ax,ry:axis==='Oy'?ay:-ay}; }
|
||||
|
||||
Reference in New Issue
Block a user