judge html
v.1.0.0
El juez HTML tiene dos formas de evaluar la solución presentada de un estudiante. En el modo de comparación , la estructura de la solución enviada se compara con una solución modelo basada en criterios de comparación genéricos. El maestro puede establecer cuán estrictamente se debe hacer esa comparación.
El modo de lista de verificación ofrece aún más posibilidades porque la solución presentada se verifica en los criterios establecidos explícitamente para el ejercicio por parte del maestro. Los comentarios que los estudiantes llegan a ver qué criterios se han cumplido o no.
En ambos modos, el código enviado se verifica en una serie de condiciones para el código HTML válido. Además, el resultado del código HTML y CSS enviado en Dodona también se muestra en una pestaña separada de la página de comentarios.
Este curso de Dodona contiene algunos ejercicios de muestra que se utilizaron para desarrollar el juez HTML:
- https://dodona.ugent.be/en/courses/941/
Hay una serie de ejercicios de muestra en el repositorio de ejercicios de muestra de Dodona para demostrar el uso del juez:
- https://github.com/dodona-edu/example-exercises
solution.html (opciones de configuración rápidas, fáciles y limitadas)evaluator.py (mucha flexibilidad, soporte para la sintaxis Emmet)<script> y la etiqueta <noscript> no están permitidas.<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 (ejemplo con configuración predeterminada)solution.html )evaluation opcional en config.jsonDUMMYevaluator.py )Más información sobre la estructura del directorio de repositorio
Agregue su archivo de solución/evaluador ( solution.html para el modo de comparación o evaluator.py para el modo de lista de verificación) a la carpeta evaluation . Los archivos necesarios absolutos se marcan con ▶ en la estructura del árbol a continuación.
+-- 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.jsonMás información sobre la estructura del directorio de ejercicios
{
"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 (ejemplo con configuración predeterminada) {
"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 )Documentación completa para el modo de comparación
La forma más fácil y más rápida de evaluar un ejercicio es compararlo con el archivo solution.html en la carpeta evaluation . Este es el valor predeterminado si no hay archivo evaluator.py presente. En este caso, la estructura de la presentación del estudiante se comparará con su solución, y puede proporcionar opciones adicionales para especificar cuán estricta debería ser esta comparación. Si el envío y la solución no coinciden, se muestra un porcentaje de similitud.
Debe tenerse en cuenta que esta forma de evaluación permite mucha menos libertad. Para pruebas flexibles, considere usar el modo de lista de verificación.
evaluation opcional en config.json En el archivo config.json del ejercicio, puede dar algunas opciones sobre cómo debería ocurrir la comparación. Si no se definen estas configuraciones, se elige el valor predeterminado. Por defecto, solo se verifica la estructura HTML y CSS.
| Configuración de evaluación | Descripción | Valores posibles | Por defecto |
|---|---|---|---|
attributes | Verifique si los atributos son exactamente los mismos en solución y envío.* | true / false | false |
minimal_attributes | Verifique si al menos los atributos en la solución se suministran en el envío, se permiten atributos adicionales. | true / false | false |
recommended | Verifique si todos los atributos recomendados están presentes, estas son advertencias, el cheque no fallará si faltan algunos de ellos | true / false | true |
contents | Compruebe si el contenido de cada etiqueta en la solución es exactamente el mismo que en el envío. | true / false | false |
css | Si hay reglas CSS definidas en la solución, verifique si el envío puede coincidir con estas reglas. No comparamos las reglas de CSS en sí mismas, sino más bien si cada elemento en la sumisión tiene al menos las reglas CSS definidas en la solución. | true / false | true |
comments | Verifique si la presentación tiene los mismos comentarios que la solución. | true / false | false |
*Nota: Cuando se suministran ambos attributes y minimal_attributes , attributes tomarán preferencias ya que es más estricta.
{
...
"evaluation" : {
"handler" : " html " ,
"minimal_attributes" : true ,
"contents" : true
},
...
}DUMMY En muchos casos, querrá que los estudiantes escriban algo o le den algo de valor a un atributo, pero no le importa lo que escriban. Para eso, puede usar la palabra clave DUMMY para valores de atributo y para texto en su archivo solution.html .
evaluator.py )Documentación completa para el modo de lista de verificación
Para autocompletar, debe agregar el validator de la carpeta con el archivo checks.pyi en la raíz de su proyecto en el que escribe los evaluadores.
Cree un archivo evaluator.py en la carpeta de evaluation con el siguiente código:
evaluator.py( requerido 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 ]
Realice una ChecklistItem (en sintaxis regular o emmet) y agregua a un testSuite. Combine varias comprobaciones en una lista de verificación si lo desea.
Sintaxis regular
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 ))Sintaxis de 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" ) Opcional : Agregue traducciones para la lista de verificación justo antes de la palabra clave return . Idiomas disponibles: nl (holandés, N Eder L ands) y en (inglés, en glish). El código de idioma debe ser minúscula.
# Add Dutch translation
html . translations [ "nl" ] = [
"De body heeft een tabel." ,
"De tabel heeft twee rijen."
]Opcional : Agregue HTML de Boilerplate al archivo Boilerplate. El contenido de este archivo se carga automáticamente en el área de texto de envío de los usuarios. Puede usar esto para proporcionar algún código o estructura inicial a sus alumnos.
Checks finales:
html y/o css ).print() en el archivo 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 ]
Desarrollo financiado por la Facultad de Ingeniería y Arquitectura de la Universidad de Gante
