Téléchargement judge html - Téléchargement du code source judge html

judge html

Autre code source

v.1.0.0

Télécharger

Juge HTML & CSS pour Dodona

Le juge HTML a deux façons d'évaluer la solution soumise d'un étudiant. En mode comparaison , la structure de la solution soumise est comparée à une solution de modèle basée sur des critères de comparaison génériques. L'enseignant peut définir à quel point cette comparaison doit être strictement fait.
Le mode de liste de contrôle offre encore plus de possibilités car la solution soumise est vérifiée par rapport aux critères explicitement configurés pour l'exercice par l'enseignant. Les commentaires que les élèves peuvent voir montrent quels critères ont ou n'ont pas été satisfaits.
Dans les deux modes, le code soumis est vérifié par rapport à un certain nombre de conditions de code HTML valide. De plus, le résultat du code HTML et CSS soumis dans Dodona est également affiché dans un onglet distinct de la page de rétroaction.
Ce cours Dodona contient quelques échantillons d'exercices qui ont été utilisés pour développer le juge HTML:
https://dodona.ugent.be/en/courses/941/
Il y a un certain nombre d'exercices d'échantillonnage sur le référentiel d'exercices d'échantillonnage de Dodona pour démontrer l'utilisation du juge:
https://github.com/dodona-edu/example-exercises

Juge les traits

Liste de contrôle (correct, échec, avertissement, erreur)
Commentaires dans la langue de l'utilisateur (néerlandais ou anglais)
HTML et CSS rendent la soumission des étudiants
Support à des exercices partiels (exercices qui se concentrent sur une seule étiquette)
Rétroaction élaborée
Deux méthodes d'évaluation:
1. Mode de comparaison avec le fichier solution.html (options de configuration rapide, facile et limitée)
2. Mode de liste de contrôle avec evaluator.py (beaucoup de flexibilité, prise en charge de la syntaxe Emmet)

Juge les propriétés

Les balises sont insensibles à la casse.
Le CSS en ligne n'est pas autorisé (CSS interne est).
La balise <script> et <noscript> ne sont pas autorisées.
Les balises auto-fermes (non-VOID) ne sont pas autorisées (par exemple <p/> , <div/> ).
TestSuite par défaut pour HTML et / ou CSS (dans différents onglets avec validation automatique).
Les chemins de fichier absolus ne sont pas autorisés.

Retour

HTML & CSS

Erreurs de syntaxe
- Vérifiez si les supports / citations s'ouvrent et ferment ( ( , < , { , [ , ' , " )
- Chaque balise qui s'ouvre doit avoir une balise de clôture correspondante.
- Vérifie si toutes les balises sont valides
Vérifiez si tous les identifiants sont uniques
Vérifiez si la balise est autorisée dans la balise parent
Vérifiez les attributs requis (et recommandés)
Vérifiez les attributs non valides (l'attribut de style par exemple n'est pas autorisé)

Html

Vérifiez si les attributs requis sont présents.
AVERTISSEMENT Si des attributs recommandés sont manquants.

CSS

Conversion automatique des couleurs ( 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) ))

Table des matières

Structure du répertoire d'exercice recommandé
dirconfig.json recommandé
config.json recommandé (exemple avec paramètres par défaut)
Guide de démarrage rapide pour le mode de comparaison (avec solution.html )
- Paramètres evaluation facultatifs dans config.json
- Valeurs DUMMY
Guide de démarrage rapide pour le mode Liste de contrôle (avec evaluator.py )
- Exemple minimal
Essai
Contributeurs

Structure du répertoire d'exercice recommandé

Plus d'informations sur la structure du répertoire du référentiel

Ajoutez votre fichier Solution / Evaluator ( solution.html pour le mode de comparaison ou evaluator.py pour le mode de liste de contrôle) dans le dossier evaluation . Les fichiers absolus nécessaires sont marqués de ▶ dans la structure de l'arborescence ci-dessous.

 +-- 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` recommandé

Plus d'informations sur la structure du répertoire d'exercice

{
  "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` recommandé (exemple avec paramètres par défaut)

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

Guide de démarrage rapide pour le mode de comparaison (avec `solution.html` )

Documentation complète pour le mode de comparaison

