Веб-сервис для автоматизированной проверки решений учебных заданий по html-верстке

Боковая панель статьи

PDF
Опубликован: ноя 1, 2023
Ключевые слова:
информационная система, веб-сервис, html-верстка, headless-браузер, сравнение изображений, нейросети information system, web service, html layout, headless browser, image comparison, neural networks

Основное содержимое статьи

А. Д. Рыженков
Государственный университет «Дубна», Дубна, Россия; АО Нэксайн, Санкт-Петербург, Росси
К. В. Лукьянов
Государственный университет «Дубна», Дубна, Россия; Объединенный институт ядерных исследований, Дубна, Россия

Аннотация

Задача автоматизированной проверки заданий по html-верстке востребована в процессе обучения основам веб-технологий как в учебных заведениях, так и при самоподготовке по соответствующим направлениям. В статье рассматриваются особенности проверки таких заданий, которые необходимо учитывать в случае автоматизированной проверки. Приводится алгоритм системы для реализации в виде веб-сервиса. Особенностью предлагаемой системы является реализация сравнения результата верстки с эталонным образцом различными методами, в том числе с использованием нейросети VGG16. Показано, что при должном задании порога схожести система сравнения изображений дает удовлетворительные результаты и может применяться для автоматизированной проверки заданий по верстке.

Скачивания

Данные скачивания пока недоступны.

Информация о статье

Как цитировать
1.
Рыженков АД, Лукьянов КВ. Веб-сервис для автоматизированной проверки решений учебных заданий по html-верстке. Системный анализ в науке и образовании [Интернет]. 1 ноябрь 2023 г. [цитируется по 29 апрель 2024 г.];(3):71-7. доступно на: https://sanse.ru/index.php/sanse/article/view/591
Выпуск
№ 3 (2023)
Раздел
Новые образовательные системы и технологии обучения
Лицензия Creative Commons

Это произведение доступно по лицензии Creative Commons «Attribution» («Атрибуция») 4.0 Всемирная.

Библиографические ссылки

Университет «Дубна» : Прикладная информатика в компьютерном дизайне. – URL: https://new2.uni-dubna.ru/directions/ae6b4579-ee8c-477e-b13a-783c33bc9fae (Дата обращения: 02.08.2023).

Reliable Screenshot API | Screenshot Machine. – Devtica s.r.o., 2012 - 2023. – URL: https://www.screenshotmachine.com/ (Дата обращения: 02.08.2023).

Screenshot API / Competitor Archive, LLC. – URL: https://www.screenshotapi.io/ (Дата обращения: 02.08.2023).

Using the Screen Capture API - Web APIs | MDN // MDM Web Docs. – URL: https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture (Дата обращения: 02.08.2023).

html2canvas - Screenshots with JavaScript / Niklas von Hertzen. – URL: https://html2canvas.hertzen.com/ (Дата обращения: 02.08.2023).

Chrome Headless: How to take full page page screenshot // Open source code library - OneLinerHub. – URL: https://onelinerhub.com/chrome-headless/how-to-take-full-page-page-screenshot (Дата обращения: 02.08.2023).

HtmlUnit // GitHub : [web platform]. – GitHub, Inc., 2023. – URL: https://github.com/HtmlUnit (Дата обращения: 24.02.2023).

PhantomJS - Scriptable Headless Browser. – PhantomJS contributors, 2010-2018. – URL: https://phantomjs.org (Дата обращения: 24.02.2023).

История версий Firefox - Firefox version history. – URL: https://ru.abcdef.wiki/wiki/Firefox_version_history (Дата обращения: 02.03.2023).

Firefox 55 — Mozilla — Новости. – URL: https://www.linux.org.ru/news/mozilla/13599508/page2 (Дата обращения: 03.03.2023).

Truong, T. Headless Chrome - What is it? – Дата публикации: 25.09.2021. – Дата обновления: 7.10. 2021. – URL: https://dev.to/thanhtr99270163/today-i-learned-headless-chrome-what-is-it-1dd.

MaxRokatansky. Headless тестирование в браузере. Плюсы и минусы // Хабр :[сайт]. – Habr, 2006–2023. – Дата публикации: 18.03.2019. – URL: https://habr.com/ru/companies/otus/articles/444248.

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share. – StatCounter, 1999-2023. – URL: https://gs.statcounter.com/ (Дата обращения: 02.08.2023).

Кацапа Л. Среднеквадратическая ошибка (MSE). – Дата публикации: 03.04.2021. – URL: https://www.helenkapatsa.ru/sriedniekvadratichieskaia-oshibka.

Структурное сходство - Structural similarity. – URL: https://ru.abcdef.wiki/wiki/Structural_similarity (Дата обращения: 01.04.2023).

Милютин И.VGG16 — нейросеть для выделения признаков изображений // Neurohive – Нейронные сети : [сайт]. – Дата публикации: 23.11.2018. – URL: https://neurohive.io/ru/vidy-nejrosetej/vgg16-model.

Вектор средних и матрица ковариации. – URL: https://ab.al-shell.ru/articles/vektor-srednih-i-matritsa-kovariatsii (Дата обращения: 02.08.2023).

Рыженков А. Д. Веб-сервис для автоматизированной проверки корректности решения учебных заданий по верстке : Магистерская диссертация. — Дубна, 2023.

GitHub - JaidedAI/EasyOCR: Ready-to-use OCR with 80+ supported languages and all popular writing scripts including Latin, Chinese, Arabic, Devanagari, Cyrillic and etc. // GitHub : [web platform]. – GitHub, Inc., 2023. – URL: https://github.com/JaidedAI/EasyOCR (Дата обращения: 18.04.2023).

GitHub - opencv/opencv: Open Source Computer Vision Library // GitHub : [web platform]. – GitHub, Inc., 2023. – URL: https://github.com/opencv/opencv (Дата обращения: 18.04.2023).

Ермолаев, И. Алгоритм быстрого нахождения похожих изображений // Хабр :[сайт]. – Habr, 2006–2023. – Дата публикации: 22.06.2011. – URL: https://habr.com/ru/articles/122372.

Как измерить сходство между двумя изображениями? – URL: https://utyatnishna.ru/info/42419/how-can-i-measure-the-similarity-between-two-images (Дата обращения: 02.08.2023).

Сравнение сходства изображений и обнаружение конкретных объектов на изображениях // Русские блоги : [сайт]. – russianblogs.com, 2020-2023. – URL: https://russianblogs.com/article/71441215538 (Дата обращения: 02.08.2023).

NewTechAudit. ML-подходы по поиску похожих изображений / NewTechAudit // Хабр :[сайт]. – Habr, 2006–2023. – Дата публикации: 31.03.2023. – URL: https://habr.com/ru/articles/726122.

AutomaticLayoutCheck : [Веб-сервис по автоматизированной проверке учебных заданий по верстке] // GitHub : [web platform]. – GitHub, Inc., 2023. – URL: https://github.com/Jaldsky/AutomaticLayoutCheck (Дата обращения: 22.05.2023).

Наиболее читаемые статьи этого автора (авторов)