judge html
v.1.0.0
Der HTML -Richter hat zwei Möglichkeiten, die eingereichte Lösung eines Studenten zu bewerten. Im Vergleichsmodus wird die Struktur der eingereichten Lösung mit einer Modelllösung verglichen, die auf generischen Vergleichskriterien basiert. Der Lehrer kann festlegen, wie streng dieser Vergleich durchgeführt werden sollte.
Der Checklistenmodus bietet noch mehr Möglichkeiten, da die eingereichte Lösung gegen die Kriterien überprüft wird, die ausdrücklich für die Ausübung des Lehrers eingerichtet werden. Das Feedback, das die Schüler sehen, zeigt, welche Kriterien erfüllt sind oder nicht.
In beiden Modi wird der eingereichte Code gegen eine Reihe von Bedingungen für einen gültigen HTML -Code überprüft. Darüber hinaus wird das Ergebnis des eingereichten HTML- und CSS -Code in Dodona auch in einer separaten Registerkarte der Rückkopplungsseite angezeigt.
Dieser Dodona -Kurs enthält einige Stichprobenübungen, die bei der Entwicklung des HTML -Richters verwendet wurden:
- https://dodona.ugent.be/en/courses/941/
Es gibt eine Reihe von Stichprobenübungen zu Dodonas Beispielübungen Repository, um die Verwendung des Richters zu demonstrieren:
- https://github.com/dodona-edu/example-eexercises
solution.html -Datei (schnelle, einfache, begrenzte Konfigurationsoptionen)evaluator.py (viel Flexibilität, Unterstützung für die Emmet -Syntax)<script> und <noscript> Tag sind nicht zulässig.<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 (Beispiel mit Standardeinstellungen)solution.html )evaluation in config.jsonDUMMYevaluator.py )Weitere Informationen zur Repository -Verzeichnisstruktur
Fügen Sie Ihre Lösung/Evaluator -Datei ( solution.html zum Vergleichsmodus oder evaluator.py für den Checklist -Modus) zum evaluation hinzu. Absolute notwendige Dateien werden in der folgenden Baumstruktur mit ▶ markiert.
+-- 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.jsonWeitere Informationen zur Übung Verzeichnisstruktur
{
"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 (Beispiel mit Standardeinstellungen) {
"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 )Vollständige Dokumentation für den Vergleichsmodus
Die einfachste und schnellste Art der Bewertung einer Übung besteht darin, sie mit der solution.html -Datei im evaluation zu vergleichen. Dies ist die Standardeinstellung, wenn keine evaluator.py -Datei vorhanden ist. In diesem Fall wird die Struktur der Einreichung des Schülers mit Ihrer Lösung verglichen, und Sie können zusätzliche Optionen bereitstellen, um anzugeben, wie streng dieser Vergleich sein sollte. Wenn die Einreichung und Lösung nicht übereinstimmen, wird ein Ähnlichkeitsprozentsatz angezeigt.
Es muss angemerkt werden, dass diese Art der Bewertung viel weniger Freiheit ermöglicht. Für flexible Tests sollten Sie den Checklistenmodus verwenden.
evaluation in config.json In der Datei config.json der Übung können Sie einige Optionen für den Vergleich geben. Wenn diese Einstellungen nicht definiert sind, wird der Standardwert gewählt. Standardmäßig wird nur die HTML-Struktur und CSS überprüft.
| Bewertungseinstellung | Beschreibung | Mögliche Werte | Standard |
|---|---|---|---|
attributes | Überprüfen Sie, ob die Attribute genau in Lösung und Einreichung gleich sind.* | true / false | false |
minimal_attributes | Überprüfen Sie, ob zumindest die Attribute in der Lösung in der Einreichung geliefert werden, zusätzliche Attribute zulässig . | true / false | false |
recommended | Überprüfen Sie, ob alle empfohlenen Attribute vorhanden sind. Dies sind Warnungen. Der Scheck fällt nicht aus, wenn einige von ihnen fehlen | true / false | true |
contents | Überprüfen Sie, ob der Inhalt jedes Tags in der Lösung genau übereinstimmt wie in der Einreichung. | true / false | false |
css | Wenn in der Lösung CSS -Regeln definiert sind, prüfen Sie, ob die Einreichung mit diesen Regeln übereinstimmt. Wir vergleichen nicht die CSS-Regeln selbst, sondern ob jedes Element in der Einreichung zumindest die in der Lösung definierten CSS-Rules aufweist. | true / false | true |
comments | Überprüfen Sie, ob die Einreichung die gleichen Kommentare wie die Lösung enthält. | true / false | false |
*Hinweis: Wenn sowohl attributes als auch minimal_attributes geliefert werden, werden attributes bevorzugt, da es strenger ist.
{
...
"evaluation" : {
"handler" : " html " ,
"minimal_attributes" : true ,
"contents" : true
},
...
}DUMMY In vielen Fällen möchten Sie, dass die Schüler etwas schreiben oder einem Attribut einen Wert geben, aber es ist Ihnen egal, was sie aufschreiben. Dafür können Sie das DUMMY -Schlüsselwort für Attributwerte und für Text in Ihrer solution.html -Datei verwenden.
evaluator.py )Vollständige Dokumentation für den Checklistenmodus
Für die automatische Vervollständigung müssen Sie den Ordner validator mit der Datei checks.pyi zum Stammvermögen Ihres Projekts hinzufügen, in dem Sie die Evaluatoren schreiben.
Erstellen Sie eine Datei evaluator.py im evaluation mit dem folgenden Code:
evaluator.py(Python 3.9+ erforderlich )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 ]
Erstellen Sie eine ChecklistItem (in regulärer oder emmet -Syntax) und fügen Sie es an einen Testsuite hinzu. Kombinieren Sie mehrere Überprüfungen in einer Checkliste, wenn Sie möchten.
Regelmäßige Syntax
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" ) Optional : Fügen Sie Übersetzungen für die Checkliste kurz vor dem Keyword return . Verfügbare Sprachen: nl (Niederländisch, Nder und ) und en (Englisch, ENglis ). Der Sprachcode muss ein niedrigerer Fall sein.
# Add Dutch translation
html . translations [ "nl" ] = [
"De body heeft een tabel." ,
"De tabel heeft twee rijen."
]Optional : Hinzufügen von Kesselplatten -HTML in der Boilerplate -Datei. Der Inhalt dieser Datei wird automatisch im Einreichungstextbereich der Benutzer geladen. Sie können dies verwenden, um Ihren Schülern einen Startcode oder eine Struktur bereitzustellen.
Letzte Schecks:
html und/oder css ).print() in der Datei evaluator.py nicht!
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 ]
Entwicklung finanziert von der Fakultät für Ingenieurwesen und Architektur der Gent University
