zinch/math-modeling
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Сделал урок "Стизотворение". Исправлено неправильное отображение

Browse Source 
переключаетелей разделов нв телефонах
This commit is contained in:
Ivan Zinchenko 2022-02-01 11:25:18 +05:00
parent 8e5540ed5f
commit ff16b1ba60
11 changed files with 296 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@ -78,7 +78,7 @@ const fonts = () => {
exports.fonts = fonts;
const favicons = () => {
return gulp.src('src/favicon/*.{png, ico, svg, webmanifest, xml}')
return gulp.src('src/favicon/*.*')
.pipe(gulp.dest('dist/'));
}
exports.favicons = favicons;

78
package.json
View File

@ -1,39 +1,39 @@
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zinchenko291/math-modeling.git"
},
"author": "zinchenko291",
"license": "ISC",
"bugs": {
"url": "https://github.com/zinchenko291/math-modeling/issues"
},
"homepage": "https://github.com/zinchenko291/math-modeling#readme",
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"browser-sync": "^2.27.7",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-copy": "^4.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-pug": "^5.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"sass": "^1.45.1"
},
"dependencies": {
"bootstrap": "^5.1.3"
}
}
{
"name": "code",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zinchenko291/math-modeling.git"
},
"author": "zinchenko291",
"license": "ISC",
"bugs": {
"url": "https://github.com/zinchenko291/math-modeling/issues"
},
"homepage": "https://github.com/zinchenko291/math-modeling#readme",
"devDependencies": {
"@babel/core": "^7.16.5",
"@babel/preset-env": "^7.16.5",
"browser-sync": "^2.27.7",
"del": "^6.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-babel": "^8.0.0",
"gulp-concat": "^2.6.1",
"gulp-copy": "^4.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-pug": "^5.0.0",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^3.0.0",
"gulp-uglify": "^3.0.2",
"sass": "^1.45.1"
},
"dependencies": {
"bootstrap": "^5.1.3"
}
}

3
src/box.pug
View File

@ -2,7 +2,6 @@ doctype html
html(lang="ru")
head
include ./includes/head.pug
link(rel="stylesheet", href="css/lessons.css")
title Коробка
body
include includes/header.pug
@ -48,7 +47,7 @@ html(lang="ru")
p Здесь, #[span.math a] — длина стороны картонного листа, #[span.math b] — размер выреза. Первоначальный размер выреза #[span.math b#[sub 0] = 0]. Последующие размеры выреза определяются по формуле #[span.math b#[sub i+1] = b#[sub i] + ∆b]
h4 КОМПЬЮТЕРНАЯ МОДЕЛЬ
p Для моделирования будем использовать язык моделирования python.
p Для моделирования будем использовать язык моделирования Python.
p Для начала введём переменные. Их названия будут совпадать с информационной моделью.
code a = int(input()) # Получаем и преобразуем данные в числовые значения<br>deltaB = int(input())
p Попробуем проследить, как будет изменятся объём с увеличением размера выреза

18
src/favicon/browserconfig.xml
View File

@ -1,9 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

84
src/favicon/safari-pinned-tab.svg
View File

