To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza szachy z czterema zapytaniami, grafika 2.png, animacja cyfry.gif i strona systemy.html z tabelą, słowniczkiem i kalkulatorem liczb binarnych - i tak samo spełnia każde kryterium klucza. Inna jest droga:
<main> z kolumnami 30% 30% 40% w grid-template-columns (klucz R.4.4 przyjmuje je wprost) zamiast float: left i clear: both, kolory z arkusza w zmiennych CSS,skrypt.js z atrybutem defer i obsługą kliknięcia przez addEventListener - HTML nie zawiera kodu JavaScript,toString(2) do zamiany i czytelna funkcja groupByFour() do podziału na grupy, a wynik budowany przez textContent i createElement zamiast innerHTML,Algorytm z arkusza (reszty z dzielenia przez 2) jest rozpisany krok po kroku w wersji podstawowej - tu jest objaśniony przy funkcji, która go zastępuje. Na końcu krótkie porównanie obu wersji. Baza i obrazy pochodzą z prawdziwego archiwum pliki14, zapytania zostały wykonane na tej bazie w MariaDB z XAMPP-a, a działanie skryptu sprawdzone w przeglądarce Chrome.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania to 75%, czyli 30 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
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).
Archiwum pliki14.7z rozpakuj hasłem Cyf3rki# do folderu z numerem zdającego: szachy.sql, szesnaście obrazów cyfr (0.png - F.png i 2a.png do przerobienia) oraz systemy.txt z tekstem słowniczka. W phpMyAdmin Nowa → szachy, porównywanie utf8_unicode_ci, albo:
CREATE DATABASE szachy CHARACTER SET utf8 COLLATE 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 napis), data zdobycia tytułu w kolumnie typu DATE, 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.
Cały ekran z paskiem zadań, zapis jako import.png - w tym arkuszu 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.
„Lipiec 2020” jako zakres dat: BETWEEN '2020-07-01' AND '2020-07-31' (obie granice włącznie). Klucz przyjmuje też LIKE "2020-07%", ale wzorzec tekstowy zamienia każdą datę na napis przed porównaniem - przy dużej tabeli baza nie użyje wtedy indeksu na kolumnie daty, a przy zakresie może. Napisy w SQL w apostrofach - to standard, cudzysłów działa tylko w MySQL i MariaDB.
Wynik: Hiikar, BananD, WanHao - jak w kluczu. Zapytania zapisuj w kwerendy.txt, zrzut jako kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT pseudonim
FROM zawodnicy
WHERE data_zdobycia BETWEEN '2020-07-01' AND '2020-07-31';
Zapytanie 2: wybierające jedynie pseudonimy i tytuły zawodników z klasy 3A który zdobyli dowolny, niepusty tytuł.
Dwa warunki łączy AND, każdy w osobnej linii. „Niepusty tytuł” to tytul <> '' (<> to standardowy zapis „różne od”, != też działa). W tej bazie brak tytułu to pusty napis, nie NULL (pustych napisów jest 64, wartości NULL - 0), dlatego klucz uznaje tytul IS NOT NULL za błąd. 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: 6 linii -- Zapytanie 1
SELECT pseudonim
FROM zawodnicy
WHERE data_zdobycia BETWEEN '2020-07-01' AND '2020-07-31';
-- 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 ASC - kierunek zapisany jawnie, choć rosnący jest domyślny: czytający od razu widzi, że chodziło o najniższe wartości. LIMIT 10 działa na wynik już posortowany, więc stoi na końcu. Klucz przyjmuje sortowanie w obie strony - ważne, żeby wierszy było dokładnie 10. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT pseudonim
FROM zawodnicy
WHERE data_zdobycia BETWEEN '2020-07-01' AND '2020-07-31';
-- Zapytanie 2
SELECT pseudonim, tytul
FROM zawodnicy
WHERE klasa = '3A'
AND tytul <> '';
-- Zapytanie 3
SELECT pseudonim, klasa, ranking
FROM zawodnicy
ORDER BY ranking ASC
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, a CURDATE() daje dzisiejszą datę (tabela 3 arkusza). AS dni nadaje kolumnie nazwę. Wynik: 30 wierszy, pierwszy Hiikar, 2020-07-12; liczba dni zależy od dnia uruchomienia - przy zrzucie z 2026-10-02: 2273. Zrzut: kw4.png.
DATEDIFF(data_zdobycia, CURDATE()) daje liczby ujemne - pierwszym argumentem jest data późniejsza.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT pseudonim
FROM zawodnicy
WHERE data_zdobycia BETWEEN '2020-07-01' AND '2020-07-31';
-- Zapytanie 2
SELECT pseudonim, tytul
FROM zawodnicy
WHERE klasa = '3A'
AND tytul <> '';
-- Zapytanie 3
SELECT pseudonim, klasa, ranking
FROM zawodnicy
ORDER BY ranking ASC
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.
Grafika jest taka sama w obu wersjach. 2a.png to czerwona, odwrócona dwójka na żółtym tle. W GIMP-ie:
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. Zrzut musi obejmować cały obszar ekranu z widocznym paskiem zadań.
Plik → Otwórz jako warstwy - 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:
Zrzut okna eksportu z całego ekranu: parametry_animacji.png (R.2.1).
Bez trybu „zastąp” klatki nakładają się na siebie - na przezroczystym tle widać wtedy wszystkie cyfry naraz.
Kroki 10-17 · po tym etapie masz 21 z 40 kryteriów (pkt)
Cechy witryny: Składa się ze strony o nazwie systemy.html. Zapisana w języku HTML5. Zadeklarowany polski język zawartości witryny. Jawnie zastosowany właściwy standard kodowania polskich znaków.
Szkielet od razu z lang="pl" i <meta charset="UTF-8"> jako pierwszym elementem <head> (R.2.3). Strona działa w samej przeglądarce - skrypt też jest po stronie przeglądarki, więc serwer nie jest potrzebny.
systemy.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Systemy liczbowe”. Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.
<title> (R.2.3), <link> do styl.css (R.3.2) i viewport dla telefonów.
systemy.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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> i <footer> (R.2.4). Sekcje są opakowane w <main> - to główna treść strony, a przy okazji wspólny rodzic, w którym CSS ustawi siatkę trzech kolumn.
Identyfikatory od treści, nie od położenia: digits (tabela cyfr), converter (kalkulator), glossary (słowniczek). Nazwa left przestałaby pasować, gdyby na telefonie sekcje stanęły jedna pod drugą.
systemy.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
<section id="digits">
</section>
<section id="converter">
</section>
<section id="glossary">
</section>
</main>
<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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<main>
<section id="digits">
</section>
<section id="converter">
</section>
<section id="glossary">
</section>
</main>
<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). Klucz liczy dokładnie <table>, <tr>, <td> i <th> - bez <thead>, żeby nie zgubić prostoty siedmiu wierszy z ilustracji.
systemy.html HTML zmienione: 37 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<main>
<section id="digits">
<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="converter">
</section>
<section id="glossary">
</section>
</main>
<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 - szara podpowiedź (R.3.5); min="0" i step="1" mówią przeglądarce, że chodzi o liczby całkowite nieujemne (strzałki pola nie zejdą poniżej zera),aria-label - pole nie ma widocznej etykiety, więc czytnik ekranu dostaje jej nazwę z atrybutu (podpowiedź znika po wpisaniu, więc etykietą nie jest),id="convert" i type="button" - zwykły przycisk, nie wysyła żadnego formularza; kliknięcie podłączy skrypt (R.2.10),result z aria-live="polite" - czytnik ekranu przeczyta nowy wynik, gdy skrypt go wpisze.Brak atrybutu onclick jest celowy: obsługę kliknięcia doda plik skrypt.js.
systemy.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<main>
<section id="digits">
<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="converter">
<input type="number" id="decimal" min="0" step="1" placeholder="Wpisz liczbę dziesiętną" aria-label="Liczba dziesiętna">
<button type="button" id="convert">Przelicz na binarny</button>
<p id="result" aria-live="polite">Brak obliczeń</p>
</section>
<section id="glossary">
</section>
</main>
<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 <dl>: termin w <dt>, objaśnienie w <dd> tuż pod nim. Tekst z systemy.txt. Termin „Heksadecymalny” owija odnośnik <a> wewnątrz <dt> - termin zostaje terminem, a jego treść jest klikalna (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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<main>
<section id="digits">
<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="converter">
<input type="number" id="decimal" min="0" step="1" placeholder="Wpisz liczbę dziesiętną" aria-label="Liczba dziesiętna">
<button type="button" id="convert">Przelicz na binarny</button>
<p id="result" aria-live="polite">Brak obliczeń</p>
</section>
<section id="glossary">
<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>
</main>
<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ą.
Semantyczne uwypuklenie zapisywane kursywą to <em> (emphasis); <i> daje tylko kursywę bez znaczenia, a 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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<main>
<section id="digits">
<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="converter">
<input type="number" id="decimal" min="0" step="1" placeholder="Wpisz liczbę dziesiętną" aria-label="Liczba dziesiętna">
<button type="button" id="convert">Przelicz na binarny</button>
<p id="result" aria-live="polite">Brak obliczeń</p>
</section>
<section id="glossary">
<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>
</main>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Kroki 18-23 · po tym etapie masz 32 z 40 kryteriów (pkt)
Dla ciała strony: krój czcionki Georgia, biały kolor czcionki.
Trzy kolory tła z arkusza jako zmienne CSS w :root - śliwkowy #824555 wraca w nagłówku, stopce, bloku środkowym i ramkach tabeli. Dwa różowe różnią się tylko ostatnią cyfrą (…75 i …70), więc nazwy zmiennych chronią przed pomyłką przy przepisywaniu. Potem body: Georgia i biały tekst (R.4.1) - na razie niewidoczny na białym tle.
styl.css CSS nowy plik :root {
--plum: #824555;
--rose: #A26475;
--rose-light: #A26470;
}
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, każdy w osobnej linii (R.4.2, R.4.5, R.4.9).
styl.css CSS zmienione: 7 linii :root {
--plum: #824555;
--rose: #A26475;
--rose-light: #A26470;
}
body {
font-family: Georgia;
color: white;
}
header,
footer {
background-color: var(--plum);
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.
Blok główny staje się siatką o trzech kolumnach: grid-template-columns: 30% 30% 40% to szerokości bloków lewego, środkowego i prawego naraz - klucz R.4.4 przyjmuje je zapisane właśnie tu. Sekcje wpadają do kolumn w kolejności z HTML-u, obok siebie, bez float i bez clear w stopce (R.3.1).
Wysokość 350 px dla wszystkich sekcji w main (main section) - arkusz podaje ją dla lewego i środkowego, a w następnym kroku tę samą dla prawego (R.4.3). Kolory tła z dwóch zmiennych (R.4.2).
width: 30% dopisane do sekcji w siatce 30% 30% 40% zwęża je do 9% strony - procent szerokości elementu siatki liczy się od jego kolumny.
styl.css CSS zmienione: 17 linii :root {
--plum: #824555;
--rose: #A26475;
--rose-light: #A26470;
}
body {
font-family: Georgia;
color: white;
}
header,
footer {
background-color: var(--plum);
text-align: center;
padding: 20px;
}
main {
display: grid;
grid-template-columns: 30% 30% 40%;
}
main section {
height: 350px;
}
#digits {
background-color: var(--rose);
}
#converter {
background-color: var(--plum);
}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. Szerokość 40% stoi w trzeciej kolumnie siatki, a wysokość 350 px w regule main section (R.4.2, R.4.3, R.4.4).
styl.css CSS zmienione: 5 linii :root {
--plum: #824555;
--rose: #A26475;
--rose-light: #A26470;
}
body {
font-family: Georgia;
color: white;
}
header,
footer {
background-color: var(--plum);
text-align: center;
padding: 20px;
}
main {
display: grid;
grid-template-columns: 30% 30% 40%;
}
main section {
height: 350px;
}
#digits {
background-color: var(--rose);
}
#converter {
background-color: var(--plum);
}
#glossary {
background-color: var(--rose-light);
overflow: auto;
}Dla obrazu: oblewanie tekstem z prawej strony (obraz po lewej stronie), szerokość 50 px.
Tu siatka nie zastąpi float: klucz R.4.7 ocenia wprost float: left - i to jest właściwe narzędzie, bo chodzi o oblewanie tekstem (tytuł opływa animację z prawej), do czego float powstał (R.4.4, R.4.7).
styl.css CSS zmienione: 5 linii :root {
--plum: #824555;
--rose: #A26475;
--rose-light: #A26470;
}
body {
font-family: Georgia;
color: white;
}
header,
footer {
background-color: var(--plum);
text-align: center;
padding: 20px;
}
main {
display: grid;
grid-template-columns: 30% 30% 40%;
}
main section {
height: 350px;
}
#digits {
background-color: var(--rose);
}
#converter {
background-color: var(--plum);
}
#glossary {
background-color: var(--rose-light);
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 - uwaga arkusza wymaga ich dla tych trzech elementów (R.4.6). Ramka komórek w śliwkowym kolorze nagłówka z tej samej zmiennej (R.4.5, R.4.8).
styl.css CSS zmienione: 16 linii :root {
--plum: #824555;
--rose: #A26475;
--rose-light: #A26470;
}
body {
font-family: Georgia;
color: white;
}
header,
footer {
background-color: var(--plum);
text-align: center;
padding: 20px;
}
main {
display: grid;
grid-template-columns: 30% 30% 40%;
}
main section {
height: 350px;
}
#digits {
background-color: var(--rose);
}
#converter {
background-color: var(--plum);
}
#glossary {
background-color: var(--rose-light);
overflow: auto;
}
img {
float: left;
width: 50px;
}
table,
p,
dt {
margin: 10px;
}
dt {
padding-top: 20px;
}
td,
th {
border: 3px solid var(--plum);
padding: 5px;
}Kroki 24-28 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wykonywany po stronie przeglądarki. Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim.
Skrypt w osobnym pliku skrypt.js, dołączony w <head> z atrybutem defer: przeglądarka pobiera go równolegle ze stroną, a uruchamia dopiero po zbudowaniu całego HTML-u - dlatego getElementById znajdzie pole i przycisk, choć skrypt stoi wyżej niż one (R.5.1).
const - elementy strony nie zmienią się, więc stałe zamiast let,valueAsNumber - wartość pola od razu jako liczba (puste pole daje NaN, a nie zero jak Number("")) (R.5.2),addEventListener('click', convert) - kliknięcie uruchamia funkcję convert; klucz R.3.6 przyjmuje obsługę zdarzenia zapisaną w skrypcie tak samo jak onclick w HTML-u (R.3.6).Nazwy po angielsku mówią, co przechowują (R.5.7). Funkcja na razie tylko odczytuje liczbę.
skrypt.js JavaScript nowy plik const decimalInput = document.getElementById('decimal');
const result = document.getElementById('result');
function convert() {
const value = decimalInput.valueAsNumber;
}
document.getElementById('convert').addEventListener('click', convert);systemy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Systemy liczbowe</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<img src="cyfry.gif" alt="Cyfry szesnastkowe">
<h1>Pozycyjne systemy liczbowe</h1>
</header>
<main>
<section id="digits">
<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="converter">
<input type="number" id="decimal" min="0" step="1" placeholder="Wpisz liczbę dziesiętną" aria-label="Liczba dziesiętna">
<button type="button" id="convert">Przelicz na binarny</button>
<p id="result" aria-live="polite">Brak obliczeń</p>
</section>
<section id="glossary">
<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>
</main>
<footer>
<p>Stronę opracował: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Wartość, w postaci liczby dziesiętnej, pobraną z pola edycyjnego, przekształca na system binarny.
Zanim cokolwiek się przeliczy, skrypt sprawdza, czy ma co przeliczać. Number.isSafeInteger(value) odrzuca NaN (puste pole), ułamki i liczby większe niż 2⁵³ - 1, przy których JavaScript traci dokładność; value < 0 odrzuca liczby ujemne. Wtedy komunikat w akapicie i return kończy funkcję.
To nie jest ozdoba: w wersji podstawowej liczba ujemna zawiesza kartę przeglądarki (Math.floor(-1 / 2) daje -1, więc pętla nigdy nie dochodzi do zera), a puste pole daje wynik „0”.
skrypt.js JavaScript zmienione: 5 linii const decimalInput = document.getElementById('decimal');
const result = document.getElementById('result');
function convert() {
const value = decimalInput.valueAsNumber;
if (!Number.isSafeInteger(value) || value < 0) {
result.textContent = 'Wpisz liczbę całkowitą nieujemną.';
return;
}
}
document.getElementById('convert').addEventListener('click', convert);Wartość, w postaci liczby dziesiętnej, pobraną z pola edycyjnego, przekształca na system binarny.
value.toString(2) zapisuje liczbę w systemie o podstawie 2 - argument to podstawa (16 dałoby zapis szesnastkowy). Robi dokładnie to, co algorytm K1 - K6 z arkusza: dzieli przez 2, zbiera reszty i odwraca ich kolejność. Dla 537: reszty 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, po odwróceniu 1000011001 (R.5.3).
Klucz ocenia, czy skrypt przelicza liczbę, a nie którą metodą - algorytm w arkuszu jest podpisany „Przykład algorytmu”. Kto woli pokazać go na egzaminie, ma go rozpisanego w wersji podstawowej.
skrypt.js JavaScript zmienione: 2 linie const decimalInput = document.getElementById('decimal');
const result = document.getElementById('result');
function convert() {
const value = decimalInput.valueAsNumber;
if (!Number.isSafeInteger(value) || value < 0) {
result.textContent = 'Wpisz liczbę całkowitą nieujemną.';
return;
}
const binary = value.toString(2);
}
document.getElementById('convert').addEventListener('click', convert);Liczba binarna jest rozdzielona spacją na części (co cztery cyfry począwszy od prawej strony).
Funkcja groupByFour(digits) tnie napis od końca: end zaczyna się na długości napisu i co obrót cofa się o 4, a slice(Math.max(0, end - 4), end) wycina ostatnie cztery cyfry (albo resztę z lewej, gdy zostało ich mniej). unshift wstawia każdą grupę na początek tablicy, więc kolejność zostaje właściwa, a join(' ') skleja grupy spacjami: 1000011001 → 10 0001 1001 (R.5.5).
Osobna funkcja z nazwą mówiącą, co robi, da się sprawdzić niezależnie od strony - np. w konsoli przeglądarki: groupByFour('11111111') daje 1111 1111.
Grupowanie od lewej daje 1000 0110 01 - klucz wymaga podziału od prawej strony.
skrypt.js JavaScript zmienione: 8 linii const decimalInput = document.getElementById('decimal');
const result = document.getElementById('result');
function groupByFour(digits) {
const groups = [];
for (let end = digits.length; end > 0; end -= 4) {
groups.unshift(digits.slice(Math.max(0, end - 4), end));
}
return groups.join(' ');
}
function convert() {
const value = decimalInput.valueAsNumber;
if (!Number.isSafeInteger(value) || value < 0) {
result.textContent = 'Wpisz liczbę całkowitą nieujemną.';
return;
}
const binary = value.toString(2);
}
document.getElementById('convert').addEventListener('click', convert);Wyświetla w paragrafie pod przyciskiem obliczoną liczbę binarną. Liczba binarna jest zakończona oznaczeniem kodu w postaci tekstu „(2)”, zapisanym w indeksie dolnym.
Indeks dolny to znacznik <sub> - skrypt tworzy go przez document.createElement('sub') i wpisuje mu tekst (2) przez textContent. Potem result.replaceChildren(...) zastępuje całą zawartość akapitu dwoma elementami: tekstem z grupami i indeksem (R.5.4, R.5.6).
Bez innerHTML żaden tekst nie jest czytany jako HTML - tu dane pochodzą z pola liczbowego, więc ryzyka nie ma, ale nawyk chroni tam, gdzie tekst wpisuje użytkownik. Sprawdzone w Chrome: 537 → „10 0001 1001₍₂₎” jak na ilustracji 5, 0 → „0₍₂₎”, 255 → „1111 1111₍₂₎”, a puste pole, -5 i 2.5 → komunikat. Wpisz liczbę w podglądzie i kliknij przycisk.
skrypt.js JavaScript zmienione: 3 linie const decimalInput = document.getElementById('decimal');
const result = document.getElementById('result');
function groupByFour(digits) {
const groups = [];
for (let end = digits.length; end > 0; end -= 4) {
groups.unshift(digits.slice(Math.max(0, end - 4), end));
}
return groups.join(' ');
}
function convert() {
const value = decimalInput.valueAsNumber;
if (!Number.isSafeInteger(value) || value < 0) {
result.textContent = 'Wpisz liczbę całkowitą nieujemną.';
return;
}
const binary = value.toString(2);
const base = document.createElement('sub');
base.textContent = '(2)';
result.replaceChildren(groupByFour(binary), base);
}
document.getElementById('convert').addEventListener('click', convert);Krok 29 · po tym etapie masz 40 z 40 kryteriów (pkt)
Obie wersje dają komplet 40 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| układ | float: left w sekcjach + clear: both w stopce | <main> z siatką 30% 30% 40% |
| kolory | wpisane w każdej regule | zmienne CSS w :root |
| skrypt | <script> na końcu <body>, onclick w przycisku | skrypt.js z defer, addEventListener |
| zamiana | algorytm K1 - K6: pętla z resztą z dzielenia i odwrócenie napisu | toString(2) |
| grupy | pętla z warunkiem na liczbę cyfr po prawej | funkcja groupByFour() tnąca od końca |
| wynik | innerHTML z <sub> w napisie | createElement + replaceChildren |
| złe dane | -5 zawiesza kartę, puste pole daje „0” | komunikat |
Na egzaminie wersja podstawowa pokazuje egzaminatorowi algorytm z arkusza krok po kroku - jeśli skrypt nie zadziała, kryteria R.5.x ocenia się w kodzie, a pętla z resztą z dzielenia jest wtedy czytelna. Nowoczesna jest krótsza i odporna na złe dane, ale wymaga pewności, że toString(2), valueAsNumber i replaceChildren się pamięta.
Podgląd strony bez zmian - taki jak po kroku 28.
Krok 30 · 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. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego, powinny znajdować się pliki: 2.png, cyfry.gif, import.png, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, parametry_animacji.png, przeglądarka.txt, styl.css, systemy.html, ewentualnie inne przygotowane pliki.
Do listy z arkusza dochodzi skrypt.js - bez niego kalkulator nie działa („ewentualnie inne przygotowane pliki”). W przeglądarka.txt wpisz nazwę przeglądarki, nagraj płytę i sprawdź jej odczyt.
Płyta bez skrypt.js - strona się otworzy, ale przycisk nic nie zrobi, a kryteria R.5.x egzaminator oceni tylko w kodzie, którego nie ma.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 28.
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.