feat(phys7 ch1): Phase 1 Wave 2 — §3, §4, §5
WIDGETS (+347 строк к phys7_ch1_widgets.js, теперь 749 строк, экспорт p1..p5): §3 «Методы исследования в физике»: - 3 карточки (3 метода / отличия / опыт Галилея на Пизанской башне) - IV-1 СИМ: timeline-список 5 исторических опытов (Архимед→Галилей→Торричелли→Паскаль→Ньютон) с раскрывающимися деталями - IV-2 КВИЗ: 4 вопроса «опыт vs наблюдение vs гипотеза vs теория» - IV-3 DnD: 8 ситуаций по 3 корзинам (наблюдение / эксперимент / гипотеза) - IV-4 ТРН: 5 вопросов закрепления §4 «Прямые и косвенные измерения» (S=ab, V=abc, rho=m/V): - 3 карточки (типы измерений / основные формулы / объём картофеля по вытеснению) - IV-1 СИМ: палитра 6 приборов (линейка/весы/термометр/секундомер/мензурка/динамометр) с единицами - IV-2 КАЛЬК (главный визуал §4): 4 slider'а a, b, c (см) и m (г) → пересчёт S, V, плотности с угадыванием вещества (дерево / алюминий / железо / свинец / золото) - IV-3 DnD: 8 примеров измерений → прямое / косвенное - IV-4 ТРН: 5 расчётных задач (площадь, объём кирпича, плотность, скорость, вытеснение) §5 «Единицы измерения. СИ»: - 3 карточки (зачем СИ / 7 основных единиц в таблице / приставки от нано до гига) - IV-1 СИМ: 7 цветных карт основных единиц СИ - IV-2 КАЛЬК конвертер: число × приставка (Г/М/к/—/с/м/мк/н) × единица (м/г/с/Вт/Гц/Н) → результат с автоформатированием (экспоненциальная запись для больших/малых) - IV-3 DnD: 8 величин → 5 основных единиц СИ - IV-4 ТРН: 5 задач на перевод (км→м, кг→г, ч→с, мс→с, см²→м²) Pre-commit, parse-check, KaTeX-аудит (одиночные backslash =0), smoke-test (экспорт=5) пройдены.
This commit is contained in:
Maxim Dolgolyov
@@ -392,11 +392,358 @@ function add_p2(){
|
||||
renderMath(body);
|
||||
}
|
||||
|
||||
/* Экспорт — заглушки для остальных §, добавятся в следующих волнах */
|
||||
/* ========================================================== */
|
||||
/* §3 — Методы исследования в физике */
|
||||
/* ========================================================== */
|
||||
function add_p3(){
|
||||
const body = document.getElementById('p3-body');
|
||||
if(!body) return;
|
||||
let h = '';
|
||||
|
||||
h += makeCard('theory', 'Как физики изучают природу', '§ 3.1',
|
||||
'Физика использует <b>три метода познания</b>:'
|
||||
+ '<ol style="padding-left:20px;margin:6px 0">'
|
||||
+ '<li><b>Наблюдение</b> — изучение явления <i>без вмешательства</i>. Учёный смотрит, фиксирует, не изменяя условий.</li>'
|
||||
+ '<li><b>Эксперимент</b> — <i>целенаправленное</i> воссоздание явления в нужных условиях с измерениями.</li>'
|
||||
+ '<li><b>Теоретическое описание</b> — построение модели, формул, законов; <i>гипотеза</i> сначала, потом — проверка.</li>'
|
||||
+ '</ol>');
|
||||
|
||||
h += makeCard('rule', 'Чем отличаются?', '§ 3.2',
|
||||
'<b>Наблюдение</b>: смотрим за грозой — не запускаем её сами.<br>'
|
||||
+ '<b>Эксперимент</b>: бросаем шары разной массы в трубке без воздуха и измеряем время падения.<br>'
|
||||
+ '<b>Гипотеза</b>: «может быть, тела падают одинаково в вакууме?» — её надо <i>проверить</i> экспериментом.<br>'
|
||||
+ '<b>Теория</b>: подтверждённая гипотеза становится частью знаний — например, закон всемирного тяготения.');
|
||||
|
||||
h += makeCard('example', 'Опыт Галилея с Пизанской башней', '§ 3.3',
|
||||
'По легенде, в конце XVI века <b>Галилео Галилей</b> поднялся на наклонную Пизанскую башню '
|
||||
+ 'и одновременно бросил с её вершины два шара разной массы — тяжёлый и лёгкий. '
|
||||
+ 'Шары упали на землю <b>почти одновременно</b>. Это был <b>эксперимент</b>, '
|
||||
+ 'опровергнувший представление Аристотеля о том, что тяжёлые тела падают быстрее. '
|
||||
+ 'Так появилась гипотеза «все тела падают с одним ускорением», позже подтверждённая в опытах с вакуумной трубкой.');
|
||||
|
||||
/* IV-1: timeline исторических опытов */
|
||||
h += wgWrap('p3-iv1', 'СИМ', 'Великие опыты и наблюдения', 'Кликай по этапам — узнавай, чем прославился каждый учёный.',
|
||||
'<div style="position:relative;padding:8px 0">'
|
||||
+ ['Архимед / III в. до н. э. — закон рычага. Наблюдение и расчёт.',
|
||||
'Галилей / 1590-е — падение тел с башни. Эксперимент.',
|
||||
'Торричелли / 1643 — открыл атмосферное давление. Эксперимент с ртутью.',
|
||||
'Паскаль / 1648 — закон передачи давления. Эксперимент и теория.',
|
||||
'Ньютон / 1687 — закон всемирного тяготения. Теория, объединившая всё.'].map((txt, i) => {
|
||||
const [name, rest] = txt.split(' — ');
|
||||
return '<details style="background:#f0f9ff;border-left:3px solid #4f46e5;border-radius:6px;margin-bottom:6px;padding:8px 12px"><summary style="font-weight:700;cursor:pointer;font-size:.94rem">' + (i+1) + '. ' + name + '</summary><div style="margin-top:6px;color:#475569;font-size:.88rem;line-height:1.55">' + rest + '</div></details>';
|
||||
}).join('')
|
||||
+ '</div>');
|
||||
|
||||
/* IV-2: КВИЗ опыт vs наблюдение */
|
||||
h += wgWrap('p3-iv2', 'КВИЗ', 'Опыт или наблюдение?', 'Выбери, какой метод использован.',
|
||||
'<div id="p3-q-host">'
|
||||
+ quizQuestion('p3-q', 0, 'Метеоролог смотрит на облака и записывает их форму.', ['Наблюдение','Эксперимент','Гипотеза','Теория'], 0)
|
||||
+ quizQuestion('p3-q', 1, 'Ученик помещает шарик в воду и измеряет, насколько поднялся уровень.', ['Наблюдение','Эксперимент','Гипотеза','Теория'], 1)
|
||||
+ quizQuestion('p3-q', 2, 'Учёный предполагает: «возможно, металл проводит тепло из-за свободных электронов».', ['Наблюдение','Эксперимент','Гипотеза','Теория'], 2)
|
||||
+ quizQuestion('p3-q', 3, 'Архимед открыл закон рычага и записал его в виде формулы $F_1 l_1 = F_2 l_2$.', ['Наблюдение','Эксперимент','Гипотеза','Теория'], 3, 'Подтверждённое соотношение — это теория (закон).')
|
||||
+ '</div>');
|
||||
|
||||
/* IV-3: DnD «классифицируй» */
|
||||
h += wgWrap('p3-iv3', 'DnD', 'Классификация ситуаций', 'Распредели 8 ситуаций по трём корзинам.',
|
||||
dndPool('p3-dnd', [
|
||||
{ id:'a1', cat:'obs', html:'Смотрим, как тает снег весной' },
|
||||
{ id:'a2', cat:'obs', html:'Записываем температуру за неделю' },
|
||||
{ id:'a3', cat:'exp', html:'Нагреваем металл лампой и измеряем удлинение' },
|
||||
{ id:'a4', cat:'exp', html:'Сравниваем падение перышка в трубке с воздухом и без' },
|
||||
{ id:'a5', cat:'hyp', html:'Возможно, скорость света — максимальная во Вселенной' },
|
||||
{ id:'a6', cat:'hyp', html:'Может быть, существуют тёмная материя и тёмная энергия' },
|
||||
{ id:'a7', cat:'exp', html:'Бросаем мяч с разной высоты и засекаем время полёта' },
|
||||
{ id:'a8', cat:'obs', html:'Изучаем затмение Луны' }
|
||||
], [
|
||||
{ cat:'obs', label:'Наблюдение' },
|
||||
{ cat:'exp', label:'Эксперимент' },
|
||||
{ cat:'hyp', label:'Гипотеза' }
|
||||
]));
|
||||
|
||||
/* IV-4: тренажёр */
|
||||
h += wgWrap('p3-iv4', 'ТРН', 'Тренажёр §3', 'Закрепи материал.',
|
||||
'<div id="p3-tr-host">'
|
||||
+ quizQuestion('p3-tr', 0, 'Что НЕ относится к методам познания в физике?', ['Наблюдение','Эксперимент','Угадывание','Теория'], 2, 'Угадывание — это не научный метод.')
|
||||
+ quizQuestion('p3-tr', 1, 'Главное отличие эксперимента от наблюдения — это…', ['Использование приборов','Активное вмешательство и контроль условий','Запись результатов','Участие учёного'], 1)
|
||||
+ quizQuestion('p3-tr', 2, 'Гипотеза становится теорией, когда…', ['Её опубликовали','Она проверена опытом','Её одобрил профессор','Её записали в учебник'], 1)
|
||||
+ quizQuestion('p3-tr', 3, 'Какой учёный знаменит опытами с падающими телами?', ['Архимед','Галилей','Ньютон','Эйнштейн'], 1)
|
||||
+ quizQuestion('p3-tr', 4, 'Что такое физическая модель?', ['Реальный прибор','Упрощённое представление явления для расчётов','Любая теория','Только формула'], 1, 'Модель опускает несущественные детали ради простоты.')
|
||||
+ '</div>');
|
||||
|
||||
h += readButton('p3');
|
||||
|
||||
body.innerHTML = h;
|
||||
wireDnd('p3-dnd', [
|
||||
{ id:'a1', cat:'obs' },{ id:'a2', cat:'obs' },{ id:'a3', cat:'exp' },{ id:'a4', cat:'exp' },
|
||||
{ id:'a5', cat:'hyp' },{ id:'a6', cat:'hyp' },{ id:'a7', cat:'exp' },{ id:'a8', cat:'obs' }
|
||||
], []);
|
||||
wireQuiz('p3-q-host', () => { if(window.addXp) window.addXp(10, 'quiz-p3'); });
|
||||
wireQuiz('p3-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p3'); });
|
||||
wireReadBtn('p3');
|
||||
renderMath(body);
|
||||
}
|
||||
|
||||
/* ========================================================== */
|
||||
/* §4 — Прямые и косвенные измерения */
|
||||
/* ========================================================== */
|
||||
function add_p4(){
|
||||
const body = document.getElementById('p4-body');
|
||||
if(!body) return;
|
||||
let h = '';
|
||||
|
||||
h += makeCard('theory', 'Два типа измерений', '§ 4.1',
|
||||
'<b>Прямое измерение</b> — значение читается <i>прямо со шкалы прибора</i>. '
|
||||
+ 'Длину книги — линейкой, массу — весами, время — секундомером, температуру — термометром.<br><br>'
|
||||
+ '<b>Косвенное измерение</b> — значение <i>вычисляется по формуле</i> из других величин, '
|
||||
+ 'измеренных прямо. Например, чтобы найти площадь стола, измеряют длину и ширину линейкой '
|
||||
+ '(прямые), а площадь $S = a b$ — это уже косвенное измерение.');
|
||||
|
||||
h += makeCard('rule', 'Основные формулы косвенных измерений', '§ 4.2',
|
||||
'<ul style="padding-left:20px;margin:4px 0;line-height:1.85">'
|
||||
+ '<li><b>Площадь прямоугольника:</b> $S = a \\cdot b$, $[S] = $ м²</li>'
|
||||
+ '<li><b>Объём прямоугольного параллелепипеда:</b> $V = a \\cdot b \\cdot c$, $[V] = $ м³</li>'
|
||||
+ '<li><b>Объём через цилиндр:</b> $V = S \\cdot h$ (если известна площадь основания)</li>'
|
||||
+ '<li><b>Плотность вещества:</b> $\\rho = \\dfrac{m}{V}$, $[\\rho] = $ кг/м³</li>'
|
||||
+ '<li><b>Скорость:</b> $v = \\dfrac{s}{t}$, $[v] = $ м/с</li>'
|
||||
+ '</ul>');
|
||||
|
||||
h += makeCard('example', 'Объём картофеля', '§ 4.3',
|
||||
'Картофелина имеет неправильную форму — линейкой её не измерить. Но можно сделать так:'
|
||||
+ '<ol style="padding-left:20px;margin:6px 0">'
|
||||
+ '<li>Налить в мензурку воды до отметки $V_1 = 200$ мл (прямое измерение).</li>'
|
||||
+ '<li>Опустить картофелину; уровень поднялся до $V_2 = 280$ мл (прямое).</li>'
|
||||
+ '<li>Объём картофелины: $V = V_2 - V_1 = 80$ мл $= 80$ см³ (косвенное).</li>'
|
||||
+ '</ol>');
|
||||
|
||||
/* IV-1: лаборатория приборов */
|
||||
h += wgWrap('p4-iv1', 'СИМ', 'Лаборатория измерительных приборов', 'Каждый прибор даёт <i>прямое</i> измерение одной величины.',
|
||||
'<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px">'
|
||||
+ [
|
||||
['Линейка','длина','м, см, мм','#0284c7'],
|
||||
['Весы','масса','кг, г','#7c3aed'],
|
||||
['Термометр','температура','°C','#dc2626'],
|
||||
['Секундомер','время','с, мин','#10b981'],
|
||||
['Мензурка','объём жидкости','мл, л','#0891b2'],
|
||||
['Динамометр','сила','Н','#d97706']
|
||||
].map(([nm, v, u, col]) =>
|
||||
'<div style="background:#f0f9ff;border:1.5px solid ' + col + ';border-radius:10px;padding:12px;text-align:center">'
|
||||
+ '<div style="font-family:Unbounded,sans-serif;font-weight:800;color:' + col + ';font-size:.96rem">' + nm + '</div>'
|
||||
+ '<div style="font-size:.84rem;color:#475569;margin-top:4px">' + v + '</div>'
|
||||
+ '<div style="font-size:.76rem;color:#64748b;margin-top:2px;font-family:JetBrains Mono,monospace">' + u + '</div>'
|
||||
+ '</div>').join('')
|
||||
+ '</div>');
|
||||
|
||||
/* IV-2: главный калькулятор косвенных измерений */
|
||||
h += wgWrap('p4-iv2', 'КАЛЬК', 'Калькулятор косвенных измерений', 'Меняй размеры $a, b, c$ и массу $m$ — формулы пересчитываются автоматически.',
|
||||
'<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px">'
|
||||
+ '<label style="display:block;font-size:.86rem;color:#475569;background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #bae6fd">$a$, см: <b id="p4-a" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">10</b><input type="range" id="p4-a-r" min="1" max="50" step="1" value="10" style="display:block;width:100%;margin-top:6px;accent-color:#0284c7"></label>'
|
||||
+ '<label style="display:block;font-size:.86rem;color:#475569;background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #bae6fd">$b$, см: <b id="p4-b" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">5</b><input type="range" id="p4-b-r" min="1" max="50" step="1" value="5" style="display:block;width:100%;margin-top:6px;accent-color:#0284c7"></label>'
|
||||
+ '<label style="display:block;font-size:.86rem;color:#475569;background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #bae6fd">$c$, см: <b id="p4-c" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">3</b><input type="range" id="p4-c-r" min="1" max="50" step="1" value="3" style="display:block;width:100%;margin-top:6px;accent-color:#0284c7"></label>'
|
||||
+ '<label style="display:block;font-size:.86rem;color:#475569;background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #bae6fd">$m$, г: <b id="p4-m" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">405</b><input type="range" id="p4-m-r" min="10" max="5000" step="5" value="405" style="display:block;width:100%;margin-top:6px;accent-color:#0284c7"></label>'
|
||||
+ '</div>'
|
||||
+ '<div style="background:#e0f2fe;border-radius:9px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font-size:.94rem">'
|
||||
+ '<div>Площадь: $S = a b = $ <b id="p4-S" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">50</b> см²</div>'
|
||||
+ '<div>Объём: $V = a b c = $ <b id="p4-V" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">150</b> см³</div>'
|
||||
+ '<div>Плотность: $\\rho = m/V = $ <b id="p4-rho" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">2.7</b> г/см³ <span id="p4-rho-name" style="color:#475569;font-size:.84rem;margin-left:6px">(близко к алюминию)</span></div>'
|
||||
+ '</div>');
|
||||
|
||||
/* IV-3: DnD прямое/косвенное */
|
||||
h += wgWrap('p4-iv3', 'DnD', 'Прямое или косвенное?', 'Распредели измерения по типу.',
|
||||
dndPool('p4-dnd', [
|
||||
{ id:'a1', cat:'dir', html:'Длина книги линейкой' },
|
||||
{ id:'a2', cat:'ind', html:'Площадь стола из длины × ширины' },
|
||||
{ id:'a3', cat:'dir', html:'Температура воздуха термометром' },
|
||||
{ id:'a4', cat:'ind', html:'Скорость велосипедиста (путь / время)' },
|
||||
{ id:'a5', cat:'dir', html:'Время урока секундомером' },
|
||||
{ id:'a6', cat:'ind', html:'Объём картофеля через вытеснение воды' },
|
||||
{ id:'a7', cat:'dir', html:'Масса яблока на весах' },
|
||||
{ id:'a8', cat:'ind', html:'Плотность металла $\\rho = m/V$' }
|
||||
], [
|
||||
{ cat:'dir', label:'Прямое' },
|
||||
{ cat:'ind', label:'Косвенное' }
|
||||
]));
|
||||
|
||||
/* IV-4: тренажёр расчётных */
|
||||
h += wgWrap('p4-iv4', 'ТРН', 'Тренажёр §4', '5 расчётных задач.',
|
||||
'<div id="p4-tr-host">'
|
||||
+ quizQuestion('p4-tr', 0, 'Прямоугольник: $a = 6$ см, $b = 4$ см. Площадь $S = ?$', ['10 см²','24 см²','12 см²','20 см²'], 1, '$S = 6 \\cdot 4 = 24$ см².')
|
||||
+ quizQuestion('p4-tr', 1, 'Кирпич: $a = 25$ см, $b = 12$ см, $c = 6{,}5$ см. Объём $V$?', ['1900 см³','1950 см³','2000 см³','2500 см³'], 1, '$V = 25 \\cdot 12 \\cdot 6{,}5 = 1950$ см³.')
|
||||
+ quizQuestion('p4-tr', 2, 'Тело массой $m = 200$ г занимает объём $V = 25$ см³. Плотность?', ['4 г/см³','6 г/см³','8 г/см³','10 г/см³'], 2, '$\\rho = m/V = 200/25 = 8$ г/см³ (близко к железу).')
|
||||
+ quizQuestion('p4-tr', 3, 'Путь $s = 60$ м, время $t = 12$ с. Скорость?', ['4 м/с','5 м/с','6 м/с','8 м/с'], 1, '$v = s/t = 60/12 = 5$ м/с.')
|
||||
+ quizQuestion('p4-tr', 4, 'В мензурку с водой $V_1 = 50$ мл опустили камень — уровень поднялся до $V_2 = 78$ мл. Объём камня?', ['22 мл','28 мл','32 мл','78 мл'], 1, '$V = V_2 - V_1 = 78 - 50 = 28$ мл.')
|
||||
+ '</div>');
|
||||
|
||||
h += readButton('p4');
|
||||
|
||||
body.innerHTML = h;
|
||||
|
||||
// Wire calc §4 IV-2
|
||||
const upd = () => {
|
||||
const a = +document.getElementById('p4-a-r').value;
|
||||
const b = +document.getElementById('p4-b-r').value;
|
||||
const c = +document.getElementById('p4-c-r').value;
|
||||
const m = +document.getElementById('p4-m-r').value;
|
||||
document.getElementById('p4-a').textContent = a;
|
||||
document.getElementById('p4-b').textContent = b;
|
||||
document.getElementById('p4-c').textContent = c;
|
||||
document.getElementById('p4-m').textContent = m;
|
||||
const S = a * b;
|
||||
const V = a * b * c;
|
||||
const rho = m / V;
|
||||
document.getElementById('p4-S').textContent = S;
|
||||
document.getElementById('p4-V').textContent = V;
|
||||
document.getElementById('p4-rho').textContent = rho.toFixed(2);
|
||||
// Угадывание вещества по плотности (г/см³)
|
||||
let name = '';
|
||||
if(rho < 0.3) name = '(легче пенопласта — нереально!)';
|
||||
else if(rho < 0.7) name = '(дерево / сосна)';
|
||||
else if(rho < 1.1) name = '(вода или лёд)';
|
||||
else if(rho < 3.5) name = '(алюминий / стекло)';
|
||||
else if(rho < 9) name = '(железо / медь)';
|
||||
else if(rho < 15) name = '(свинец / ртуть)';
|
||||
else if(rho < 22) name = '(золото / платина)';
|
||||
else name = '(плотнее любого металла)';
|
||||
document.getElementById('p4-rho-name').textContent = name;
|
||||
};
|
||||
['p4-a-r','p4-b-r','p4-c-r','p4-m-r'].forEach(id => document.getElementById(id).addEventListener('input', upd));
|
||||
upd();
|
||||
|
||||
wireDnd('p4-dnd', [
|
||||
{ id:'a1', cat:'dir' },{ id:'a2', cat:'ind' },{ id:'a3', cat:'dir' },{ id:'a4', cat:'ind' },
|
||||
{ id:'a5', cat:'dir' },{ id:'a6', cat:'ind' },{ id:'a7', cat:'dir' },{ id:'a8', cat:'ind' }
|
||||
], []);
|
||||
wireQuiz('p4-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p4'); });
|
||||
wireReadBtn('p4');
|
||||
renderMath(body);
|
||||
}
|
||||
|
||||
/* ========================================================== */
|
||||
/* §5 — Единицы измерения физических величин. СИ */
|
||||
/* ========================================================== */
|
||||
function add_p5(){
|
||||
const body = document.getElementById('p5-body');
|
||||
if(!body) return;
|
||||
let h = '';
|
||||
|
||||
h += makeCard('theory', 'Зачем СИ?', '§ 5.1',
|
||||
'Если каждый учёный использует свои единицы — результаты невозможно сравнить. '
|
||||
+ 'В 1960 году принята <b>Международная система единиц (СИ)</b> — единый стандарт. '
|
||||
+ 'В СИ — <b>7 основных единиц</b>; все остальные получаются комбинацией основных.');
|
||||
|
||||
h += makeCard('rule', '7 основных единиц СИ', '§ 5.2',
|
||||
'<table style="width:100%;border-collapse:collapse;margin-top:4px;font-size:.92rem">'
|
||||
+ '<tr style="background:#e0f2fe"><th style="text-align:left;padding:6px 10px;border-bottom:2px solid #0284c7">Величина</th><th style="text-align:left;padding:6px 10px;border-bottom:2px solid #0284c7">Единица</th><th style="text-align:left;padding:6px 10px;border-bottom:2px solid #0284c7">Обозначение</th></tr>'
|
||||
+ [['Длина','метр','м'],['Масса','килограмм','кг'],['Время','секунда','с'],['Сила тока','ампер','А'],['Температура','кельвин','К'],['Кол-во вещества','моль','моль'],['Сила света','кандела','кд']].map(([v,u,s]) =>
|
||||
'<tr><td style="padding:5px 10px;border-bottom:1px solid #e0f2fe">' + v + '</td><td style="padding:5px 10px;border-bottom:1px solid #e0f2fe"><b>' + u + '</b></td><td style="padding:5px 10px;border-bottom:1px solid #e0f2fe;font-family:JetBrains Mono,monospace;color:#0c4a6e">' + s + '</td></tr>').join('')
|
||||
+ '</table>');
|
||||
|
||||
h += makeCard('example', 'Кратные и дольные приставки', '§ 5.3',
|
||||
'<table style="width:100%;border-collapse:collapse;margin-top:4px;font-size:.92rem">'
|
||||
+ '<tr style="background:#e0f2fe"><th style="text-align:left;padding:6px 10px">Приставка</th><th style="text-align:left;padding:6px 10px">Множитель</th><th style="text-align:left;padding:6px 10px">Пример</th></tr>'
|
||||
+ [['Г (гига)','$10^9$','1 ГГц = $10^9$ Гц'],['М (мега)','$10^6$','1 МВт = $10^6$ Вт'],['к (кило)','$10^3$','1 кг = 1000 г'],['—','1','1 м'],['м (милли)','$10^{-3}$','1 мс = 0,001 с'],['мк (микро)','$10^{-6}$','1 мкм = $10^{-6}$ м'],['н (нано)','$10^{-9}$','1 нс = $10^{-9}$ с']].map(([pf,k,ex]) =>
|
||||
'<tr><td style="padding:4px 10px;border-bottom:1px solid #e0f2fe"><b>' + pf + '</b></td><td style="padding:4px 10px;border-bottom:1px solid #e0f2fe">' + k + '</td><td style="padding:4px 10px;border-bottom:1px solid #e0f2fe;font-family:JetBrains Mono,monospace;font-size:.84rem">' + ex + '</td></tr>').join('')
|
||||
+ '</table>');
|
||||
|
||||
/* IV-1: визуал — 7 основных */
|
||||
h += wgWrap('p5-iv1', 'СИМ', '7 китов СИ', 'Семь основных единиц — фундамент всех физических измерений.',
|
||||
'<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px">'
|
||||
+ [['Длина','м','#0284c7'],['Масса','кг','#7c3aed'],['Время','с','#10b981'],['Ток','А','#d97706'],['Темп.','К','#dc2626'],['Вещ-во','моль','#0891b2'],['Свет','кд','#fbbf24']].map(([v, u, col]) =>
|
||||
'<div style="background:linear-gradient(135deg,' + col + ',' + col + '99);color:#fff;border-radius:11px;padding:14px 10px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.12)">'
|
||||
+ '<div style="font-family:JetBrains Mono,monospace;font-weight:900;font-size:1.6rem">' + u + '</div>'
|
||||
+ '<div style="font-weight:700;font-size:.84rem;margin-top:4px;opacity:.95">' + v + '</div>'
|
||||
+ '</div>').join('')
|
||||
+ '</div>');
|
||||
|
||||
/* IV-2: главный конвертер */
|
||||
h += wgWrap('p5-iv2', 'КАЛЬК', 'Конвертер единиц', 'Выбери приставку и величину — увидь перевод в основную единицу СИ.',
|
||||
'<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:12px">'
|
||||
+ '<label style="display:block;font-size:.84rem;color:#475569;background:#fff;padding:8px 10px;border-radius:8px;border:1px solid #bae6fd">Число: <b id="p5-n" style="color:#0c4a6e;font-family:JetBrains Mono,monospace">5</b><input type="range" id="p5-n-r" min="1" max="999" step="1" value="5" style="display:block;width:100%;margin-top:6px;accent-color:#0284c7"></label>'
|
||||
+ '<label style="display:block;font-size:.84rem;color:#475569;background:#fff;padding:8px 10px;border-radius:8px;border:1px solid #bae6fd">Приставка:<select id="p5-pf" style="width:100%;margin-top:6px;padding:5px;border-radius:6px;border:1px solid #bae6fd;font-family:inherit"><option value="1e9">Г (гига, $10^9$)</option><option value="1e6">М (мега, $10^6$)</option><option value="1e3" selected>к (кило, $10^3$)</option><option value="1">— (без приставки)</option><option value="1e-2">с (санти, $10^{-2}$)</option><option value="1e-3">м (милли, $10^{-3}$)</option><option value="1e-6">мк (микро, $10^{-6}$)</option><option value="1e-9">н (нано, $10^{-9}$)</option></select></label>'
|
||||
+ '<label style="display:block;font-size:.84rem;color:#475569;background:#fff;padding:8px 10px;border-radius:8px;border:1px solid #bae6fd">Единица:<select id="p5-u" style="width:100%;margin-top:6px;padding:5px;border-radius:6px;border:1px solid #bae6fd;font-family:inherit"><option value="м" selected>м (метр)</option><option value="г">г (грамм)</option><option value="с">с (секунда)</option><option value="Вт">Вт (ватт)</option><option value="Гц">Гц (герц)</option><option value="Н">Н (ньютон)</option></select></label>'
|
||||
+ '</div>'
|
||||
+ '<div style="background:#e0f2fe;border-radius:9px;padding:12px 14px;font-size:.96rem">'
|
||||
+ '<span id="p5-src" style="font-family:JetBrains Mono,monospace;color:#0c4a6e;font-weight:700">5 км</span>'
|
||||
+ ' = '
|
||||
+ '<span id="p5-dst" style="font-family:JetBrains Mono,monospace;color:#0c4a6e;font-weight:700">5000 м</span>'
|
||||
+ '<div id="p5-explain" style="font-size:.82rem;color:#475569;margin-top:6px"></div>'
|
||||
+ '</div>');
|
||||
|
||||
/* IV-3: DnD — величина ↔ единица СИ */
|
||||
h += wgWrap('p5-iv3', 'DnD', 'Величина ↔ единица СИ', 'Соедини каждую величину с её основной единицей.',
|
||||
dndPool('p5-dnd', [
|
||||
{ id:'a1', cat:'m', html:'Длина' },
|
||||
{ id:'a2', cat:'kg', html:'Масса' },
|
||||
{ id:'a3', cat:'s', html:'Время' },
|
||||
{ id:'a4', cat:'K', html:'Температура' },
|
||||
{ id:'a5', cat:'A', html:'Сила тока' },
|
||||
{ id:'a6', cat:'m', html:'Расстояние от Минска до Бреста' },
|
||||
{ id:'a7', cat:'kg', html:'Масса арбуза' },
|
||||
{ id:'a8', cat:'s', html:'Длительность урока' }
|
||||
], [
|
||||
{ cat:'m', label:'метр (м)' },
|
||||
{ cat:'kg', label:'килограмм (кг)' },
|
||||
{ cat:'s', label:'секунда (с)' },
|
||||
{ cat:'K', label:'кельвин (К)' },
|
||||
{ cat:'A', label:'ампер (А)' }
|
||||
]));
|
||||
|
||||
/* IV-4: тренажёр на перевод */
|
||||
h += wgWrap('p5-iv4', 'ТРН', 'Тренажёр §5', '5 задач на перевод единиц.',
|
||||
'<div id="p5-tr-host">'
|
||||
+ quizQuestion('p5-tr', 0, '$5$ км $= ?$ м', ['50','500','5 000','50 000'], 2, '$5 \\cdot 1000 = 5\\,000$ м.')
|
||||
+ quizQuestion('p5-tr', 1, '$0{,}25$ кг $= ?$ г', ['25','100','250','2500'], 2, '$0{,}25 \\cdot 1000 = 250$ г.')
|
||||
+ quizQuestion('p5-tr', 2, '$2$ ч $= ?$ с', ['120','3 600','7 200','12 000'], 2, '$2 \\cdot 60 \\cdot 60 = 7\\,200$ с.')
|
||||
+ quizQuestion('p5-tr', 3, '$300$ мс $= ?$ с', ['0,03','0,3','3','30'], 1, '$300 \\cdot 10^{-3} = 0{,}3$ с.')
|
||||
+ quizQuestion('p5-tr', 4, '$1$ см² $= ?$ м²', ['0,1','0,01','0,001','0,0001'], 3, '$1\\,\\text{см}^2 = (10^{-2}\\,\\text{м})^2 = 10^{-4}\\,\\text{м}^2$.')
|
||||
+ '</div>');
|
||||
|
||||
h += readButton('p5');
|
||||
|
||||
body.innerHTML = h;
|
||||
|
||||
// Wire converter §5 IV-2
|
||||
const updConv = () => {
|
||||
const n = +document.getElementById('p5-n-r').value;
|
||||
const pf = +document.getElementById('p5-pf').value;
|
||||
const u = document.getElementById('p5-u').value;
|
||||
document.getElementById('p5-n').textContent = n;
|
||||
const prefixLabels = { '1000000000':'Г','1000000':'М','1000':'к','1':'','0.01':'с','0.001':'м','1e-6':'мк','1e-9':'н' };
|
||||
// Получим символ по value
|
||||
const sel = document.getElementById('p5-pf');
|
||||
const pfLabel = (sel.options[sel.selectedIndex].text.match(/^([А-Яа-я—]+)/) || ['',''])[1];
|
||||
const result = n * pf;
|
||||
// Format result
|
||||
let resStr;
|
||||
if(Math.abs(result) >= 1e6 || (Math.abs(result) > 0 && Math.abs(result) < 0.001)) resStr = result.toExponential(2);
|
||||
else if(Number.isInteger(result)) resStr = result.toLocaleString('ru-RU');
|
||||
else resStr = (+result.toPrecision(6)).toLocaleString('ru-RU');
|
||||
document.getElementById('p5-src').textContent = n + ' ' + pfLabel + u;
|
||||
document.getElementById('p5-dst').textContent = resStr + ' ' + u;
|
||||
const explain = pf === 1 ? 'Без приставки.' : ('Множитель ' + (pf >= 1 ? pf.toLocaleString('ru-RU') : pf) + '. Умножаем число на этот множитель.');
|
||||
document.getElementById('p5-explain').textContent = explain;
|
||||
};
|
||||
document.getElementById('p5-n-r').addEventListener('input', updConv);
|
||||
document.getElementById('p5-pf').addEventListener('change', updConv);
|
||||
document.getElementById('p5-u').addEventListener('change', updConv);
|
||||
updConv();
|
||||
|
||||
wireDnd('p5-dnd', [
|
||||
{ id:'a1', cat:'m' },{ id:'a2', cat:'kg' },{ id:'a3', cat:'s' },{ id:'a4', cat:'K' },
|
||||
{ id:'a5', cat:'A' },{ id:'a6', cat:'m' },{ id:'a7', cat:'kg' },{ id:'a8', cat:'s' }
|
||||
], []);
|
||||
wireQuiz('p5-tr-host', () => { if(window.addXp) window.addXp(15, 'tr-p5'); });
|
||||
wireReadBtn('p5');
|
||||
renderMath(body);
|
||||
}
|
||||
|
||||
/* Экспорт */
|
||||
window.PHYS7_CH1_WIDGETS = {
|
||||
p1: add_p1,
|
||||
p2: add_p2
|
||||
// p3..p7, final1 — в Wave 2/3
|
||||
p2: add_p2,
|
||||
p3: add_p3,
|
||||
p4: add_p4,
|
||||
p5: add_p5
|
||||
// p6, p7, final1 — в Wave 3
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user