judge html Download - judge html Sumber Code Unduh

judge html

Kode sumber lainnya

v.1.0.0

Unduh

Hakim HTML & CSS untuk Dodona

Hakim HTML memiliki dua cara untuk mengevaluasi solusi yang diajukan siswa. Dalam mode perbandingan , struktur solusi yang diajukan dibandingkan dengan solusi model berdasarkan kriteria perbandingan generik. Guru dapat menetapkan seberapa ketat perbandingan itu harus dilakukan.
Mode Daftar Periksa menawarkan lebih banyak kemungkinan karena solusi yang diajukan diperiksa terhadap kriteria yang secara eksplisit diatur untuk latihan oleh guru. Umpan balik yang dapat dilihat siswa menunjukkan kriteria mana yang telah atau belum dipenuhi.
Dalam kedua mode, kode yang dikirimkan diperiksa terhadap sejumlah kondisi untuk kode HTML yang valid. Selain itu, hasil kode HTML dan CSS yang dikirimkan di Dodona juga ditampilkan dalam tab terpisah dari halaman umpan balik.
Kursus Dodona ini berisi beberapa latihan sampel yang digunakan dalam mengembangkan HTML Hakim:
https://dodona.ugent.be/en/courses/941/
Ada sejumlah latihan sampel pada repositori latihan sampel Dodona untuk menunjukkan penggunaan hakim:
https://github.com/dodona-edu/example-exercises

Fitur Hakim

Daftar periksa (benar, gagal, peringatan, kesalahan)
Umpan Balik dalam Bahasa Pengguna (Belanda atau Bahasa Inggris)
HTML dan CSS Render Pengajuan Siswa
Dukungan untuk latihan parsial (latihan yang fokus pada satu tag)
Umpan balik yang rumit
Dua metode evaluasi:
1. Mode perbandingan dengan file solution.html (opsi konfigurasi cepat, mudah, terbatas)
2. Mode daftar periksa dengan evaluator.py (banyak fleksibilitas, dukungan untuk sintaks Emmet)

Hakim Properti

Tag tidak sensitif.
Inline CSS tidak diperbolehkan (CSS internal adalah).
<script> dan tag <noscript> tidak diizinkan.
Tag yang menutup sendiri (non-void) tidak diizinkan (mis. <p/> , <div/> ).
TestSuite default untuk HTML dan/atau CSS (dalam tab yang berbeda dengan validasi otomatis).
Jalur file absolut tidak diizinkan.

Masukan

HTML & CSS

