Download do judge html - judge html Download do código -fonte

judge html

Outro código-fonte

v.1.0.0

Baixar

HTML & CSS Judge para Dodona

O juiz HTML tem duas maneiras de avaliar a solução enviada de um aluno. No modo de comparação , a estrutura da solução enviada é comparada a uma solução de modelo com base em critérios de comparação genérica. O professor pode definir o quão estritamente essa comparação deve ser feita.
O modo de lista de verificação oferece ainda mais possibilidades porque a solução enviada é verificada em relação aos critérios configurados explicitamente para o exercício do professor. O feedback que os alunos podem ver mostra quais critérios tiveram ou não foram atendidos.
Nos dois modos, o código enviado é verificado em relação a várias condições para o código HTML válido. Além disso, o resultado do código HTML e CSS enviado em Dodona também é mostrado em uma guia separada da página de feedback.
Este curso de Dodona contém alguns exercícios de amostra que foram usados no desenvolvimento do juiz HTML:
https://dodona.ugent.be/en/courses/941/
Há vários exercícios de amostra no repositório de exercícios de amostra de Dodona para demonstrar o uso do juiz:
https://github.com/dodona-edu/example-exercises

Juiz Recursos

Lista de verificação (correta, falha, aviso, erro)
Feedback no idioma do usuário (holandês ou inglês)
HTML e CSS renderizam
Suporte para exercícios parciais (exercícios focados em uma etiqueta)
Feedback elaborado
Dois métodos de avaliação:
1. Modo de comparação com o arquivo solution.html (opções de configuração rápida, fácil e limitada)
2. Modo de lista de verificação com evaluator.py (muita flexibilidade, suporte para sintaxe do Emmet)

Juiz Propriedades

As tags são insensíveis a minúsculas.
CSS embutido não é permitido (CSS interno é).
<script> e <noscript> tag não são permitidos.
Tags de fechamento automático (não void) não são permitidas (por exemplo, <p/> , <div/> ).
TestSuite padrão para HTML e/ou CSS (em diferentes guias com validação automática).
Caminhos de arquivo absolutos não são permitidos.

Opinião

HTML & CSS

