judge html
v.1.0.0
لدى قاضي HTML طريقتان لتقييم الحل المقدم للطالب. في وضع المقارنة ، تتم مقارنة هيكل الحل المقدم بحل النموذج يعتمد على معايير المقارنة العامة. يمكن للمعلم أن يحدد مدى صرامة هذه المقارنة.
يوفر وضع قائمة المراجعة المزيد من الاحتمالات لأنه يتم التحقق من الحل المقدم مقابل المعايير التي تم إعدادها بشكل صريح للتمرين من قبل المعلم. ردود الفعل التي يحصل عليها الطلاب لمشاهدة عروض أي معايير أو لم يتم الوفاء بها.
في كلا الوضعين ، يتم التحقق من الرمز المقترح مقابل عدد من الشروط لرمز HTML صالح. بالإضافة إلى ذلك ، يتم عرض نتيجة رمز HTML و CSS المقدم في Dodona في علامة تبويب منفصلة من صفحة التعليقات.
تحتوي دورة Dodona هذه على بعض تمارين العينات التي تم استخدامها في تطوير قاضي HTML:
- https://dodona.ugent.be/en/courses/941/
هناك عدد من تمارين العينات على مستودع تمارين عينة Dodona لإظهار استخدام القاضي:
- 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 )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 المحددة في الحل. | 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(بيثون 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
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 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 ]
التنمية التي تمولها كلية الهندسة والهندسة المعمارية لجامعة غنت
