Мой младший брат Максим попросил меня позаниматься с ним программированием: ему предстоял экзамен по C. У меня сразу было ощущение, что уроки будут непростыми — даже в привычном общении он обычно оставался довольно закрытым — и я опасался, что редкие “угу” будут давать крайне мало информации о том, что происходит у него в голове: интересно ли ему, понял ли он пример, или же ему скучно и он просто вежливо досиживает занятие.

Дополнительно всё усложнялось тем, что до колледжа программирования у него, по сути, не было. Из похожего опыта была разве что подготовка к ОГЭ, где встречалось задание с роботом, которого нужно было довести от старта до финиша.

Поэтому я начал думать, как можно изменить сам формат обучения. Мне казалось, что если мы сразу уйдём в синтаксис, то быстро получим именно то, чего хотелось бы избежать: тишину, слабую вовлеченность и ощущение, что он вообще не понимает, зачем всё это.

Почему я вообще начал с игры

Тогда и возникла идея попробовать начать с игры. В памяти сразу всплыл КУМиР — знакомая многим школьная среда с исполнителем. Для меня это был хороший пример того, как игровая форма помогает увидеть полезность кода.

Мне хотелось получить инструмент, в котором можно:

  • вручную перемещать робота по карте,

  • собирать программу из блоков,

  • использовать циклы и условия,

  • быстро редактировать карты,

  • сохранять задания.

Готового решения, которое закрывало бы всё это сразу, я не нашёл, поэтому решил собрать своё.

Общий вид Stepwise
Общий вид Stepwise

Попробовать Stepwise можно здесь: stepwise-ed.vercel.app

От “угу” к “Хочу!”

Мы поздоровались и сразу перешли к началу урока. Я включил демонстрацию экрана и объяснил задачу. Первая карта была совсем простой — нужно было три раза передвинуть робота вправо. Я сразу спросил: “Куда двигаемся?”. После небольшой паузы он ответил: “Вправо”. Я передвинул робота и задал тот же вопрос ещё два раза. С каждым ответом пауза становилась короче, а неуверенность — меньше.

Первая простая карта
Первая карта

Следующая карта была уже сложнее: финиш находился за стеной, которую нужно было обойти. Он спросил, можем ли мы двигаться по диагонали. Получив отрицательный ответ, сразу начал говорить: “Вправо, вниз, вниз, вниз, вправо…” — и мы довели робота до финиша.

Я чувствовал, как его зажатость постепенно тает, он становится чуточку увереннее, и решил перейти к следующему этапу. Я попросил его переключить чекбокс “Блоки кода”. Когда стало понятно, что можно собрать программу из блоков UP, DOWN, LEFT, RIGHT и затем запустить её, он начал тщательно высчитывать маршрут по клеткам.

После нескольких совместно решённых карт стало заметно, что у него уже буквально чешутся руки сделать всё самому. Я спросил, хочет ли он попробовать решить следующую карту самостоятельно, и в ответ сразу услышал радостное:

“Хочу!”

LEFT × 8

Мы дошли до карты «5. Змейка». Он посмотрел на неё, подумал и спросил: «Здесь циклы нужны?». На предыдущей карте мы как раз с ними познакомились. Я ответил: «Если хочешь — давай решим и без них».

Пауза, обдумывание следующих шагов, и… добавление команд: LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT DOWN DOWN RIGHT RIGHT RIGHT RIGHT

Затем остановка, усмешка:

«Да ну нафиг»

Очистка программы и добавление LOOP START, LEFT, LOOP END с числом повторений 8.

После этого он сразу добавил ещё один цикл — уже для движения вниз, хотя там было всего два шага. Я заметил, что здесь цикл вообще-то не обязателен, на что получил ответ:

«Я ХОЧУ использовать циклы»

Карта “5. Змейка” и первый осмысленный цикл
Карта, на которой цикл впервые стал реально нужен

Трудности

Увидев карту «9. Змейка BIG», Макс сказал: «Ого!», удивляясь её размеру — она и правда заметно больше всех предыдущих. Он сразу начал накидывать блоки: LOOP START, RIGHT, LOOP END

Я предложил не писать программу сразу, а сначала спокойно собрать алгоритм в голове.

Поначалу ему казалось, что решение очевидно: идём циклом вправо, вниз, циклом влево, вниз, затем снова циклом вправо, вниз, циклом влево, вниз…

Затем он остановился.

Он увидел закономерность. Увидел повтор. И понял, что привычных циклов уже не хватает. Наверное, это и есть лучший момент для новой конструкции: когда ученик сам чувствует, что старых средств ему уже не хватает.

