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
@@ -108,9 +108,19 @@ function grid100(p){ var s=''; for(var r=0;r<10;r++)for(var c=0;c<10;c++){ var i
|
||||
/* ===================== § 1. ПРОЦЕНТЫ ===================== */
|
||||
function buildP1(){
|
||||
var box=document.getElementById('p1-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','1.0',
|
||||
'<p>Проценты окружают нас повсюду: скидка 30% в магазине, 5% годовых на вкладе, 12% жира в сметане, 90% влажности на улице. Даже рейтинг игрока в онлайн-игре — это процент побед. Тот, кто понимает проценты, не даст себя обмануть на распродаже и сможет выбрать выгодный вклад в банке.</p>');
|
||||
h+=makeCard('theory','Что такое процент','1.1',
|
||||
'<p><b>Процент</b> — это сотая доля числа. $1\\% = \\dfrac{1}{100} = 0{,}01$. Знак процента — $\\%$.</p>'
|
||||
+'<p>Всё число — это $100\\%$. Половина — $50\\%$, четверть — $25\\%$, пятая часть — $20\\%$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','1.01',
|
||||
'<p>Задача: переведи $35\\%$ в десятичную дробь и в обыкновенную дробь.</p>'
|
||||
+'<ol><li>Вспоминаем: процент — сотая доля. Значит $35\\% = \\dfrac{35}{100}$.</li>'
|
||||
+'<li>Чтобы получить десятичную дробь, делим числитель на знаменатель: $35 \\div 100 = 0{,}35$.</li>'
|
||||
+'<li>Сокращаем обыкновенную дробь: $\\dfrac{35}{100} = \\dfrac{7}{20}$.</li>'
|
||||
+'<li>Проверка обратно: $0{,}35 \\times 100 = 35\\%$ — верно!</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','1.02',
|
||||
'<p>Слово «процент» происходит от латинского <i>pro centum</i> — «за сотню». В Древнем Риме торговцы брали плату за каждые 100 монет займа. Сегодня символ % используется во всём мире, хотя в некоторых странах пишут «pct» или «p.c.».</p>');
|
||||
h+=makeCard('rule','Перевод процентов','1.2',
|
||||
'<p>Проценты $\\to$ десятичная дробь: делим на $100$ (запятая влево на 2 знака): $35\\% = 0{,}35$.</p>'
|
||||
+'<p>Десятичная дробь $\\to$ проценты: умножаем на $100$: $0{,}7 = 70\\%$.</p>'
|
||||
@@ -156,12 +166,27 @@ function buildP1(){
|
||||
/* ===================== § 2. ОСНОВНЫЕ ЗАДАЧИ НА ПРОЦЕНТЫ ===================== */
|
||||
function buildP2(){
|
||||
var box=document.getElementById('p2-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','2.0',
|
||||
'<p>Три задачи на проценты — это три реальных вопроса. В магазине: «Сколько рублей составляет скидка 20% от цены 500 руб.?» — тип 1. В банке: «Если 150 руб. — это 30% моих сбережений, сколько у меня всего?» — тип 2. В спорте: «Команда выиграла 18 игр из 24 — какой это процент побед?» — тип 3. Умея решать все три, ты разберёшься в любой жизненной ситуации с процентами.</p>');
|
||||
h+=makeCard('rule','Три типа задач на проценты','2.1',
|
||||
'<p><b>1) Процент от числа.</b> Найти $m\\%$ от $a$: $\\;b = \\dfrac{a}{100}\\cdot m$.</p>'
|
||||
+'<p><b>2) Число по его проценту.</b> $b$ — это $m\\%$ от $a$, найти $a$: $\\;a = \\dfrac{b}{m}\\cdot 100$.</p>'
|
||||
+'<p><b>3) Процентное отношение.</b> Какой процент $b$ от $a$: $\\;m\\% = \\dfrac{b}{a}\\cdot 100\\%$.</p>');
|
||||
h+=makeCard('example','Примеры','2.2',
|
||||
'<p>$20\\%$ от $150$: $\\dfrac{150}{100}\\cdot 20 = 30$. $15$ — это $30\\%$ от $\\dfrac{15}{30}\\cdot 100 = 50$. $30$ от $120$: $\\dfrac{30}{120}\\cdot 100 = 25\\%$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','2.2',
|
||||
'<p><b>Тип 1.</b> Найти $20\\%$ от $150$.</p>'
|
||||
+'<ol><li>Формула: $b = \\dfrac{a}{100}\\cdot m = \\dfrac{150}{100}\\cdot 20$.</li>'
|
||||
+'<li>Вычисляем: $\\dfrac{150}{100} = 1{,}5$; $\\;1{,}5 \\cdot 20 = 30$.</li>'
|
||||
+'<li>Ответ: $30$.</li></ol>'
|
||||
+'<p><b>Тип 2.</b> $15$ — это $30\\%$ от какого числа?</p>'
|
||||
+'<ol><li>Формула: $a = \\dfrac{b}{m}\\cdot 100 = \\dfrac{15}{30}\\cdot 100$.</li>'
|
||||
+'<li>$\\dfrac{15}{30} = 0{,}5$; $\\;0{,}5 \\cdot 100 = 50$.</li>'
|
||||
+'<li>Ответ: $50$.</li></ol>'
|
||||
+'<p><b>Тип 3.</b> Какой процент $30$ составляет от $120$?</p>'
|
||||
+'<ol><li>Формула: $m\\% = \\dfrac{b}{a}\\cdot 100\\% = \\dfrac{30}{120}\\cdot 100\\%$.</li>'
|
||||
+'<li>$\\dfrac{30}{120} = 0{,}25$; $\\;0{,}25 \\cdot 100 = 25$.</li>'
|
||||
+'<li>Ответ: $25\\%$.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','2.02',
|
||||
'<p>В супермаркетах часто пишут «Скидка 50%», но рядом мелким шрифтом — «на второй товар». Это значит, что скидка не 50% от всей суммы, а лишь на половину покупки. Реальная скидка составляет только $25\\%$. Вот почему важно уметь точно считать проценты — чтобы не быть обманутым рекламой!</p>');
|
||||
h+='<div class="wg" id="p2-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Определи тип задачи</div></div>'
|
||||
+'<div class="wg-help">К какому из трёх типов относится задача?</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p2-i">1</b> / 5</span><span>Очки: <b id="p2-s">0</b> / 5</span></div>'
|
||||
@@ -214,12 +239,22 @@ function buildP2(){
|
||||
/* ===================== § 3. ПРОПОРЦИЯ И ЕЁ СВОЙСТВА ===================== */
|
||||
function buildP3(){
|
||||
var box=document.getElementById('p3-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','3.0',
|
||||
'<p>Пропорция — это равенство двух отношений. Кулинарный рецепт рассчитан на 4 порции, а нужно 6? Все ингредиенты надо увеличить в одном и том же отношении — это пропорция. Фотограф масштабирует снимок, сохраняя пропорции сторон. Архитектор строит модель здания в масштабе, используя пропорцию. Пропорция — это инструмент «справедливого пересчёта».</p>');
|
||||
h+=makeCard('theory','Отношение и пропорция','3.1',
|
||||
'<p><b>Отношение</b> двух чисел — их частное: $a:b=\\dfrac{a}{b}$. <b>Пропорция</b> — равенство двух отношений: $a:b = c:d$ (читается «$a$ относится к $b$, как $c$ к $d$»).</p>'
|
||||
+'<p>$a$ и $d$ — <b>крайние</b> члены, $b$ и $c$ — <b>средние</b>.</p>');
|
||||
h+=makeCard('rule','Основное свойство пропорции','3.2',
|
||||
'<p>Произведение крайних членов равно произведению средних: $\\;a\\cdot d = b\\cdot c$ («крест-накрест»).</p>'
|
||||
+'<p>Отсюда находят неизвестный член: из $a:b=c:x$ получаем $x = \\dfrac{b\\cdot c}{a}$.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','3.01',
|
||||
'<p>Задача: решить пропорцию $3 : 4 = 15 : x$.</p>'
|
||||
+'<ol><li>Запишем основное свойство пропорции: $3 \\cdot x = 4 \\cdot 15$.</li>'
|
||||
+'<li>Вычисляем правую часть: $4 \\cdot 15 = 60$.</li>'
|
||||
+'<li>Находим $x$: $x = \\dfrac{60}{3} = 20$.</li>'
|
||||
+'<li>Проверка: $3 : 4 = 0{,}75$ и $15 : 20 = 0{,}75$ — отношения равны, пропорция верна!</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','3.02',
|
||||
'<p>Древнегреческий математик Пифагор считал пропорцию основой красоты и гармонии. «Золотое сечение» $1 : 1{,}618$ — особая пропорция, которую можно найти в пропорциях тела человека, раковинах моллюсков и архитектуре Парфенона. Художники и архитекторы тысячи лет используют её для создания красивых произведений.</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">Реши пропорцию «крест-накрест»: $x = \\dfrac{b\\cdot c}{a}$.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="p3-i">1</b> / 6</span><span>Очки: <b id="p3-s">0</b> / 6</span></div>'
|
||||
@@ -265,12 +300,25 @@ function buildP3(){
|
||||
/* ===================== § 4. ПРЯМАЯ И ОБРАТНАЯ ЗАВИСИМОСТИ ===================== */
|
||||
function buildP4(){
|
||||
var box=document.getElementById('p4-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','4.0',
|
||||
'<p>Представь, что едешь на велосипеде с постоянной скоростью: чем дольше едешь, тем больший путь проедешь — это прямая зависимость. Но если тот же путь надо проехать быстрее, скорость надо увеличить, а время уменьшится — это обратная зависимость. Ещё пример: чем больше друзей делят одну пиццу, тем меньше достаётся каждому. Распознав вид зависимости, можно правильно составить пропорцию и решить задачу.</p>');
|
||||
h+=makeCard('theory','Прямая пропорциональность','4.1',
|
||||
'<p>Величины <b>прямо пропорциональны</b>, если при увеличении одной в несколько раз другая увеличивается во <b>столько же</b> раз. Их отношение постоянно: $\\dfrac{y}{x}=k$.</p>'
|
||||
+'<p>Пример: при постоянной цене стоимость покупки прямо пропорциональна количеству товара.</p>');
|
||||
h+=makeCard('theory','Обратная пропорциональность','4.2',
|
||||
'<p>Величины <b>обратно пропорциональны</b>, если при увеличении одной в несколько раз другая во <b>столько же</b> раз уменьшается. Их произведение постоянно: $x\\cdot y=k$.</p>'
|
||||
+'<p>Пример: при постоянном пути время обратно пропорционально скорости.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','4.01',
|
||||
'<p><b>Прямая:</b> 3 кг помидоров стоят 18 руб. Сколько стоят 5 кг?</p>'
|
||||
+'<ol><li>Определяем вид зависимости: цена постоянна, значит стоимость и масса <b>прямо</b> пропорциональны.</li>'
|
||||
+'<li>Коэффициент: $k = \\dfrac{18}{3} = 6$ руб/кг.</li>'
|
||||
+'<li>Ответ: $5 \\cdot 6 = 30$ руб.</li></ol>'
|
||||
+'<p><b>Обратная:</b> 4 рабочих делают ремонт за 6 дней. За сколько сделают 3 рабочих?</p>'
|
||||
+'<ol><li>Зависимость <b>обратная</b>: чем меньше рабочих, тем дольше.</li>'
|
||||
+'<li>Произведение постоянно: $4 \\cdot 6 = 24$.</li>'
|
||||
+'<li>Ответ: $24 \\div 3 = 8$ дней.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','4.02',
|
||||
'<p>Закон Ома в физике — это тоже пропорциональность. Сила тока прямо пропорциональна напряжению ($I = U/R$, при постоянном $R$) и обратно пропорциональна сопротивлению ($I = U/R$, при постоянном $U$). Изучая математику сегодня, ты уже готовишься к физике!</p>');
|
||||
h+='<div class="wg" id="p4-iv1"><div class="wg-header"><span class="wg-badge">Интерактив 1</span><div class="wg-title">Прямая или обратная?</div></div>'
|
||||
+'<div class="wg-help">Определи вид зависимости в ситуации.</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="p4-i">1</b> / 6</span><span>Очки: <b id="p4-s">0</b> / 6</span></div>'
|
||||
@@ -326,10 +374,23 @@ function buildP4(){
|
||||
/* ===================== § 5. РЕШЕНИЕ ЗАДАЧ С ПОМОЩЬЮ ПРОПОРЦИЙ ===================== */
|
||||
function buildP5(){
|
||||
var box=document.getElementById('p5-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','5.0',
|
||||
'<p>Пропорция — универсальный инструмент для пересчёта. Рецепт рассчитан на 6 человек, а пришло 10 — сколько муки нужно? Строитель знает, что на 12 м² нужно 3 мешка штукатурки, и считает, сколько нужно на 20 м². Врач пересчитывает дозу лекарства по весу пациента. Пропорция работает везде, где есть «пересчёт в том же соотношении».</p>');
|
||||
h+=makeCard('rule','Как решать задачи пропорцией','5.1',
|
||||
'<p>1) Обозначают неизвестное буквой $x$. 2) Записывают условие в две строки. 3) Если зависимость <b>прямая</b> — стрелки в одну сторону, составляют пропорцию напрямую; если <b>обратная</b> — одно из отношений переворачивают. 4) Решают «крест-накрест».</p>');
|
||||
h+=makeCard('example','Пример','5.2',
|
||||
'<p>За $3$ кг яблок заплатили $12$ руб. Сколько за $5$ кг? (прямая) $\\;3:12 = 5:x$, $x=\\dfrac{12\\cdot5}{3}=20$ руб.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','5.2',
|
||||
'<p><b>Прямая пропорция:</b> За $3$ кг яблок заплатили $12$ руб. Сколько за $5$ кг?</p>'
|
||||
+'<ol><li>Обозначаем: $x$ — стоимость $5$ кг. Зависимость прямая (больше кг — больше денег).</li>'
|
||||
+'<li>Записываем пропорцию (стрелки в одну сторону): $3 : 5 = 12 : x$.</li>'
|
||||
+'<li>Решаем крест-накрест: $3 \\cdot x = 12 \\cdot 5 = 60$.</li>'
|
||||
+'<li>$x = 60 \\div 3 = 20$ руб. Ответ: $20$ руб.</li></ol>'
|
||||
+'<p><b>Обратная пропорция:</b> $4$ трубы наполнят бак за $9$ мин. За сколько — $6$ труб?</p>'
|
||||
+'<ol><li>Зависимость обратная: больше труб — меньше времени.</li>'
|
||||
+'<li>Переворачиваем одно отношение: $4 : 6 = x : 9$.</li>'
|
||||
+'<li>Крест-накрест: $4 \\cdot 9 = 6 \\cdot x$, значит $x = \\dfrac{36}{6} = 6$ мин.</li>'
|
||||
+'<li>Ответ: $6$ минут.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','5.02',
|
||||
'<p>Пропорциональный пересчёт используется в кулинарии всего мира. Французские шеф-повара называют это «scaling recipe» — масштабирование рецепта. Профессиональные повара делают это автоматически, но в основе — обычная пропорция из учебника математики 6 класса.</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">Реши задачу с помощью прямой пропорции. Ответ — число.</div>'
|
||||
+'<div class="score-display"><span>Задача <b id="p5-i">1</b> / 6</span><span>Очки: <b id="p5-s">0</b> / 6</span></div>'
|
||||
@@ -392,11 +453,23 @@ function buildP5(){
|
||||
/* ===================== § 6. МАСШТАБ ===================== */
|
||||
function buildP6(){
|
||||
var box=document.getElementById('p6-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','6.0',
|
||||
'<p>Масштаб — везде, где большое изображают маленьким (или наоборот). Карта страны, план квартиры, схема метро, чертёж детали — всё это масштабные изображения. Даже Google Maps использует масштаб: приближая карту, ты уменьшаешь знаменатель (1:1000 вместо 1:1 000 000). Космические снимки со спутника имеют масштаб 1:50 000 000 и больше!</p>');
|
||||
h+=makeCard('theory','Что такое масштаб','6.1',
|
||||
'<p><b>Масштаб</b> — отношение длины отрезка на чертеже (карте) к длине соответствующего отрезка в реальности. Запись $1:N$ означает: $1$ см на карте соответствует $N$ см на местности.</p>'
|
||||
+'<p>Карта: реальное расстояние $=$ расстояние на карте $\\times N$. Чертёж детали может быть и крупнее ($N<1$).</p>');
|
||||
h+=makeCard('example','Пример','6.2',
|
||||
'<p>Масштаб $1:1000$. На карте $3$ см. Реально $3\\cdot 1000 = 3000$ см $= 30$ м.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','6.2',
|
||||
'<p>Задача: масштаб $1:1000$. На карте $3$ см. Найди реальное расстояние.</p>'
|
||||
+'<ol><li>Масштаб $1:1000$ означает: $1$ см на карте $= 1000$ см в реальности.</li>'
|
||||
+'<li>На карте $3$ см, значит в реальности: $3 \\times 1000 = 3000$ см.</li>'
|
||||
+'<li>Переводим в метры: $3000$ см $\\div 100 = 30$ м.</li>'
|
||||
+'<li>Ответ: $30$ метров.</li></ol>'
|
||||
+'<p>Обратная задача: масштаб $1:500$, реальное расстояние $25$ м. Найди длину на карте.</p>'
|
||||
+'<ol><li>Переводим метры в сантиметры: $25$ м $= 2500$ см.</li>'
|
||||
+'<li>Делим на знаменатель масштаба: $2500 \\div 500 = 5$ см.</li>'
|
||||
+'<li>Ответ: $5$ см на карте.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','6.02',
|
||||
'<p>Самая точная карта мира — не на бумаге, а в голове у миграционных птиц. Дрозд, летящий из Беларуси в Африку, преодолевает тысячи километров без единой карты. Учёные до сих пор выясняют, как именно птицы ориентируются — но уже ясно, что они инстинктивно «знают масштаб» и расстояния.</p>');
|
||||
h+='<div class="wg" id="p6-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="p6-i">1</b> / 6</span><span>Очки: <b id="p6-s">0</b> / 6</span></div>'
|
||||
@@ -444,9 +517,19 @@ function buildP6(){
|
||||
/* ===================== § 7. КРУГОВЫЕ ДИАГРАММЫ ===================== */
|
||||
function buildP7(){
|
||||
var box=document.getElementById('p7-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','7.0',
|
||||
'<p>Круговые диаграммы используют журналисты, учёные, компании и государства. Диаграмма расходов бюджета страны, диаграмма состава воздуха (азот — $78\\%$, кислород — $21\\%$, прочее — $1\\%$), диаграмма времени твоего дня — всё это круговые диаграммы. Они мгновенно показывают, какая доля чего-либо наибольшая. Без понимания диаграмм сегодня не обойтись ни в школе, ни в жизни.</p>');
|
||||
h+=makeCard('theory','Круговая диаграмма','7.1',
|
||||
'<p><b>Круговая диаграмма</b> наглядно показывает, как целое делится на части. Весь круг — это $100\\%$, или $360°$.</p>'
|
||||
+'<p>Сектор в $p\\%$ занимает угол $p\\%\\cdot 360° = 3{,}6\\cdot p$ градусов. Например, $25\\%$ — это $90°$ (четверть круга).</p>');
|
||||
h+=makeCard('example','Разбор по шагам','7.01',
|
||||
'<p>Задача: в классе $30$ учеников. Отличников $6$, хорошистов $15$, остальные — троечники. Построй круговую диаграмму.</p>'
|
||||
+'<ol><li>Находим доли: отличники $\\dfrac{6}{30} = 20\\%$; хорошисты $\\dfrac{15}{30} = 50\\%$; остальные $100\\% - 20\\% - 50\\% = 30\\%$.</li>'
|
||||
+'<li>Переводим в градусы: $20\\% \\cdot 3{,}6 = 72°$; $50\\% \\cdot 3{,}6 = 180°$; $30\\% \\cdot 3{,}6 = 108°$.</li>'
|
||||
+'<li>Проверка: $72° + 180° + 108° = 360°$ — весь круг. Верно!</li>'
|
||||
+'<li>Строим круг, откладываем сектора по очереди транспортиром, подписываем.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','7.02',
|
||||
'<p>Круговую диаграмму придумала британская медсестра Флоренс Найтингейл в $1858$ году — не математик, а медик! Она использовала диаграмму, чтобы доказать военным чиновникам, что большинство солдат гибнет не от ран, а от болезней в грязных госпиталях. Её диаграмма спасла тысячи жизней — пример того, как математика меняет мир.</p>');
|
||||
h+='<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">Выбери набор данных — построится круговая диаграмма с долями.</div>'
|
||||
+'<div id="p7-pick" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:8px"></div>'
|
||||
@@ -493,14 +576,30 @@ function buildP7(){
|
||||
/* ===================== § 9. МАТЕМАТИКА ВОКРУГ НАС ===================== */
|
||||
function buildApp(){
|
||||
var box=document.getElementById('app-body'); var h='';
|
||||
h+=makeCard('oral','Где это в жизни','9.0',
|
||||
'<p>Весь раздел «Проценты и пропорции» — это язык реального мира. Читая этикетку на продукте, анализируя результаты выборов, планируя ремонт или путешествие, оценивая выгоду банковского предложения — везде используются проценты и пропорции. Этот параграф — практика: решаем задачи из настоящей жизни.</p>');
|
||||
h+=makeCard('theory','Проценты вокруг нас','9.1',
|
||||
'<p>Скидки и распродажи, наценки, банковские вклады под проценты, состав продуктов, статистика и опросы — везде встречаются проценты и пропорции.</p>');
|
||||
h+=makeCard('example','Разбор по шагам','9.01',
|
||||
'<p>Задача: в магазине на куртку скидка $25\\%$, цена до скидки $800$ руб. Найди цену со скидкой.</p>'
|
||||
+'<ol><li>Находим размер скидки: $25\\%$ от $800 = \\dfrac{800}{100} \\cdot 25 = 200$ руб.</li>'
|
||||
+'<li>Вычитаем из начальной цены: $800 - 200 = 600$ руб.</li>'
|
||||
+'<li>Ответ: $600$ руб.</li>'
|
||||
+'<li>Быстрый способ: цена со скидкой $= 800 \\cdot (1 - 0{,}25) = 800 \\cdot 0{,}75 = 600$ руб.</li></ol>');
|
||||
h+=makeCard('theory','А знаешь ли ты?','9.02',
|
||||
'<p>Самые большие «скидки» — до $90\\%$ — часто оказываются обманом. Продавец сначала искусственно завышает цену, а потом объявляет «грандиозную распродажу». Закон требует, чтобы скидка считалась от реальной цены, которая действовала раньше. Знание математики помогает не попасться на такие уловки.</p>');
|
||||
h+='<div class="wg" id="app-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="app-i">1</b> / 6</span><span>Очки: <b id="app-s">0</b> / 6</span></div>'
|
||||
+'<div id="app-q" class="qbox" style="font-size:1rem;text-align:left"></div>'
|
||||
+'<div style="display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap"><input type="text" id="app-a" class="tinp" style="width:110px;text-align:center"><button class="btn primary" id="app-go">Проверить</button></div>'
|
||||
+'<div class="feedback" id="app-fb"></div></div>';
|
||||
h+='<div class="wg" id="app-iv2"><div class="wg-header"><span class="wg-badge">Интерактив 2</span><div class="wg-title">Наценка или скидка?</div></div>'
|
||||
+'<div class="wg-help">Определи: цена выросла (наценка) или упала (скидка)?</div>'
|
||||
+'<div class="score-display"><span>Вопрос <b id="app-vi">1</b> / 5</span><span>Очки: <b id="app-vs">0</b> / 5</span></div>'
|
||||
+'<div id="app-vq" class="qbox" style="font-size:1rem;text-align:left"></div>'
|
||||
+'<div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"><button class="btn primary" data-av="n">Наценка</button><button class="btn primary" data-av="s">Скидка</button></div>'
|
||||
+'<div class="feedback" id="app-vfb"></div></div>';
|
||||
h+=secNav('p7','final')+readBtn('app');
|
||||
box.innerHTML=h; renderMath(box);
|
||||
|
||||
@@ -526,6 +625,25 @@ function buildApp(){
|
||||
document.getElementById('app-go').addEventListener('click',go);
|
||||
document.getElementById('app-a').addEventListener('keydown',function(e){ if(e.key==='Enter')go(); }); show();
|
||||
})();
|
||||
|
||||
(function(){
|
||||
var QQ=[
|
||||
{t:'s', q:'Куртка стоила 600 руб., теперь стоит 450 руб. Что произошло с ценой?'},
|
||||
{t:'n', q:'Цена на хлеб выросла с 1 руб. до 1 руб. 20 коп. Что произошло с ценой?'},
|
||||
{t:'s', q:'Магазин объявил распродажу: было 800 руб., стало 560 руб. Что произошло?'},
|
||||
{t:'n', q:'Из-за роста спроса цена на билет выросла с 200 до 300 руб. Что это?'},
|
||||
{t:'s', q:'Акция: было 500 руб., по акции 375 руб. Что произошло с ценой?'},
|
||||
{t:'n', q:'Производитель повысил цену молока с 1 руб. до 1 руб. 15 коп. Что это?'}
|
||||
];
|
||||
var order2=QQ.map(function(_,k){return k;}); for(var j2=order2.length-1;j2>0;j2--){var kk=_ri(0,j2),tt=order2[j2];order2[j2]=order2[kk];order2[kk]=tt;}
|
||||
var i2=0,score2=0,cur2=null;
|
||||
function show2(){ if(i2>=5){ document.getElementById('app-vq').innerHTML='<b>Готово!</b> '+score2+' / 5'; if(score2>=4){addXp(15,'app-iv2');bumpProgress('app',35);}else if(score2>=2){addXp(8,'app-iv2');bumpProgress('app',18);} return; }
|
||||
cur2=QQ[order2[i2]]; document.getElementById('app-vi').textContent=i2+1; document.getElementById('app-vq').innerHTML=cur2.q; document.getElementById('app-vfb').style.display='none'; }
|
||||
function ans2(v){ if(i2>=5)return; var fb=document.getElementById('app-vfb');
|
||||
if(v===cur2.t){ score2++; feedback(fb,true,'✓ Верно — это '+(cur2.t==='n'?'наценка (цена выросла)':'скидка (цена упала)')+'.'); } else feedback(fb,false,'✗ Нет. Это '+(cur2.t==='n'?'наценка':'скидка')+'.');
|
||||
document.getElementById('app-vs').textContent=score2; i2++; setTimeout(show2,1400); }
|
||||
document.querySelectorAll('#app-iv2 [data-av]').forEach(function(b){ b.addEventListener('click',function(){ ans2(b.getAttribute('data-av')); }); }); show2();
|
||||
})();
|
||||
}
|
||||
|
||||
/* ===================== ФИНАЛ ГЛАВЫ — БОССЫ ===================== */
|
||||
|
||||
Reference in New Issue
Block a user