Комментарии 65
Монументальный труд! Интересно будет попробовать, как справочник
Круто, но по факту этим невозможно пользоваться :)
Несколько моментов которые помогли бы упростить навигацию:
- последовательные блоки должны быть соединены прямой стрелкой (без изгибов)
- если исходящих стрелок несколько, то прямой лучше указать приоритетное направление (в случае с вариантами "да/нет" это всегда "да", можно еще дополнительно пометить зеленым, а "нет" красным, но это на любителя)
- на стрелках должно быть минимум изгибов, на прямой 0, на крайних сверху и снизу 1, на остальных 2
- за исключением некоторых случаев все исходящие блоки лучше размещать в один столбик
- по возможности нужно избегать пересечения стрелок, а если приходится делать, то желательно в этом месте нижнюю (обычно вертикальную) стрелку делать с разрывом
- на некоторых блоках очень много текста (обычно так делают когда карту хотят распечатать, но это не тот случай), попытайтесь сократить, а дополнение выводить при наведении на блок (при этом лучше его пометить, так чтобы было понятно какой блок имеет дополнение, а какой нет)
- некоторые стрелки слишком длинные и запутанные, при наведении на них хорошо бы выводить конечный блок в отдельном мини окне (при нажатии фиксировать окно, чтобы можно было нажать на конечный блок и перейти к нему)
Понятно что это больше вопрос ограничений инструмента который вы используете для вывода диаграммы.
Может быть - следует разбить маршрут на листы? Например, уже на уровне “Центральный диспетчер”, подписи выходных вопросов разбросаны по всей карте.
Спасибо за такой мощный разбор! Вы прямо в точку попали в конце: Mermaid — штука классная для быстрых схем, но в плане дизайна у неё лапки. Она сама решает, как завязать эти стрелки узлом, и поправить это вручную, увы, нельзя.
Насчет текста согласен, местами плотновато. Но тут был выбор: либо оставить сухие символы и заставить ребенка лезть в учебник (а он и так в стрессе), либо дать чуть больше подсказок прямо на месте. Выбрал второе. А вот идея с всплывающими окошками при наведении мне очень нравится. Попробую так сделать.
Mermaid — штука классная для быстрых схем, но в плане дизайна у неё лапки. Она сама решает, как завязать эти стрелки узлом, и поправить это вручную, увы, нельзя.
Так надо не в нем. Надо в yEd все это затолкать, поиграться с его layout движками и потом экспортнуть в SVG.
Ну это если такую большую схему хочется.
У меня была еще одна важная задумка, из-за которой я оставил именно чистый Mermaid в HTML. Мне очень хотелось, чтобы проект оставался Open Source в самом прямом смысле. В таком виде любой родитель, учитель или репетитор может зайти на сайт, нажать «просмотр кода страницы», забрать текстовое описание узлов и легко переделать схему под свои нужды или убрать то, что им кажется лишним. Если я запеку всё в глухую SVG-картинку, инструмент потеряет эту гибкость и доступность для модификации другими людьми. А мне хочется, чтобы методика жила и развивалась.
Так граф и представление - не одно и то же. Исходный граф, разумеется, надо рядом положить.
А дальше его можно yEd-ом (автоматическая раскладка, ручное редактирование, очень удобно) или можно graphviz-ом (тоже автоматика) раскладывать. Можно еще в PlantUML (это, впрочем, тоже graphviz, но не такой низкоуровневый) транслировать.
Все эти специализированные движки вроде Graphviz и yEd для меня — дремучий лес. Я всё-таки в первую очередь репетитор и методолог, а не профессиональный разработчик графов. Поэтому собирал всё из тех инструментов, о которых знаю и которые были под рукой (HTML, CSS и Mermaid). Главное, что концепция работает, а техническую сторону со временем, думаю, докрутим!
Я очень рад Вашему комментарию! Сам хотел написать про расположение блоков и непрямые стрелки. Кроме лишних изгибов Вы перечислили ещё множество улучшений для визуального восприятия. Так что уже собрана наиболее полная обратная связь по визуалу. Жаль, инструмент не всё это может разрулить.
На смартфоне только надпись "Загрузка схемы..."
Огромное спасибо за сигнал! Тут две возможные причины:
Проблемы с CDN в РФ. Из-за блокировок зарубежных серверов библиотеки Mermaid, на которых держится граф, у многих провайдеров сейчас открываются со скрипом. Чтобы это обойти, я вшил в код «переключатель» — если одна библиотека не отвечает, скрипт каждые 15–30 секунд пытается подтянуть её из другого источника.
Мощность смартфона. Сама карта огромная, и если телефон слабенький или старенький, его процессору нужно заметно больше времени, чтобы просто отрендерить и собрать эту тяжелую паутину из 336 узлов. В этом случае лоадер висит дольше обычного. Попробуйте, пожалуйста, подождать чуть подольше.
А у меня - в какую сторону не кручу колесо мышки идёт только уменьшение масштаба.
Cпасибо за сигнал! Скорее всего, скрипт зума конфликтует с какими-то настройками мыши или браузера. Обязательно посмотрю код и постараюсь поправить при следующем обновлении. Пока колесико капризничает, попробуйте, пожалуйста, использовать двойной клик по экрану или кнопки + и - в углу экрана — они должны работать стабильно в любом браузере.
Подождал подольше, загрузилось. Сам с детьми делаю уроки, ибо ленятся и тупят. Эпичная схема нам не поможет... Старший за сутки начисто забывает всё что я ему разжевал день назад... и ему пофигу на это, ноль стыда
Мне кажется, такая схема больше подходит для компьютера, чем для человека. Человек всё же обращается к памяти ассоциативно, а не последовательно. То есть по отдельности запоминает отдельные блоки, а затем срабатывают ассоциации задания с ранее пройденным. Тут кроме повторений для запоминания паттернов сложно что-то предложить по существу.
Вы же не думаете, что ребёнок запомнит саму эту схему в её приведённом виде? А таскать с собой бумажку с нарисованной схемой тоже не получится.
На основе вашей карты сделал пошаговый помощник. сам сайт https://algebra-wizard.vercel.app/
Репозиторий https://github.com/ruimage/algebra-wizard/security. Если есть замечания или уточнения - пожалуйста открывайте пулл-реквест.
Если вы считаете, что этот помощник нарушает ваши права на схему или искажает исходную идею - напишите мне, я удалю репозиторий и сайт.
Ничего себе! Вот это круто! Посмотрел сайт — идея пошагового мастера это именно то, о чем просили в комментариях выше, чтобы разгрузить интерфейс. Ни в коем случае ничего не удаляйте! Наоборот, это классное развитие идеи. Я только «за». Спасибо за такой крутой отклик!
Простите, а как с этим работать?
Куда кликать, если в условии нет мнимой единицы?
Так получилось потому, что разработчик переносил данные из текстовой версии, где шаг с мнимой единицей идёт последовательно, а разветвление логически подразумевается в тексте. В то же время на оригинальной интерактивной схеме внутри самой статьи всё на месте: от корневого узла наглядно идут обе ветки («Да» и «Нет»).
Если кликнуть на переход - там будет ответ. Я исправлю. Если есть возможность, отправляйте замечания в github issues, так будет проще их увидеть и исправить. Я исправлю и будет все в соответсвии со схемой
сайт не открывается, пишет нет доступа к сайту :(
Боюсь, Вы своей схемой воспитаете
человека, описанного в начале прошлого века Маяковским.
Задача обучения в идеале — не решить конкретное уравнение, а понять, что делать в некоем классе ситуаций, а самое главное — почему. Нас вот школа обучала пользоваться ограниченным набор инструментов, применяя их посредовательно — вроде «видишь корень? возводи обе части в степень, чтобы извлечь подкоренное выражение (при этом не забывая про чётную степень)»; «видишь деление? домножай обе части на знаменатель (при этом не забывая про 0 в знаменателе)» и т.п. — то есть способ пошагово распутать клубок, а не 100500 конкретных формул.
Так вы сейчас слово в слово описали суть моей карты!
Пошагово распутать клубок, задавая себе последовательные вопросы («видишь корень?», «чётная степень?») — это и есть тот самый универсальный алгоритм, который зашит в схему. Она учит не зазубривать 100500 формул, а понимать, в какой класс ситуаций ты попал и какой инструмент из арсенала нужно достать.
Но проблема в том, что схема — вот она, и ребёнок не видит кубиков — он видит перед собой отакенную конструкцию.
Возможно, было бы гораздо лучше, если бы не было всех этих стрелочек между кубиками, а были бы кубики по отдельности, и подсказки, что «а дальше кубик В можно приложить к кубику З, П или Т». И отдельная демонстрация на примере одного конкретного уравнения. Тогда бы именно что вырабатывался навык
«вот инструменты,»
как их можно скомбинировать вместе?«.»
И «кубики» эти — они не только для решения уравнений, они потом по всей математике используюься.
Иными словами, Вы сейчас даёте ученику полную карту лабиринта — а давать надо «правило одной руки».
С другой стороны - это как тренажер логического мышления и внимания. У современных детей в голове «информационная каша», в диком количестве. С раннего детства.
Мозг современного ребенка просто не успевает выработать навык устойчивого внимания и алгоритм последовательной обработки задачи.
В качестве универсального алгоритма для компьютера в целом подходит. Но для заявленной цели - не очень. Сейчас попробую объяснить, почему.
Когда ребенок изучает математику в школе, ему не ставят все сразу эти типы задач. Идут от простого к более сложному. И на каждом этапе отрабатывается решение множества примеров, чтобы для такого типа задач уже не возникало вопросов "как решать". В четвёртом классе (например) ребенок не знает, что такое комплексные числа, квадратные уравнения, и прочее. И такая схема у него вызовет замешательство даже просто от обилия незнакомых слов. Если же отбросить заведомо неизвестные темы из схемы, получим тот самый алгоритм, который он и так сейчас проходит в школе. И этот алгоритм у него с решением множества примеров просто запомнится, и схема для такого алгоритма не понадобится. Когда начнут изучать что-то новое, ему в школе покажут как это решать, и опять решением множества примеров это всë запомнится до автоматизма.
Проблема возникает, когда далее попадаются примеры по текущей теме и с предыдущими. Ребенок уже вник и переключился на другой вариант решения, и предыдущий забыл. Вот тут и пригодилась бы эта схема - но она не должна быть в том виде, как сейчас полная, а из минимального дополняться соответственно тому, что в школе уже проходили, а ещë не пройденное не показывать совсем.
И вот тут вспоминаем, что повторенье - мать ученья. То есть, нужно при прохождении нового материала не забывать тренироваться решать примеры по всем ранее изученным темам. Да, чем дальше, тем больше, и это трудно. В какой-то момент ребенок (да и взрослый) скажет - да чего тут решать эти 2+2 - это ж и так понятно. Тогда в целом можно упростить процесс повторения и закрепления - решать последние N типов задач (и у каждого своë - кто-то схватывает быстро и помнит легко и применяет правильный алгоритм, кто-то тупит и забывает, что изучали на прошлой неделе). При достаточной практике решения примеров не только по изучаемой сейчас теме, но и предыдущих необходимость видеть схему с этими вариантами исчезает.
Сейчас почему-то в школе заметно сократили количество примеров (включая и предыдущие темы), и ребенок просто изучает каждую неделю по новой теме (это я с потолка взял, для примера), а через месяц - оп, контрольная! Где оказывается, что надо решить задачи по всем пройденным темам. А ребенок уже забыл, что изучали 2 недели назад, потому что недостаточно повторений. Итог - низкие оценки, разбор полетов, и проработка этих забытых вещей. Если же не забывать прорешивать разные темы - проблем меньше, но нагрузка конечно больше.
Вот в качестве подсказки взрослому, который забыл уже, как это всë решать, и возникла необходимость помочь ребенку, если он застрял где-то и не понимает, как тут быть - вполне подойдëт. Но тоже как-то оптимизировать стоит. Возможно, сделать разные версии, не знаю. Я не смотрел подробно с компа (пока только с телефона), может на большом экране как-то иначе воспринимается.
вспоминаем, что повторенье - мать ученья.
Или, как лучше говорить сейчас, повторенье усиливает веса нейронов, входящих в цепочку, которая ведёт к ответу!
Спасибо за такой подробный и вдумчивый разбор!
Хочу прояснить важный момент: эта карта создавалась именно как общая картина целиком. Её главная ценность — материализовать всю школьную алгебру на одном холсте, дать человеку увидеть масштаб и границы этой «вселенной», привязать абстрактные формулы к единому визуальному образу. Когда я учился в школе, мне отчаянно не хватало именно такой глобальной карты, которую можно разглядывать, понимая, где ты находишься и что ждет впереди. Инструмент сделан именно таким осознанно.
Вот да, для того чтобы уложить в голове весь школьный курс, очень полезна. Например, при подготовке к экзаменам. Можно изучить и понять, нет ли у тебя где-то пробелов или неправильного понимания как что решать. Я на первом курсе института на высшей математике вдруг обнаружил, что оперируют понятиями, которые я не изучал в школе. А оказывается, они там рассчитывали, что мы это проходили. Вполне может быть что и проходили, но я где-то проболел неделю и пропустил, а далее оно нигде не попалось просто. Пришлось вникать уже самостоятельно.
У хороших репетиторов подобные карты давно у них в мозгу нарисованы... Но они ими не делятся...
Продолжение статьи «Дебаггинг детского мышления»
Ну а ссылки нет. Как же так, а как же карта? ;) — Вот такое «проклятие знания», понимаешь.
Уроки задают детям, делать их должны сами дети, иначе это просто бессмысленный процесс. Родители должны максимум мотивировать получать лучшие оценки, но никак не подобные карты рисовать.
Родители могут подрабатывать репетиторами своим детям. Почему нет? Индивидуальное образование лучше группового. Если есть время, силы и талант конечно же.
Зачем вашим детям школа, если учат их репетиторы?
Репетиторы учат нескольким предметам. Обычно тем которые на ЕГЭ сдавать предстоит. Остальным учит школа. Баланс качества и цены.
Мне всегда казалось, что баланс качества и цены - отправить ребенка учиться в школу, которую он тянет.
Все школы примерно одинаковые. Класса до 9-10 нет смысла идти куда-то дальше соседней.
А вот результат нужен разный. По тем предметам по которым ребенок собирается ЕГЭ сдавать лучше раньше 10 класса репетиторов брать. ВУЗ дело такое...
Хотел спросит - многие вещи можно делать разными способами. То-же раскрытие скобок или решение систем линейных уравнений, к примеру. Вы как-то анализировали - что лучше, или ставили основным метод к которому привыкли?
За этим выбором стоят как раз те самые годы практики с буксующими ребятами. Тут не просто «любимые» методы, а те алгоритмы, которые на практике дают минимальную нагрузку и реже всего приводят к глупым ошибкам. Если для сильного ученика вариативность — это плюс, то для остальных обилие путей («можно так, а можно этак») — это ментальный паралич. Поэтому для карты выбирался один магистральный, максимально универсальный и «непробиваемый» способ. Тот, который гарантированно сработает.
А можно ли по этой схеме создать карточки файлы для обсидиан со ссылками обратными и прямыми. Там же в карточке можно и добавить дополнительно пояснения если что-то не понятно или вопросы или еще что то ?
Конечно можно, и это будет шикарное развитие идеи!
Obsidian создан для таких задач. В каждой карточке-узле как раз можно будет расписать детальные примеры, типичные ошибки или добавить мини-видео разборы для тех, кто застрял на конкретном шаге.
Поскольку код Mermaid полностью открыт, вы можете забрать его прямо сейчас со страницы и попробовать раскидать по файлам. Будет очень интересно взглянуть, что у вас получится!
Идея сведения сложного к тропе с простыми выборами - отличная вещь. Это можно и нужно делать к примеру с законами, да и еще много с чем.
Спасибо! Вы абсолютно Правы, эта механика универсальна. По сути, любой сложный массив данных, где человеку нужно принять решение, можно «приземлить» на такие понятные пошаговые развилки.
Юриспруденция, налоги, сложные должностные инструкции на производстве — везде, где у людей от перегруза падает рабочая память, подобные карты забирают на себя рутину. Будет круто, если кто-то подхватит идею и переложит её на другие сферы!
Однажды учитель Лао Дзы, гуляя по тропинке в лесу, встретил сороконожку.
Долго он наблюдал за ней, как она ловко и быстро карабкается через лежащие на ее пути препятствия, и тогда он решил с ней поговорить:
- скажи, вот у тебя целых 40 ног - а как ты понимаешь, какой куда нужно наступать, и в какой последовательности? Какая - первая, какая - вторая, и как их нужно правильно переставить, чтобы перебраться вот через эту веточку?
Задумалась сороконожка, и так пробует, и этак - всё неправильно получается.
Учитель Лао Дзы терпеливо ждал ответа, пока не стемнело, но так и не дождался, а сороконожка только шевелила ногами на одном месте.
В другой раз Лао Цзы встретилась сороконожка, которая ответила:
— Ну ты чё, вообще тупой? Ногами первого сегмента я ощупываю препятствие, определяя, насколько высоко их пришлось поднимать, и насколько сильно опустить, ногами второго сегмента я определяю, через какое время они тоже натолкнулись на препятствие, а ногами всех остальных сегментов я просто повторяю то же самое движение через время 
, конечно же!
Лао Цзы не знал, что сороконожка, как и приснопамятная лошадь, закончила воронежский университет, и потому устыдился и ушёл монастырь, учить кинематику.
Мне кажется, что это надо преобразовать из такой "волосатой" схемы в мастер (wizard). Тогда, пошагово, это будет наглядно и очень удобно.
Не помню кто сказал: в математике нет царского пути.
Справа голое число? Нет, справа x. Значит скрипт «Щит и Меч»: щит x ≥ 0, меч 2x + 3 = x².
Почему вы опустили проверку условия на непротиворечивость? Т.е. 2x + 3 >= 0, x >= -2/3. Да, в вашем примере "щит" x ≥ 0 это поглощает, а если нет? ;)
Ещё можно отсортировать операции по частоте либо темам, чтобы наиболее часто используемые шли первыми.
Идея огонь, реализация тоже, техническое воплощение - ну такое себе. Грузится долго, тормозит жутко, выглядит мрачновато. На хабре иногда всплывают холивары на тему "нужна ли программисту математика" (в том виде, как её преподают в школе - скорее нет, чем да). Тут очевидно наоборот - "нужно ли математику программирование". Навскидку вспоминается статья на хабре про проект "Floor 796" (гигантская анимированная картинка), где автор подробно расписывал про преодоление связанных с этим сложностей.
А ваш проект мне кажется правильным позиционировать как игру. В которую взрослому можно играть вместе с ребёнком. Бродить по лабиринтам в поисках решения. На гигантской бумажной карте, а не в смартфончике. Для вдохновления.
Игра-лабиринт звучит круто! Позиционирование проекта как совместного квеста для родителя и ребёнка — это прямо в точку. По поводу технической части вы правы: Mermaid на 336 узлов — штука тяжёлая, она изначально проектировалась под большие экраны ПК, а на смартфонах работает скорее в ознакомительном режиме. Компромисс в сторону чистого HTML и Mermaid был сделан ради одной цели — оставить проект полностью открытым кодом. В таком виде любой желающий может скопировать текстовую разметку и переделать карту под себя.
Труд титанический, спасибо. Для таких диаграмм очень неплохо подходит редактор yEd (https://www.yworks.com/products/yed/download, из РФ правда не открывается). Там и рисовать можно (именно рисовать), и есть иерархические группы, которые можно сворачивать / разворачивать, и разные интересные штуки с авто-раскладкой, которые на таком объёме жизненно важны становятся
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Я нарисовал алгоритм, который взрослые давно перестали замечать