Kesalahan sintaksis
- Periksa apakah tanda kurung/kutipan terbuka dan tutup ( ( , < , { , [ , ' , " )
- Setiap tag yang terbuka harus memiliki tag penutupan yang sesuai.
- Memeriksa apakah semua tag valid
Periksa apakah semua ID unik
Periksa apakah tag diizinkan dalam tag induk
Periksa atribut yang diperlukan (dan disarankan)
Periksa atribut yang tidak valid (misalnya atribut gaya tidak diperbolehkan)

Html

Periksa apakah ada atribut yang diperlukan.
Peringatan jika atribut yang disarankan hilang.

CSS

Konversi warna otomatis ( name , #RRGGBB , rgb(R,G,B) , rgb(R%,G%,B%) #RGB hsl(H,S%,L%) ), hsla, hsla (hs), rgba(R,G,B,a) , hsla, hsla ( rgba(R%,G%,B%,a) , hsla(H,S%,L%,a) )

Daftar isi

Struktur Direktori Latihan yang Direkomendasikan
Direkomendasikan dirconfig.json
config.json yang disarankan (contoh dengan pengaturan default)
Panduan Mulai Cepat untuk Mode Perbandingan (dengan solution.html )
- Pengaturan evaluation opsional di config.json
- Nilai DUMMY
Panduan Mulai Cepat untuk Mode Daftar Periksa (dengan evaluator.py )
- Contoh minimal
Pengujian
Kontributor

Struktur Direktori Latihan yang Direkomendasikan

Info lebih lanjut tentang struktur direktori repositori

Tambahkan file solusi/evaluator Anda ( solution.html untuk mode perbandingan atau evaluator.py untuk mode periksa) ke folder evaluation . File mutlak yang diperlukan ditandai dengan ▶ dalam struktur pohon di bawah ini.

 +-- 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
|   :
:

Direkomendasikan `dirconfig.json`

Info lebih lanjut tentang struktur direktori olahraga

{
  "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` yang disarankan (contoh dengan pengaturan default)

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

Panduan Mulai Cepat untuk Mode Perbandingan (dengan `solution.html` )

Dokumentasi Lengkap untuk Mode Perbandingan

Cara termudah dan tercepat untuk mengevaluasi latihan adalah dengan membandingkannya dengan file solution.html di folder evaluation . Ini adalah default jika tidak ada file evaluator.py ada. Dalam hal ini, struktur pengiriman siswa akan dibandingkan dengan solusi Anda, dan Anda dapat memberikan opsi tambahan untuk menentukan seberapa ketat perbandingan ini. Jika pengiriman dan solusi tidak cocok, persentase kesamaan ditampilkan.

Perlu dicatat bahwa cara evaluasi ini memungkinkan lebih sedikit kebebasan. Untuk tes fleksibel, pertimbangkan untuk menggunakan mode daftar periksa.

Pengaturan `evaluation` opsional di `config.json`

Dalam file config.json dari latihan, Anda dapat memberikan beberapa opsi tentang bagaimana perbandingan harus terjadi. Jika pengaturan ini tidak ditentukan, nilai default dipilih. Secara default, hanya struktur HTML dan CSS yang diperiksa.

Pengaturan evaluasi	Keterangan	Nilai yang mungkin	Bawaan
`attributes`	Periksa apakah atribut persis sama dalam solusi dan pengiriman.*	`true` / `false`	`false`
`minimal_attributes`	Periksa apakah setidaknya atribut dalam solusi disediakan dalam pengajuan, atribut tambahan diizinkan .	`true` / `false`	`false`
`recommended`	Periksa apakah semua atribut yang disarankan hadir, ini adalah peringatan, cek tidak akan gagal jika beberapa di antaranya hilang	`true` / `false`	`true`
`contents`	Periksa apakah isi setiap tag dalam solusi persis sama seperti pada pengiriman.	`true` / `false`	`false`
`css`	Jika ada aturan CSS yang ditentukan dalam solusi, periksa apakah pengiriman dapat cocok dengan aturan ini. Kami tidak membandingkan aturan CSS sendiri, melainkan apakah setiap elemen dalam pengiriman memiliki setidaknya css-rule yang ditentukan dalam solusi.	`true` / `false`	`true`
`comments`	Periksa apakah pengiriman memiliki komentar yang sama dengan solusinya.	`true` / `false`	`false`

*Catatan: Ketika kedua attributes dan minimal_attributes disediakan, attributes akan lebih disukai karena lebih ketat.

Contoh pengaturan yang dimodifikasi

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

Nilai `DUMMY`

Dalam banyak kasus Anda akan ingin siswa menulis sesuatu atau memberikan nilai pada atribut, tetapi Anda tidak peduli apa yang mereka tulis. Untuk itu Anda dapat menggunakan kata kunci DUMMY untuk nilai atribut dan untuk teks dalam file solution.html Anda.html.

Panduan Mulai Cepat untuk Mode Daftar Periksa (dengan `evaluator.py` )

Dokumentasi Lengkap untuk Mode Daftar Periksa

Untuk AutoComplete, Anda perlu menambahkan validator folder dengan file checks.pyi di akar proyek Anda di mana Anda menulis evaluator.

Buat file evaluator.py di folder evaluation dengan kode berikut:

evaluator.py (Python 3.9+ diperlukan )

 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 ]

Buat ChecklistItem (dalam sintaksis reguler atau emmet) dan tambahkan ke testsuite. Gabungkan beberapa cek dalam satu checkListItem jika Anda mau.

Sintaks biasa

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

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

Opsional : Tambahkan terjemahan untuk daftar periksa tepat sebelum kata kunci return . Bahasa yang tersedia: nl (Belanda, N Eder L ands) dan en (Inggris, en glish). Kode bahasa harus menjadi huruf kecil.
```
 # Add Dutch translation
html . translations [ "nl" ] = [
    "De body heeft een tabel." ,
    "De tabel heeft twee rijen."
]
```
Opsional : Tambahkan html boilerplate ke file boilerplate. Isi file ini dimuat secara otomatis di area teks pengiriman pengguna. Anda dapat menggunakan ini untuk memberikan beberapa kode atau struktur awal kepada siswa Anda.

Cek akhir:

Pastikan setidaknya satu testsuite dikembalikan ( html dan/atau css ).
Jangan gunakan print() di file evaluator.py !

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