Erros de sintaxe
- Verifique se os colchetes/citações abrem e fecham ( ( , < , { , [ , ' , " )
- Cada tag que abre deve ter uma tag de fechamento correspondente.
- Verifica se todas as tags são válidas
Verifique se todos os IDs são únicos
Verifique se a tag é permitida na etiqueta pai
Verifique os atributos necessários (e recomendados)
Verifique se há atributos inválidos (por exemplo, o atributo de estilo não é permitido)

Html

Verifique se os atributos necessários estão presentes.
Aviso, se os atributos recomendados estiverem ausentes.

CSS

Automatic color conversion ( 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) )

Índice

Estrutura do diretório de exercícios recomendado
dirconfig.json recomendado
config.json recomendado (exemplo com configurações padrão)
Guia de início rápido para o modo de comparação (com solution.html )
- Configurações evaluation opcional em config.json
- Valores DUMMY
Guia de início rápido para o modo Lista de verificação (com evaluator.py )
- Exemplo mínimo
Teste
Colaboradores

Estrutura do diretório de exercícios recomendado

Mais informações sobre a estrutura do diretório do repositório

Adicione seu arquivo de solução/avaliador ( solution.html para modo de comparação ou evaluator.py para o modo de lista de verificação) à pasta evaluation . Os arquivos necessários absolutos são marcados com ▶ na estrutura da árvore abaixo.

 +-- 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` recomendado

Mais informações sobre a estrutura do diretório de exercícios

{
  "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` recomendado (exemplo com configurações padrão)

{
  "description" : {
    "names" : {
      "nl" : " Mijn eerste HTML oefening " ,
      "en" : " My first HTML exercise "
    }
  },
  "type" : " exercise " ,
  "programming_language" : " html " ,
  "labels" : [
    " website " ,
    " html "
  ],
  "evaluation" : {
    "handler" : " html "
  }
}

Guia de início rápido para o modo de comparação (com `solution.html` )

Documentação completa para o modo de comparação

A maneira mais fácil e rápida de avaliar um exercício é comparando -o com o arquivo solution.html na pasta evaluation . Este é o padrão se nenhum arquivo evaluator.py estiver presente. Nesse caso, a estrutura do envio do aluno será comparada à sua solução e você poderá fornecer opções extras para especificar o quão rigoroso essa comparação deve ser. Se o envio e a solução não corresponderem, uma porcentagem de similaridade será mostrada.

É preciso notar que essa maneira de avaliação permite muito menos liberdade. Para testes flexíveis, considere usar o modo Lista de verificação.

Configurações `evaluation` opcional em `config.json`

No arquivo config.json do exercício, você pode dar algumas opções sobre como a comparação deve acontecer. Se essas configurações não forem definidas, o valor padrão será escolhido. Por padrão, apenas a estrutura HTML e o CSS é verificada.

Configuração de avaliação	Descrição	Valores possíveis	Padrão
`attributes`	Verifique se os atributos são exatamente os mesmos em solução e envio.*	`true` / `false`	`false`
`minimal_attributes`	Verifique se pelo menos os atributos da solução são fornecidos no envio, são permitidos atributos extras.	`true` / `false`	`false`
`recommended`	Verifique se todos os atributos recomendados estão presentes, esses são avisos, o cheque não falhará se alguns deles estiverem faltando	`true` / `false`	`true`
`contents`	Verifique se o conteúdo de cada tag na solução é exatamente o mesmo que no envio.	`true` / `false`	`false`
`css`	Se houver regras CSS definidas na solução, verifique se o envio pode corresponder a essas regras. Não comparamos as regras do CSS, mas se todos os elementos da submissão têm pelo menos as Rulas CSS definidas na solução.	`true` / `false`	`true`
`comments`	Verifique se o envio tem os mesmos comentários que a solução.	`true` / `false`	`false`

*Nota: quando attributes e minimal_attributes são fornecidos, attributes terão preferência como é mais rigoroso.

Exemplo de configurações modificadas

{
  ...
  "evaluation" : {
    "handler" : " html " ,
    "minimal_attributes" : true ,
    "contents" : true
  },
  ...
}

Valores `DUMMY`

Em muitos casos, você vai querer que os alunos escrevam algo ou dê algum valor a um atributo, mas você não se importa com o que eles escrevem. Para isso, você pode usar a palavra -chave DUMMY para valores de atributo e para texto em seu arquivo solution.html .

Guia de início rápido para o modo Lista de verificação (com `evaluator.py` )

Documentação completa para o modo de lista de verificação

Para preenchimento automático, você precisa adicionar o validator da pasta com o arquivo checks.pyi na raiz do seu projeto, no qual você escreve os avaliadores.

Crie um arquivo evaluator.py na pasta evaluation com o seguinte código:

evaluator.py (python 3.9+ necessário )

 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 ]

Faça uma ChecklistItem (em sintaxe regular ou Emmet) e anexe -a a um TestSuite. Combine várias verificações em uma lista de verificação, se desejar.

Sintaxe 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 ))

Sintaxe 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 : Adicione traduções para a lista de verificação pouco antes da palavra -chave return . Idiomas disponíveis: nl (holandês, n edter l ands) e en (inglês, en glish). O código do idioma precisa ser minúsculo.
```
 # Add Dutch translation
html . translations [ "nl" ] = [
    "De body heeft een tabel." ,
    "De tabel heeft twee rijen."
]
```
Opcional : adicione html em caldeira ao arquivo de caldeira. O conteúdo deste arquivo é carregado automaticamente na área de texto de envio dos usuários. Você pode usar isso para fornecer algum código ou estrutura inicial aos seus alunos.

Verificações finais:

Certifique -se de que pelo menos um testSuite seja retornado ( html e/ou css ).
Não use print() no arquivo evaluator.py !

Exemplo mínimo

evaluator.py

 from 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 ]