Я преподаю детям программирование и вижу одну и ту же картину: на обычных тренажёрах печати дети быстро устают, начинают отвлекаться, а некоторые просто просят выключить. Тренажёра для детей с дислексией я не нашла ни одного. Ждать, пока его кто-то придумает, я не стала и сделала свой — Клавитраж.

Идея пришла не только с занятий: у меня самой дислексия, и именно клавиатура когда-то помогла мне справиться с письмом. Как я живу с этим и почему печать стала для меня спасением, расскажу в отдельной статье.

Здесь — о том, что я придумала, что из этого сработало, а в чём я ошиблась.

Что такое Клавитраж

Клавиатурный тренажёр для детей, с русской и английской раскладкой и версией, удобной для детей с дислексией. Дизайн построен на витражах, через которые проходит свет.

Клавитраж написан на JavaScript с React и собирается Vite в обычные статичные файлы: HTML, CSS и JS. Сервера и базы данных нет, сайт лежит на хостинге Beget, а прогресс ребёнка хранится прямо в браузере, в localStorage, поэтому регистрация не нужна. Уроки разбиты на 8 уровней, от первых клавиш до скорости. У каждого урока свой набор выученных букв, и генератор собирает строки только из них. В режиме при дислексии вместо случайных сочетаний вроде «аоав» он подставляет только отдельные буквы и настоящие слова.

Догадка, которая сработала: звук стекла

Звук был единственным, в чём я с самого начала была уверена. При нажатии на клавишу раздаётся звук удара по стеклу, и он действительно притягивает детей. Он поддерживает идею витража и превращает каждое нажатие в маленькое событие, а не просто в «правильно» или «неправильно».

Звуковых файлов в Клавитраже нет вообще: звон стекла синтезируется прямо в браузере через Web Audio API. Каждый удар — это основной тон и два «неровных» обертона, как у бокала, которые быстро затухают:

function chime(freq, { volume = 0.12, length = 1.1 } = {}) {
  const t = ctx.currentTime;
  const out = ctx.createGain();
  out.gain.setValueAtTime(0.0001, t);
  out.gain.exponentialRampToValueAtTime(volume, t + 0.01);   // мгновенная атака
  out.gain.exponentialRampToValueAtTime(0.0001, t + length); // долгое затухание
  out.connect(ctx.destination);
  for (const [mult, level] of [[1, 1], [2.76, 0.35], [5.4, 0.12]]) {
    const osc = ctx.createOscillator();
    const g = ctx.createGain();
    osc.frequency.value = freq * mult;
    g.gain.value = level;
    osc.connect(g).connect(out);
    osc.start(t);
    osc.stop(t + length);
  }
}

Звук не отстаёт от нажатия, потому что ничего не нужно загружать: он создаётся в момент нажатия. Каждая верная клавиша звучит следующей нотой пентатоники. В этой гамме любые ноты подряд звучат красиво, так что ребёнок, печатая, как будто играет мелодию. На ошибку вместо резкого «бзз» звучит мягкий глухой звук.

Ошибка 1: доверила картинки нейросети

На первых уровнях доступны всего несколько букв, например только «а» и «о». Казалось бы, какой тут сюжет. Но я добавила сказки, и детям оказалось интересно угадывать историю даже на таких простых уровнях.

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

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

Ошибка 2: убрала клавиатуру-подсказку

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

Вышло наоборот. Без подсказки задача стала труднее, и дети уставали быстрее. Оказалось, что «похоже на занятие» для ребёнка меньшая проблема, чем «непонятно, куда нажимать».

Боже, храни MVP и нейросети. Да, именно нейросеть нарисовала те самые непонятные витражи, но она же помогла мне за считаные дни собрать работающую версию и проверить всё это на детях.

Ошибка 3: надеялась найти решение для всех

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

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

Чем-то это напоминает историю Dart. Google задумывала его как замену JavaScript: у JS есть фундаментальные недостатки, и новый язык должен был их исправить. Заменить JS так и не получилось, у Dart нашлись свои слабые места, но он нашёл свою нишу во Flutter. С Клавитражем, похоже, так же: он не заменит все тренажёры и подойдёт не всем, но если вернул интерес хотя бы нескольким детям, которые раньше просили выключить тренажёр, это уже имеет смысл.

Что дальше

Работы ещё много: новые игры, доработка режима для детей с дислексией, внешний вид сайта. Но впервые я не просто сделала проект для оценки, а создала что-то, чем по-настоящему дорожу.

Если вы преподаёте, растите детей или сами делаете обучающие сервисы, буду рада, если попробуете Клавитраж и напишете, что не так: klavitrazh.ru.