Было видно, что решение где‑то рядом: он чувствовал проблему, но пока не мог её сформулировать.

Спустя время, наконец, прозвучал вопрос:

«А можно поместить цикл внутрь другого цикла?»

Бинго!

Дальше уже методом проб и ошибок мы разобрались, как работает цикл внутри цикла, и довели робота до финиша.

Решение этой карты заняло почти половину урока — заметно больше, чем все предыдущие, но именно поэтому оно особенно запомнилось.

Карта “9. Змейка BIG” и вложенные циклы
Карта “9. Змейка BIG” и вложенные циклы

От блоков к синтаксису

Когда решение карт уже не представляло проблемы, я решил, что пора переходить к следующему этапу и включил показ синтаксиса языка C.

Блоки и сгенерированный C-код
Блоки и сгенерированный C-код

Здесь возникла пауза: сначала обилие незнакомых слов его смутило. Но потом он начал сопоставлять их со знакомыми блоками и увидел уже понятные DOWN();, RIGHT();, LEFT();.

Затем стало понятно и if (wall_right()).

После этого мы начали разбирать, что такое for (int i = 0; i < 8; i++). В этот момент Макс спросил, что вообще значит i. Я объяснил, что это просто имя переменной, и вместо неё можно написать почти любую другую букву. Кажется, эта мысль ему особенно понравилась: после этого он из принципа начал писать for (int a = 0; a < 5; a++).

В этот момент код уже не выглядел чем-то чужим: за каждым if и for стояла знакомая идея, которую он до этого уже использовал в блоках.

Когда в целом всё стало более-менее понятно, я отдельно указал, что конструкции вроде #include <stdio.h>, int main() и return 0 пока можно просто запомнить — к их смыслу мы вернёмся позже.

Пишем код сами

Уметь читать код — полезный навык, но его недостаточно, чтобы сдать экзамен. Для этого нужно уметь писать код. Поэтому следующим этапом стало самостоятельное написание программ — только теперь уже на C, чтобы робот сам доходил до финиша.

Когда Максим впервые писал код сам, он постоянно спрашивал: “Правильно? А так? А так можно?”.

Мы учились писать код и читать ошибки. Постепенно вопросов становилось меньше, карты — сложнее, а программы — длиннее.

Из студента в тестировщики

Утром я обновлял сайт, а днём у нас проходил урок.

Максим оказался не только учеником, но и моим первым тестировщиком: во время занятия быстро становилось видно, где неудобно, где слишком много лишних действий, а где интерфейс перегружен и мешает сконцентрироваться на задаче.

Я записывал такие моменты и самые важные исправлял сразу после урока — чтобы домашку было делать приятнее.

Иногда даже советовался с ним по UI: отправлял несколько скриншотов и спрашивал, какой лучше и почему. В ответ он присылал длинные объяснения и рассуждения — было видно, что он относится к этому серьёзно.

Итоги

В итоге из пассивности, неуверенности и «это не моё» мы очень быстро пришли к мотивированному и заметному прогрессу. Ученик задавал вопросы, проявлял инициативу и принимал самостоятельные решения. Скорость этой трансформации меня несказанно удивила: уже на третьем занятии он мог самостоятельно использовать условия и вложенные циклы! Когда я показал ему последние три карты и предложил взять их домой, он отреагировал: «Ух ты ж ё‑моё!» — и это была уже совсем не та реакция, с которой всё начиналось.

На этом наш опыт со Stepwise подошёл к концу, и мы с уверенностью двинулись дальше — к переменным, функциям и указателям.

Этот опыт ещё раз показал мне, насколько сильно форма обучения влияет на вовлечённость. Когда ученик видит смысл своих действий, материал становится понятнее и вызывает больший интерес.

Стало ясно, что понимание может прийти раньше синтаксиса. Мы сознательно не касались темы переменных, хотя в обычной последовательности именно с них часто начинается обучение. Возможно, благодаря этому переход к циклам и условиям оказался таким быстрым: конструкции сначала получили смысл, а уже потом — синтаксис. Меня особенно удивило, насколько быстро пришло понимание вложенных циклов — в своё время мне самому эта тема давалась заметно дольше.

Когда я в следующий раз буду обучать ученика с нуля, я уже вряд ли начну с синтаксиса и формальных конструкций.

При этом сам инструмент, конечно, ничего не гарантирует. Для меня Stepwise лучше всего работал не как самостоятельная игрушка, а как среда для разговора, совместного поиска решения и плавного перехода к коду.

Если вам близок такой подход к обучению и вам тоже интересно наблюдать, как ученик сам находит решение, возможно, мой опыт и Stepwise окажутся для вас полезными.


Инструмент

Исходный код