Przejdź do głównej treści
INF.03-06-26.01-SGStyczeń 2026 · 51 kroków · ok. 97 min · 39 kryteriów z klucza

Rozwiązanie krok po kroku: Portal diagnostyki chorób (Nowoczesny kod (grid, PDO))

To drugi sposób rozwiązania tego samego arkusza: portal do diagnostyki online, baza choroby z relacją n..m, grafika z napisem przyciętym do liter i jedna strona zdrowie.php z listą chorób zakaźnych, listą rozwijaną i objawami wybranej choroby. Obie wersje spełniają wszystkie 39 kryteriów klucza - różni je sposób pisania kodu, nie wynik.

Czym ta wersja różni się od podstawowej:

  • siatka CSS w bloku głównym (grid-template-columns: 50% 50%), kolory z arkusza w zmiennych CSS,
  • zapytania z aliasami tabel (AS c, AS co), grupowanie po identyfikatorze, nie po nazwie,
  • PHP na PDO z wyjątkami, cała logika na górze pliku, a w HTML tylko pętle foreach; tryby pobierania FETCH_COLUMN (sama lista nazw) i FETCH_KEY_PAIR (identyfikator → nazwa),
  • identyfikator z formularza sprawdzony filter_var i wstawiony do zapytania przygotowanego, lista pamięta wybraną chorobę, a choroba bez objawów dostaje komunikat zamiast pustej ramki.

Kroki nadal idą zdanie po zdaniu za treścią arkusza. Podgląd w każdym kroku z PHP to wynik prawdziwego uruchomienia kodu z tego kroku w PHP 8.2 na bazie z arkusza; po wysłaniu formularza pokazuje objawy COVID-19, jak na ilustracji 6. Baza i grafika pochodzą z prawdziwego archiwum pliki9-1.

Jak liczą się punkty. Klucz ma 39 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

  1. Etap 1: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 39 kryteriów (pkt)

    Krok 1: Baza danych choroby

    ok. 2 min
    Polecenie z arkusza

    Utwórz bazę danych o nazwie choroby, z zestawem polskich znaków (np. utf8_polish_ci)

    Archiwum pliki9-1.7z ma hasło *ZdroWia!!! (gwiazdka na początku, trzy wykrzykniki). W phpMyAdmin: Nowa, nazwa choroby, porównywanie utf8_polish_ci, albo w zakładce SQL:

    CREATE DATABASE choroby CHARACTER SET utf8 COLLATE utf8_polish_ci;
    Typowe błędy

    Skrypty łączą się z bazą po nazwie - literówka w choroby zabiera także punkt za połączenie (R.5.1).

  2. Krok 2: Import tabel z pliku choroby.sql

    ok. 2 min
    Polecenie z arkusza

    Z rozpakowanego archiwum zaimportuj tabele z pliku choroby.sql do utworzonej bazy

    Zaznacz bazę choroby, potem Import → choroby.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: choroby (pole zakazna z literą T albo N), objawy i tabela pośrednicząca choroby_objawy - każdy jej wiersz to para „ta choroba ma ten objaw”. Tak zapisuje się relację n..m: choroba ma wiele objawów, a ten sam objaw (np. gorączka) występuje w wielu chorobach.

  3. Krok 3: Zrzut ekranu import.png

    Kryteria:

    R.1.1 Wykonany import tabel do bazy danych choroby - plik import.png

    ok. 2 min
    Polecenie z arkusza

    Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel

    Print Screen (cały ekran z paskiem zadań), wklej do edytora grafiki i zapisz jako import.png: komunikat o udanym imporcie i trzy tabele w drzewku bazy.

    Typowe błędy

    Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).

  4. Krok 4: Zapytanie 1: choroby zakaźne alfabetycznie

    Kryteria: ,

    R.1.2 W pliku kwerendy.txt zapisane co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Wykonane zapytanie 1 wybierające jedynie nazwy chorób zakaźnych, posortowane rosnąco według nazwy. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa; oraz na zrzucie widocznych jest dokładnie 7 rekordów z danymi: angina, COVID-19, grypa, odra, ospa, różyczka, świnka

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie nazwy chorób zakaźnych, posortowane rosnąco według nazwy

    • WHERE zakazna = 'T' - choroby zakaźne; litera w apostrofach, bo pole jest tekstowe,
    • ORDER BY nazwa - rosnąco (ASC jest domyślne).

    Wynik: angina, COVID-19, grypa, odra, ospa, różyczka, świnka (R.1.3). „COVID-19” stoi między „angina” a „grypa”, bo porównywanie utf8_polish_ci z tabeli nie rozróżnia wielkości liter, a „ś” jest w polskim alfabecie za „s”. Zapytania zapisuj w kwerendy.txt z komentarzem -- nad każdym, zrzut jako kw1.png.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT nazwa
FROM choroby
WHERE zakazna = 'T'
ORDER BY nazwa;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: identyfikatory i nazwy chorób

    Kryteria:

    R.1.4 Wykonane zapytanie 2 wybierające jedynie identyfikatory i nazwy dla wszystkich chorób. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT id, nazwa FROM choroby; oraz na zrzucie widocznych jest dokładnie 16 rekordów, id od 1 do 16

    ok. 1 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie identyfikatory i nazwy dla wszystkich chorób

    Dwie kolumny bez warunku: 16 wierszy, identyfikatory 1 - 16 (R.1.4). Z tego zapytania Skrypt 2 zrobi opcje listy rozwijanej. W bazie choroba Kawasaki jest zapisana jako „Kavasaki” - dane z arkusza zostają bez zmian. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 4 linie 
    -- Zapytanie 1
SELECT nazwa
FROM choroby
WHERE zakazna = 'T'
ORDER BY nazwa;

-- Zapytanie 2
SELECT id, nazwa
FROM choroby;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: objawy choroby o id 5

    Kryteria:

    R.1.5 Wykonane zapytanie 3 wybierające jedynie nazwy objawów dla choroby o id 5. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa FROM objawy JOIN choroby_objawy ON id = id_objawy WHERE id_choroby = 5; oraz na zrzucie widocznych jest dokładnie 6 rekordów: ból głowy, gorączka, mdłości, rozwolnienie, wymioty, drgawki

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie nazwy objawów dla choroby o id 5. Należy posłużyć się relacją

    • FROM objawy AS o JOIN choroby_objawy AS co - aliasy o i co skracają nazwy tabel w całym zapytaniu,
    • ON co.id_objawy = o.id - relacja: objaw łączy się z wierszami tabeli pośredniczącej, które go wskazują,
    • WHERE co.id_choroby = 5 - tylko pary choroby 5 (jelitówki).

    Tabeli choroby nie trzeba: identyfikator choroby jest już w tabeli pośredniczącej. Obie tabele mają kolumnę nazwa, więc o.nazwa mówi, o którą chodzi. Wynik: ból głowy, gorączka, mdłości, rozwolnienie, wymioty, drgawki (R.1.5). Zrzut: kw3.png.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
