Rozwiązanie buduje portal szkolnego koła szachowego: baza szachy z jedną tabelą zawodnicy i cztery zapytania - filtr z sortowaniem malejącym, losowanie rekordów (ORDER BY RAND()), aktualizacja UPDATE i różnica dat DATEDIFF, potem logo złożone z dwóch grafik (figury wklejone na szachownicę, przezroczyste tło), strona szachy.php z tabelą najlepszych graczy i przyciskiem losującym parę do rozgrywki oraz style w styles.css. Dwa skrypty PHP: pierwszy wypełnia tabelę i sam numeruje pozycje, drugi po kliknięciu przycisku losuje dwóch graczy.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypty są najpierw pisane najprościej (mysqli_query, mysqli_fetch_row), a na końcu zostają przerobione na wersję z prawdziwych projektów.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, PDO)” jest drugi sposób rozwiązania tego samego arkusza: bloki na siatce CSS, kolory w zmiennych i PHP na PDO z danymi pobranymi przed HTML-em - obie wersje są zgodne z kluczem.
Baza i grafiki pochodzą z prawdziwego archiwum pliki3 (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP. Podgląd strony to wynik prawdziwego uruchomienia kodu z danego kroku w PHP 8.2. Jedyna podmiana dotyczy losowania: żeby podgląd był zawsze taki sam, na czas uruchomienia zamiast losowej pary wybrana jest para z ilustracji 2 (WalSał 2A i MicKra 4B).
Jak liczą się punkty. Klucz ma 38 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 29 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 38 kryteriów (pkt)
Utwórz bazę danych o nazwie szachy, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki3.7z z pulpitu (hasło Sz4chm4t!) do folderu z numerem zdającego: szachy.sql, board.jpg, chess.jpg i legenda.txt. W phpMyAdmin: Nowa, nazwa szachy, porównywanie np. utf8_unicode_ci.
Z rozpakowanego archiwum zaimportuj tabelę z pliku szachy.sql do utworzonej bazy.
Import → szachy.sql. Tabela zawodnicy z ilustracji 1: 94 członków koła z pseudonimem, tytułem (AM, SM, PM, KM, OM albo pusty), datą zdobycia tytułu, rankingiem i klasą.
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 i zapis jako import.png - na zrzucie komunikat phpMyAdmin o udanym imporcie albo tabela zawodnicy w drzewku bazy.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pseudonim, tytuł, ranking i klasę dla rankingów większych od 2787, posortowane malejąco według rankingu.
Zapytanie czytasz klauzula po klauzuli:
SELECT pseudonim, tytul, ranking, klasa - tylko cztery kolumny, bez id_zawodnika i daty,FROM zawodnicy - z jedynej tabeli bazy,WHERE ranking > 2787 - „większych od”, czyli znak > (2787 nie spełnia warunku),ORDER BY ranking DESC - malejąco, od najwyższego rankingu.Wynik: 10 wierszy, od LiLa (2901) do So What (2788) - te same, które pokaże tabela na stronie. Zapytanie do kwerendy.txt, zrzut kw1.png.
>= zamiast > - przy rankingu dokładnie 2787 dałoby to inny wynik niż w kluczu (10 rekordów).
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;
Zapytanie 2: wybierające losowo dokładnie dwa rekordy złożone z pól pseudonim i klasa z tabeli zawodnicy.
ORDER BY RAND() - każdy wiersz dostaje losową liczbę i tabela jest po niej sortowana, czyli tasowana,LIMIT 2 - z potasowanej tabeli bierzesz dwa pierwsze wiersze.Każde wykonanie daje inną parę - klucz to przewiduje („rekordy są losowe”). Zrzut: kw2.png. To zapytanie wyśle Skrypt 2.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;
-- Zapytanie 2
SELECT pseudonim, klasa FROM zawodnicy ORDER BY RAND() LIMIT 2;
Zapytanie 3: aktualizujące dane w kolumnie klasa. Klasa „4A” jest aktualizowana do „5A”.
UPDATE zawodnicy - zmieniasz istniejące wiersze tabeli,SET klasa = "5A" - nowa wartość kolumny,WHERE klasa = "4A" - tylko w wierszach, w których była klasa 4A.phpMyAdmin pokazuje komunikat o liczbie zmienionych wierszy - tu 15. Zrzut: kw3.png (tu: komunikat i zawodnicy dawnej 4A, wszyscy już w 5A).
UPDATE bez WHERE zmienia klasę wszystkim 94 zawodnikom na 5A - phpMyAdmin wykona to bez ostrzeżenia.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;
-- Zapytanie 2
SELECT pseudonim, klasa FROM zawodnicy ORDER BY RAND() LIMIT 2;
-- Zapytanie 3
UPDATE zawodnicy SET klasa = "5A" WHERE klasa = "4A";
Zapytanie 4: wybierające dla zawodników z niepustym tytułem jedynie pseudonim i datę zdobycia oraz obliczające ile minęło dni od daty zdobycia tytułu do dnia dzisiejszego. Obliczona liczba dni powinna być zapisana pod nazwą kolumny (aliasem) „dni”.
DATEDIFF(CURDATE(), data_zdobycia) - liczba dni między dwiema datami; pierwsza data to dzisiaj (CURDATE()), druga to data zdobycia, więc wynik jest dodatni,AS dni - alias, czyli nazwa obliczonej kolumny w wyniku,WHERE tytul <> '' - „niepusty tytuł”: pusty tytuł to w tej tabeli pusty napis '', a nie NULL.Wynik: 30 wierszy, jak w kluczu. Liczba dni zależy od dnia wykonania - zrzut kw4.png powstał 2026-10-02.
WHERE tytul IS NOT NULL przepuszcza też puste napisy - wyjdą wszystkie 94 wiersze zamiast 30. Odwrotna kolejność dat w DATEDIFF daje liczby ujemne.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;
-- Zapytanie 2
SELECT pseudonim, klasa FROM zawodnicy ORDER BY RAND() LIMIT 2;
-- Zapytanie 3
UPDATE zawodnicy SET klasa = "5A" WHERE klasa = "4A";
-- Zapytanie 4
SELECT pseudonim, data_zdobycia, DATEDIFF(CURDATE(), data_zdobycia) AS dni FROM zawodnicy WHERE tytul <> '';
Kroki 8-23 · po tym etapie masz 18 z 38 kryteriów (pkt)
Cechy grafiki: Nazwa pliku logo.png. Tło przezroczyste. Grafika powstała z połączenia plików board.jpg i chess.jpg w ten sposób, że figury zostały wklejone na szachownicę w miejscu zgodnym z ilustracją 2. Grafika przeskalowana z zachowaniem proporcji do szerokości 320 px.
W GIMP-ie:
Skalowanie przed złożeniem warstw zmienia rozmiar tylko jednej z nich - figury wyjdą za duże albo za małe względem szachownicy. Eksport do JPG traci przezroczystość.
Cechy witryny: Składa się ze strony o nazwie szachy.php. Zapisana w języku HTML5.
Jedna strona, szachy.php, zaczyna się deklaracją <!DOCTYPE html>. Dopóki nie ma w niej kodu PHP, podgląd pokazuje ją wprost.
szachy.php PHP nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
Atrybut lang="pl" w znaczniku <html>.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8"> - jako pierwszy element <head>.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „KOŁO SZACHOWE” widoczny na karcie przeglądarki.
<title> w <head> - tekst na karcie przeglądarki, nie na stronie.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styles.css prawidłowo połączony z kodem strony.
<link rel="stylesheet"> - uwaga na nazwę: styles.css, z „s” na końcu.
style.css albo styl.css (jak w innych arkuszach) odcina wszystkie style, a razem z nimi kryterium R.3.2.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, poniżej lewy i prawy, na dole blok stopki. Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
<header> na nagłówek, dwie <section> z identyfikatorami left i right na bloki boczne, <footer> na stopkę. Ustawienie bloków lewego i prawego obok siebie zrobisz w CSS.
szachy.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
</header>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Nagłówek drugiego stopnia o treści: „Koło szachowe gambit piona”. Pochylenie jest realizowane za pomocą znacznika semantycznego oznaczającego tekst uwypuklony.
Na ilustracji pochylone są tylko słowa „gambit piona”. Znacznik semantyczny tekstu uwypuklonego to <em> (ang. emphasis) - przeglądarka domyślnie pisze go kursywą.
<i> też pochyla tekst, ale nie jest znacznikiem uwypuklenia - kryterium R.2.10 wymaga <em>.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: Nagłówek czwartego stopnia o treści: „Polecane linki”.
<h4>.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Lista punktowana (nieuporządkowana) o elementach: kwerenda1, kwerenda2, kwerenda3, kwerenda4, które są odnośnikami do plików zawierających odpowiadające im zrzuty ekranu.
<ul> z czterema <li>, a w każdym <a> do zrzutu. Zrzuty kw1.png - kw4.png leżą w tym samym folderze co strona, więc w href wystarczy sama nazwa pliku - kliknięcie otworzy obraz w przeglądarce. W podglądzie kliknięcia są zablokowane.
szachy.php PHP zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Grafika logo.png z tekstem alternatywnym o treści: „Logo koła”.
Obraz pod listą, z atrybutem alt.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: Nagłówek trzeciego stopnia o treści: „Najlepsi gracze naszego koła”.
<h3>.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
</section>
<footer>
</footer>
</body>
</html>Tabela o pięciu kolumnach z wierszem o komórkach nagłówkowych: Pozycja, Pseudonim, Tytuł, Ranking, Klasa. Wypełniona przez skrypt 1.
Pierwszy wiersz z pięcioma <th>. Kolumna „Pozycja” nie ma odpowiednika w bazie - numer policzy Skrypt 1. Pozostałe wiersze dopisze Skrypt 1.
szachy.php PHP zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
</table>
</section>
<footer>
</footer>
</body>
</html>Formularz zawierający przycisk z tekstem „Losuj nową parę graczy”, którego wciśnięcie powoduje wykonanie skryptu 2.
<form method="post"> bez atrybutu action - kliknięcie wysyła formularz do tego samego pliku, czyli strona ładuje się ponownie i wykonuje swój kod PHP. Przycisk type="submit" dostaje name="draw" - po tej nazwie Skrypt 2 rozpozna, że go kliknięto.
szachy.php PHP zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
</section>
<footer>
</footer>
</body>
</html>Paragraf zawierający tekst, który należy przekopiować z pliku legenda.txt z wypakowanego archiwum.
Otwórz legenda.txt w edytorze, skopiuj całość do <p>. Skróty tytułów objaśnią kolumnę „Tytuł” w tabeli.
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: paragraf o treści „Stronę wykonał: ”, dalej wstawiony numer zdającego.
Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL).
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 24-33 · po tym etapie masz 29 z 38 kryteriów (pkt)
Domyślnie dla wszystkich selektorów: krój czcionki Helvetica.
„Dla wszystkich selektorów” to selektor uniwersalny *. Na Windows Helvetica zwykle nie jest zainstalowana - przeglądarka użyje wtedy czcionki zastępczej, a kryterium sprawdza zapis w CSS.
styles.css CSS nowy plik * {
font-family: Helvetica;
}Wspólne dla bloku nagłówkowego i stopki: kolor tła #FFD966, biały kolor czcionki, marginesy wewnętrzne 20 px, wyrównanie tekstu do środka, cień tekstu z przesunięciem w poziomie i pionie o 5 px, promieniem rozmycia 10 px i czarnym kolorem.
Wspólne cechy w jednej regule z dwoma selektorami po przecinku. text-shadow przyjmuje wartości w kolejności z tabeli 2 arkusza: przesunięcie poziome, pionowe, promień rozmycia, kolor - 5px 5px 10px black. Biały tekst na żółtym tle jest czytelny właśnie dzięki ciemnemu cieniowi.
styles.css CSS zmienione: 7 linii * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}Dodatkowo dla bloku stopki: rozmiar czcionki 120%.
Osobna reguła tylko dla footer - dokłada jedną cechę do wspólnych.
styles.css CSS zmienione: 3 linie * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}Dla bloku lewego: kolor tła #FFD966, szerokość 25%, wysokość 450 px.
Selektor identyfikatora #left - z krzyżykiem, bo w HTML użyto id.
.left (kropka) przy id="left" nie trafia w blok - klucz odbiera wtedy także R.3.2 („źle przypisany selektor”).
styles.css CSS zmienione: 5 linii * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}Dla bloku prawego: kolor tła #C5E0B4, szerokość 75%, wysokość 450 px, wyrównanie tekstu do środka, cień wewnętrzny bez przesunięcia w obu osiach (wartość 0), z promieniem rozmycia 15 px i czarnym kolorem.
box-shadow z tabeli 2: przesunięcie poziome 0, pionowe 0, rozmycie 15px, kolor black i słowo inset, które zamienia cień zewnętrzny na wewnętrzny - ciemna poświata od środka krawędzi bloku, jak na ilustracji 2.
styles.css CSS zmienione: 7 linii * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}
#right {
background-color: #C5E0B4;
width: 75%;
height: 450px;
text-align: center;
box-shadow: 0 0 15px black inset;
}Wspólne dla tabeli, komórek nagłówkowych i zwykłych komórek: obramowanie o szerokości 1 px linią ciągłą czarną, połączone linie tabeli.
Selektory table, th, td i border: 1px solid black. border-collapse: collapse łączy sąsiednie ramki w jedną linię - bez tego każda komórka ma własną ramkę i między nimi widać podwójne linie.
styles.css CSS zmienione: 4 linie * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}
#right {
background-color: #C5E0B4;
width: 75%;
height: 450px;
text-align: center;
box-shadow: 0 0 15px black inset;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}Dodatkowo dla tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 70%.
margin: auto - przeglądarka dzieli wolne miejsce po równo na lewy i prawy margines, więc tabela stoi na środku bloku. 70% liczy się od szerokości bloku prawego.
styles.css CSS zmienione: 4 linie * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}
#right {
background-color: #C5E0B4;
width: 75%;
height: 450px;
text-align: center;
box-shadow: 0 0 15px black inset;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
margin: auto;
width: 70%;
}Dla selektora listy punktowanej: typ punktora kwadrat, wysokość wiersza (interlinia) 1.5.
Selektor znacznika ul - arkusz wymaga go wprost („wyłącznie przy pomocy selektora tego znacznika”). Punktor kwadrat to square, interlinia 1.5 to line-height: 1.5 (bez jednostki - półtora rozmiaru czcionki).
Styl listy zapisany dla klasy (.lista) albo przez #left ul nie spełnia R.4.7 - klucz uznaje tylko selektor znacznika.
styles.css CSS zmienione: 4 linie * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}
#right {
background-color: #C5E0B4;
width: 75%;
height: 450px;
text-align: center;
box-shadow: 0 0 15px black inset;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
margin: auto;
width: 70%;
}
ul {
list-style-type: square;
line-height: 1.5;
}Dla selektora odnośnika i selektora nagłówka czwartego stopnia: kolor czcionki SeaGreen.
SeaGreen to nazwa koloru CSS (morska zieleń, #2E8B57). Jedna reguła dla a i h4. Kolor dostanie też <h4> z wylosowaną parą graczy, który wypisze Skrypt 2 - jak na ilustracji 2.
styles.css CSS zmienione: 3 linie * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}
#right {
background-color: #C5E0B4;
width: 75%;
height: 450px;
text-align: center;
box-shadow: 0 0 15px black inset;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
margin: auto;
width: 70%;
}
ul {
list-style-type: square;
line-height: 1.5;
}
a, h4 {
color: SeaGreen;
}Podział strony na bloki: nagłówkowy, poniżej lewy i prawy, na dole blok stopki, tak aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 2.
float: left dla obu sekcji ustawia je obok siebie (25% + 75% = cała szerokość), a clear: both w stopce sprowadza ją pod oba bloki.
Dodatkowy padding albo border dla sekcji powiększa ich szerokość ponad 100% - blok prawy spada pod lewy.
styles.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
header, footer {
background-color: #FFD966;
color: white;
padding: 20px;
text-align: center;
text-shadow: 5px 5px 10px black;
}
footer {
font-size: 120%;
}
#left {
background-color: #FFD966;
width: 25%;
height: 450px;
}
#right {
background-color: #C5E0B4;
width: 75%;
height: 450px;
text-align: center;
box-shadow: 0 0 15px black inset;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table {
margin: auto;
width: 70%;
}
ul {
list-style-type: square;
line-height: 1.5;
}
a, h4 {
color: SeaGreen;
}
section {
float: left;
}
footer {
clear: both;
}Kroki 34-39 · po tym etapie masz 38 z 38 kryteriów (pkt)
Łączą się z serwerem bazodanowym na localhost, użytkownik root bez hasła, baza danych o nazwie szachy. Na końcu zamykane jest połączenie z serwerem.
Trzy bloki PHP w bloku prawym:
mysqli_connect z serwerem localhost, użytkownikiem root, pustym hasłem i bazą szachy,mysqli_close - ostatnia operacja na bazie na całej stronie.Zmienna $connection z pierwszego bloku jest dostępna w kolejnych - to ten sam plik PHP. Podgląd jest już wynikiem uruchomienia strony: bloki PHP niczego jeszcze nie wypisują.
szachy.php PHP zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
?>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 1: Wysyła do bazy danych zapytanie 1.
Zapytanie 1 w zmiennej $query i mysqli_query - wynik (jeszcze nie wiersze, tylko „uchwyt” do nich) trafia do $result. Na stronie nic się nie zmienia: wiersze trzeba dopiero pobrać i wypisać.
szachy.php PHP zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
$query = "SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;";
$result = mysqli_query($connection, $query);
?>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 34.
W każdym wierszu tabeli wpisywany jest obliczony przez skrypt kolejny numer wiersza począwszy od 1.
$position = 1 - licznik startuje od 1, przed pętlą,while ($row = mysqli_fetch_row($result)) - każde przejście pętli pobiera kolejny wiersz wyniku jako tablicę numeryczną; gdy wierszy zabraknie, funkcja zwraca null i pętla się kończy,$position++.Podgląd: dziesięć wierszy z numerami 1-10 - na razie tylko pierwsza kolumna.
$position = 1 wewnątrz pętli - licznik zeruje się przy każdym wierszu i wszędzie wychodzi 1.
szachy.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
$query = "SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;";
$result = mysqli_query($connection, $query);
$position = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$position</td></tr>";
$position++;
}
?>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>W każdym wierszu tabeli wpisywany jest obliczony przez skrypt kolejny numer wiersza począwszy od 1 oraz zwrócone zapytaniem pola kolejnego rekordu.
Po numerze cztery komórki <td> z $row[0] - $row[3], w kolejności kolumn z SELECT: pseudonim, tytuł, ranking, klasa. Podgląd: tabela jak na ilustracji 2, od LiLa do So What (R.2.8, R.5.6).
szachy.php PHP zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
$query = "SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;";
$result = mysqli_query($connection, $query);
$position = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$position</td><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td></tr>";
$position++;
}
?>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Skrypt 2: Wysyła do bazy danych zapytanie 2.
isset($_POST["draw"]) - prawda tylko wtedy, gdy strona przyszła z formularza po kliknięciu przycisku o nazwie draw; przy zwykłym wejściu na stronę losowanie się nie wykonuje,mysqli_query.mysqli_close stoi pod blokiem if, poza nim - połączenie trzeba zamknąć zawsze, także gdy przycisku nie kliknięto. Zmienne $query i $result można użyć ponownie: Skrypt 1 już z nich skorzystał.
szachy.php PHP zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
$query = "SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;";
$result = mysqli_query($connection, $query);
$position = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$position</td><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td></tr>";
$position++;
}
?>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
if (isset($_POST["draw"])) {
$query = "SELECT pseudonim, klasa FROM zawodnicy ORDER BY RAND() LIMIT 2;";
$result = mysqli_query($connection, $query);
}
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 37.
W nagłówku czwartego stopnia wyświetla oba pobrane rekordy oddzielając je spacją.
Otwórz <h4>, w pętli wypisz każdy z dwóch rekordów (pseudonim, spacja, klasa, spacja) i zamknij nagłówek - wychodzi „WalSał 2A MicKra 4B”. Nagłówek dostaje kolor SeaGreen z reguły a, h4.
Podgląd pokazuje stronę po kliknięciu przycisku. Na egzaminie każde kliknięcie da inną parę; w podglądzie jest para z ilustracji 2.
echo "<h4>" wewnątrz pętli tworzy dwa osobne nagłówki zamiast jednego z obiema parami.
szachy.php PHP zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
$query = "SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;";
$result = mysqli_query($connection, $query);
$position = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$position</td><td>$row[0]</td><td>$row[1]</td><td>$row[2]</td><td>$row[3]</td></tr>";
$position++;
}
?>
</table>
<form method="post">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
if (isset($_POST["draw"])) {
$query = "SELECT pseudonim, klasa FROM zawodnicy ORDER BY RAND() LIMIT 2;";
$result = mysqli_query($connection, $query);
echo "<h4>";
while ($row = mysqli_fetch_row($result)) {
echo "$row[0] $row[1] ";
}
echo "</h4>";
}
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 40 · po tym etapie masz 38 z 38 kryteriów (pkt)
Formularz zawierający przycisk z tekstem „Losuj nową parę graczy”, którego wciśnięcie powoduje wykonanie skryptu 2.
Dwie poprawki, które warto znać z prawdziwych projektów:
?draw=, odświeżenie strony (F5) losuje nową parę bez pytania o „ponowne przesłanie formularza”, a adres można zapisać w zakładkach. POST zostawiasz dla żądań, które coś zapisują.htmlspecialchars przy wypisywaniu. Pseudonim wpisuje człowiek; gdyby ktoś nazwał się <b>X, przeglądarka potraktowałaby to jak znacznik HTML. Funkcja zamienia <, >, & i cudzysłowy na encje, więc tekst wyświetla się dosłownie. Przy okazji mysqli_fetch_assoc - kolumny po nazwach ($row["pseudonim"]) zamiast numerów, a implode skleja pary spacją bez spacji na końcu.Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza (R.3.4 przyjmuje przycisk w formularzu niezależnie od metody).
szachy.php PHP zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>KOŁO SZACHOWE</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h2>Koło szachowe <em>gambit piona</em></h2>
</header>
<section id="left">
<h4>Polecane linki</h4>
<ul>
<li><a href="kw1.png">kwerenda1</a></li>
<li><a href="kw2.png">kwerenda2</a></li>
<li><a href="kw3.png">kwerenda3</a></li>
<li><a href="kw4.png">kwerenda4</a></li>
</ul>
<img src="logo.png" alt="Logo koła">
</section>
<section id="right">
<h3>Najlepsi gracze naszego koła</h3>
<?php
$connection = mysqli_connect("localhost", "root", "", "szachy");
?>
<table>
<tr>
<th>Pozycja</th>
<th>Pseudonim</th>
<th>Tytuł</th>
<th>Ranking</th>
<th>Klasa</th>
</tr>
<?php
$query = "SELECT pseudonim, tytul, ranking, klasa FROM zawodnicy WHERE ranking > 2787 ORDER BY ranking DESC;";
$result = mysqli_query($connection, $query);
$position = 1;
while ($row = mysqli_fetch_row($result)) {
echo "<tr><td>$position</td>";
foreach ($row as $value) {
echo "<td>" . htmlspecialchars($value) . "</td>";
}
echo "</tr>";
$position++;
}
?>
</table>
<form method="get">
<button type="submit" name="draw">Losuj nową parę graczy</button>
</form>
<?php
if (isset($_GET["draw"])) {
$query = "SELECT pseudonim, klasa FROM zawodnicy ORDER BY RAND() LIMIT 2;";
$result = mysqli_query($connection, $query);
$players = [];
while ($row = mysqli_fetch_assoc($result)) {
$players[] = htmlspecialchars($row["pseudonim"] . " " . $row["klasa"]);
}
echo "<h4>" . implode(" ", $players) . "</h4>";
}
mysqli_close($connection);
?>
<p>Legenda: AM - Absolutny Mistrz, SM - Szkolny Mistrz, PM - Mistrz Poziomu, KM - Mistrz Klasowy</p>
</section>
<footer>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Krok 41 · po tym etapie masz 38 z 38 kryteriów (pkt)
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.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
W folderze: szachy.php, styles.css, kwerendy.txt, import.png, kw1.png - kw4.png (do nich prowadzą odnośniki z listy), logo.png i przeglądarka.txt. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 40.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
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: Bartosz Bryniarski. 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.