judge html
v.1.0.0
HTMLジャッジには、学生の提出されたソリューションを評価する2つの方法があります。比較モードでは、提出されたソリューションの構造を、一般的な比較基準に基づいたモデルソリューションと比較されます。教師は、その比較をどれほど厳密に行うべきかを設定できます。
チェックリストモードは、送信されたソリューションが、教師による演習のために明示的に設定された基準に対してチェックされるため、さらに多くの可能性を提供します。学生が見ることができるフィードバックは、どの基準が満たされているか、満たされていないかを示しています。
両方のモードで、有効なHTMLコードの多くの条件に対して送信されたコードがチェックされます。さらに、ドドナの提出されたHTMLおよびCSSコードの結果も、フィードバックページの別のタブに示されています。
このドドナコースには、HTMLジャッジの開発に使用されたいくつかのサンプルエクササイズが含まれています。
- https://dodona.ugent.be/en/courses/941/
裁判官の使用を実証するために、ドドナのサンプル演習リポジトリには多くのサンプル演習があります。
- https://github.com/dodona-edu/example-exercises
solution.htmlファイルとの比較モード（高速、簡単、制限された構成オプション）evaluator.pyを使用したチェックリストモード（柔軟性が多い、エメット構文のサポート）<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/evaluatorファイル（比較モードのためのsolution.htmlまたはevaluator.py for checklist mode for checklist mode）を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値多くのケースでは、生徒に何かを書いたり、属性に何らかの価値を与えてほしいと思っていますが、それが何を書き留めているのかは気にしません。そのためには、属性値とsolution.htmlファイルのテキストにDUMMYキーワードを使用できます。
evaluator.pyを使用）チェックリストモードの完全なドキュメント
AutoCompleteの場合、評価者を書くプロジェクトのルートにあるchecks.pyiファイルを使用してフォルダーvalidatorを追加する必要があります。
次のコードを使用して、 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 （通常またはエメットの構文）を作成し、テストスイートに追加します。必要に応じて、いくつかのチェックを1つの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 ))エメット構文
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 （英語、 enグリッシュ）。言語コードは小文字である必要があります。
# 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 ]
ゲント大学の工学および建築学部が資金提供した開発