SELECT nazwa
FROM choroby
WHERE zakazna = 'T'
ORDER BY nazwa;

-- Zapytanie 2
SELECT id, nazwa
FROM choroby;

-- Zapytanie 3
SELECT o.nazwa
FROM objawy AS o
JOIN choroby_objawy AS co ON co.id_objawy = o.id
WHERE co.id_choroby = 5;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: liczba objawów chorób zakaźnych

    Kryteria:

    R.1.6 Wykonane zapytanie 4 wybierające jedynie nazwy chorób oraz wyliczoną dla nich liczbę objawów zgrupowanych dla każdej choroby zakaźnej. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT choroby.nazwa, COUNT(objawy.id) FROM choroby JOIN choroby_objawy ON choroby.id = id_choroby JOIN objawy ON objawy.id = id_objawy WHERE zakazna = 'T' GROUP by choroby.nazwa; (lub porównanie kluczy po WHERE) oraz na zrzucie widocznych jest 7 rekordów z danymi: angina 9, COVID-19 11, grypa 8, odra 4, ospa 6, różyczka 7, świnka 6

    ok. 4 min
    Polecenie z arkusza

    Zapytanie 4: wybierające jedynie nazwy chorób oraz wyliczoną dla nich liczbę objawów zgrupowane dla każdej choroby zakaźnej. Należy posłużyć się relacją n..m.

    Relacja n..m to dwa złączenia przez tabelę pośredniczącą: choroby → choroby_objawy → objawy.

    • COUNT(o.id) AS liczba_objawow - liczba objawów w grupie, z aliasem zamiast nazwy COUNT(o.id),
    • WHERE c.zakazna = 'T' - tylko choroby zakaźne,
    • GROUP BY c.id, c.nazwa - grupa to jedna choroba, rozpoznawana po kluczu głównym. Grupowanie po samej nazwie skleiłoby dwie różne choroby o tej samej nazwie w jedną; nazwa jest w GROUP BY obok id, bo trafia do SELECT.

    Wynik: angina 9, COVID-19 11, grypa 8, odra 4, ospa 6, różyczka 7, świnka 6 (R.1.6). Zrzut: kw4.png.

    Typowe błędy

    Bez warunku WHERE wynik ma 14 wierszy (wszystkie choroby, które mają objawy) zamiast 7.

    kwerendy.txt Tekst zmienione: 8 linii 
    -- Zapytanie 1
SELECT nazwa
FROM choroby
WHERE zakazna = 'T'
ORDER BY nazwa;

-- Zapytanie 2
SELECT id, nazwa
FROM choroby;

-- Zapytanie 3
SELECT o.nazwa
FROM objawy AS o
JOIN choroby_objawy AS co ON co.id_objawy = o.id
WHERE co.id_choroby = 5;

