judge html
v.1.0.0
HTML 판사는 학생의 제출 된 솔루션을 평가하는 두 가지 방법이 있습니다. 비교 모드 에서, 제출 된 솔루션의 구조는 일반적인 비교 기준에 기초한 모델 솔루션과 비교된다. 교사는 비교가 얼마나 엄격하게 이루어져야하는지 설정할 수 있습니다.
체크리스트 모드는 제출 된 솔루션이 교사의 운동에 대한 명시 적으로 설정된 기준에 대해 확인되므로 더 많은 가능성을 제공합니다. 학생들이 볼 수있는 피드백은 어떤 기준이 있는지 또는 충족되지 않은 것을 보여줍니다.
두 모드 모두에서 제출 된 코드는 유효한 HTML 코드에 대한 여러 조건에 대해 확인됩니다. 또한 Dodona에서 제출 된 HTML 및 CSS 코드의 결과는 피드백 페이지의 별도 탭에 표시됩니다.
이 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 포함)config.json 의 선택적 evaluation 설정DUMMY 값evaluator.py 포함)저장소 디렉토리 구조에 대한 자세한 정보
Solution/Evaluator 파일 (비교 모드 용 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 값 많은 경우에 당신은 학생들이 무언가를 쓰거나 속성에 가치를 주기를 원하지만, 그것이 무엇인지 신경 쓰지 않습니다. 이를 위해 속성 값과 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 (일반 또는 EMMET 구문)을 만들어 테스트 수양에 추가하십시오. 원하는 경우 몇 가지 점검을 하나의 체크리스트에 결합하십시오.
정기적 인 구문
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 Syntax
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 (Dutch, N Eder L ands) 및 en (English, 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 ]
Ghent University의 공학 및 건축 학부가 자금을 지원하는 개발