@ -1,42 +1,42 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M370 4867 c-49 -16 -104 -75 -119 -128 -9 -34 -11 -542 -9 -2244 l3
-2200 24 -38 c13 -21 42 -50 64 -65 l41 -27 2191 0 2191 0 41 27 c22 15 51 44
64 65 l24 38 3 2200 c2 1702 0 2210 -9 2244 -16 56 -71 112 -125 129 -56 16
-4331 16 -4384 -1z m3483 -296 c21 -13 50 -42 65 -64 l27 -41 3 -1921 2 -1922
-28 -54 c-22 -43 -38 -59 -81 -81 l-53 -28 -1238 0 -1238 0 -53 28 c-43 22
-59 38 -81 81 l-28 53 0 1902 c0 1307 3 1913 11 1939 13 47 76 113 121 126 20
6 512 9 1283 8 l1250 -2 38 -24z"/>
<path d="M1725 4155 c-51 -18 -110 -81 -124 -131 -16 -56 -15 -545 1 -598 16
-52 72 -108 124 -124 59 -17 1579 -17 1638 0 52 16 108 72 124 124 16 54 17
542 1 599 -15 52 -82 119 -134 134 -28 7 -277 11 -815 11 -642 -1 -782 -3
-815 -15z"/>
<path d="M1795 2905 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M2495 2905 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M3235 2905 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M1795 2245 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M2495 2245 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M3235 2245 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M1795 1585 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M2495 1585 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M3235 1585 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
</g>
</svg>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.14, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M370 4867 c-49 -16 -104 -75 -119 -128 -9 -34 -11 -542 -9 -2244 l3
-2200 24 -38 c13 -21 42 -50 64 -65 l41 -27 2191 0 2191 0 41 27 c22 15 51 44
64 65 l24 38 3 2200 c2 1702 0 2210 -9 2244 -16 56 -71 112 -125 129 -56 16
-4331 16 -4384 -1z m3483 -296 c21 -13 50 -42 65 -64 l27 -41 3 -1921 2 -1922
-28 -54 c-22 -43 -38 -59 -81 -81 l-53 -28 -1238 0 -1238 0 -53 28 c-43 22
-59 38 -81 81 l-28 53 0 1902 c0 1307 3 1913 11 1939 13 47 76 113 121 126 20
6 512 9 1283 8 l1250 -2 38 -24z"/>
<path d="M1725 4155 c-51 -18 -110 -81 -124 -131 -16 -56 -15 -545 1 -598 16
-52 72 -108 124 -124 59 -17 1579 -17 1638 0 52 16 108 72 124 124 16 54 17
542 1 599 -15 52 -82 119 -134 134 -28 7 -277 11 -815 11 -642 -1 -782 -3
-815 -15z"/>
<path d="M1795 2905 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M2495 2905 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M3235 2905 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M1795 2245 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M2495 2245 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M3235 2245 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M1795 1585 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M2495 1585 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
<path d="M3235 1585 c-76 -27 -135 -115 -135 -200 0 -40 31 -104 66 -137 104
-97 264 -64 325 67 35 76 18 158 -45 221 -60 61 -131 77 -211 49z"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

38
src/favicon/site.webmanifest
View File

@ -1,19 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

37
src/includes/lessons.pug
View File

@ -10,20 +10,10 @@
'Помогите покупателям быстро определить необходимое количество обоев.',
'wallpapers'
],
[
'Сбер касса',
'Проведите исследование очереди из бабушек у сбер кассы.',
'box'
],
[
'Стихотворение',
'Предлагается исследовать ситуацию и предложить реальные способы ускорения процесса заучивания стихотворения.',
'box'
],
[
'Дачник и собака',
'Исследовать процесс движения объектов: человека и собаки. Установить связь между расстояниями, пройденными объектами за одно и то же время. Определить путь, который пробежала собака.',
'box'
'poem'
]
]
let works_items = [
@ -31,30 +21,5 @@
'Продукты для похода',
'Рассчитать необходимое количество продуктов на весь поход для 1 человека и для всей группы.',
'products'
],
[
'Награда',
'Сколько должен индрусский царь Шерам изобретателю шахмат из древней легенды?',
'box'
],
[
'Концентрация раствора',
'Составьте таблицу, по которой можно определить, как изменяется исходная концентрация при добавлении 1, 2, 3 и т. д. частей воды.',
'box'
],
[
'Буратино и папа Карло',
'Постройте модель изменения капитала в течение нескольких недель.',
'box'
],
[
'График тренировки',
'Исследуйте график тренеровок, состовляемый по правилам.',
'box'
],
[
'Аквариум',
'Сколько минут времени он затратит на переселение рыбок?',
'box'
]
]

132
src/poem.pug Normal file
View File