-- Zapytanie 4
SELECT c.nazwa, COUNT(o.id) AS liczba_objawow
FROM choroby AS c
JOIN choroby_objawy AS co ON co.id_choroby = c.id
JOIN objawy AS o ON o.id = co.id_objawy
WHERE c.zakazna = 'T'
GROUP BY c.id, c.nazwa;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-27 · po tym etapie masz 18 z 39 kryteriów (pkt)

    Krok 8: Grafika zdrowia.png: napis na przezroczystym tle

    ok. 4 min
    Polecenie z arkusza

    Wykonaj grafikę zdrowia.png o cechach: Wysokość 100 px. Tło przeźroczyste. Zawartością jest tekst ZDROWIA zapisany wielkimi literami, dowolną czcionką bezszeryfową

    W GIMP-ie Plik → Nowy, w opcjach zaawansowanych Wypełnienie: Przezroczystość. Narzędziem Tekst napis ZDROWIA krojem bezszeryfowym (DejaVu Sans, Arial, Verdana) w dużym rozmiarze, np. 200 px - przy pomniejszaniu krawędzie liter zostaną gładkie, a przy powiększaniu małego napisu by się rozmyły. Eksport do PNG, bo JPEG nie ma przezroczystości.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Grafika zdrowia.png: przycięcie do napisu i wysokość 100 px

    Kryteria:

    R.2.1 Grafika zdrowia.png ma wysokość dokładnie 100 px, tło przezroczyste oraz napis wielkimi literami ZDROWIA. Napis wypełnia w pionie całą grafikę, dopuszcza się przycięcie tuż przy napisie lub lekkie podcięcie liter tak, że zniekształci to np. literę o (kilka pikseli)

    ok. 3 min
    Polecenie z arkusza

    Tekst ma wysokość 100 px i wypełnia w pionie całą grafikę. W poziomie należy przyciąć grafikę do szerokości napisu. Szerokość ta będzie uzależniona od rodzaju dobranej czcionki.

    Kolejność ma znaczenie: najpierw Obraz → Przytnij do zawartości (obcina przezroczyste pasy, napis dotyka wszystkich krawędzi), potem Obraz → Skaluj obraz z zamkniętym łańcuchem do wysokości 100 px. Tu wyszło 641 × 100 px; okrągła litera O wystaje odrobinę ponad Z i D, więc to ona wyznacza górę i dół (R.2.1).

    Typowe błędy

    Skalowanie przed przycięciem daje grafikę wysoką na 100 px, ale z pustymi pasami nad i pod napisem - tekst nie wypełnia wtedy grafiki w pionie.

    Podgląd strony bez zmian - taki jak po kroku 8.

  10. Krok 10: Plik zdrowie.php w HTML5

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony o nazwie zdrowie.php. Zapisana w języku HTML5

    <!DOCTYPE html> i szkielet. Nazwa pliku jest nietypowa - zdrowie.php, a nie index.php - więc w przeglądarce trzeba ją podać w adresie: http://localhost/<folder>/zdrowie.php.

    zdrowie.php PHP nowy plik 
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  11. Krok 11: Język strony

    Kryteria:

    R.2.2 W pliku zdrowie.php znajduje się deklaracja HTML5 <!DOCTYPE HTML> i deklaracja języka zawartości witryny: polski np. <html lang="pl">

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany polski język zawartości witryny

    lang="pl" w <html> - czytnik ekranu przeczyta „różyczkę” polską wymową. Z <!DOCTYPE html> to jedno kryterium (R.2.2).

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  12. Krok 12: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowany właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy element <head>, przed tytułem z literą „ó”.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  13. Krok 13: Tytuł strony i viewport

    Kryteria:

    R.2.3 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony "Wykaz chorób”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony „Wykaz chorób”

    <title> - tekst karty przeglądarki (z kodowaniem - R.2.3). <meta name="viewport"> pokazuje stronę na telefonie w jego prawdziwej szerokości; arkusz tego nie wymaga.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  14. Krok 14: Podpięcie arkusza stylów

    Kryteria:

    R.3.2 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie CSS pochodzi jedynie z tego arkusza

    ok. 1 min
    Polecenie z arkusza

    Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony

    <link rel="stylesheet" href="styl.css"> - w HTML5 bez ukośnika />. Całe formatowanie pochodzi z tego pliku (R.3.2).

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  15. Krok 15: Bloki semantyczne

    Kryteria:

    R.2.4 W sekcji body zdefiniowany jest podział na bloki za pomocą semantycznych znaczników HTML5: header, nav, main->section+section, footer (dopuszcza się zastosowanie bloków pomocniczych)

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    Klucz R.2.4 wymienia znaczniki: header, nav, main z dwiema section, footer. Sekcje są jedynymi dziećmi <main> - siatka na <main> postawi je obok siebie.

    Identyfikatory opisują zawartość: infectious (choroby zakaźne) i checker (sprawdzanie objawów). left/right przestałyby pasować po pierwszej zmianie układu.

    zdrowie.php PHP zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
    </header>
    <nav>
    </nav>
    <main>
        <section id="infectious">
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  16. Krok 16: Nagłówek strony

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści „Informacja o chorobach w Polsce”

    <h1> - jedyny nagłówek pierwszego stopnia.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
    </nav>
    <main>
        <section id="infectious">
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  17. Krok 17: Odnośnik „Szpitale”

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nawigacyjnego: Odnośnik do strony https://szpitale.pl/ o treści „Szpitale”

    Adres zewnętrzny w całości, z https:// - bez protokołu przeglądarka szukałaby pliku szpitale.pl obok zdrowie.php.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/">Szpitale</a>
    </nav>
    <main>
        <section id="infectious">
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  18. Krok 18: Odnośnik „Przychodnie”

    ok. 1 min
    Polecenie z arkusza

    Odnośnik do strony https://www.przychodnie.pl/ o treści „Przychodnie”

    Drugi odnośnik. Odnośniki są elementami liniowymi, więc stoją w jednym wierszu, jak na ilustracji 3.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/">Szpitale</a>
        <a href="https://www.przychodnie.pl/">Przychodnie</a>
    </nav>
    <main>
        <section id="infectious">
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  19. Krok 19: Odnośnik „NFZ”

    ok. 1 min
    Polecenie z arkusza

    Odnośnik do strony https://www.nfz.gov.pl/ o treści „NFZ”

    Trzeci odnośnik - komplet menu.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/">Szpitale</a>
        <a href="https://www.przychodnie.pl/">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  20. Krok 20: Odnośniki w nowym oknie

    Kryteria:

    R.3.3 Kliknięcie każdego odnośnika otwiera stronę w nowym oknie: Szpitale - https://szpitale.pl/, Przychodnie - https://www.przychodnie.pl/, NFZ - https://www.nfz.gov.pl/ (adresy stron z www lub bez)

    ok. 2 min
    Polecenie z arkusza

    Wszystkie odnośniki otwierają się w nowym oknie przeglądarki

    target="_blank" w każdym z trzech odnośników - klucz sprawdza kliknięciem wszystkie trzy (R.3.3). Obok rel="noopener": strona otwarta w nowej karcie nie dostaje odwołania do karty, z której ją otwarto, więc nie może jej po cichu podmienić na fałszywą. Współczesne przeglądarki robią to domyślnie dla _blank, ale jawny zapis działa wszędzie i dokumentuje intencję.

    Typowe błędy

    Jeden odnośnik bez target="_blank" wystarczy, żeby kryterium R.3.3 przepadło w całości. Linki w podglądzie są zablokowane - sprawdź je w przeglądarce.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  21. Krok 21: Sekcja chorób zakaźnych: nagłówek i lista

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku głównego: blok sekcji lewej i blok sekcji prawej. Zawartość bloku sekcji lewej: Nagłówek drugiego stopnia o treści „Choroby zakaźne”. Lista numerowana (uporządkowana) wypełniona skryptem 1

    <h2> i pusta lista numerowana <ol> - numery 1 - 7 doda sama przeglądarka, elementy <li> wypisze Skrypt 1.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  22. Krok 22: Sekcja objawów: nagłówek i formularz

    Kryteria:

    R.3.4 Formularz wysyła dane metodą POST do tego samego pliku (poprawne również bez atrybutu action)

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku sekcji prawej: Nagłówek drugiego stopnia o treści „Objawy chorób”. Formularz wysyłający dane metodą bezpieczną do tego samego pliku

    <h2> i <form method="post"> bez action - brak action to „ten sam plik” (R.3.4). „Metoda bezpieczna” w arkuszu to POST: dane w treści żądania, a nie w adresie. Ten formularz tylko pyta o dane i niczego nie zapisuje, więc w prawdziwym serwisie pasowałby do niego GET (adres z wybraną chorobą dałoby się zapisać w zakładkach), ale klucz ocenia POST.

    zdrowie.php PHP zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
            </form>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  23. Krok 23: Lista rozwijana

    ok. 1 min
    Polecenie z arkusza

    Lista rozwijana wypełniona skryptem 2

    <select name="disease"> - pod tą nazwą wybrany identyfikator trafi do $_POST. Na ilustracji lista nie ma podpisu, więc zamiast widocznej etykiety jest aria-label="Choroba" dla czytnika ekranu. Opcje wypisze Skrypt 2.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
            </form>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  24. Krok 24: Przycisk „Sprawdź”

    Kryteria: ,

    R.3.5 Przycisk realizuje funkcję wysłania danych z formularza (input lub button z typem submit lub button bez typu)

    R.2.8 W bloku sekcji prawej umieszczony formularz z listą rozwijaną i przyciskiem Sprawdź

    ok. 1 min
    Polecenie z arkusza

    Przycisk o treści „Sprawdź” wysyłający dane z formularza do skryptu 3

    <button type="submit"> wysyła formularz (R.3.5). Formularz ma komplet z R.2.8: listę i przycisk.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  25. Krok 25: Blok na wynik skryptu 3

    Kryteria:

    R.2.9 W bloku sekcji prawej znajduje się blok (np. div, section)

    ok. 1 min
    Polecenie z arkusza

    Blok w którym umieszczony jest efekt działania skryptu 3

    <div id="symptoms"> pod formularzem (R.2.9). Blok stoi w HTML zawsze - przed wysłaniem formularza jest pusty, ale ma kropkowaną ramkę z CSS, jak na ilustracji 3.

    zdrowie.php PHP zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  26. Krok 26: Stopka

    Kryteria:

    R.2.5 W bloku nagłówkowym znajduje się <h1>: „Informacja o chorobach w Polsce”, w bloku sekcji lewej <h2>: „Choroby zakaźne", w bloku sekcji prawej <h2>: „Objawy chorób” oraz <p> z numerem zdającego w stopce

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf o treści „Stronę opracował: ”, dalej wstawiony numer zdającego

    Akapit w <footer>. Tu stoi imię i nazwisko autora rozwiązania - na egzaminie wpisujesz swój numer zdającego (PESEL). Są już nagłówki i akapit z R.2.5.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  27. Krok 27: Obraz poza blokami

    Kryteria:

    R.2.6 Na stronie umieszczona grafika z tekstem alternatywnym "Życzymy zdrowia!"

    ok. 1 min
    Polecenie z arkusza

    Poza blokami znajduje się obraz zdrowia.png z tekstem alternatywnym „Życzymy zdrowia!”

    <img> bezpośrednio w <body>, za stopką - poza wszystkimi blokami (R.2.6). Na miejsce z ilustracji 3 przesunie go CSS.

    zdrowie.php PHP zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  28. Etap 3: Styl CSS

    Kroki 28-38 · po tym etapie masz 29 z 39 kryteriów (pkt)

    Krok 28: Zmienne CSS z kolorami arkusza

    ok. 2 min
    Polecenie z arkusza

    Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css. W tabeli 2 i 3 zawarto pomoc do niektórych właściwości CSS.

    Trzy kolory w kodzie szesnastkowym trafiają raz do zmiennych CSS. #FFECB3 jest zarazem tłem prawej sekcji i kolorem odnośników - jedna zmienna --color-cream pilnuje, żeby to był naprawdę ten sam kolor. W regułach kolor pojawia się jako var(--color-cream).

    styl.css CSS nowy plik 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}
    Podgląd strony po tym kroku (zdrowie.php)

  29. Krok 29: Krój Trebuchet MS dla wszystkich selektorów

    Kryteria:

    R.4.1 domyślnie dla wszystkich selektorów (*): krój czcionki "Trebuchet MS", sans-serif (dozwolona tylko taka kolejność)

    ok. 1 min
    Polecenie z arkusza

    Domyślnie dla wszystkich selektorów: krój czcionki Trebuchet MS, w przypadku braku sans-serif

    Selektor * (R.4.1). Nazwę kroju ze spacją bierze się w cudzysłów: "Trebuchet MS" - bez niego przeglądarka mogłaby odczytać dwie osobne nazwy. Na końcu rodzina zapasowa sans-serif.

    styl.css CSS zmienione: 4 linie 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}
    Podgląd strony po tym kroku (zdrowie.php)

  30. Krok 30: Nagłówek, menu i stopka

    Kryteria:

    R.4.5 wyrównanie tekstu do prawej strony: blok nagłówkowy, nawigacyjny i stopka

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloku nagłówkowego, nawigacyjnego i stopki: kolor tła #FF8F00, marginesy wewnętrzne 10 px, wyrównanie tekstu do prawej strony

    Jedna reguła dla trzech selektorów. text-align: right dosuwa do prawej nagłówek, odnośniki i podpis w stopce, jak na ilustracji 3 (R.4.5).

    styl.css CSS zmienione: 8 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}
    Podgląd strony po tym kroku (zdrowie.php)

  31. Krok 31: Sekcje: wysokość

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloków sekcji lewej i prawej: szerokość 50%, wysokość 400 px

    Selektor section obejmuje obie sekcje. Szerokość 50% wyznaczy siatka w kroku układu - klucz R.4.4 dopuszcza ją w grid-template-columns.

    styl.css CSS zmienione: 4 linie 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}
    Podgląd strony po tym kroku (zdrowie.php)

  32. Krok 32: Sekcje: kolory tła

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo kolor tła dla bloku sekcji lewej to #FFF8E1, dla bloku sekcji prawej to #FFECB3

    Identyfikatory nadane sekcjom w HTML: #infectious i #checker. Selektor identyfikatora dokłada tylko tło.

    styl.css CSS zmienione: 8 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}
    Podgląd strony po tym kroku (zdrowie.php)

  33. Krok 33: Układ: siatka w bloku głównym

    Kryteria: ,

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z ilustracją 4 w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS decydujące o układzie bloków na stronie, np. float i clear albo display flex albo grid albo position)

    R.4.4 wysokość: blok sekcji lewej i prawej - 400px, szerokość: blok sekcji lewej i prawej - 50% (width lub grid-template-columns lub flex)

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    <main> staje się siatką o dwóch kolumnach po 50%: choroby zakaźne po lewej, objawy po prawej. Nagłówek, menu i stopka są poza siatką, więc stoją nad i pod nią - bez float i clear (R.3.1). Szerokości w grid-template-columns i wysokość 400 px dają komplet R.4.4.

    Typowe błędy

    Odstęp gap przy kolumnach 50% + 50% wypchnąłby siatkę poza ekran - przy procentach z arkusza odstępów nie ma.

    styl.css CSS zmienione: 5 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}

