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 ]
由根特大學工程與建築學院資助的發展