@ -0,0 +1,132 @@
doctype html
html(lang="ru")
head
include includes/head.pug
title Стихотворение
body
include includes/header.pug
main.container.lesson
h2 Стихотворение
h3 I этап. Постановка задачи
h4 Описание задачи
p Мальчик учит стихотворение из 40 строк. Чтобы запомнить первую строчку ему понадобилась всего 1 мин. На каждую следующую он тратит на 10% времени больше. Стихотворение держится в памяти нерадивого ученика не дольше трех часов, а до школы бежать 15 минут. Как организовать заучивание стихотворения?
h4 Цель моделирования
p Предлагается исследовать ситуацию и предложить реальные способы ускорения процесса заучивания стихотворения.
h3 II этап. Разработка модели
h4 ИНФОРМАЦИОННАЯ МОДЕЛЬ
p Анализ объекта моделирования показывает, что эта система состоит из двух объектов: мальчика и стихотворения. Стихотворение, в свою очередь, может быть разбито на простые элементы — строки. Каждый из объектов, входящих в систему, имеет свои параметры. Связь между объектами этой системы заключается во времени заучивания стиха нерадивым учеником. Представим информационную модель в табличном виде.
table.element-animation
tr
td(rowspan=2) Объект
td(colspan=2) Параметры
tr
td #[i название]
td #[i значение]
tr
td Мальчик
td.
Процент снижения прилежания с каждой строкой #[span.math D (%)]<br>
Время удерживания в памяти любой информации #[span.math DT]
td.
Исходные данные<br>
Исходные данные (константа)
tr
td Стихотворение
td.
Количество строк<br>
Суммарное время, затраченное на заучивание всего стихотворения
td.
Исходные данные<br>Результат
tr
td Строка (элемент стиха)
td.
Время на заучивание первой строки #[span.math Т#[sub i]]
Время заучивания #[span.math i]-й строки #[span.math Т#[sub i]]
Суммарное время, затраченное на #[span.math i] строк #[span.math S#[sub i]]
td.
Исходные данные<br>
Расчетные данные<br>
Расчетные данные
tr
td Среда
td Время бега до школы
td В задаче константа
p Математическая модель связывает между собой параметры элементов системы.
p Время на заучивание #[span.math i]-й строки:
p.center
span.math T#[sub i] = T#[sub i-1] × (1 + ∆ (%)).
p Суммарное время на запоминание отрывка из #[span.math i] строк:
p.center
span.math S#[sub i] = S#[sub i-1] + T#[sub i].
h4 КОМПЬЮТЕРНАЯ МОДЕЛЬ
p Для моделирования будем использовать язык моделирования Python.
p Для начала введём переменные.
pre.element-animation
code.
learningTime = 60 # Время заучивания в секундах
deltaTime = 1.1 # Увеличение времени в процентах
amountOfStrings = 40 # Всего строк
p Пройдёмся в цикле по всем строчкам стихотворения
pre.element-animation
code.
print('№ строки\tВремя заучивания(сек)\t Суммарное время') # Заголовок таблицы
for i in range(amountOfStrings):
Ti = learningTime * deltaTime**i # Используем формулы геометрической прогрессии
Si = (Ti * deltaTime - learningTime) / (deltaTime - 1)
print(f'{ i + 1 }\t{ "%.2f" % Ti }\t{ "%.2f" % Si }')
p Сделаем вывод времени в минутах и секундах при помощи модуля Datetime
pre.element-animation
code.
# В начало кода вставим
import datetime
# В цикле добавим
TiTime_format = str(datetime.timedelta(seconds = int(Ti)))
SiTime_format = str(datetime.timedelta(seconds = int(Si)))
print(f'{ i + 1 }\t{ TiTime_format }\t{ SiTime_format }')
details
summary Вывод программы
pre.
№ строки Время заучивания(сек) Суммарное время
1 0:01:00 0:00:59
2 0:01:06 0:02:05
3 0:01:12 0:03:18
4 0:01:19 0:04:38
5 0:01:27 0:06:06
6 0:01:36 0:07:42
7 0:01:46 0:09:29
8 0:01:56 0:11:26
9 0:02:08 0:13:34
10 0:02:21 0:15:56
11 0:02:35 0:18:31
12 0:02:51 0:21:23
13 0:03:08 0:24:31
14 0:03:27 0:27:58
15 0:03:47 0:31:46
16 0:04:10 0:35:56
17 0:04:35 0:40:32
18 0:05:03 0:45:35
19 0:05:33 0:51:09
20 0:06:06 0:57:16
21 0:06:43 1:04:00
22 0:07:24 1:11:24
23 0:08:08 1:19:32
24 0:08:57 1:28:29
25 0:09:50 1:38:20
26 0:10:50 1:49:10
27 0:11:55 2:01:05
28 0:13:06 2:14:12
29 0:14:25 2:28:37
30 0:15:51 2:44:29
31 0:17:26 3:01:56
32 0:19:11 3:21:08
33 0:21:06 3:42:15
34 0:23:13 4:05:28
35 0:25:32 4:31:01
36 0:28:06 4:59:07
37 0:30:54 5:30:02
38 0:34:00 6:04:02
39 0:37:24 6:41:26
40 0:41:08 7:22:35
div.btnWrapper
a.btn(href="poemTest.html") Тест
script(src="js/animation.js")