main {
    display: grid;
    grid-template-columns: 50% 50%;
}
    Podgląd strony po tym kroku (zdrowie.php)

  34. Krok 34: Odnośniki

    Kryteria: ,

    R.4.2 kolor tła: blok nagłówkowy, nawigacyjny, stopka - #FF8F00, blok sekcji lewej - #FFF8E1, blok sekcji prawej - #FFECB3, kolor czcionki: selektora a - #FFECB3

    R.4.3 dla odnośnika rozmiar czcionki 180%, bez podkreślenia (text-decoration:none)

    ok. 2 min
    Polecenie z arkusza

    Dla selektora odnośnika: kolor czcionki #FFECB3, jedynie margines zewnętrzny lewy 70 px, czcionka o rozmiarze 180%, bez podkreślenia

    Selektor znacznika a (uwaga arkusza). „Jedynie margines zewnętrzny lewy” to margin-left - margin: 70px odsunąłby odnośnik ze wszystkich stron. Ta reguła zamyka kolory (R.4.2) i styl odnośnika (R.4.3).

    styl.css CSS zmienione: 7 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}

main {
    display: grid;
    grid-template-columns: 50% 50%;
}

a {
    color: var(--color-cream);
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}
    Podgląd strony po tym kroku (zdrowie.php)

  35. Krok 35: Odnośnik pod kursorem i z klawiatury

    Kryteria:

    R.4.10 gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały i dodawane jest podkreślenie

    ok. 1 min
    Polecenie z arkusza

    Gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały i dodawane jest podkreślenie

    Pseudoklasa :hover - kolor i podkreślenie naraz (R.4.10); underline przywraca to, co zdjęła poprzednia reguła. Ta sama zmiana dla :focus-visible: kto przechodzi po menu klawiszem Tab, widzi, na którym odnośniku jest.

    styl.css CSS zmienione: 6 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}

