„Zostań Egzaminatorem – Odwrócony Arkusz Egzaminacyjny”

Cel główny:

Uczniowie w parach lub indywidualnie projektują kompletne zadanie egzaminacyjne z zakresu HTML i CSS dla innej grupy/osoby, wzorując się na oficjalnych wymaganiach Centralnej Komisji Egzaminacyjnej.

Czas realizacji:

Ok. 3-4 godziny lekcyjne (1-2 lekcje na przygotowanie zadania i kryteriów, 1 lekcja na kodowanie zadania od kolegów, 1 lekcja na wzajemne ocenianie i feedback).

Instrukcja dla uczniów (Krok po kroku)

KROK 1: Wybór tematu i analiza wymagań (Faza Planowania)

Waszym zadaniem jest wymyślenie fikcyjnej firmy lub instytucji, dla której powstanie witryna (np. „Serwis komputerowy u Bita”, „Schronisko dla zwierząt Futrzak”, „Pizzeria Roma”).

Zadanie, które zaprojektujecie, musi zmuszać osobę rozwiązującą do użycia konkretnych elementów, które zawsze pojawiają się na egzaminie zawodowym. W swoim projekcie zadania musicie uwzględnić:

1. Strukturę HTML5: Wymóg użycia semantycznych tagów (<header>, <nav>, <main>, <section>, <aside>, <footer>).

2. Formularz HTML: Minimum 4 różne typy pól (np. text, number, email, radio, checkbox, select) oraz przycisk „Wyślij” lub „Resetuj”.

3. Układ CSS (Layout): Wymóg pozycjonowania elementów za pomocą Flexboxa lub CSS Grid.

4. Formatowanie CSS: Określenie dokładnych kolorów (w formacie HEX, RGB lub HSL), krojów pisma, marginesów (padding/margin) oraz efektów po wejściu myszą na element (:hover).

KROK 2: Przygotowanie „Paczeki Egzaminacyjnej” (Faza Tworzenia)

Jako autorzy zadania musicie przygotować dla swoich kolegów trzy rzeczy:

1. Treść zadania (Plik PDF/TXT): Napisana formalnym, egzaminacyjnym językiem instrukcja (np. „Wykonaj witrynę internetową… Obraz logo.png należy ostylować tak, aby…”).

2. Materiały źródłowe (Folder pliki): Jeden lub dwa obrazki (np. pobrane z darmowych banków i odpowiednio przycięte) oraz plik tekstowy z surową treścią, którą trzeba wkleić na stronę.

3. Szkic układu strony (Układ graficzny): Prosty rysunek (może być w Paintcie lub na kartce) pokazujący, jak ma wyglądać układ bloków na stronie (tzw. wireframe).

KROK 3: Stworzenie Kryteriów Oceniania (Klucz Egzaminatora)

To najważniejszy element ćwiczenia. Zanim oddacie zadanie kolegom, musicie sami stworzyć tabelę oceny (maksymalnie 20 punktów). Uczniowie uczą się wtedy, za co CKE przyznaje punkty, a za co je zabiera.

Przykład tabeli, którą muszą stworzyć uczniowie:

• Strona główna zapisana jako index.html, a style jako styl.css – 1 pkt

• Zastosowano kodowanie znaków UTF-8 oraz tytuł strony w sekcji head – 1 pkt

• Formularz zawiera pole typu ’email’ z walidacją – 2 pkt

• Menu nawigacyjne zmienia kolor tła po najechaniu myszką (:hover) – 2 pkt

• Baner ma kolor tła #2c3e50 – 1 pkt

KROK 4: Wielka Wymiana i Egzamin (Faza Wykonania)

Nauczyciel zbiera przygotowane materiały i rozdziela je losowo między uczniów (tak, aby nikt nie pisał własnego zadania).

• Każdy uczeń otrzymuje instrukcję, pliki graficzne i szkic od innego zespołu.

• Czas na zakodowanie strony: 45 minut (czysty HTML i CSS, bez internetu – dokładnie tak jak na egzaminie).

KROK 5: Sprawdzanie i Informacja Zwrotna (Faza Oceniająca)

Po zakończeniu pracy autorzy zadania siadają do stanowiska osoby, która rozwiązywała ich test.

1. Biorą w dłoń przygotowany przez siebie wcześniej Klucz Oceniania.

2. Sprawdzają kod źródłowy oraz wygląd strony linijka po linijce, przyznając punkty.

3. Na koniec autorzy piszą krótką recenzję: co poszło świetnie, a jaki błąd techniczny popełnił piszący (np. „zapomniałeś o resecie marginesów dla body, przez co rozjechał się układ”).