judge html
v.1.0.0
HTML法官有两种评估学生提交的解决方案的方法。在比较模式下，将提交解决方案的结构与基于通用比较标准的模型解决方案进行了比较。老师可以设置该比较的严格性。
清单模式提供了更多的可能性，因为根据老师明确设置了练习的标准，对提交的解决方案进行了检查。学生可以看到显示哪些标准或尚未满足的反馈。
在这两种模式中，都针对有效HTML代码的许多条件进行检查。此外，在反馈页面的单独选项卡中还显示了Dodona中提交的HTML和CSS代码的结果。
Dodona课程包含一些用于发展HTML法官的样本练习：
- https://dodona.ugent.be/en/courses/941/
多纳的样本练习存储库有许多样本练习，以证明法官的使用：
- https://github.com/dodona-edu/example-cercises
solution.html文件的比较模式（快速，简单，有限的配置选项）evaluator.py清单模式。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 ）config.json中的可选evaluation设置DUMMY值evaluator.py模式的快速启动指南有关存储库目录结构的更多信息
将您的解决方案/评估器文件（用于比较模式的solution.html或CheckList模式为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 ）比较模式的完整文档
evaluation练习的最简单，最快的方法是将其与solution.html文件进行比较。如果没有evaluator.py文件，则这是默认值。在这种情况下，将将学生提交的结构与您的解决方案进行比较，您可以提供额外的选择来指定本比较的严格性。如果提交和解决方案不匹配，则显示相似百分比。
必须注意的是，这种评估方式可以减少自由。对于灵活的测试，请考虑使用清单模式。
config.json中的可选evaluation设置在练习的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
在evaluation文件夹中使用以下代码创建一个evaluator.py符。
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 ，然后将其附加到测试套件中。如果您愿意，将几个检查结合在一个清单中。
常规语法
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 ))emmet语法
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 ands）和en （英语， glish ）。语言代码需要较低的情况。
# Add Dutch translation
html . translations [ "nl" ] = [
"De body heeft een tabel." ,
"De tabel heeft twee rijen."
]可选：将样板HTML添加到样板文件中。该文件的内容自动加载在用户的提交文本区域中。您可以使用它为学生提供一些起始代码或结构。
最终检查：
html和/或css ）。evaluator.py文件中使用print() ！
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 ]
由根特大学工程与建筑学院资助的发展