main {
    display: grid;
    grid-template-columns: 50% 50%;
}

a {
    color: var(--color-cream);
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: white;
    text-decoration: underline;
}
    Podgląd strony po tym kroku (zdrowie.php)

  36. Krok 36: Obraz pozycjonowany absolutnie

    Kryteria:

    R.4.8 dla selektora img styl position: absolute; left: 100px; top: 500px; oraz obraz jest zawsze na wierzchu (np. z-index)

    ok. 2 min
    Polecenie z arkusza

    Dla selektora obrazu: zawsze na wierzchu, pozycjonowanie na stronie - przesunięcie względem rodzica: 100 px od lewej krawędzi i 500 px od góry, element ten jest usuwany z normalnego przepływu dokumentu

    Tabela 3 arkusza: przesunięcie względem rodzica z usunięciem z przepływu to position: absolute, a miejsce wyznaczają left i top (R.4.8). Obraz nie zajmuje już miejsca pod stopką. „Względem rodzica” znaczy dokładnie: względem najbliższego przodka z ustawionym position - tu żaden blok go nie ma, więc punktem odniesienia jest cała strona. z-index: 1 kładzie obraz nad zwykłymi blokami.

    Typowe błędy

    position: fixed też usuwa z przepływu, ale liczy przesunięcie od okna i obraz nie przewija się ze stroną - to nie jest „względem rodzica”.

    styl.css CSS zmienione: 7 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}

main {
    display: grid;
    grid-template-columns: 50% 50%;
}

a {
    color: var(--color-cream);
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: white;
    text-decoration: underline;
}

img {
    position: absolute;
    left: 100px;
    top: 500px;
    z-index: 1;
}
    Podgląd strony po tym kroku (zdrowie.php)

  37. Krok 37: Blok wyniku skryptu 3

    Kryteria: ,

    R.4.6 marginesy wewnętrzne (padding) : blok nagłówkowy, nawigacyjny i stopka - 10px, blok ze skryptem 3 - 30px, marginesy zewnętrzne (margin) : blok ze skryptem 3 - 50px 180px 0 50px, dla odnośnika margin-left: 70px

    R.4.7 dla bloku ze skryptem 3: obramowanie 1px dotted black

    ok. 2 min
    Polecenie z arkusza

    Dla bloku, w którym umieszczony jest skrypt 3: obramowanie linią kropkowaną o szerokości 1 px i kolorze czarnym, marginesy wewnętrzne 30 px, marginesy zewnętrzne: góra 50 px, prawy 180 px, dół 0, lewy 50 px

    Skrót border: 1px dotted black (R.4.7). Cztery wartości margin idą zgodnie z ruchem wskazówek zegara: góra, prawy, dół, lewy - 50px 180px 0 50px. Pusty blok ma 60 px wysokości z samego padding, dlatego na ilustracji 3 widać ramkę przed wysłaniem formularza. Komplet marginesów R.4.6.

    styl.css CSS zmienione: 6 linii 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}

main {
    display: grid;
    grid-template-columns: 50% 50%;
}

a {
    color: var(--color-cream);
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: white;
    text-decoration: underline;
}

img {
    position: absolute;
    left: 100px;
    top: 500px;
    z-index: 1;
}

#symptoms {
    border: 1px dotted black;
    padding: 30px;
    margin: 50px 180px 0 50px;
}
    Podgląd strony po tym kroku (zdrowie.php)

  38. Krok 38: Rozmiary objawów: pseudoklasa nth-child

    Kryteria:

    R.4.9 rozmiar czcionki dla span:nth-child(n)dla n=2: 120%, n=4: 240%, n=5: 150%, n=7: 160%, n=9: 130%, n=10: 190%

    ok. 3 min
    Polecenie z arkusza

    Rozmiar czcionki dla selektorów span: drugiego 120%, czwartego 240%, piątego 150%, siódmego 160%, dziewiątego 130%, dziesiątego 190%. Należy wykonać za pomocą przeznaczonej do tego pseudoklasy

    :nth-child(n) wybiera element, który jest n-tym dzieckiem swojego rodzica (R.4.9). Rodzicem spanów będzie blok #symptoms, w którym Skrypt 3 nie wypisze nic poza spanami - drugi span jest więc drugim dzieckiem.

    Nowsze przeglądarki znają też :nth-child(2 of span) i :nth-of-type(2), które liczą tylko spany, ale klucz wymienia wprost span:nth-child(n) - przy nim zostaje.

    Typowe błędy

    nth-child liczy wszystkie dzieci, nie tylko spany - nagłówek albo akapit przed spanami w tym samym bloku przesunąłby numerację o jeden.

    styl.css CSS zmienione: 24 linie 
    :root {
    --color-orange: #FF8F00;
    --color-light: #FFF8E1;
    --color-cream: #FFECB3;
}

* {
    font-family: "Trebuchet MS", sans-serif;
}

header,
nav,
footer {
    background-color: var(--color-orange);
    padding: 10px;
    text-align: right;
}

section {
    height: 400px;
}

#infectious {
    background-color: var(--color-light);
}

#checker {
    background-color: var(--color-cream);
}

main {
    display: grid;
    grid-template-columns: 50% 50%;
}

a {
    color: var(--color-cream);
    margin-left: 70px;
    font-size: 180%;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: white;
    text-decoration: underline;
}

img {
    position: absolute;
    left: 100px;
    top: 500px;
    z-index: 1;
}

#symptoms {
    border: 1px dotted black;
    padding: 30px;
    margin: 50px 180px 0 50px;
}

span:nth-child(2) {
    font-size: 120%;
}

span:nth-child(4) {
    font-size: 240%;
}

span:nth-child(5) {
    font-size: 150%;
}

span:nth-child(7) {
    font-size: 160%;
}

span:nth-child(9) {
    font-size: 130%;
}

