Rozwiązanie buduje serwis o pozycyjnych systemach liczbowych: baza szachy z zawodnikami szkolnego koła i cztery zapytania - wzorzec daty LIKE, dwa warunki naraz, sortowanie z limitem ORDER BY ... LIMIT i różnica dat DATEDIFF z aliasem, potem grafika (lustrzane odbicie cyfry 2 z nowym kolorem i przezroczystym tłem) i animacja GIF z szesnastu cyfr szesnastkowych, strona systemy.html z tabelą, listą definicji i kalkulatorem oraz style w styl.css. PHP tu nie ma: skrypt działa w przeglądarce, w JavaScripcie - zamienia liczbę dziesiętną na binarną, dzieli ją na grupy po cztery cyfry i dopisuje oznaczenie systemu w indeksie dolnym.
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ą. Skrypt jest pisany według algorytmu z arkusza (K1 - K6), a na końcu pojawia się wersja z prawdziwych projektów: słuchacz zdarzenia, sprawdzenie wpisanej liczby i wbudowane toString(2).
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, osobny skrypt)” jest drugi sposób rozwiązania tego samego arkusza: trzy bloki na siatce CSS i skrypt w osobnym pliku z nasłuchiwaniem zdarzenia, sprawdzeniem wpisanej liczby i wynikiem budowanym bez innerHTML - obie wersje są zgodne z kluczem.
Baza, cyfry i tekst słowniczka pochodzą z prawdziwego archiwum pliki14 (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 (zapytanie 4 liczy dni do dnia uruchomienia, tutaj 2026-10-02). Kalkulator w podglądzie działa naprawdę - wpisz liczbę i kliknij „Przelicz na binarny”.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 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 40 kryteriów (pkt)
Utwórz bazę danych o nazwie szachy, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki14.7z z pulpitu (hasło Cyf3rki#) do folderu z numerem zdającego: szachy.sql, szesnaście obrazów cyfr (0.png - F.png, w tym 2a.png do przerobienia) i systemy.txt z tekstem słowniczka. W phpMyAdmin: Nowa, nazwa szachy, porównywanie np. utf8_unicode_ci.
Do utworzonej bazy zaimportuj tabele z pliku szachy.sql z rozpakowanego archiwum.
Import → szachy.sql. Jedna tabela zawodnicy (94 wiersze): pseudonim, tytuł (dwuliterowy skrót, np. OM, albo pusty), data zdobycia tytułu, ranking i klasa.
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 - tu wszystkie zrzuty są w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pseudonimy zawodników, którzy zdobyli tytuł w lipcu 2020 roku.
Data w MySQL ma postać RRRR-MM-DD, więc „lipiec 2020” to wszystko, co zaczyna się od 2020-07: warunek LIKE "2020-07%". Równoważnie zakres: data_zdobycia BETWEEN "2020-07-01" AND "2020-07-31". Wynik: Hiikar, BananD, WanHao - jak w kluczu. Zapytanie do kwerendy.txt, zrzut kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT pseudonim FROM zawodnicy WHERE data_zdobycia LIKE "2020-07%";
Zapytanie 2: wybierające jedynie pseudonimy i tytuły zawodników z klasy 3A który zdobyli dowolny, niepusty tytuł.
Dwa warunki naraz łączy AND. „Niepusty tytuł” to tytul != "" - w tej bazie zawodnik bez tytułu ma w tym polu pusty napis, a nie NULL (pustych napisów jest 64, wartości NULL - 0). Dlatego klucz uznaje warunek tytul IS NOT NULL za błąd: przepuściłby wszystkich. Wynik: Botas Bross KM, BananD PM, DavNav OM, JanNie OM. Zrzut: kw2.png.
tytul IS NOT NULL zwraca też zawodników bez tytułu - puste pole to tu "", nie NULL.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pseudonim FROM zawodnicy WHERE data_zdobycia LIKE "2020-07%";
-- Zapytanie 2
SELECT pseudonim, tytul FROM zawodnicy WHERE klasa = "3A" AND tytul != "";
Zapytanie 3: wybierające jedynie pseudonim, klasę i ranking dla pierwszych 10 zawodników o najniższej pozycji w rankingu, posortowane według rankingu.
ORDER BY ranking - rosnąco, od najniższej wartości,LIMIT 10 - tylko dziesięć pierwszych wierszy wyniku.LIMIT działa na wynik już posortowany, więc kolejność klauzul ma znaczenie: najpierw ORDER BY, potem LIMIT. Klucz przyjmuje sortowanie rosnące i malejące („najniższa pozycja” można czytać dwojako) - ważne, żeby wierszy było dokładnie 10. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pseudonim FROM zawodnicy WHERE data_zdobycia LIKE "2020-07%";
-- Zapytanie 2
SELECT pseudonim, tytul FROM zawodnicy WHERE klasa = "3A" AND tytul != "";
-- Zapytanie 3
SELECT pseudonim, klasa, ranking FROM zawodnicy ORDER BY ranking LIMIT 10;
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(późniejsza, wcześniejsza) zwraca liczbę dni między datami; dzisiejszą datę daje CURDATE() (albo CURRENT_DATE()). Kolejność argumentów ma znaczenie - odwrotna da wynik ujemny. AS dni nadaje kolumnie nazwę. Wynik: 30 wierszy, pierwszy Hiikar, 2020-07-12; liczba dni zależy od dnia uruchomienia - tu 2026-10-02: 2273. Zrzut: kw4.png.
DATEDIFF(data_zdobycia, CURDATE()) daje liczby ujemne - pierwszym argumentem jest data późniejsza.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT pseudonim FROM zawodnicy WHERE data_zdobycia LIKE "2020-07%";
-- Zapytanie 2
SELECT pseudonim, tytul FROM zawodnicy WHERE klasa = "3A" AND tytul != "";
-- Zapytanie 3
SELECT pseudonim, klasa, ranking FROM zawodnicy ORDER BY ranking LIMIT 10;
-- Zapytanie 4
SELECT pseudonim, data_zdobycia, DATEDIFF(CURDATE(), data_zdobycia) AS dni FROM zawodnicy WHERE tytul != "";
Kroki 8-9 · po tym etapie masz 8 z 40 kryteriów (pkt)
Przygotowanie grafiki 2.png: utworzona na bazie grafiki 2a.png, w ten sposób że jest jej lustrzanym odbiciem względem osi pionowej. Kolor czcionki, którą zapisano cyfrę „2”, niebieski (0000FF). Tło przezroczyste. Nazwa grafiki 2.png.
2a.png to czerwona, odwrócona dwójka na żółtym tle. W GIMP-ie:
Klucz sprawdza kolor, kierunek cyfry i przezroczyste tło (R.2.2).
Odbij pionowo odbija względem osi poziomej - cyfra stanie „do góry nogami”.
Przygotowanie animacji o nazwie cyfry.gif: na animację składają się pliki, kolejno: 0.png, 1.png, 2.png, 3.png, 4.png, 5.png, 6.png, 7.png, 8.png, 9.png, A.png, B.png, C.png, D.png, E.png i F.png. Nie należy zmieniać właściwości grafik: przezroczystości i wymiarów 200 x 200 px. Każdy obraz jest pokazywany w animacji przez 750 ms, jedna klatka na warstwę. Udokumentuj ustawienie parametru za pomocą zrzutu ekranu o nazwie parametry_animacji.png.
Plik → Otwórz jako warstwy - wszystkie szesnaście plików, z nowym 2.png zamiast 2a.png. Najniższa warstwa to pierwsza klatka: 0 na dole, F na górze (w razie potrzeby Warstwa → Stos → Odwróć kolejność warstw). Eksportuj jako cyfry.gif: zaznaczone Jako animację, opóźnienie 750 ms, rozmieszczenie Jedna klatka na warstwę (zastąp). Zrzut okna eksportu z całego ekranu: parametry_animacji.png (R.2.1). Animacja w podglądzie odlicza cyfry 0 - F.
Bez trybu „zastąp” klatki nakładają się na siebie - na przezroczystym tle widać wtedy wszystkie cyfry naraz.
Kroki 10-20 · po tym etapie masz 22 z 40 kryteriów (pkt)
Cechy witryny: Składa się ze strony o nazwie systemy.html. Zapisana w języku HTML5.
Jedna strona, systemy.html. Skrypt działa w przeglądarce, więc serwer nie jest potrzebny.
systemy.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl".
systemy.html HTML 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">.
systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Systemy liczbowe”.
<title>.
systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.
Nazwa: styl.css.
systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, poniżej trzy bloki umieszczone obok siebie, na dole stopka. 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ą 3.
<header>, trzy <section> (left, middle, right) i <footer> (R.2.4).
systemy.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<section id="left">
</section>
<section id="middle">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Animacja cyfry.gif z tekstem alternatywnym „Cyfry szesnastkowe”. Nagłówek pierwszego stopnia o treści „Pozycyjne systemy liczbowe”.
Animowany GIF wstawia się jak zwykły obraz (R.2.9). Na razie ma 200 px - zmniejszy go styl.
systemy.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
</section>
<section id="middle">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: Tabela o 3 kolumnach i 7 wierszach, której układ oraz zawartość przedstawia ilustracja 4. Pierwszy wiersz składa się z komórek nagłówkowych.
Pierwszy wiersz to <th> (HEX, BIN, DEC), dalej sześć wierszy <td> z cyframi A - F: A = 1010₂ = 10, … F = 1111₂ = 15 (R.2.6, R.2.7).
systemy.html HTML zmienione: 37 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku środkowego: Pole edycyjne przeznaczone do wpisywania liczb, z podpowiedzią: „Wpisz liczbę dziesiętną”. Przycisk o treści „Przelicz na binarny”, jego wciśnięcie uruchamia skrypt. Paragraf o treści: „Brak obliczeń”.
type="number" - pole na liczby (R.3.4); placeholder - szary napis-podpowiedź, który znika po wpisaniu (R.3.5),onclick="convert()" - funkcję napiszesz w części o skrypcie (R.3.6),result z napisem „Brak obliczeń” - skrypt podmieni go na wynik.systemy.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: Nagłówek drugiego stopnia o treści „Słowniczek”. Lista definicji, zawierająca terminy i ich definicje. Tekst można skopiować z pliku systemy.txt. Termin „Heksadecymalny” w liście definicji jest odnośnikiem prowadzącym do strony internetowej https://szesnastkowy_system_liczbowy.pl.
Lista definicji to <dl>: każdy termin w <dt>, a jego objaśnienie w <dd> tuż pod nim - przeglądarka wcina opis. Tekst kopiujesz z systemy.txt. Termin „Heksadecymalny” owijasz w odnośnik <a> wewnątrz <dt> (R.2.5, R.2.8, R.3.3).
systemy.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: Paragraf o treści „Stronę opracował: ”, dalej numer zdającego. Numer jest formatowany semantycznym znacznikiem służącym do uwypuklenia tekstu, poprzez zapisanie go kursywą.
„Semantyczny znacznik uwypuklenia” zapisywany kursywą to <em> (emphasis). <i> też daje kursywę, ale tylko wizualną, bez znaczenia - klucz wymaga <em> (R.3.7). Na egzaminie w <em> wpisujesz swój numer zdającego (PESEL).
systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Kroki 21-27 · po tym etapie masz 33 z 40 kryteriów (pkt)
Dla ciała strony: krój czcionki Georgia, biały kolor czcionki.
Na razie biały tekst na białym tle jest niewidoczny - tła dodadzą kolejne reguły (R.4.1).
styl.css CSS nowy plik body {
font-family: Georgia;
color: white;
}Wspólne dla bloków nagłówkowego i stopki: kolor tła #824555, wyrównanie tekstu do środka, marginesy wewnętrzne 20 px.
Jedna reguła dla dwóch selektorów.
styl.css CSS zmienione: 5 linii body {
font-family: Georgia;
color: white;
}
header, footer {
background-color: #824555;
text-align: center;
padding: 20px;
}Wspólne bloków lewego i środkowego: szerokość 30%, wysokość 350 px. Dodatkowo kolor tła dla bloku lewego #A26475, dla bloku środkowego #824555.
Wspólne wymiary w jednej regule, kolory osobno.
styl.css CSS zmienione: 10 linii body {
font-family: Georgia;
color: white;
}
header, footer {
background-color: #824555;
text-align: center;
padding: 20px;
}
#left, #middle {
width: 30%;
height: 350px;
}
#left {
background-color: #A26475;
}
#middle {
background-color: #824555;
}Dla bloku prawego: kolor tła #A26470, szerokość 40%, wysokość 350 px, paski przewijania widoczne jedynie, gdy treść nie mieści się w bloku.
„Tylko gdy treść się nie mieści” to overflow: auto (R.4.10). Słowniczek jest dłuższy niż 350 px, więc pasek się pojawi. 30% + 30% + 40% = 100%.
styl.css CSS zmienione: 6 linii body {
font-family: Georgia;
color: white;
}
header, footer {
background-color: #824555;
text-align: center;
padding: 20px;
}
#left, #middle {
width: 30%;
height: 350px;
}
#left {
background-color: #A26475;
}
#middle {
background-color: #824555;
}
#right {
background-color: #A26470;
width: 40%;
height: 350px;
overflow: auto;
}Dla obrazu: oblewanie tekstem z prawej strony (obraz po lewej stronie), szerokość 50 px.
float: left - animacja przy lewej krawędzi nagłówka, a tytuł obok niej (R.4.4, R.4.7).
styl.css CSS zmienione: 4 linie body {
font-family: Georgia;
color: white;
}
header, footer {
background-color: #824555;
text-align: center;
padding: 20px;
}
#left, #middle {
width: 30%;
height: 350px;
}
#left {
background-color: #A26475;
}
#middle {
background-color: #824555;
}
#right {
background-color: #A26470;
width: 40%;
height: 350px;
overflow: auto;
}
img {
float: left;
width: 50px;
}Wspólne dla selektorów tabeli, paragrafu oraz terminu listy definicji: marginesy zewnętrzne 10 px. Dodatkowo dla terminu listy definicji: górny margines wewnętrzny 20 px. Wspólne dla komórki i komórki nagłówkowej tabeli: obramowanie linią ciągłą o grubości 3 px, koloru #824555, margines wewnętrzny 5 px.
Selektory znaczników table, p, dt, jak wymaga uwaga arkusza. Ramka 3 px w kolorze nagłówka daje „wytłoczone” komórki z ilustracji 4 (R.4.5, R.4.6, R.4.8).
styl.css CSS zmienione: 10 linii body {
font-family: Georgia;
color: white;
}
header, footer {
background-color: #824555;
text-align: center;
padding: 20px;
}
#left, #middle {
width: 30%;
height: 350px;
}
#left {
background-color: #A26475;
}
#middle {
background-color: #824555;
}
#right {
background-color: #A26470;
width: 40%;
height: 350px;
overflow: auto;
}
img {
float: left;
width: 50px;
}
table, p, dt {
margin: 10px;
}
dt {
padding-top: 20px;
}
td, th {
border: 3px solid #824555;
padding: 5px;
}Poniżej trzy bloki umieszczone obok siebie, na dole stopka. Podział zrealizowany tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 3.
float: left dla sekcji, clear: both dla stopki (R.3.1).
styl.css CSS zmienione: 6 linii body {
font-family: Georgia;
color: white;
}
header, footer {
background-color: #824555;
text-align: center;
padding: 20px;
}
#left, #middle {
width: 30%;
height: 350px;
}
#left {
background-color: #A26475;
}
#middle {
background-color: #824555;
}
#right {
background-color: #A26470;
width: 40%;
height: 350px;
overflow: auto;
}
img {
float: left;
width: 50px;
}
table, p, dt {
margin: 10px;
}
dt {
padding-top: 20px;
}
td, th {
border: 3px solid #824555;
padding: 5px;
}
section {
float: left;
}
footer {
clear: both;
}Kroki 28-33 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wykonywany po stronie przeglądarki.
Skrypt na końcu <body>; funkcja o nazwie z onclick: convert (przelicz).
systemy.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
}
</script>
</body>
</html>Wartość, w postaci liczby dziesiętnej, pobraną z pola edycyjnego, przekształca na system binarny.
Kroki K1 i K2 algorytmu z arkusza: odczyt liczby (Number() zamienia tekst z pola na liczbę) i pusty napis na cyfry binarne (R.5.2).
systemy.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
let decimal = Number(document.getElementById("decimal").value);
let binary = "";
}
</script>
</body>
</html>Przykład algorytmu zamiany liczby dziesiętnej na binarną: K3: B przypisz L mod 2. K4: L = L / 2 (zaokrąglona do niższej całkowitej). K5: Jeśli L = 0 idź do K6; w przeciwnym razie idź do K3.
decimal % 2 - reszta z dzielenia przez 2 (0 albo 1) to kolejna cyfra binarna; dopisujesz ją na koniec napisu,Math.floor(decimal / 2) - dzielenie z zaokrągleniem w dół (tabela 1 arkusza),do ... while wykonuje się co najmniej raz - dzięki temu liczba 0 da cyfrę „0” - i powtarza, dopóki liczba nie spadnie do zera.Dla 537 cyfry wychodzą w kolejności 1, 0, 0, 1, 1, 0, 0, 0, 0, 1 - od najmniej znaczącej (R.5.3).
systemy.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
let decimal = Number(document.getElementById("decimal").value);
let binary = "";
do {
binary = binary + (decimal % 2);
decimal = Math.floor(decimal / 2);
} while (decimal != 0);
}
</script>
</body>
</html>K6: Odwróć napis B tak że ostatnia cyfra staje się pierwszą itd. wypisz B.
Reszty zostały zapisane od końca, więc napis trzeba odwrócić: split("") dzieli go na tablicę znaków, reverse() odwraca tablicę, join("") skleja z powrotem. 537 → 1000011001 (R.5.3).
systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
let decimal = Number(document.getElementById("decimal").value);
let binary = "";
do {
binary = binary + (decimal % 2);
decimal = Math.floor(decimal / 2);
} while (decimal != 0);
binary = binary.split("").reverse().join("");
}
</script>
</body>
</html>Liczba binarna jest rozdzielona spacją na części (co cztery cyfry począwszy od prawej strony).
Przepisz cyfry do nowego napisu grouped; przed cyfrą wstaw spację wtedy, gdy liczba cyfr na prawo od niej (binary.length - i) jest wielokrotnością 4. Dzięki temu grupy liczą się od prawej, a niepełna grupa zostaje z lewej: 1000011001 → 10 0001 1001 (R.5.5).
Liczenie grup od lewej (i % 4 == 0) daje 1000 0110 01 - klucz wymaga podziału od prawej strony.
systemy.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
let decimal = Number(document.getElementById("decimal").value);
let binary = "";
do {
binary = binary + (decimal % 2);
decimal = Math.floor(decimal / 2);
} while (decimal != 0);
binary = binary.split("").reverse().join("");
let grouped = "";
for (let i = 0; i < binary.length; i++) {
if (i > 0 && (binary.length - i) % 4 == 0) {
grouped = grouped + " ";
}
grouped = grouped + binary[i];
}
}
</script>
</body>
</html>Wyświetla w paragrafie pod przyciskiem obliczoną liczbę binarną. Liczba binarna jest zakończona oznaczeniem kodu w postaci tekstu „(2)”, zapisanym w indeksie dolnym.
Wynik wpisujesz do akapitu result przez innerHTML - tu jest to konieczne, bo dopisujesz znacznik <sub> (indeks dolny). Wpisz w podglądzie 537 i kliknij: „10 0001 1001₍₂₎” - jak na ilustracji 5 (R.5.4, R.5.6, R.5.7).
systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button onclick="convert()">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
let decimal = Number(document.getElementById("decimal").value);
let binary = "";
do {
binary = binary + (decimal % 2);
decimal = Math.floor(decimal / 2);
} while (decimal != 0);
binary = binary.split("").reverse().join("");
let grouped = "";
for (let i = 0; i < binary.length; i++) {
if (i > 0 && (binary.length - i) % 4 == 0) {
grouped = grouped + " ";
}
grouped = grouped + binary[i];
}
document.getElementById("result").innerHTML = grouped + "<sub>(2)</sub>";
}
</script>
</body>
</html>Krok 34 · po tym etapie masz 40 z 40 kryteriów (pkt)
Przycisk o treści „Przelicz na binarny”, jego wciśnięcie uruchamia skrypt.
Wersja z egzaminu ma dwie słabości. Puste pole daje „0₍₂₎”, a liczba ujemna zawiesza kartę przeglądarki: dla -5 Math.floor(-5 / 2) daje -3, potem -2, -1, -1, -1… - liczba nigdy nie dochodzi do zera i pętla kręci się bez końca (sprawdzone przy testowaniu tego rozwiązania). Dlatego w prawdziwym projekcie:
decimal.toString(2) - JavaScript zamienia liczbę na zapis binarny sam (algorytm z arkusza warto znać, ale w kodzie produkcyjnym nie piszesz go ręcznie),textContent + createElement("sub") zamiast innerHTML i addEventListener zamiast onclick.Na egzaminie wystarczy wersja wcześniejsza - klucz sprawdza algorytm, podział i indeks dolny, a nie walidację.
systemy.html HTML zmienione: 15 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<section id="left">
<table>
<tr>
<th>HEX</th>
<th>BIN</th>
<th>DEC</th>
</tr>
<tr>
<td>A</td>
<td>1010</td>
<td>10</td>
</tr>
<tr>
<td>B</td>
<td>1011</td>
<td>11</td>
</tr>
<tr>
<td>C</td>
<td>1100</td>
<td>12</td>
</tr>
<tr>
<td>D</td>
<td>1101</td>
<td>13</td>
</tr>
<tr>
<td>E</td>
<td>1110</td>
<td>14</td>
</tr>
<tr>
<td>F</td>
<td>1111</td>
<td>15</td>
</tr>
</table>
</section>
<section id="middle">
<input type="number" id="decimal" placeholder="Wpisz liczbę dziesiętną">
<button id="convert">Przelicz na binarny</button>
<p id="result">Brak obliczeń</p>
</section>
<section id="right">
<h2>Słowniczek</h2>
<dl>
<dt>Binarny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 2, a do zapisu liczb potrzebne są tylko dwie cyfry: 0 i 1.</dd>
<dt>Decymalny</dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 10; do zapisu liczb stosuje się 10 cyfr: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9.</dd>
<dt><a href="https://szesnastkowy_system_liczbowy.pl">Heksadecymalny</a></dt>
<dd>pozycyjny system liczbowy, w którym podstawą jest liczba 16. Do zapisu liczb w tym systemie potrzebne jest szesnaście znaków.</dd>
</dl>
</section>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
function convert() {
let value = document.getElementById("decimal").value;
let decimal = Number(value);
let result = document.getElementById("result");
if (value === "" || !Number.isInteger(decimal) || decimal < 0) {
result.textContent = "Wpisz liczbę całkowitą nieujemną.";
return;
}
let binary = decimal.toString(2);
let grouped = binary.replace(/\B(?=(\d{4})+$)/g, " ");
result.textContent = grouped;
let sub = document.createElement("sub");
sub.textContent = "(2)";
result.appendChild(sub);
}
document.getElementById("convert").addEventListener("click", convert);
</script>
</body>
</html>Krok 35 · po tym etapie masz 40 z 40 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. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki.
W folderze: systemy.html, styl.css, kwerendy.txt, import.png, kw1.png - kw4.png, 2.png, cyfry.gif, parametry_animacji.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 34.
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.