38
src/poemTest.pug Normal file
View File

@ -0,0 +1,38 @@
mixin list
option ---
option увеличивается
option уменьшается
doctype html
html(lang="en")
head
include ./includes/head.pug
title Коробка - тест
body
include ./includes/header.pug
main.container
ol
li.question
p Сколько времени понадобилось бы мальчику, чтобы выучить все стихотворение?
p Ответ:
input.questionInput(data-answer="cbd082c798423a4870c866e8f0b82abfa633da424260c3c641bccad0d124e055")
span.help Записать в виде H:MM:SS
li.question
p Из скольких строк (максимум) должно состоять стихотворение, если учительница мальчика утверждает, что его знаний хватает не более чем на 3 часа, а до школы бежать 15 мин.?
p Ответ:
input.questionInput(data-answer="624b60c58c9d8bfb6ff1886c2fd605d2adeb6ea4da576068201b6c6958ce93f4")
li.question
p Сколько строк можно успеть выучить до начала «мультика», если до него осталось 45 мин.?
p Ответ:
input.questionInput(data-answer="4523540f1504cd17100c4835e85b7eefd49911580f8efff0599a8f283be6b9e3")
li.question
p Как влияет время заучивания 1-й строки на общее время запоминания стихотворения? Как меняется суммарное время при увеличении времени на заучивание 1-й строки?
p Ответ:
select.questionInput(data-answer="1468f9a380bdb08fea9553a0bb53285522514d189ca99790217c512ba2544e21") #[+list]
li.question
p Как влияет концентрация внимания (уменьшение D%) на общее время запоминания стихотворения?
p Ответ:
select.questionInput(data-answer="c09d854f4fbd684f26386d51cb76620cebdd83e97c6c4f04fb2b5267662cd694") #[+list]
button.big#checkAnswers Проверить
script(src="js/sha256.js")
script(src="js/test.js")

12
src/scss/style.scss
View File

@ -87,6 +87,18 @@ button, a.btn {
color: $white;
background-color: $black;
}
@media screen and (max-width: 472px) {
display: block;
width: 100%;
&:first-child {
border-radius: $border-radius $border-radius 0 0;
}
&:last-child {
border-radius: 0 0 $border-radius $border-radius;
}
}
}
&.big {

4
src/wallpapers.pug
View File

@ -38,7 +38,7 @@ html(lang="en")
Расчетные данные
tr
td Комната
td.
td.
Высота #[span.math (h)]<br>
Длина #[span.math (a)]<br>
Ширина #[span.math (b)]<br>
@ -62,7 +62,7 @@ html(lang="en")
span.math N = S#[sub ком] / S#[sub р] + 1
p Необходимо также учесть, что количество рулонов должно быть целым числом, но не меньшим, чем значение #[span.math N].
h4 КОМПЬЮТЕРНАЯ МОДЕЛЬ
p Для моделирования будем использовать язык моделирования python.
p Для моделирования будем использовать язык моделирования Python.
p Для начала введём переменные.
pre.element-animation
code