span:nth-child(10) {
    font-size: 190%;
}
    Podgląd strony po tym kroku (zdrowie.php)

  39. Etap 4: Skrypty PHP

    Kroki 39-48 · po tym etapie masz 39 z 39 kryteriów (pkt)

    Krok 39: Połączenie PDO, funkcja escape() i zamknięcie

    Kryteria: ,

    R.5.1 Skrypt realizuje połączenie z serwerem bazy danych i wybór bazy choroby

    R.5.2 Ostatnią operacją na bazie jest jej zamknięcie

    ok. 4 min
    Polecenie z arkusza

    Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie choroby. Na końcu działania skrypt zamyka połączenie z serwerem

    Cały PHP stoi na górze pliku, przed <!DOCTYPE html>: najpierw dane, potem HTML, który je tylko wypisuje. new PDO(...) z charset=utf8mb4 w napisie połączenia (R.5.1) i dwiema opcjami: ERRMODE_EXCEPTION - błąd SQL rzuca wyjątek, FETCH_ASSOC - wiersze z nazwami kolumn. try/catch zamienia nieudane połączenie na ogólny komunikat z kodem 500, bez szczegółów z treści wyjątku.

    Obok funkcja escape() - htmlspecialchars z ENT_QUOTES dla wszystkiego, co trafi z bazy na stronę (ochrona przed XSS). Nazwa jest pełnym słowem, bo arkusz wymaga nazw mówiących, do czego służą.

    Na dole bloku zamknięcie: $statement = null; (obiekt zapytania trzyma połączenie) i $pdo = null;. Zapytania będą dopisywane nad tymi liniami - zamknięcie zostaje ostatnią operacją na bazie (R.5.2). Od tego kroku podgląd to wynik prawdziwego uruchomienia w PHP 8.2.

    Typowe błędy

    PDO nie ma w tabeli 1 arkusza - nazwy stałych trzeba znać na pamięć. Kto nie jest pewny składni, pisze funkcjami mysqli_* z tabeli 1 (wersja podstawowa).

    zdrowie.php PHP zmienione: 21 linii 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  40. Krok 40: Skrypt 1: zapytanie 1

    Kryteria:

    R.5.3 Przynajmniej jeden skrypt zawiera instrukcję wysyłającą do bazy danych zapytanie

    ok. 2 min
    Polecenie z arkusza

    Skrypt 1: Wysyła do bazy danych zapytanie 1

    Zapytanie 1 przez $pdo->query(...) - nie ma w nim wartości od użytkownika, więc nie potrzeba prepare (R.5.3). fetchAll(PDO::FETCH_COLUMN) zwraca samą kolumnę nazwa jako zwykłą listę napisów: ['angina', 'COVID-19', …] - bez tablic w tablicy, bo z każdego wiersza potrzebne jest jedno pole. Zapytanie w cudzysłowach, bo w środku są apostrofy wokół T.

    zdrowie.php PHP zmienione: 3 linie 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 39.

  41. Krok 41: Skrypt 1: element listy z nazwą choroby

    Kryteria: ,

    R.5.4 Skrypt 1 wyświetla z każdego zwróconego zapytaniem 1 rekordu element <li>

    R.2.7 W bloku sekcji lewej umieszczona jedna lista numerowana z przynajmniej jednym elementem, zastosowane znaczniki <ol>, <li> (w skrypcie lub HTML)

    ok. 2 min
    Polecenie z arkusza

    W każdym elemencie listy umieszcza zwrócone zapytaniem pole rekordu

    Pętla foreach ... endforeach - składnia alternatywna PHP do przeplatania z HTML: jeden <li> na chorobę (R.5.4, R.2.7), numery 1 - 7 dopisuje przeglądarka, bo lista to <ol>. <?= ... ?> to skrót od <?php echo ... ?>. Podgląd: siedem chorób jak na ilustracji 3.

    zdrowie.php PHP zmienione: 3 linie 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  42. Krok 42: Skrypt 2: zapytanie 2

    ok. 2 min
    Polecenie z arkusza

    Skrypt 2: Wysyła do bazy danych zapytanie 2

    PDO::FETCH_KEY_PAIR zamienia wynik z dwiema kolumnami w tablicę „pierwsza kolumna → druga”: [1 => 'angina', 2 => 'ospa', …]. Dokładnie tego potrzebuje lista rozwijana - identyfikator do value, nazwa do treści opcji.

    zdrowie.php PHP zmienione: 3 linie 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 41.

  43. Krok 43: Skrypt 2: opcje z identyfikatorem w value

    Kryteria:

    R.5.5 Skrypt 2 wyświetla z każdego zwróconego zapytaniem 2 rekordu opcję listy rozwijanej, tak że identyfikator jest przypisany atrybutowi value, a nazwa - treści opcji

    ok. 2 min
    Polecenie z arkusza

    Każdym zwróconym rekordem wypełnia opcje listy w ten sposób, że identyfikator jest przypisany do atrybutu wartości opcji, a nazwa jest treścią opcji

    foreach ($diseases as $id => $name) - pętla po tablicy z kluczami daje od razu klucz i wartość. value = identyfikator, treść = nazwa (R.5.5). Rozwiń listę w podglądzie: 16 chorób w kolejności identyfikatorów, od anginy do „Kavasaki”, jak na ilustracji 5.

    zdrowie.php PHP zmienione: 3 linie 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
<?php foreach ($diseases as $id => $name): ?>
                    <option value="<?= escape($id) ?>"><?= escape($name) ?></option>
<?php endforeach; ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  44. Krok 44: Skrypt 3: tylko po wysłaniu formularza

    Kryteria:

    R.5.6 Skrypt 3 zawiera instrukcję sprawdzającą czy dane z formularza zostały wysłane oraz instrukcję pobierającą dane z tablicy globalnej odpowiadającej zastosowanej metodzie formularza ($_POST, $_GET, $_REQUEST)

    ok. 3 min
    Polecenie z arkusza

    Skrypt 3, wykonywany tylko wtedy, gdy formularz wysłał dane (ilustracja 6)

    isset($_POST['disease']) sprawdza, czy formularz wysłał dane - pole disease istnieje w $_POST dopiero po kliknięciu „Sprawdź” (R.5.6: instrukcja sprawdzająca i odczyt z tablicy $_POST).

    Wartość z listy to tekst, a lista podsuwa tylko 1 - 16, ale żądanie POST da się wysłać z dowolną treścią. filter_var(..., FILTER_VALIDATE_INT, ...) zwraca liczbę całkowitą od 1 albo false - dla „5 OR 1=1” też false. W wersji podstawowej z egzaminu ta właśnie wartość wypisywała 74 objawy, czyli wszystkie powiązania z tabeli pośredniczącej.

    Przed warunkiem $selectedId = null i $symptoms = [] - szablon może z nich korzystać także przy zwykłym wejściu. Od tego kroku podgląd pokazuje stronę po wybraniu COVID-19 (identyfikator 15).

    zdrowie.php PHP zmienione: 7 linii 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Skrypt 3: objawy choroby wybranej w formularzu (zapytanie 3)
$selectedId = null;
$symptoms = [];
if (isset($_POST['disease'])) {
    $selectedId = filter_var($_POST['disease'], FILTER_VALIDATE_INT, ['options' => ['min_range' => 1]]);
}

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
<?php foreach ($diseases as $id => $name): ?>
                    <option value="<?= escape($id) ?>"><?= escape($name) ?></option>
