judge html
v.1.0.0
ผู้พิพากษา HTML มีสองวิธีในการประเมินโซลูชันที่ส่งของนักเรียน ใน โหมดเปรียบเทียบ โครงสร้างของโซลูชันที่ส่งมาจะถูกเปรียบเทียบกับโซลูชันแบบจำลองตามเกณฑ์การเปรียบเทียบทั่วไป ครูสามารถกำหนดวิธีการเปรียบเทียบที่ควรทำอย่างเคร่งครัด
โหมดรายการตรวจสอบ มีความเป็นไปได้มากยิ่งขึ้นเนื่องจากการตรวจสอบโซลูชันที่ส่งมานั้นถูกตรวจสอบกับเกณฑ์ที่กำหนดไว้อย่างชัดเจนสำหรับการออกกำลังกายโดยครู ข้อเสนอแนะที่นักเรียนจะได้เห็นการแสดงเกณฑ์ที่มีหรือไม่ได้พบ
ในทั้งสองโหมดรหัสที่ส่งจะถูกตรวจสอบกับเงื่อนไขจำนวนมากสำหรับรหัส HTML ที่ถูกต้อง นอกจากนี้ผลลัพธ์ของรหัส HTML และ CSS ที่ส่งในโดนาก็แสดงในแท็บแยกต่างหากของหน้าข้อเสนอแนะ
หลักสูตร Dodona นี้มีแบบฝึกหัดตัวอย่างที่ใช้ในการพัฒนา HTML Judge:
- 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 rgba(R%,G%,B%,a) rgba(R,G,B,a) ), hsla(H,S%,L%,a) ) dirconfig.json ที่แนะนำconfig.json ที่แนะนำ (ตัวอย่างที่มีการตั้งค่าเริ่มต้น)solution.html )evaluation เสริมใน config.jsonDUMMYevaluator.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-roules ที่กำหนดไว้ในโซลูชันหรือไม่ | 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) และต่อท้ายกับการทดสอบ รวมการตรวจสอบหลายรายการในรายการตรวจสอบหนึ่งรายการหากคุณต้องการ
ไวยากรณ์ปกติ
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 (Dutch, N Eder L Ands) และ en (ภาษาอังกฤษ, en glish) รหัสภาษาต้องเป็นตัวพิมพ์เล็ก
# Add Dutch translation
html . translations [ "nl" ] = [
"De body heeft een tabel." ,
"De tabel heeft twee rijen."
]ตัวเลือก : เพิ่ม HTML Boilerplate ลงในไฟล์ BoilerPlate เนื้อหาของไฟล์นี้จะถูกโหลดโดยอัตโนมัติในพื้นที่ข้อความการส่งของผู้ใช้ คุณสามารถใช้สิ่งนี้เพื่อให้รหัสเริ่มต้นหรือโครงสร้างแก่นักเรียนของคุณ
เช็คสุดท้าย:
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 ]
การพัฒนาได้รับทุนจากคณะวิศวกรรมศาสตร์และสถาปัตยกรรมของ Ghent University
