Автоматическая проверка Scratch-проектов: веб-приложение КотФикс

сделай сам

программирование

Scratch

инструментарий

Дата публикации

1 августа 2023 г.

В этом посте опишу для чего разрабатывалось и как работает веб-приложение КотФикс. Если коротко, идея появилась после судейства в Олимпиаде по креативному программированию. Среди критериев были те, что требуют оценить качество и сложность кода Scratch-проектов. Чтобы сделать процесс проще, предлагалось использовать сервис Dr. Scratch, о котором я услышал впервые. Но, на момент олимпиады, сервис работал с перебоями и проекты нужно было проверять вручную. Тогда и появилась идея сделать похожий сервис. Некоторые идеи были вдохновлены сайтом LitterBox. Особенно полезным оказался раздел с описанием типовых проблем и ошибок, которые встречаются в Scratch-проектах.

Итогом работы стало веб-приложение КотФикс ¹ и расширение для браузера.

Для чего необходимо приложение?

Ошибки в коде тормозят процесс обучения². Периодическая проверка кода, поиск ошибок и вредных шаблонов необходимы для того, чтобы эти затруднения были устранены учащимися самостоятельно, или при помощи учителя. Сервис КотФикс даёт ученику список замечаний и ошибок в Scratch-проекте.

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

Функции сервиса

С помощью сервиса можно найти следующие замечания:

Пустой спрайт
Неиспользуемая переменная
Потерянный код
Нет комментариев
Наложение скриптов
Слишком длинный скрипт
Стандартное имя спрайта

Список ошибок пока небольшой:

Неотправленное сообщение
Сообщение никто не получает
Переменная без начального значения
Сравнение буквальных значений

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

Для ученика

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

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

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

Фрагмент оценки проекта на странице ученика

Вместе с замечаниями, на сайте выводится оценка проекта по семи критериям. Они были взяты из регламента олимпиады.

Для учителя

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

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

После таблицы располагаются две диаграммы с количеством замечаний и ошибок:

Диаграммы с частотой предупреждений и ошибок

Размер столбца зависит от количества замечаний на 1 спрайт проекта. С помощью диаграмм преподаватель поймёт, на какие предупреждения и ошибки нужно обратить внимание в первую очередь.

Технические моменты

Scratch-проект - это архив в котором находятся изображения спрайтов и самый важный файл - project.json. В нём хранятся все скрипты проекта:

".Aj|Xu]Mw#]^nV,W=DD4": {
    "opcode": "data_setvariableto",
    "next": "42$Czm#R`;{@~B{w}+|d",
    "parent": "xG^gvKA%;JhJwROUBE/=",
    "inputs": { "VALUE": [1, [10, "0"]] },
    "fields": {
        "VARIABLE": [
            "цепь замкнута?",
            "`jEk@4|i[#Fk?(8x)AV.-my variable"
        ]
    },
    "shadow": false,
    "topLevel": false
},
"T^fZ!+n:zZs3bv1wnu#4": {
    "opcode": "sensing_askandwait",
    "next": "!7Gq$=VN)5hfO!;7GsA1",
    "parent": "U!){n)p[NRz[C)=B:WIb",
    "inputs": {
        "QUESTION": [
            1,
            [10, "Введите напряжение батареи? (Вольт)"]
        ]
    },
    "fields": {},
    "shadow": false,
    "topLevel": false
},

В этом фрагменте описание всего двух блоков. Не очень лаконично. Для проверки кода я искал способ записать скрипты в более понятном мне формате. Это получилось сделать с помощью модуля parse-sb3-blocks. Если передать в модуль блок-шапку, то на выходе получается такая запись:

when this sprite clicked
if <(цепь замкнута?) = [0]> then
    set [цепь замкнута? v] to [1]
    switch costume to [включено v]
else
    set [цепь замкнута? v] to [0]
    switch costume to [выключено v]
end
broadcast [выключатель нажат v]

Такой текст уже проще обработать и найти в нём циклы, условные операторы, переменные и другие элементы программы. Поэкспериментировать с модулем parse-sb3-blocks можно на этой странице. Чтобы сервис поддерживал блоки из RobboScratch пришлось немного модифицировать код модуля.

Ошибки и замечания сопровождаются фрагментами Scratch-кода. Так учащемуся легче найти проблемный фрагмент скрипта. Чтобы преобразовать текстовое описание скрипта (см. выше) в графический формат используется модуль scratchblocks. На этом сайте есть возможность опробовать модуль на практике:

В модуле scratchblocks есть функция перевода текстового кода на другие языки. Это оказалось полезно для локализации сервиса. Блоки в разделе рекомендаций показываются на языке, который выбрал пользователь.

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

Надеюсь приложение будет полезно как учителям, так и учащимся.

Сноски

Исходный код проекта доступен в github-репозитории ↩︎
LitterBox: A Linter for Scratch Programs. В этой публикации есть полезные ссылки на источники.↩︎