To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza malarz z czterema zapytaniami, grafika 300 × 300 px z pikselizacją, strony mieszamy.html i cena.html z arkuszem stylów styl_1.css i kalkulatorem farby - i tak samo spełnia każde kryterium klucza. Inna jest droga:
float: cały układ opisuje jedna reguła dla <body> - kolumny 25%, 50% i 25% oraz nazwane obszary (grid-template-areas), bez clear przy stopce,<nav>, blok środkowy w <main>, obraz w <aside>, a kolory z arkusza w zmiennych CSS,cena.js, podpięty słuchaczem zdarzenia zamiast atrybutu onclick, ze sprawdzeniem wpisanej powierzchni i wynikiem wpisywanym jako zwykły tekst.Na końcu krótkie porównanie z wersją podstawową (zakładka obok). Baza i grafika pochodzą z prawdziwego archiwum zad1, zapytania są policzone na MariaDB 10.4, a kalkulator w podglądzie działa naprawdę - wpisz powierzchnię i kliknij „Policz”.
Jak liczą się punkty. Klucz ma 36 kryteriów (R.1.1 - R.5.5), każde za 1 punkt. Próg zdania to 75%, czyli 27 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 6 z 36 kryteriów (pkt)
Utwórz bazę danych o nazwie malarz.
Rozpakuj zad1.zip z pulpitu (hasło 2ws3ed!#) do folderu z numerem zdającego: malarz.sql i obraz.png. W phpMyAdmin Nowa → malarz albo zapytaniem:
CREATE DATABASE malarz CHARACTER SET utf8mb4 COLLATE utf8mb4_polish_ci;
Arkusz nie podaje porównywania, więc wybór należy do Ciebie. Tabele z malarz.sql mają zestaw utf8mb4 zapisany we własnej definicji, więc ustawienie bazy ich nie zmienia.
Do bazy malarz zaimportuj tabele z pliku malarz.sql z rozpakowanego archiwum.
Zaznaczona baza malarz, Import → malarz.sql → Wykonaj. Dwie tabele z obrazu 1 w relacji 1..n przez pole id_farby: farby (7 kolorów, cena puszki i pojemnosc w litrach) i malowanie (pomieszczenie, ściana, farba i liczba puszek). Kolor biały jest zapisany bez polskiej litery - „bialy”.
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij 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ń, w PNG, pod nazwą import. Zrzuty zapytań kw1 - kw4 będą już w JPEG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie cenę i pojemność czerwonej puszki farby.
Każda klauzula w osobnej linii - łatwiej przeczytać i poprawić, a phpMyAdmin wykona zapytanie tak samo. Tekst w apostrofach: w SQL to zapis standardowy, działający w każdym trybie serwera. Wynik: 30 i 3 - jak w kluczu. Zapytanie do kwerendy.txt, zrzut kw1.jpg.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT cena, pojemnosc
FROM farby
WHERE kolor = 'czerwony';
Zapytanie 2: wybierające jedynie kolor oraz cenę jednego litra farby, wyliczoną z pól cena i pojemnosc dla wszystkich farb. Cena jednego litra farby powinna być podpisana jako „cena jednostkowa”.
cena / pojemnosc - wyrażenie liczone osobno dla każdego wiersza,ROUND(..., 2) - cena to pieniądze, więc wystarczą grosze: 11.67 zamiast 11.6667 (klucz przyjmuje wynik „z zaokrągleniem lub bez”),`cena jednostkowa` - w MySQL i MariaDB to zapis nazwy kolumny; cudzysłów z przykładu w kluczu też zadziała.Wynik: biały 4.00, czerwony 10.00, niebieski 11.67, żółty 5.50, zielony 7.50, czarny 25.00, fioletowy 21.33. Zrzut: kw2.jpg.
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT cena, pojemnosc
FROM farby
WHERE kolor = 'czerwony';
-- Zapytanie 2
SELECT kolor, ROUND(cena / pojemnosc, 2) AS `cena jednostkowa`
FROM farby;
Zapytanie 3: wybierające jedynie nazwy kolorów farb i liczbę puszek dla pomieszczenia o identyfikatorze 3.
m i f - krótki przedrostek mówi, z której tabeli pochodzi każde pole,JOIN ... ON f.id_farby = m.id_farby - relacja z obrazu 1, zapisana przy złączeniu, a nie w WHERE,WHERE m.id_pomieszczenia = 3 - warunek z arkusza,ORDER BY m.id_sciany - wiersze w kolejności ścian; bez sortowania serwer może oddać je w dowolnej kolejności.Wynik: zielony 2 i czerwony 2 - jak w kluczu. Zrzut: kw3.jpg.
ON id_farby = id_farby bez przedrostków kończy się błędem „column is ambiguous” - pole o tej nazwie jest w obu tabelach.
kwerendy.txt Tekst zmienione: 7 linii -- Zapytanie 1
SELECT cena, pojemnosc
FROM farby
WHERE kolor = 'czerwony';
-- Zapytanie 2
SELECT kolor, ROUND(cena / pojemnosc, 2) AS `cena jednostkowa`
FROM farby;
-- Zapytanie 3
SELECT f.kolor, m.liczba_puszek
FROM malowanie AS m
JOIN farby AS f ON f.id_farby = m.id_farby
WHERE m.id_pomieszczenia = 3
ORDER BY m.id_sciany;
Zapytanie 4: tworzące widok (perspektywę) o nazwie pomieszczenie1, w którym znajdują się jedynie pola id_sciany, id_farby, liczba_puszek dla pomieszczenia o id równym 1. Aby udokumentować poprawność wykonania zapytania na zrzucie ekranu o nazwie kw4 powinien znajdować się otwarty widok pomieszczenie1 z drzewa Widoki.
Widok to zapytanie zapisane pod nazwą: w bazie wygląda jak tabela, ale danych nie kopiuje - przy każdym otwarciu wykonuje swoje SELECT od nowa. CREATE OR REPLACE VIEW tworzy widok, a gdy już istnieje - podmienia go; drugie wykonanie nie kończy się błędem, więc poprawkę w zapytaniu wystarczy wykonać jeszcze raz (sprawdzone dwukrotnym wykonaniem na bazie z archiwum).
Widok pojawia się w lewym drzewie phpMyAdmina w gałęzi Widoki; otwórz go i zrób zrzut kw4.jpg z czterema wierszami: 1, 1, 3; 2, 3, 2; 3, 1, 3; 4, 1, 2.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT cena, pojemnosc
FROM farby
WHERE kolor = 'czerwony';
-- Zapytanie 2
SELECT kolor, ROUND(cena / pojemnosc, 2) AS `cena jednostkowa`
FROM farby;
-- Zapytanie 3
SELECT f.kolor, m.liczba_puszek
FROM malowanie AS m
JOIN farby AS f ON f.id_farby = m.id_farby
WHERE m.id_pomieszczenia = 3
ORDER BY m.id_sciany;
-- Zapytanie 4
CREATE OR REPLACE VIEW pomieszczenie1 AS
SELECT id_sciany, id_farby, liczba_puszek
FROM malowanie
WHERE id_pomieszczenia = 1;
Kroki 8-18 · po tym etapie masz 19 z 36 kryteriów (pkt)
Plik obraz.png należy przeskalować do rozmiarów 300 px na 300 px oraz zastosować filtr powodujący efekt pikselizacji, widoczny na obrazie 2.
Grafika jest taka sama jak w wersji podstawowej. Obraz ma 500 × 500 px: w GIMP-ie Obraz → Skaluj obraz do 300 × 300, potem Filtry → Rozmycie → Pikselizacja (tu bloki po 15 px) i Eksportuj jako obraz.png.
Cechy witryny: Składa się z podstron mieszamy.html i cena.html. Podstrony różnią się jedynie blokiem środkowym. Cechy wspólne obu podstron: Zapisane w języku HTML 5. Jawnie zastosowany właściwy standard kodowania polskich znaków. Zadeklarowany język witryny: polski.
Najpierw cała strona mieszamy.html, a cena.html powstanie z jej kopii. <!DOCTYPE html>, <html lang="pl"> i <meta charset="UTF-8"> jako pierwszy element <head> - razem R.2.2.
mieszamy.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: „malarz”.
<title>malarz</title> małą literą, jak w arkuszu (R.2.3), i viewport - telefon nie pomniejsza strony do szerokości ekranu komputera.
mieszamy.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>malarz</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl_1.css prawidłowo połączony z kodem strony.
Nazwa z podkreśleniem i cyfrą: styl_1.css. Całe formatowanie pochodzi z tego pliku - bez atrybutów style w HTML-u (R.3.5).
styl.css zamiast styl_1.css odcina wszystkie style - przepada R.3.5, a cały rezultat R.4 egzaminator ocenia wtedy już tylko w kodzie.
mieszamy.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>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
</body>
</html>Podział strony na bloki: na górze blok banera, poniżej trzy bloki: lewy, środkowy i prawy, na dole blok stopki. Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2.
Pięć znaczników sekcji HTML5, każdy mówi, co zawiera (R.2.4):
<header> - baner,<nav> - blok lewy, bo jest w nim menu z odnośnikami do podstron,<main> - blok środkowy, główna treść; tylko on różni się między podstronami,<aside> - blok prawy z obrazem, treść dodatkowa obok głównej,<footer> - stopka.Każdy znacznik występuje na stronie raz, więc nie potrzebuje identyfikatora - w CSS wystarczy jego nazwa.
mieszamy.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość banera: nagłówek pierwszego stopnia o treści: „Malowanie pokoi i biur”.
<h1> w <header>.
mieszamy.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>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: Nagłówek drugiego stopnia o treści: „Menu”. Lista punktowana (nieuporządkowana) z elementami: Odnośnik o treści: „Mieszamy”, prowadzący do strony mieszamy.html. Odnośnik o treści: „Wyceniamy” prowadzący do strony cena.html.
Lista <ul> z dwoma <li>, w każdym odnośnik do podstrony z tego samego folderu (R.2.6, R.3.2). aria-current="page" oznacza odnośnik do strony, na której uczeń właśnie jest - czytnik ekranu odczyta „bieżąca strona”, a w cena.html atrybut przejdzie na drugi odnośnik. W podglądzie kliknięcia są zablokowane.
mieszamy.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html" aria-current="page">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</nav>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: Obraz o nazwie obraz.png i tekście alternatywnym: „Próbki farb”.
Przetworzony obraz z tekstem alternatywnym z arkusza (R.2.7). Wymiarów nie podajesz w HTML-u - szerokość ustali arkusz stylów.
mieszamy.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>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html" aria-current="page">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</nav>
<main>
</main>
<aside>
<img src="obraz.png" alt="Próbki farb">
</aside>
<footer>
</footer>
</body>
</html>Zawartość stopki: nagłówek trzeciego stopnia o treści: „MALARZ”, paragraf (akapit) „Stronę opracował:”, dalej wstawiony numer zdającego.
<h3> i akapit. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL), tu stoi autor rozwiązania.
mieszamy.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>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html" aria-current="page">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</nav>
<main>
</main>
<aside>
<img src="obraz.png" alt="Próbki farb">
</aside>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość bloku środkowego podstrony mieszamy.html: nagłówek drugiego stopnia o treści: „Barwy i ich pochodne”, tabela o trzech kolumnach i trzech wierszach, której treść jest zgodna z obrazem 2. Pierwszy wiersz zawiera komórki nagłówkowe, z czego komórka pierwsza i druga są połączone.
<thead>, dane w <tbody> - przeglądarka i czytnik ekranu wiedzą, które wiersze opisują kolumny,colspan="2" (R.2.9), a scope mówi, że komórka nagłówkowa opisuje grupę kolumn (colgroup) albo jedną kolumnę (col),Strona ma już wszystkie nagłówki i akapit w stopce (R.2.5).
mieszamy.html HTML zmienione: 21 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html" aria-current="page">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</nav>
<main>
<h2>Barwy i ich pochodne</h2>
<table>
<thead>
<tr>
<th colspan="2" scope="colgroup">Składowe</th>
<th scope="col">Wynik</th>
</tr>
</thead>
<tbody>
<tr>
<td>żółty</td>
<td>czerwony</td>
<td>pomarańczowy</td>
</tr>
<tr>
<td>czerwony</td>
<td>niebieski</td>
<td>fioletowy</td>
</tr>
</tbody>
</table>
</main>
<aside>
<img src="obraz.png" alt="Próbki farb">
</aside>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość bloku środkowego podstrony cena.html – obraz 3: Nagłówek drugiego stopnia o treści: „Zapotrzebowanie na farbę”. Pole edycyjne typu numerycznego poprzedzone napisem „Powierzchnia malowania (m2):”. Oznaczenie metra kwadratowego zapisane z indeksem górnym. Przycisk „Policz”, po jego wybraniu uruchamia się skrypt.
Kopia mieszamy.html zapisana jako cena.html; inny jest tylko blok <main> (i aria-current przy drugim odnośniku):
<label for="area"> - kliknięcie napisu ustawia kursor w polu; „m²” to m<sup>2</sup>, indeks górny (R.2.10),<input type="number"> - pole numeryczne (R.3.3); min="0" blokuje strzałkami wartości ujemne, a step="any" dopuszcza ułamki, np. 12,5 m²,<button type="button" id="count"> - przycisk bez atrybutu onclick: zdarzenie podepnie skrypt,<p id="result" aria-live="polite"> - miejsce na wynik; czytnik ekranu przeczyta zmianę bez przenoszenia fokusu.cena.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html" aria-current="page">Wyceniamy</a></li>
</ul>
</nav>
<main>
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area" min="0" step="any">
<button type="button" id="count">Policz</button>
<p id="result" aria-live="polite"></p>
</main>
<aside>
<img src="obraz.png" alt="Próbki farb">
</aside>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 19-26 · po tym etapie masz 30 z 36 kryteriów (pkt)
Ustawione domyślne wartości dla wszystkich selektorów stylu CSS: krój czcionki Cambria.
Trzy kolory tła z arkusza w zmiennych (--banner, --side, --middle) - każdy pojawia się w regule jako var(...), a zmiana odcienia to jedna linia. Selektor * z Cambrią i krojem zapasowym serif, gdyby Cambrii nie było w systemie (R.4.1).
styl_1.css CSS nowy plik :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}Podział zrealizowany za pomocą znaczników sekcji tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2.
display: grid na <body> zamienia stronę w siatkę:
grid-template-columns: 25% 50% 25% - trzy kolumny o szerokościach z arkusza; klucz przy R.4.4 wprost przyjmuje szerokości zapisane w ten sposób,grid-template-areas - mapa strony narysowana tekstem: baner i stopka zajmują wszystkie trzy kolumny, a w środkowym rzędzie stoją nav, main i aside,grid-area przypisuje każdy blok do obszaru z mapy.Bloki nie mają własnej szerokości, nie ma float ani clear - kolejność i położenie wynikają z mapy. Zmiana układu (np. obraz pod treścią na telefonie) to zmiana samej mapy, bez ruszania HTML-u (R.3.1).
width: 25% dopisane jeszcze na blokach w siatce liczy się od kolumny, nie od strony - blok miałby wtedy 25% z 25%, czyli około 6% szerokości okna.
styl_1.css CSS zmienione: 29 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}Wspólne dla banera i stopki: kolor tła: #829EB9, biały kolor czcionki, tekst wyśrodkowany, marginesy wewnętrzne: 10 px.
Jedna reguła dla dwóch selektorów, kolor ze zmiennej.
styl_1.css CSS zmienione: 8 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
header,
footer {
background-color: var(--banner);
color: white;
text-align: center;
padding: 10px;
}Wspólne dla bloków lewego i prawego: kolor tła: #B3C6D9, wysokość 400 px, szerokość: 25%, margines wewnętrzny górny: 100 px.
Szerokość 25% już jest - w grid-template-columns. Tu kolor, wysokość i padding-top; blok ma na stronie 400 px treści plus 100 px marginesu wewnętrznego.
styl_1.css CSS zmienione: 7 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
header,
footer {
background-color: var(--banner);
color: white;
text-align: center;
padding: 10px;
}
nav,
aside {
background-color: var(--side);
height: 400px;
padding-top: 100px;
}Dla bloku środkowego: kolor tła: #E0E9F1, wysokość 400 px, szerokość: 50%, tekst wyśrodkowany, margines wewnętrzny górny: 100 px.
Szerokość 50% daje środkowa kolumna siatki. Ta reguła domyka kolory tła bloków (R.4.2), wysokości (R.4.5) i wyśrodkowanie tekstu w banerze, stopce i bloku środkowym (R.4.7).
styl_1.css CSS zmienione: 7 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
header,
footer {
background-color: var(--banner);
color: white;
text-align: center;
padding: 10px;
}
nav,
aside {
background-color: var(--side);
height: 400px;
padding-top: 100px;
}
main {
background-color: var(--middle);
height: 400px;
text-align: center;
padding-top: 100px;
}Dla selektora tabeli: obramowanie linią ciągłą o szerokości 1 px i kolorze DimGray, szerokość 80%, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, obramowanie połączone w jedną linię.
margin: auto przy szerokości 80% dzieli wolne miejsce po równo na lewo i prawo - tabela staje na środku bloku. border-collapse: collapse łączy ramki tabeli i komórek w jedną linię. Wszystkie marginesy wewnętrzne i margin: auto tabeli są ustawione (R.4.6).
styl_1.css CSS zmienione: 7 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
header,
footer {
background-color: var(--banner);
color: white;
text-align: center;
padding: 10px;
}
nav,
aside {
background-color: var(--side);
height: 400px;
padding-top: 100px;
}
main {
background-color: var(--middle);
height: 400px;
text-align: center;
padding-top: 100px;
}
table {
border: 1px solid DimGray;
width: 80%;
margin: auto;
border-collapse: collapse;
}Dla selektora komórki tabeli i komórki nagłówkowej: obramowanie linią ciągłą o szerokości 1 px i kolorze DimGray, obramowanie połączone w jedną linię. Gdy kursor myszy znajdzie się na komórce tabeli jej kolor tła zamienia się na SteelBlue a kolor czcionki na biały.
Selektory znaczników td i th, jak każe uwaga arkusza. td:hover zmienia tylko zwykłą komórkę pod kursorem - nagłówki zostają bez zmian, bo klucz ocenia „jedynie komórkę tabeli” (R.4.8, R.4.9). Najedź na komórkę w podglądzie.
styl_1.css CSS zmienione: 11 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
header,
footer {
background-color: var(--banner);
color: white;
text-align: center;
padding: 10px;
}
nav,
aside {
background-color: var(--side);
height: 400px;
padding-top: 100px;
}
main {
background-color: var(--middle);
height: 400px;
text-align: center;
padding-top: 100px;
}
table {
border: 1px solid DimGray;
width: 80%;
margin: auto;
border-collapse: collapse;
}
td,
th {
border: 1px solid DimGray;
border-collapse: collapse;
}
td:hover {
background-color: SteelBlue;
color: white;
}Dla selektora obrazu: szerokość 100%, zaokrąglenie rogów 20 px.
Obraz liczy 100% od szerokości <aside>, czyli od trzeciej kolumny siatki - wypełnia blok prawy jak w wersji podstawowej. Szerokości z arkusza są komplet: kolumny siatki, tabela 80% i obraz 100% (R.4.4, R.4.10).
styl_1.css CSS zmienione: 5 linii :root {
--banner: #829EB9;
--side: #B3C6D9;
--middle: #E0E9F1;
}
* {
font-family: Cambria, serif;
}
body {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
header,
footer {
background-color: var(--banner);
color: white;
text-align: center;
padding: 10px;
}
nav,
aside {
background-color: var(--side);
height: 400px;
padding-top: 100px;
}
main {
background-color: var(--middle);
height: 400px;
text-align: center;
padding-top: 100px;
}
table {
border: 1px solid DimGray;
width: 80%;
margin: auto;
border-collapse: collapse;
}
td,
th {
border: 1px solid DimGray;
border-collapse: collapse;
}
td:hover {
background-color: SteelBlue;
color: white;
}
img {
width: 100%;
border-radius: 20px;
}Kroki 27-30 · po tym etapie masz 36 z 36 kryteriów (pkt)
Skrypt wykonywany po stronie przeglądarki, na podstronie cena.html ma za zadanie: Pobrać z pola edycyjnego wielkość powierzchni do pomalowania.
Skrypt dostaje własny plik cena.js, podpięty w <head> strony cena.html. Arkusz nie mówi, gdzie ma stać kod JavaScript, a klucz ocenia skrypt po działaniu albo „w kodzie witryny” - plik cena.js też należy do witryny.
defer - przeglądarka pobiera skrypt równolegle ze stroną, ale uruchamia go dopiero po zbudowaniu całego HTML-u, więc querySelector znajdzie pole i przycisk,const - odwołania do pola i akapitu wyniku są znajdowane raz i się nie zmieniają,addEventListener('click', ...) - obsługa kliknięcia przycisku (R.3.4); funkcja strzałkowa () => { } jest na razie pusta (R.5.1).Skrypt w <head> bez defer wykonuje się przed powstaniem przycisku - querySelector zwraca null, a addEventListener kończy się błędem w konsoli.
cena.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>malarz</title>
<link rel="stylesheet" href="styl_1.css">
<script src="cena.js" defer></script>
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html" aria-current="page">Wyceniamy</a></li>
</ul>
</nav>
<main>
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area" min="0" step="any">
<button type="button" id="count">Policz</button>
<p id="result" aria-live="polite"></p>
</main>
<aside>
<img src="obraz.png" alt="Próbki farb">
</aside>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>cena.js JavaScript nowy plik const areaInput = document.querySelector('#area');
const result = document.querySelector('#result');
document.querySelector('#count').addEventListener('click', () => {
});Pobrać z pola edycyjnego wielkość powierzchni do pomalowania.
valueAsNumber zwraca zawartość pola liczbowego od razu jako liczbę (R.5.2) - bez zamiany tekstu „10” na 10. Gdy pole jest puste albo wpisano coś, co nie jest liczbą, wynikiem jest NaN.
Warunek !Number.isFinite(area) || area <= 0 łapie oba przypadki: puste pole i wartość zero albo ujemną. Skrypt wpisuje wtedy prośbę o poprawną powierzchnię i kończy działanie (return) - bez niego uczeń zobaczyłby „Liczba potrzebnych puszek: NaN” albo „0”.
cena.js JavaScript zmienione: 5 linii const areaInput = document.querySelector('#area');
const result = document.querySelector('#result');
document.querySelector('#count').addEventListener('click', () => {
const area = areaInput.valueAsNumber;
if (!Number.isFinite(area) || area <= 0) {
result.textContent = 'Podaj powierzchnię większą od zera.';
return;
}
});Na podstawie pobranej wartości wyliczyć minimalną liczbę puszek wystarczającą do pomalowania tej powierzchni, przy założeniu, że: Jedna puszka zawiera 1 litr farby. 1 litr farby wystarcza do pomalowania powierzchni 4 m2. Obliczona liczba puszek jest liczbą naturalną, zaokrągloną w górę, np. do pomalowania powierzchni 6 m2, potrzeba 2 puszek, a nie 1,5.
SQUARE_METRES_PER_CAN = 4 na początku pliku: liczba z arkusza ma nazwę i komentarz, więc wiadomo, skąd się wzięła; powierzchnia dzielona jest przez 4 (R.5.3),Math.ceil zaokrągla zawsze w górę: 6 / 4 = 1,5 → 2 puszki, 10 / 4 = 2,5 → 3 (R.5.4).Math.round(5 / 4) daje 1 - za mało farby. Zaokrąglenie „do najbliższej” nie jest zaokrągleniem w górę, a parseInt i Math.floor obcinają w dół.
cena.js JavaScript zmienione: 3 linie const SQUARE_METRES_PER_CAN = 4; // 1 puszka = 1 litr = 4 m²
const areaInput = document.querySelector('#area');
const result = document.querySelector('#result');
document.querySelector('#count').addEventListener('click', () => {
const area = areaInput.valueAsNumber;
if (!Number.isFinite(area) || area <= 0) {
result.textContent = 'Podaj powierzchnię większą od zera.';
return;
}
const cans = Math.ceil(area / SQUARE_METRES_PER_CAN);
});Obliczony wynik jest wyświetlony pod przyciskiem i poprzedzony napisem o treści: „Liczba potrzebnych puszek: ” – obraz 3.
Szablon tekstowy w odwrotnych apostrofach wstawia wartość w miejsce ${cans} - bez sklejania napisów plusem. textContent wpisuje do akapitu zwykły tekst, więc nic nie zostanie zinterpretowane jako HTML (R.5.5).
Wpisz w podglądzie 10 i kliknij „Policz”: „Liczba potrzebnych puszek: 3”, jak na obrazie 3. Sprawdzone w Chrome: 6 m² → 2, 4 m² → 1, 4,5 m² → 2, a puste pole, 0 i −5 dają prośbę o poprawną powierzchnię.
cena.js JavaScript zmienione: 1 linia const SQUARE_METRES_PER_CAN = 4; // 1 puszka = 1 litr = 4 m²
const areaInput = document.querySelector('#area');
const result = document.querySelector('#result');
document.querySelector('#count').addEventListener('click', () => {
const area = areaInput.valueAsNumber;
if (!Number.isFinite(area) || area <= 0) {
result.textContent = 'Podaj powierzchnię większą od zera.';
return;
}
const cans = Math.ceil(area / SQUARE_METRES_PER_CAN);
result.textContent = `Liczba potrzebnych puszek: ${cans}`;
});Krok 31 · po tym etapie masz 36 z 36 kryteriów (pkt)
Obie wersje dają komplet 36 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| układ | float: left bloków i clear stopki | siatka na <body> z grid-template-areas |
| szerokości bloków | width na każdym bloku | grid-template-columns: 25% 50% 25% |
| bloki | <section> z id | <nav>, <main>, <aside> |
| kolory | wpisane w reguły | zmienne CSS |
| tabela | same <tr> | <thead>, <tbody>, scope |
| zapytania 2-4 | wynik z czterema miejscami, złączenie bez aliasów, CREATE VIEW | ROUND(..., 2), aliasy i ORDER BY, CREATE OR REPLACE VIEW |
| skrypt | w <script> na stronie, onclick w HTML-u | plik cena.js z defer, addEventListener |
| puste pole, liczba ujemna | wynik 0 albo NaN | prośba o poprawną powierzchnię |
| wypisanie wyniku | innerHTML | textContent i szablon tekstowy |
Pomiar w Chrome przy oknie 1024 i 1280 px: bloki mają dokładnie 25%, 50% i 25% szerokości strony, bez poziomego paska przewijania.
Na egzaminie wersja podstawowa trzyma się funkcji z tabeli 1 arkusza (onclick, innerHTML) i układu, który zna większość uczniów. Siatka wymaga zapamiętania składni grid-template-areas, ale cały układ mieści się w jednej regule i nie zależy od kolejności bloków w HTML-u. Klucz przyjmuje oba sposoby (R.3.1, R.3.4).
Podgląd strony bez zmian - taki jak po kroku 30.
Krok 32 · po tym etapie masz 36 z 36 kryteriów (pkt)
Po zakończeniu pracy utwórz w folderze z numerem zdającego 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 folderze z numerem zdającego powinny się znajdować pliki: cena.html, import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, mieszamy.html, obraz.png, przeglądarka.txt, styl_1.css, ewentualnie inne przygotowane pliki.
Plik cena.js to jeden z „innych przygotowanych plików” - bez niego kalkulator nie działa, więc musi trafić na płytę razem ze stronami. Strony otwierają się wprost z dysku, bez serwera. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
Płyta bez cena.js - kalkulator nie działa, a przy sprawdzaniu w kodzie egzaminator nie znajdzie skryptu (R.5).
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 30.
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.