<?php endforeach; ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 43.

  45. Krok 45: Skrypt 3: zapytanie 3 przygotowane

    Kryteria:

    R.5.7 Skrypt 3 wysyła zmodyfikowane zapytanie 3 tak, że w warunku podany jest identyfikator wysłany przez formularz

    ok. 3 min
    Polecenie z arkusza

    Wysyła do bazy danych zmodyfikowane zapytanie 3 w ten sposób, że w warunku podany jest identyfikator wysłany przez formularz

    Zapytanie 3 z kwerendy.txt, w którym zamiast 5 stoi parametr nazwany :disease; wartość idzie osobno w execute(['disease' => $selectedId]) (R.5.7). Baza zna strukturę zapytania, zanim zobaczy dane, więc wartość z formularza nigdy nie stanie się częścią SQL - to druga warstwa ochrony obok filter_var.

    FETCH_COLUMN - lista samych nazw objawów. Zapytanie w kodzie PHP rozpisane w kilku liniach jak w kwerendy.txt; znaki nowej linii w napisie bazie nie przeszkadzają.

    zdrowie.php PHP zmienione: 9 linii 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Skrypt 3: objawy choroby wybranej w formularzu (zapytanie 3)
$selectedId = null;
$symptoms = [];
if (isset($_POST['disease'])) {
    $selectedId = filter_var($_POST['disease'], FILTER_VALIDATE_INT, ['options' => ['min_range' => 1]]);
    if ($selectedId !== false) {
        $statement = $pdo->prepare(
            'SELECT o.nazwa FROM objawy AS o
             JOIN choroby_objawy AS co ON co.id_objawy = o.id
             WHERE co.id_choroby = :disease'
        );
        $statement->execute(['disease' => $selectedId]);
        $symptoms = $statement->fetchAll(PDO::FETCH_COLUMN);
    }
}

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
<?php foreach ($diseases as $id => $name): ?>
                    <option value="<?= escape($id) ?>"><?= escape($name) ?></option>
<?php endforeach; ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>

    Podgląd strony bez zmian - taki jak po kroku 43.

  46. Krok 46: Skrypt 3: objawy w znacznikach span

    Kryteria:

    R.5.8 Skrypt 3 wyświetla w znaczniku <span> każdy zwrócony zapytaniem objaw choroby np. <span> $wiersz[0] </span>

    ok. 2 min
    Polecenie z arkusza

    Każdy zwrócony zapytaniem objaw choroby zapisuje w znaczniku span w ten sposób, że przed i po objawie jest spacja

    Jeden <span> na objaw, a spacje stoją wewnątrz znacznika, przed i po nazwie: <span> <?= escape($symptom) ?> </span> (R.5.8). Spany są elementami liniowymi - bez tych spacji objawy zlepiłyby się w jeden wyraz.

    Teraz działają reguły :nth-child: 11 objawów COVID-19, „bóle stawów” (czwarty span) największe, jak na ilustracji 6.

    zdrowie.php PHP zmienione: 3 linie 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Skrypt 3: objawy choroby wybranej w formularzu (zapytanie 3)
$selectedId = null;
$symptoms = [];
if (isset($_POST['disease'])) {
    $selectedId = filter_var($_POST['disease'], FILTER_VALIDATE_INT, ['options' => ['min_range' => 1]]);
    if ($selectedId !== false) {
        $statement = $pdo->prepare(
            'SELECT o.nazwa FROM objawy AS o
             JOIN choroby_objawy AS co ON co.id_objawy = o.id
             WHERE co.id_choroby = :disease'
        );
        $statement->execute(['disease' => $selectedId]);
        $symptoms = $statement->fetchAll(PDO::FETCH_COLUMN);
    }
}

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
<?php foreach ($diseases as $id => $name): ?>
                    <option value="<?= escape($id) ?>"><?= escape($name) ?></option>
<?php endforeach; ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
<?php foreach ($symptoms as $symptom): ?>
                <span> <?= escape($symptom) ?> </span>
<?php endforeach; ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  47. Krok 47: Lista pamięta wybraną chorobę

    ok. 2 min
    Polecenie z arkusza

    Każdym zwróconym rekordem wypełnia opcje listy w ten sposób, że identyfikator jest przypisany do atrybutu wartości opcji, a nazwa jest treścią opcji

    Na ilustracji 6 po kliknięciu „Sprawdź” lista pokazuje „COVID-19”. Strona ładuje się od nowa, więc bez pomocy lista wróciłaby do anginy - nad objawami innej choroby. Opcja, której identyfikator jest równy wybranemu, dostaje atrybut selected. Porównanie ścisłe === działa, bo klucze tablicy z FETCH_KEY_PAIR są liczbami całkowitymi, a $selectedId po filter_var też.

    zdrowie.php PHP zmienione: 1 linia 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Skrypt 3: objawy choroby wybranej w formularzu (zapytanie 3)
$selectedId = null;
$symptoms = [];
if (isset($_POST['disease'])) {
    $selectedId = filter_var($_POST['disease'], FILTER_VALIDATE_INT, ['options' => ['min_range' => 1]]);
    if ($selectedId !== false) {
        $statement = $pdo->prepare(
            'SELECT o.nazwa FROM objawy AS o
             JOIN choroby_objawy AS co ON co.id_objawy = o.id
             WHERE co.id_choroby = :disease'
        );
        $statement->execute(['disease' => $selectedId]);
        $symptoms = $statement->fetchAll(PDO::FETCH_COLUMN);
    }
}

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
<?php foreach ($diseases as $id => $name): ?>
                    <option value="<?= escape($id) ?>"<?= $id === $selectedId ? ' selected' : '' ?>><?= escape($name) ?></option>
<?php endforeach; ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
<?php foreach ($symptoms as $symptom): ?>
                <span> <?= escape($symptom) ?> </span>
<?php endforeach; ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  48. Krok 48: Komunikat dla choroby bez objawów

    Kryteria:

    R.5.9 W skryptach zastosowana przynajmniej jedna zmienna oraz nazwy wszystkich zmiennych są w języku polskim lub angielskim i odzwierciedlają cel zastosowania

    ok. 2 min
    Polecenie z arkusza

    Każdy zwrócony zapytaniem objaw choroby zapisuje w znaczniku span w ten sposób, że przed i po objawie jest spacja

    Baza z arkusza ma dwie choroby bez ani jednego objawu: nosówkę (13) i „Kavasaki” (16) - wersja z egzaminu zostawia wtedy pustą ramkę i nie wiadomo, czy strona zadziałała. Pusta lista $symptoms daje komunikat „W bazie nie ma objawów tej choroby.”, a identyfikator odrzucony przez filter_var - „Wybierz chorobę z listy.”. Akapit stoi tylko wtedy, gdy spanów nie ma, więc numeracja :nth-child się nie przesuwa. Podgląd pokazuje stan po wybraniu nosówki.

    Nazwy zmiennych mówią, co przechowują (R.5.9): $pdo, $infectious, $diseaseName, $diseases, $id, $name, $selectedId, $symptoms, $symptom, $statement.

    zdrowie.php PHP zmienione: 5 linii 
    <?php