Le moyen le plus simple et le plus rapide d'évaluer un exercice est de le comparer au fichier solution.html dans le dossier evaluation . Il s'agit de la valeur par défaut si aucun fichier evaluator.py n'est présent. Dans ce cas, la structure de la soumission de l'élève sera comparée à votre solution, et vous pouvez fournir des options supplémentaires pour spécifier à quel point cette comparaison devrait être stricte. Si la soumission et la solution ne correspondent pas, un pourcentage de similitude est affiché.

Il faut noter que cette façon d'évaluation permet beaucoup moins de liberté. Pour les tests flexibles, envisagez d'utiliser le mode liste de contrôle.

Paramètres `evaluation` facultatifs dans `config.json`

Dans le fichier config.json de l'exercice, vous pouvez donner quelques options sur la façon dont la comparaison devrait se produire. Si ces paramètres ne sont pas définis, la valeur par défaut est choisie. Par défaut, seul la structure HTML et le CSS sont vérifiées.

Réglage d'évaluation	Description	Valeurs possibles	Défaut
`attributes`	Vérifiez si les attributs sont exactement les mêmes en solution et en soumission. *	`true` / `false`	`false`
`minimal_attributes`	Vérifiez si au moins les attributs de la solution sont fournis dans la soumission, des attributs supplémentaires sont autorisés .	`true` / `false`	`false`
`recommended`	Vérifiez si tous les attributs recommandés sont présents, ce sont des avertissements, le chèque n'échouera pas si certains d'entre eux sont manquants	`true` / `false`	`true`
`contents`	Vérifiez si le contenu de chaque balise de la solution est exactement le même que dans la soumission.	`true` / `false`	`false`
`css`	S'il y a des règles CSS définies dans la solution, vérifiez si la soumission peut correspondre à ces règles. Nous ne comparons pas les règles du CSS elles-mêmes, mais plutôt si chaque élément de la soumission a au moins les rules CSS définies dans la solution.	`true` / `false`	`true`
`comments`	Vérifiez si la soumission a les mêmes commentaires que la solution.	`true` / `false`	`false`

* Remarque: lorsque attributes et minimal_attributes sont fournis, attributes prendront la préférence car il est plus strict.

Exemple de paramètres modifiés

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

Valeurs `DUMMY`

Dans de nombreux cas, vous voudrez que les élèves écrivent quelque chose ou donnent de la valeur à un attribut, mais vous ne vous souciez pas de ce qu'ils écrivent. Pour cela, vous pouvez utiliser le mot clé DUMMY pour les valeurs d'attribut et pour le texte dans votre fichier solution.html .

Guide de démarrage rapide pour le mode Liste de contrôle (avec `evaluator.py` )

Documentation complète pour le mode liste de contrôle

Pour la saisie semi-automatique, vous devez ajouter le validator du dossier avec le fichier checks.pyi à la racine de votre projet dans lequel vous écrivez les évaluateurs.

Créez un fichier evaluator.py dans le dossier evaluation avec le code suivant:

evaluator.py (Python 3.9+ requis )

 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 ]

Faites une ChecklistItem (dans la syntaxe régulière ou Emmet) et ajoutez-la à une suite de tests. Combinez plusieurs chèques dans une liste de contrôle si vous le souhaitez.

Syntaxe régulière

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

Syntaxe 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" )

Facultatif : ajoutez des traductions pour la liste de contrôle juste avant le mot clé return . Langues disponibles: nl (néerlandais, n eder l ands) et en (anglais, en glish). Le code linguistique doit être en minuscules.
```
 # Add Dutch translation
html . translations [ "nl" ] = [
    "De body heeft een tabel." ,
    "De tabel heeft twee rijen."
]
```
Facultatif : Ajoutez HTML à BULERPLAY au fichier de buissier. Le contenu de ce fichier est chargé automatiquement dans la zone de texte de soumission des utilisateurs. Vous pouvez l'utiliser pour fournir un code ou une structure de départ à vos élèves.

Vérification finale:

Assurez-vous qu'au moins un testsuite est retourné ( html et / ou css ).
N'utilisez pas print() dans le fichier evaluator.py !

Exemple minimal

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 ]