judge html
v.1.0.0
У судьи HTML есть два способа оценить представленное решение студента. В режиме сравнения структура отправленного решения сравнивается с модельным решением, основанным на общих критериях сравнения. Учитель может установить, насколько строго должно быть выполнено это сравнение.
Режим контрольного списка предлагает еще больше возможностей, потому что представленное решение проверяется по критериям, явно настроенным для упражнения учителем. Отзывы, которые студенты получают, показывают, какие критерии были или не были встречены.
В обоих режимах представленный код проверяется по ряду условий для действительного HTML -кода. Кроме того, результат отправленного кода HTML и CSS в Dodona также показан на отдельной вкладке страницы обратной связи.
Этот курс Dodona содержит некоторые образцы упражнений, которые использовались для разработки судьи HTML:
- https://dodona.ugent.be/en/courses/941/
Существует ряд выборочных упражнений в репозитории Dodona, чтобы продемонстрировать использование судьи:
- https://github.com/dodona-edu/example-exercises
solution.html (быстрая, легкая, ограниченная параметры конфигурации)evaluator.py (большая гибкость, поддержка синтаксиса Emmet)<script> и <noscript> тег не допускаются.<p/> , <div/> ).( , < , { , [ , ' , " )name , #RRGGBB , rgb(R,G,B) , rgb(R%,G%,B%) , #RGB , hsl(H,S%,L%) , rgba(R,G,B,a) , rgba(R%,G%,B%,a) , hsla(H,S%,L%,a) ) dirconfig.jsonconfig.json (пример с настройками по умолчанию)solution.html )evaluation в config.jsonDUMMY ценностиevaluator.py )Больше информации о структуре каталога хранилища
Добавьте свой файл решения/оценщика ( solution.html для режима сравнения или evaluator.py для режима контрольного списка) в папку evaluation . Абсолютные необходимые файлы помечены ▶ в структуре дерева ниже.
+-- README.md # Optional: Describes the repository
+-- dirconfig.json # Shared config for all exercises in subdirs
+-- public # Optional: Contains files that belong to the course or series
| +-- my_picture.png # Optional: An image to reuse throughout the course
+-- validators # ▶ Folder that needs to be imported in every evaluator.py
| +-- checks.pyi # ▶ File needed for autocomplete (explained later)
+-- html-exercises # We could group exercises in a folder
| +-- first_html_exercise # Folder name for the exercise
| | +-- config.json # ▶ Configuration of the exercise
| | +-- evaluation # -- ?️ ADD YOUR FILES HERE ? --
| | | +-- solution.html # ▶ The HTML model solution for comparison mode
| | | +-- evaluator.py # ▶ The Python code for checklist mode
| | +-- solution # Optional: This will be visible in Dodona
| | | +-- solution.html # Optional: The HTML model solution file
| | +-- preparation # Optional folder
| | | +-- generator.py # Optional: Script to generate data
| | +-- description #
| | +-- description.nl.md # ▶ The description in Dutch
| | +-- description.en.md # Optional: The description in English
| | +-- media # Optional folder
| | | +-- some_image.png # Optional: An image used in the description and/or exercise
| | +-- boilerplate # Optional folder
| | +-- boilerplate # Optional: loaded automatically in submission text area
| :
:
dirconfig.jsonБольше информации о структуре каталога упражнений
{
"type" : " exercise " ,
"programming_language" : " html " ,
"access" : " public " ,
"evaluation" : {
"handler" : " html " ,
"time_limit" : 10 ,
"memory_limit" : 50000000
},
"labels" : [
" website " ,
" html " ,
" css "
],
"author" : " Firstname Lastname <[email protected]> " ,
"contact" : " [email protected] "
}config.json (пример с настройками по умолчанию) {
"description" : {
"names" : {
"nl" : " Mijn eerste HTML oefening " ,
"en" : " My first HTML exercise "
}
},
"type" : " exercise " ,
"programming_language" : " html " ,
"labels" : [
" website " ,
" html "
],
"evaluation" : {
"handler" : " html "
}
}solution.html )Полная документация для режима сравнения
Самый простой и быстрый способ оценки упражнения - это сравнение его с файлом solution.html в папке evaluation . Это по умолчанию, если нет файла evaluator.py . В этом случае структура подчинения студента будет сравниваться с вашим решением, и вы можете предоставить дополнительные варианты, чтобы указать, насколько строгим должно быть это сравнение. Если подача и решение не совпадают, показан процент сходства.
Следует отметить, что этот способ оценки обеспечивает гораздо меньшую свободу. Для гибких тестов рассмотрите возможность использования режима контрольного списка.
evaluation в config.json В файле config.json в упражнении вы можете дать некоторые варианты относительно того, как должно произойти сравнение. Если эти настройки не определены, значение по умолчанию выбирается. По умолчанию проверяются только структура HTML и CSS.
| Настройка оценки | Описание | Возможные значения | По умолчанию |
|---|---|---|---|
attributes | Проверьте, точно ли атрибуты одинаковы в решении и подчинении.* | true / false | false |
minimal_attributes | Проверьте, поставляются ли по крайней мере атрибуты в решении в представлении, допускаются дополнительные атрибуты. | true / false | false |
recommended | Проверьте, присутствуют ли все рекомендуемые атрибуты, это предупреждения, чек не выйдет из строя, если некоторые из них отсутствуют | true / false | true |
contents | Проверьте, является ли содержимое каждого тега в решении точно так же, как в представлении. | true / false | false |
css | Если в решении определены правила CSS, проверьте, может ли представление соответствовать этим правилам. Мы сами не сравниваем правила CSS, а скорее, есть ли каждый элемент в представлении, по крайней мере, правила CSS, определенные в решении. | true / false | true |
comments | Проверьте, есть ли в представлении те же комментарии, что и решение. | true / false | false |
*Примечание: когда будут поставляются как attributes , так и minimal_attributes , attributes будут принимать предпочтения, поскольку это строгие.
{
...
"evaluation" : {
"handler" : " html " ,
"minimal_attributes" : true ,
"contents" : true
},
...
}DUMMY ценности Во многих случаях вы захотите, чтобы студенты что -то написали или придали некоторую ценность атрибуту, но вам все равно, что они записывают. Для этого вы можете использовать DUMMY ключевое слово для значений атрибутов и для текста в вашем solution.html .
evaluator.py )Полная документация для режима контрольного списка
Для автозаполнения вам необходимо добавить validator папки с файлом checks.pyi в корне вашего проекта, в котором вы пишете оценщиков.
Создайте файл evaluator.py в папке evaluation со следующим кодом:
evaluator.py(Python 3.9+ требуется )from validators . checks import HtmlSuite , CssSuite , TestSuite , ChecklistItem def create_suites ( content : str ) -> list [ TestSuite ]: html = HtmlSuite ( content ) css = CssSuite ( content ) # Add checks here return [ html , css ]
Сделайте ChecklistItem (в регулярном синтаксисе Emmet) и добавьте его в TestSuite. Объедините несколько чеков в одном контрольном списке, если хотите.
Регулярный синтаксис
body = html . element ( "body" )
table = body . get_child ( 'table' , direct = True )
html . make_item ( "The body has a table. (regular)" , table . exists ())
html . make_item ( "The table has two rows. (regular)" , table . get_children ( 'tr' ). at_least ( 2 ))Синтаксис Эммета
html . make_item_from_emmet ( "The body has a table." , "body>table" )
html . make_item_from_emmet ( "The table has two rows." , "body>table>tr*2" ) Необязательно : добавьте переводы для контрольного списка непосредственно перед ключевым словом return . Доступные языки: nl (голландский, n Eder l и en (английский, en grish). Языковой код должен быть более низким.
# Add Dutch translation
html . translations [ "nl" ] = [
"De body heeft een tabel." ,
"De tabel heeft twee rijen."
]Необязательно : Добавьте HTML Cowerplate в файл шаблона. Содержимое этого файла загружается автоматически в текстовой области представления пользователей. Вы можете использовать это, чтобы предоставить своим студентам какой -то стартовый код или структуру.
Окончательные проверки:
html и/или css ).print() в файле evaluator.py !
evaluator.pyfrom validators . checks import HtmlSuite , TestSuite def create_suites ( content : str ) -> list [ TestSuite ]: html = HtmlSuite ( content ) body = html . element ( "body" ) table = body . get_child ( 'table' , direct = True ) html . make_item ( "The body has a table. (regular)" , table . exists ()) html . make_item ( "The table has two rows. (regular)" , table . get_children ( 'tr' ). at_least ( 2 )) html . make_item_from_emmet ( "The body has a table. (Emmet)" , "body>table" ) html . make_item_from_emmet ( "The table has two rows. (Emmet)" , "body>table>tr*2" ) html . translations [ "nl" ] = [ "De body heeft een tabel. (normaal)" , "De tabel heeft twee rijen. (normaal)" , "De body heeft een tabel. (Emmet)" , "De tabel heeft twee rijen. (Emmet)" ] return [ html ]
Развитие, финансируемое факультетом инженерии и архитектуры Университета Гента