// Połączenie z bazą: błędy jako wyjątki, wiersze jako tablice z nazwami kolumn
try {
    $pdo = new PDO('mysql:host=localhost;dbname=choroby;charset=utf8mb4', 'root', '', [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    ]);
} catch (PDOException $exception) {
    http_response_code(500);
    exit('Nie udało się połączyć z bazą danych. Spróbuj ponownie za chwilę.');
}

function escape(string|int|float|null $value): string
{
    return htmlspecialchars((string) $value, ENT_QUOTES, 'UTF-8');
}

// Skrypt 1: choroby zakaźne (zapytanie 1)
$infectious = $pdo->query("SELECT nazwa FROM choroby WHERE zakazna = 'T' ORDER BY nazwa")->fetchAll(PDO::FETCH_COLUMN);

// Skrypt 2: wszystkie choroby do listy rozwijanej (zapytanie 2) - identyfikator => nazwa
$diseases = $pdo->query('SELECT id, nazwa FROM choroby')->fetchAll(PDO::FETCH_KEY_PAIR);

// Skrypt 3: objawy choroby wybranej w formularzu (zapytanie 3)
$selectedId = null;
$symptoms = [];
if (isset($_POST['disease'])) {
    $selectedId = filter_var($_POST['disease'], FILTER_VALIDATE_INT, ['options' => ['min_range' => 1]]);
    if ($selectedId !== false) {
        $statement = $pdo->prepare(
            'SELECT o.nazwa FROM objawy AS o
             JOIN choroby_objawy AS co ON co.id_objawy = o.id
             WHERE co.id_choroby = :disease'
        );
        $statement->execute(['disease' => $selectedId]);
        $symptoms = $statement->fetchAll(PDO::FETCH_COLUMN);
    }
}

// Wszystkie dane pobrane - zamknięcie połączenia
$statement = null;
$pdo = null;
?>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wykaz chorób</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h1>Informacja o chorobach w Polsce</h1>
    </header>
    <nav>
        <a href="https://szpitale.pl/" target="_blank" rel="noopener">Szpitale</a>
        <a href="https://www.przychodnie.pl/" target="_blank" rel="noopener">Przychodnie</a>
        <a href="https://www.nfz.gov.pl/" target="_blank" rel="noopener">NFZ</a>
    </nav>
    <main>
        <section id="infectious">
            <h2>Choroby zakaźne</h2>
            <ol>
<?php foreach ($infectious as $diseaseName): ?>
                <li><?= escape($diseaseName) ?></li>
<?php endforeach; ?>
            </ol>
        </section>
        <section id="checker">
            <h2>Objawy chorób</h2>
            <form method="post">
                <select name="disease" aria-label="Choroba">
<?php foreach ($diseases as $id => $name): ?>
                    <option value="<?= escape($id) ?>"<?= $id === $selectedId ? ' selected' : '' ?>><?= escape($name) ?></option>
<?php endforeach; ?>
                </select>
                <button type="submit">Sprawdź</button>
            </form>
            <div id="symptoms">
<?php foreach ($symptoms as $symptom): ?>
                <span> <?= escape($symptom) ?> </span>
<?php endforeach; ?>
<?php if ($selectedId === false): ?>
                <p>Wybierz chorobę z listy.</p>
<?php elseif ($selectedId !== null && $symptoms === []): ?>
                <p>W bazie nie ma objawów tej choroby.</p>
<?php endif; ?>
            </div>
        </section>
    </main>
    <footer>
        <p>Stronę opracował: Bartosz Bryniarski</p>
    </footer>
    <img src="zdrowia.png" alt="Życzymy zdrowia!">
</body>
</html>
    Podgląd strony po tym kroku (zdrowie.php)

  49. Etap 5: Porównanie z wersją podstawową

    Kroki 49-50 · po tym etapie masz 39 z 39 kryteriów (pkt)

    Krok 49: Co jest inaczej i dlaczego

    ok. 3 min
    Polecenie z arkusza

    Ocenie będzie podlegać 5 rezultatów: operacje na bazie danych, zawartość witryny internetowej, działanie witryny internetowej, styl CSS witryny internetowej oraz skrypt połączenia z bazą.

    Obie wersje dają te same punkty. Różnice:

    wersja podstawowata wersja
    układdisplay: flex na <main>, width: 50%display: grid, grid-template-columns: 50% 50%
    kolorywpisane w regułachzmienne w :root
    zapytaniapełne nazwy tabel, grupowanie po nazwiealiasy, grupowanie po c.id
    bazamysqli_* z tabeli 1PDO, FETCH_COLUMN, FETCH_KEY_PAIR
    id z formularzawstawione do SQLfilter_var i parametr :disease
    lista po wysłaniuwraca do anginyzaznacza wybraną chorobę
    brak objawówpusta ramkakomunikat
    odnośniki w nowym oknietarget="_blank"target="_blank" rel="noopener"

    Podgląd strony bez zmian - taki jak po kroku 48.

  50. Krok 50: Którą wersję wybrać na egzaminie

    ok. 2 min
    Polecenie z arkusza

    Czas przeznaczony na wykonanie zadania wynosi 150 minut.

    • Wersja podstawowa, gdy liczy się czas albo PDO nie jest opanowane: funkcje mysqli_* i isset są w tabeli 1 arkusza, a każdy skrypt stoi tam, gdzie widać jego efekt.
    • Ta wersja, gdy PDO i siatka CSS są pisane z pamięci. Tryby FETCH_COLUMN i FETCH_KEY_PAIR skracają pętle, ale trzeba je znać - pomyłka w nazwie stałej to błąd krytyczny.

    Mieszanie też daje pełne punkty: siatka z tej wersji i mysqli_* z podstawowej.

    Podgląd strony bez zmian - taki jak po kroku 48.

  51. Etap 6: Oddanie pracy

    Krok 51 · po tym etapie masz 39 z 39 kryteriów (pkt)

    Krok 51: Plik przeglądarka.txt i nagranie płyty

    ok. 5 min
    Polecenie z arkusza

    UWAGA: po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt nazwa przeglądarki, w której strona była sprawdzana przez http://localhost/…/zdrowie.php.

    W folderze z numerem zdającego: import.png, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, styl.css, zdrowia.png, zdrowie.php. Po nagraniu sprawdź odczyt płyty.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

    Podgląd strony bez zmian - taki jak po kroku 48.

Podgląd

To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.

Autor rozwiązania: . Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.