E.14-01-20.06-SGCzerwiec 2020 · 39 kroków · ok. 77 min · 36 kryteriów z klucza

Rozwiązanie krok po kroku: Koszty farby i kalkulator puszek (Nowoczesny kod (flex, addEventListener))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza malarz z kluczem obcym, importem danych i trzema kwerendami, kwadratowy obraz i strony index.html, mieszamy.html oraz cena.html z kalkulatorem puszek farby - i tak samo spełnia każde kryterium klucza. Inna jest droga:

kontener flex zamiast float: baner stoi w znaczniku <header>, panele w <main> ustawionym jako flex, a szerokości 25% i 75% dalej są na samych panelach - stopka nie potrzebuje clear,
odnośniki w znaczniku <nav>, każdy w osobnej linii dzięki CSS, a nie <br>; kolory z arkusza jako zmienne CSS,
pole z etykietą <label>, skrypt w osobnym pliku skrypt.js z atrybutem defer, przycisk obsłużony przez addEventListener,
sprawdzenie wpisanej powierzchni - przy pustym polu albo liczbie ujemnej zamiast „0” lub „-2 puszek” pojawia się prośba o poprawną wartość, a wynik trafia na stronę przez textContent.

Kroki bazy danych i grafiki są takie same jak w wersji podstawowej. Arkusz to E.14 z czerwca 2020 (formuła 2012, zastąpiona przez INF.03); materiały pochodzą z oryginalnego archiwum CKE, kwerendy są wykonane na MariaDB 10.4, a skrypt sprawdzony w Chrome na liczbach całkowitych, ułamkowych i błędnych.

Jak liczą się punkty. Klucz ma 36 kryteriów, każde za 1 punkt; próg to 27 punktów.

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

Etap 1: Baza danych
Kroki 1-11 · po tym etapie masz 10 z 36 kryteriów (pkt)

Krok 1: Folder zdającego i archiwum egzamin1.zip
ok. 2 min
Polecenie z arkusza
Aby wykonać zadanie zaloguj się bez hasła na konto Egzamin. Na pulpicie znajduje się plik egzamin1.zip z plikami potrzebnymi do rozwiązania zadania. Plik ten zabezpieczony jest hasłem 2ws3ed!# Na pulpicie utwórz folder i nazwij go Twoim numerem PESEL. Wszystkie pliki utworzone w czasie egzaminu umieść w tym folderze.
Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum egzamin1.zip rozpakowujesz hasłem 2ws3ed!# (same małe litery, cyfry i dwa znaki specjalne na końcu). W środku są dwa pliki: malowanie.txt z danymi do tabeli i obraz.png.
Krok 2: Baza malarz
ok. 2 min
Polecenie z arkusza
Za pomocą wizualnych narzędzi (kreatorów) przystawki phpMyAdmin utwórz bazę danych wraz z tabelami i danymi na podstawie opisu: Baza danych o nazwie malarz
W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa malarz, porównywanie napisów utf8mb4_polish_ci (polskie litery w kolorach „biały”, „żółty”), Utwórz. Arkusz każe pracować kreatorami - tabele i dane wprowadzasz formularzami phpMyAdmin, nie pisząc CREATE TABLE ręcznie.
Krok 3: Tabela farby: cztery kolumny i klucz podstawowy
Kryteria:
R.1.2 Utworzono strukturę tabeli farby , zawiera ona pole kolor dowolnego typu tekstowego oraz pola cena i pojemnosc dowolnego typu całkowitego
ok. 4 min
Polecenie z arkusza
Dwie tabele: farby i malowanie. Tabela farby zawiera kolumny z informacjami o puszkach farby: id_farby (klucz podstawowy), kolor, cena, pojemosc (kolor jest typu tekstowego, pozostałe pola - całkowite)
W bazie malarz: Utwórz tabelę, nazwa farby, 4 kolumny, Wykonaj. W formularzu:
id_farby - typ INT, w kolumnie Indeks wybierz PRIMARY (klucz podstawowy),
kolor - typ VARCHAR, długość 20 (tekst),
cena i pojemnosc - typ INT (liczby całkowite).
Zapisz. Zrzut karty Struktura tej tabeli zapisz jako struktura_farby.jpg (cały ekran z paskiem zadań, format JPEG).
⚠️ Sprzeczność w arkuszu: w opisie tabeli kolumna nazywa się pojemosc (bez litery n), ale tabela 1, kwerenda 2 i klucz CKE używają nazwy pojemnosc. Rozwiązanie używa nazwy pojemnosc - tej, której wymaga klucz w kryterium R.1.2 i w kwerendzie 2. Za literówkę w nazwie kolumny klucz punktu nie odbiera, ale kwerenda musi używać tej samej nazwy co tabela.
Typowe błędy
Typ VARCHAR wymaga podania długości - bez niej phpMyAdmin nie zapisze tabeli. Pole kolor jako INT przyjmie liczby zamiast nazw kolorów.
Podgląd strony po tym kroku
Krok 4: Tabela malowanie: klucz podstawowy z dwóch pól
Kryteria: ,
R.1.1 Utworzono bazę danych o nazwie malarz z tabelami farby o kluczu podstawowym id_farby oraz malowanie o kluczu podstawowym id_pomieszczenia + id_sciany
R.1.3 Utworzono strukturę tabeli malowanie , zawiera ona pola dowolnego typu całkowitego: liczba_puszek oraz id_farby
ok. 4 min
Polecenie z arkusza
Tabela malowanie zawiera kolumny z informacjami o liczbie zużytych puszek farby w poszczególnych pomieszczeniach, na poszczególne ściany i składa się z pól: id_pomieszczenia (klucz podstawowy), id_sciany (klucz podstawowy), id_farby (klucz obcy wiążący do tabeli farby), liczba_puszek. Wszystkie pola typu całkowitego
Utwórz tabelę malowanie, 4 kolumny, wszystkie typu INT. W kolumnie Indeks wybierz PRIMARY przy id_pomieszczenia i przy id_sciany - phpMyAdmin zapyta, czy dołożyć pole do istniejącego klucza; potwierdź. Powstaje klucz złożony: niepowtarzalna jest dopiero para (pomieszczenie, ściana), bo ściana numer 1 jest w każdym pomieszczeniu. Pola id_farby i liczba_puszek - bez indeksu.
Baza ma teraz obie tabele z kluczami podstawowymi (R.1.1), a tabela malowanie - pola id_farby i liczba_puszek typu całkowitego (R.1.3). Zrzut karty Struktura: struktura_malowanie.jpg - po następnym kroku, żeby było na nim widać też klucz obcy.
Typowe błędy
Dwa osobne klucze PRIMARY są niemożliwe - tabela ma jeden klucz podstawowy, więc drugie pole trzeba dołożyć do istniejącego, a nie tworzyć nowy.
Krok 5: Klucz obcy id_farby do tabeli farby
ok. 3 min
Polecenie z arkusza
id_farby (klucz obcy wiążący do tabeli farby)
W tabeli malowanie: karta Struktura → Widok relacyjny. W wierszu dla kolumny id_farby wybierz bazę malarz, tabelę farby i kolumnę id_farby, Zapisz. phpMyAdmin wykona polecenie:
ALTER TABLE malowanie ADD FOREIGN KEY (id_farby) REFERENCES farby (id_farby);
Klucz obcy działa tylko w tabelach InnoDB (domyślny silnik w XAMPP) i wymaga indeksu na id_farby - MariaDB zakłada go sama. Od tej chwili do tabeli malowanie można wpisać tylko numer farby, który istnieje w tabeli farby - dlatego farby trzeba wprowadzić przed importem. Teraz zrzut karty Struktura: struktura_malowanie.jpg.
Podgląd strony po tym kroku
Krok 6: Dane tabeli farby z tabeli 1
Kryteria:
R.1.4 Wstawiono do tabeli farby 7 rekordów danych, zgodnych z tabelą 1 arkusza
ok. 4 min
Polecenie z arkusza
Dane z tabeli farby zawiera Tabela 1. Należy wypełnić tabelę tymi danymi
Tabela farby, karta Wstaw: formularz ma domyślnie miejsce na 2 wiersze - na dole ustaw „Kontynuuj wstawianie z 7 wierszami” albo wstawiaj po dwa. Siedem rekordów z tabeli 1: biały 20 zł / 5 l, czerwony 30 / 3, niebieski 35 / 3, żółty 22 / 4, zielony 30 / 4, czarny 50 / 2, fioletowy 64 / 3 (R.1.4).
Zrzut karty Przeglądaj z siedmioma rekordami: dane_farby.jpg.
Podgląd strony po tym kroku
Krok 7: Import malowanie.txt do tabeli malowanie
Kryteria:
R.1.5 Zaimportowano dane z pliku malowanie.txt do tabeli malowanie , zawiera ona 13 rekordów
ok. 4 min
Polecenie z arkusza
Dane z tabeli malowanie znajdują się w pliku malowanie.txt. Należy zaimportować plik do tabeli. Wykonaj zrzuty ekranu dokumentujące utworzenie bazy danych. Zrzuty ekranu należy zapisać w formacje JPEG i muszą one zawierać cały obszar monitora z widocznym paskiem zadań. Powinny zawierać strukturę tabeli farby i malowanie (nazwy struktura_farby, struktura_malowanie) oraz dane zapisane do tabeli farby i malowanie (nazwa dane_farby, dane_malowanie)
Plik ma 13 wierszy po cztery liczby oddzielone spacją, w kolejności kolumn tabeli: pomieszczenie, ściana, farba, liczba puszek. Tabela malowanie, karta Import: plik malowanie.txt, format CSV, w ustawieniach formatu Kolumny oddzielone - wpisz spację zamiast średnika, Kolumny zawarte w - wyczyść pole, Wykonaj.
W tabeli jest 13 rekordów (R.1.5). Zrzut karty Przeglądaj: dane_malowanie.jpg.
Typowe błędy
W linii 12 pliku (5 1 2 2) po ostatniej liczbie stoi spacja. MariaDB przy imporcie poleceniem LOAD DATA wczytuje wiersz z ostrzeżeniem, ale jeśli phpMyAdmin zgłosi niewłaściwą liczbę kolumn w linii 12, usuń tę spację w Notatniku i zaimportuj plik jeszcze raz. Import przed wpisaniem farb kończy się błędem klucza obcego.
Podgląd strony po tym kroku
Krok 8: Kwerenda 1: cena niebieskiej farby
Kryteria: ,
R.1.6 Zapisano plik kwerendy.txt zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania
R.1.7 Zapisano zapytanie 1 wybierające jedynie cenę niebieskiej puszki farby. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT cena FROM farby WHERE kolor = "niebieski"; oraz udokumentowano działanie kwerendy zrzutem ekranu, na którym widoczna jest jedynie cena: 35
ok. 3 min
Polecenie z arkusza
Zaprojektuj kwerendy i zapisz je w pliku kwerendy.txt. Udokumentuj wykonanie kwerend za pomocą zrzutów w formacie JPEG o nazwach kw1, kw2, kw3. Zapytania powinny mieć charakter uniwersalny, czyli powinny działać dla dowolnych danych wpisanych do tabeli. Zrzuty ekranu powinny zawierać cały obszar monitora z widocznym paskiem zadań. Opis kwerend: Kwerenda 1: wybierającą jedynie cenę niebieskiej puszki farby
Karta SQL bazy malarz:
SELECT cena - jedynie cena,
FROM farby,
WHERE kolor = 'niebieski' - warunek po nazwie koloru, nie po numerze 3: „uniwersalnie”, więc kwerenda działa także wtedy, gdy farby wpisano w innej kolejności.
Wynik: 35. Zapytanie do nowego pliku kwerendy.txt, zrzut: kw1.jpg - tym razem także w JPEG (R.1.6, R.1.7).
kwerendy.txt Tekst nowy plik
-- Kwerenda 1 SELECT cena FROM farby WHERE kolor = 'niebieski';
Podgląd strony po tym kroku
Krok 9: Kwerenda 2: kolor i cena jednego litra
Kryteria:
R.1.8 Zapisano zapytanie 2 wybierające jedynie nazwę koloru oraz cenę jednego litra farby obliczoną za pomocą pól cena i pojemnosc dla wszystkich wierszy tabeli farby. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT kolor, cena/pojemnosc FROM farby; oraz udokumentowano działanie kwerendy zrzutem ekranu, na którym widoczne są jedynie pola kolor oraz wyliczona cena: 4 dla białej farby, 10 dla czerwonej, 11,67 dla niebieskiej, 5,5 dla żółtej, 7,5 dla zielonej, 25 dla czarnej, 21,33 dla fioletowej (dowolnie zaokrąglona)
ok. 3 min
Polecenie z arkusza
Kwerenda 2: wybierającą jedynie nazwę koloru oraz cenę jednego litra farby obliczoną za pomocą pól cena i pojemnosc dla wszystkich wierszy tabeli farby
SELECT kolor, cena / pojemnosc - druga kolumna wyniku to wyrażenie: cena puszki podzielona przez jej pojemność w litrach daje cenę litra,
FROM farby - bez warunku, bo wszystkie wiersze.
MariaDB dzieli z dokładnością do czterech miejsc po przecinku: biały 4,0000, czerwony 10,0000, niebieski 11,6667, żółty 5,5000, zielony 7,5000, czarny 25,0000, fioletowy 21,3333 - te same wartości wymienia klucz (zaokrąglenie dowolne). Kolumna wyniku nazywa się tak jak wyrażenie; ładniejszy nagłówek daje alias AS cena_litra, ale klucz go nie wymaga. Zrzut: kw2.jpg (R.1.8).
kwerendy.txt Tekst zmienione: 3 linie
-- Kwerenda 1 SELECT cena FROM farby WHERE kolor = 'niebieski'; -- Kwerenda 2 SELECT kolor, cena / pojemnosc FROM farby;
Podgląd strony po tym kroku
Krok 10: Kwerenda 3: kolory farb w pomieszczeniu 3
Kryteria:
R.1.9 Zapisano zapytanie 3 wybierające jedynie nazwy kolorów farb dla pomieszczenia 3. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT kolor FROM malowanie JOIN farby ON malowanie.id_farby = farby.id_farby WHERE id_pomieszczenia = 3; Możliwe również porównanie kluczy po WHERE lub INNER JOIN lub z wykorzystaniem podzapytania SQL oraz udokumentowano działanie kwerendy zrzutem ekranu, na którym widoczne są jedynie nazwy kolorów: zielony i czerwony
ok. 3 min
Polecenie z arkusza
Kwerenda 3: wybierającą jedynie nazwy kolorów farb dla pomieszczenia 3
Numer pomieszczenia jest w tabeli malowanie, a nazwa koloru - w tabeli farby, więc potrzebne jest złączenie:
SELECT kolor,
FROM malowanie JOIN farby - łączy wiersze obu tabel,
ON malowanie.id_farby = farby.id_farby - wiersz malowania z wierszem jego farby; nazwa tabeli przed kropką jest konieczna, bo kolumna id_farby jest w obu tabelach,
WHERE id_pomieszczenia = 3.
Pomieszczenie 3 ma dwie ściany, malowane farbą 5 i 2 - wynik: zielony i czerwony, jak w kluczu. Zrzut: kw3.jpg (R.1.9).
Typowe błędy
Złączenie bez warunku ON daje iloczyn kartezjański: każdy wiersz malowania z każdą z 7 farb - 14 wierszy zamiast 2.
kwerendy.txt Tekst zmienione: 3 linie
-- Kwerenda 1 SELECT cena FROM farby WHERE kolor = 'niebieski'; -- Kwerenda 2 SELECT kolor, cena / pojemnosc FROM farby; -- Kwerenda 3 SELECT kolor FROM malowanie JOIN farby ON malowanie.id_farby = farby.id_farby WHERE id_pomieszczenia = 3;
Podgląd strony po tym kroku

Krok 11: Eksport bazy do pliku malarz.sql

Kryteria:

R.1.10 Wyeksportowano bazę danych malarz do pliku malarz.sql . Czas generowania wpisany w nagłówku pliku jest zgodny z datą i godziną egzaminu

ok. 2 min

Polecenie z arkusza

Wyeksportuj tabele do pliku malarz w formacie SQL

Zaznacz bazę malarz (nie tabelę), karta Eksport, metoda Szybka, format SQL, Wykonaj. Plik pobiera się jako malarz.sql - przenieś go do folderu z numerem PESEL. Zawiera polecenia CREATE TABLE obu tabel, klucze i INSERT z danymi.

Klucz sprawdza też, kiedy plik powstał: w nagłówku eksportu phpMyAdmin stoi linia „Czas generowania:” z datą i godziną, która musi zgadzać się z dniem egzaminu (R.1.10). Eksport zrobiony przed egzaminem albo przyniesiony z zewnątrz tego nie spełni. Plik w tym kroku wygenerowano programem mysqldump z tej samej bazy - treść SQL jest taka sama, a czas powstania stoi w ostatniej linii: -- Dump completed on 2026-11-10 10:19:45.

Typowe błędy

Eksport z zaznaczoną jedną tabelą zapisze tylko ją. Nazwa pliku ma być malarz.sql - phpMyAdmin nadaje ją sam po nazwie bazy.

malarz.sql SQL nowy plik

-- MariaDB dump 10.19  Distrib 10.4.27-MariaDB, for Win64 (AMD64)
--
-- Host: 127.0.0.1    Database: malarz
-- ------------------------------------------------------
-- Server version	10.4.27-MariaDB

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
/*!40103 SET @OLD_TIME_ZONE=@@TIME_ZONE */;
/*!40103 SET TIME_ZONE='+00:00' */;
/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;
/*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES, SQL_NOTES=0 */;

--
-- Table structure for table `farby`
--

DROP TABLE IF EXISTS `farby`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `farby` (
  `id_farby` int(11) NOT NULL,
  `kolor` varchar(20) NOT NULL,
  `cena` int(11) NOT NULL,
  `pojemnosc` int(11) NOT NULL,
  PRIMARY KEY (`id_farby`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_polish_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `farby`
--

LOCK TABLES `farby` WRITE;
/*!40000 ALTER TABLE `farby` DISABLE KEYS */;
INSERT INTO `farby` VALUES (1,'biały',20,5);
INSERT INTO `farby` VALUES (2,'czerwony',30,3);
INSERT INTO `farby` VALUES (3,'niebieski',35,3);
INSERT INTO `farby` VALUES (4,'żółty',22,4);
INSERT INTO `farby` VALUES (5,'zielony',30,4);
INSERT INTO `farby` VALUES (6,'czarny',50,2);
INSERT INTO `farby` VALUES (7,'fioletowy',64,3);
/*!40000 ALTER TABLE `farby` ENABLE KEYS */;
UNLOCK TABLES;

--
-- Table structure for table `malowanie`
--

DROP TABLE IF EXISTS `malowanie`;
/*!40101 SET @saved_cs_client     = @@character_set_client */;
/*!40101 SET character_set_client = utf8 */;
CREATE TABLE `malowanie` (
  `id_pomieszczenia` int(11) NOT NULL,
  `id_sciany` int(11) NOT NULL,
  `id_farby` int(11) NOT NULL,
  `liczba_puszek` int(11) NOT NULL,
  PRIMARY KEY (`id_pomieszczenia`,`id_sciany`),
  KEY `id_farby` (`id_farby`),
  CONSTRAINT `malowanie_ibfk_1` FOREIGN KEY (`id_farby`) REFERENCES `farby` (`id_farby`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_polish_ci;
/*!40101 SET character_set_client = @saved_cs_client */;

--
-- Dumping data for table `malowanie`
--

LOCK TABLES `malowanie` WRITE;
/*!40000 ALTER TABLE `malowanie` DISABLE KEYS */;
INSERT INTO `malowanie` VALUES (1,1,1,3);
INSERT INTO `malowanie` VALUES (1,2,3,2);
INSERT INTO `malowanie` VALUES (1,3,1,3);
INSERT INTO `malowanie` VALUES (1,4,1,2);
INSERT INTO `malowanie` VALUES (2,1,7,4);
INSERT INTO `malowanie` VALUES (2,2,6,3);
INSERT INTO `malowanie` VALUES (2,3,5,5);
INSERT INTO `malowanie` VALUES (2,4,3,2);
INSERT INTO `malowanie` VALUES (3,1,5,2);
INSERT INTO `malowanie` VALUES (3,2,2,2);
INSERT INTO `malowanie` VALUES (4,4,5,2);
INSERT INTO `malowanie` VALUES (5,1,2,2);
INSERT INTO `malowanie` VALUES (5,2,6,4);
/*!40000 ALTER TABLE `malowanie` ENABLE KEYS */;
UNLOCK TABLES;
/*!40103 SET TIME_ZONE=@OLD_TIME_ZONE */;

/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;
/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;
/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;

-- Dump completed on 2026-11-10 10:19:45

Etap 2: Grafika i strona HTML
Kroki 12-24 · po tym etapie masz 21 z 36 kryteriów (pkt)

Krok 12: Grafika: obraz.jpg 200 × 200 px
Kryteria:
R.2.1 Obraz obraz.jpg przeskalowano do wymiarów 200 px na 200 px (± 2 px)
ok. 2 min
Polecenie z arkusza
Plik obraz.png przeskalowany do rozmiarów 200 px na 200 px oraz zapisany w formacie JPEG
Oryginał ma 500 × 500 px - jest kwadratowy, więc 200 × 200 zachowuje proporcje. W GIMP-ie Obraz → Skaluj obraz, 200 × 200, potem Plik → Eksportuj jako obraz.jpg (format wybiera rozszerzenie nazwy) (R.2.1). Zapisz zapisałby projekt GIMP-a w formacie XCF, a nie JPEG.
Podgląd strony po tym kroku
Krok 13: Plik index.html i kodowanie
Kryteria:
R.2.2 Witrynę internetową zapisano w plikach index.html, mieszamy.html i cena.html oraz zastosowano właściwy standard kodowania polskich znaków przynajmniej na jednej stronie
ok. 2 min
Polecenie z arkusza
Witryna internetowa zawiera podstrony index.html, mieszamy.html i cena.html. Zastosowany standard kodowania polskich znaków
Szkielet index.html z <meta charset="UTF-8"> (R.2.2) i znacznikiem viewport dla telefonów. Podstrony będą kopiami z innym panelem prawym.
index.html HTML nowy plik
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 14: Tytuł i arkusz stylów
Kryteria: ,
R.2.3 Przynajmniej jednej stronie nadano tytuł "malarz”
R.3.6 Przynajmniej jedna strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie pochodzi jedynie od pliku CSS. Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)
ok. 1 min
Polecenie z arkusza
Tytuł strony: malarz. Połączenie z zewnętrznym stylem CSS o nazwie styl.css
<title>malarz</title> (R.2.3) i <link rel="stylesheet" href="styl.css"> - całe formatowanie w tym pliku (R.3.6).
index.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.css"> </head> <body> </body> </html>
Podgląd strony po tym kroku (index.html)
Krok 15: Bloki: header, dwa panele w main, stopka
Kryteria:
R.2.4 Układ przynajmniej jednej strony zdefiniowano dzieląc ją na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka. Podział na bloki przy pomocy znaczników sekcji
ok. 2 min
Polecenie z arkusza
Strona podzielona na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka. Podział na bloki przy pomocy znaczników sekcji
Baner to nagłówek strony - <header>, dwa panele to <section> w kontenerze <main>, stopka - <footer> (R.2.4). Klasa row zrobi z <main> kontener flex, który ustawi panele obok siebie.
index.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.css"> </head> <body> <header id="banner"> </header> <main class="row"> <section id="left"> </section> <section id="right"> </section> </main> <footer> </footer> </body> </html>
Podgląd strony po tym kroku (index.html)

Krok 16: Baner: nagłówek-odnośnik

Kryteria:

R.3.2 Na przynajmniej jednej stronie wybranie odsyłacza "Koszty farby" prowadzi do strony index.html

ok. 1 min

Polecenie z arkusza

Zawartość banera: nagłówek pierwszego stopnia o treści: „Koszty farby”, który jest odnośnikiem do pliku index.html

<h1> z odnośnikiem <a href="index.html"> (R.3.2).

index.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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 17: Panel lewy: nagłówek i odnośnik „Mieszamy”

Kryteria:

R.3.3 Na przynajmniej jednej stronie wybranie odsyłacza "Mieszamy" prowadzi do strony mieszamy.html

ok. 1 min

Polecenie z arkusza

Zawartość panelu lewego: Nagłówek trzeciego stopnia o treści: „Mieszamy czy wyceniamy?”. Odnośnik o treści: „Mieszamy”, prowadzący do strony mieszamy.html

<h3> i odnośnik w znaczniku <nav> - grupa odnośników nawigacji po witrynie (R.3.3).

index.html HTML zmienione: 4 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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
            </nav>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 18: Odnośnik „Wyceniamy”

Kryteria:

R.3.4 Na przynajmniej jednej stronie wybranie odsyłacza "Wyceniamy" prowadzi do strony cena.html

ok. 1 min

Polecenie z arkusza

W nowej linii odnośnik o treści: „Wyceniamy” prowadzący do strony cena.html

Drugi odnośnik bez <br> (R.3.4) - do nowej linii przeniesie go styl display: block dla odnośników w <nav>. Układ to sprawa CSS, a HTML opisuje tylko treść.

index.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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 19: Stopka

ok. 1 min

Polecenie z arkusza

Zawartość stopki: dwa napisy w osobnych liniach o treści: „MALARZ” oraz „Stronę opracował:”, dalej wstawiony numer PESEL zdającego

Dwa napisy rozdzielone <br> - to jeden podpis łamany w dwóch liniach, więc <br> jest tu na miejscu. Na egzaminie numer PESEL, tu Bartosz Bryniarski.

index.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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 20: Panel prawy index.html

Kryteria:

R.2.6 W bloku prawym strony index.html umieszczono obraz obraz.jpg z tekstem alternatywnym "abstrakcja"

ok. 1 min

Polecenie z arkusza

Zawartość panelu prawego podstrony index.html: Paragraf (akapit) o treści: „Strona poświęcona malarstwu:)”. Obraz obraz.jpg z tekstem alternatywnym o treści: „abstrakcja”

Akapit i obraz z alt (R.2.6); width i height rezerwują miejsce przed wczytaniem obrazu.

index.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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <p>Strona poświęcona malarstwu:)</p>
            <img src="obraz.jpg" alt="abstrakcja" width="200" height="200">
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (index.html)

Krok 21: Podstrona mieszamy.html

ok. 1 min

Polecenie z arkusza

Zawartość panelu prawego podstrony mieszamy.html: Paragraf o treści: „Strona w trakcie budowy”

Kopia index.html z jednym akapitem w panelu prawym.

mieszamy.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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <p>Strona w trakcie budowy</p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (mieszamy.html)

Krok 22: Podstrona cena.html: nagłówek

Kryteria:

R.2.5 Na przynajmniej jednej stronie zapisano minimum jeden paragraf (znacznik <p>) oraz nagłówki: h1 "Koszty farby” w banerze, h3 "Mieszamy czy wyceniamy?” w bloku lewym oraz na stronie cena.html h3 „Obliczanie na podstawie powierzchni zapotrzebowania na farbę” w bloku prawym

ok. 1 min

Polecenie z arkusza

Zawartość panelu prawego podstrony cena.html: Nagłówek trzeciego stopnia o treści: „Obliczanie na podstawie powierzchni zapotrzebowania na farbę”

Kopia index.html jako cena.html z <h3> w panelu prawym. Komplet nagłówków i akapit to R.2.5.

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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 23: Etykieta i pole na powierzchnię

ok. 2 min

Polecenie z arkusza

Napis o treści: „Podaj powierzchnię:”. Obok pole edycyjne służące do wprowadzenia liczby rzeczywistej, będącej powierzchnią do pomalowania

napis jest etykietą <label for="area"> - kliknięcie go ustawia kursor w polu, a czytnik ekranu odczyta napis razem z polem,
type="number" ze step="any" przyjmuje liczbę rzeczywistą (np. 5,5), min="0" mówi przeglądarce, że ujemna powierzchnia nie ma sensu,
etykieta i pole stoją w jednym <div>, więc razem tworzą jedną linię, a przycisk zejdzie pod nią bez <br>.

cena.html HTML zmienione: 4 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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Krok 24: Przycisk i miejsce na wynik

Kryteria:

R.2.7 W bloku prawym strony cena.html umieszczono pole edycyjne oraz przycisk "Policz"

ok. 2 min

Polecenie z arkusza

Poniżej przycisk „Policz”, po jego wybraniu uruchamia się skrypt. Obliczony wynik jest wyświetlony pod przyciskiem

<button type="button"> z identyfikatorem count, bez onclick. Akapit result czeka na wynik; aria-live="polite" każe czytnikowi ekranu go odczytać. Pole i przycisk to R.2.7.

cena.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.css">
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

Podgląd strony po tym kroku (cena.html)

Etap 3: Styl CSS
Kroki 25-31 · po tym etapie masz 30 z 36 kryteriów (pkt)
Krok 25: Zmienne z kolorami arkusza
ok. 1 min
Polecenie z arkusza
Arkusz CSS zawiera formatowanie dla:
Trzy kolory z arkusza jako zmienne w :root - nazwy mówią, do czego służą, a zmiana odcienia to jedna linia.
styl.css CSS nowy plik
:root { --banner: #829EB9; --left: #B3C6D9; --right: #E0E9F1; }
Podgląd strony po tym kroku (index.html)
Krok 26: Baner
ok. 1 min
Polecenie z arkusza
banera: kolor tła: #829EB9, wysokość bloku: 80 px, tekst wyśrodkowany, czcionką Arial, margines wewnętrzny górny: 10 px
Krój Arial z zapasowym sans-serif.
styl.css CSS zmienione: 7 linii
:root { --banner: #829EB9; --left: #B3C6D9; --right: #E0E9F1; } #banner { background-color: var(--banner); height: 80px; text-align: center; font-family: Arial, sans-serif; padding-top: 10px; }
Podgląd strony po tym kroku (index.html)
Krok 27: Panel lewy
ok. 1 min
Polecenie z arkusza
panelu lewego: kolor tła: #B3C6D9, wysokość: bloku 500 px, szerokość: 25%, margines wewnętrzny górny: 100 px, tekst wyśrodkowany, rozmiar czcionki: 20 px
Szerokość na panelu - kontener flex jej nie zmieni.
styl.css CSS zmienione: 8 linii
:root { --banner: #829EB9; --left: #B3C6D9; --right: #E0E9F1; } #banner { background-color: var(--banner); height: 80px; text-align: center; font-family: Arial, sans-serif; padding-top: 10px; } #left { background-color: var(--left); height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; }
Podgląd strony po tym kroku (index.html)
Krok 28: Panel prawy
Kryteria: , ,
R.4.4 Ustawiono szerokość panelu lewego na 25%, panelu prawego na 75%
R.4.6 Ustawiono rozmiar czcionki 20px dla bloku prawego i lewego
R.4.7 Ustawiono margines wewnętrzny górny (padding-top lub padding: 10px 0 0 0) dla banera na 10px, dla panelu lewego i prawego na 100px
ok. 1 min
Polecenie z arkusza
panelu prawego: kolor tła: #E0E9F1, wysokość bloku 500 px, szerokość: 75%, tekst wyśrodkowany, rozmiar czcionki: 20 px, margines wewnętrzny górny: 100 px
Szerokości (R.4.4), rozmiar 20 px (R.4.6) i górne marginesy wewnętrzne (R.4.7) są kompletne.
styl.css CSS zmienione: 8 linii
:root { --banner: #829EB9; --left: #B3C6D9; --right: #E0E9F1; } #banner { background-color: var(--banner); height: 80px; text-align: center; font-family: Arial, sans-serif; padding-top: 10px; } #left { background-color: var(--left); height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; } #right { background-color: var(--right); height: 500px; width: 75%; text-align: center; font-size: 20px; padding-top: 100px; }
Podgląd strony po tym kroku (index.html)
Krok 29: Stopka
Kryteria: , , ,
R.4.1 Ustawiono kolor tła dla banera: #829EB9, panelu lewego: #B3C6D9, panelu prawego: #E0E9F1 oraz żółty dla stopki (dowolny odcień)
R.4.2 Ustawiono wysokość banera 80px, obu paneli 500px i stopki 50px
R.4.3 Ustawiono wyrównanie tekstu do środka dla wszystkich bloków
R.4.5 Ustawiono krój czcionki Arial dla banera i stopki
ok. 1 min
Polecenie z arkusza
stopki: żółty kolor tła, tekst wyśrodkowany, czcionką Arial, wysokość bloku: 50 px
Tła (R.4.1), wysokości (R.4.2), wyśrodkowanie wszystkich bloków (R.4.3) i Arial w banerze i stopce (R.4.5) są kompletne.
styl.css CSS zmienione: 6 linii
:root { --banner: #829EB9; --left: #B3C6D9; --right: #E0E9F1; } #banner { background-color: var(--banner); height: 80px; text-align: center; font-family: Arial, sans-serif; padding-top: 10px; } #left { background-color: var(--left); height: 500px; width: 25%; padding-top: 100px; text-align: center; font-size: 20px; } #right { background-color: var(--right); height: 500px; width: 75%; text-align: center; font-size: 20px; padding-top: 100px; } footer { background-color: yellow; text-align: center; font-family: Arial, sans-serif; height: 50px; }
Podgląd strony po tym kroku (index.html)

Krok 30: Obraz: marginesy

Kryteria:

R.4.8 Ustawiono dla selektora obrazu margines zewnętrzny (margin) 30 px, margines wewnętrzny (padding) 10 px

ok. 1 min

Polecenie z arkusza

selektora obrazu: margines zewnętrzny 30 px, margines wewnętrzny 10 px

margin i padding (R.4.8).

styl.css CSS zmienione: 4 linie

:root {
    --banner: #829EB9;
    --left: #B3C6D9;
    --right: #E0E9F1;
}
#banner {
    background-color: var(--banner);
    height: 80px;
    text-align: center;
    font-family: Arial, sans-serif;
    padding-top: 10px;
}
#left {
    background-color: var(--left);
    height: 500px;
    width: 25%;
    padding-top: 100px;
    text-align: center;
    font-size: 20px;
}
#right {
    background-color: var(--right);
    height: 500px;
    width: 75%;
    text-align: center;
    font-size: 20px;
    padding-top: 100px;
}
footer {
    background-color: yellow;
    text-align: center;
    font-family: Arial, sans-serif;
    height: 50px;
}
img {
    margin: 30px;
    padding: 10px;
}

Podgląd strony po tym kroku (index.html)

Krok 31: Układ: kontener flex i odnośniki w liniach

Kryteria:

R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest w pełni zgodny z obrazem 1 w arkuszu

ok. 2 min

Polecenie z arkusza

Strona podzielona na bloki: baner, poniżej obok siebie panel lewy i prawy, poniżej stopka.

.row { display: flex; } - <main> ustawia panele obok siebie; stopka leży poza nim, więc schodzi pod spód bez clear,
.links a { display: block; } - odnośniki w <nav> stają się blokami, każdy w osobnej linii.

Zmierzone w Chrome przy oknie 1280 px: baner 90 px, panele obok siebie po 600 px (500 px + 100 px marginesu) o szerokościach 25% i 75%, stopka 50 px pod nimi (R.3.1).

styl.css CSS zmienione: 6 linii

:root {
    --banner: #829EB9;
    --left: #B3C6D9;
    --right: #E0E9F1;
}
#banner {
    background-color: var(--banner);
    height: 80px;
    text-align: center;
    font-family: Arial, sans-serif;
    padding-top: 10px;
}
#left {
    background-color: var(--left);
    height: 500px;
    width: 25%;
    padding-top: 100px;
    text-align: center;
    font-size: 20px;
}
#right {
    background-color: var(--right);
    height: 500px;
    width: 75%;
    text-align: center;
    font-size: 20px;
    padding-top: 100px;
}
footer {
    background-color: yellow;
    text-align: center;
    font-family: Arial, sans-serif;
    height: 50px;
}
img {
    margin: 30px;
    padding: 10px;
}
.row {
    display: flex;
}
.links a {
    display: block;
}

Podgląd strony po tym kroku (index.html)

Etap 4: Skrypt JavaScript

Kroki 32-37 · po tym etapie masz 36 z 36 kryteriów (pkt)

Krok 32: Plik skrypt.js podpięty z defer

Kryteria:

R.5.1 Skrypt napisano w języku JavaScript, zawiera on przynajmniej jedną instrukcję języka zgodną ze składnią

ok. 2 min

Polecenie z arkusza

Skrypt napisany w języku JavaScript

Skrypt w pliku skrypt.js, podpiętym w <head> strony cena.html z atrybutem defer - wykona się po wczytaniu HTML-a, gdy pole już istnieje (R.5.1). Stałe: pole, akapit na wynik i wydajność farby z arkusza - M2_PER_LITER = 4 (1 litr na 4 m²); nazwana stała mówi, skąd w obliczeniu bierze się 4.

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.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

skrypt.js JavaScript nowy plik

const area = document.getElementById('area');
const result = document.getElementById('result');
const M2_PER_LITER = 4;

Podgląd strony po tym kroku (cena.html)

Krok 33: Nasłuchiwanie kliknięcia „Policz”

Kryteria:

R.3.5 Wybranie przycisku powoduje uruchomienie funkcji ze skryptu

ok. 1 min

Polecenie z arkusza

Poniżej przycisk „Policz”, po jego wybraniu uruchamia się skrypt

addEventListener('click', ...) podłącza funkcję do przycisku (R.3.5).

cena.html HTML zmienione: 0 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.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 3 linie

const area = document.getElementById('area');
const result = document.getElementById('result');
const M2_PER_LITER = 4;

document.getElementById('count').addEventListener('click', () => {
});

Podgląd strony po tym kroku (cena.html)

Krok 34: Odczyt powierzchni

Kryteria:

R.5.2 Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania

ok. 1 min

Polecenie z arkusza

Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania

area.value to zawsze tekst - Number() zamienia go na liczbę (R.5.2). Pole type="number" przy wpisie, którego nie da się odczytać jako liczby, oddaje pusty tekst.

cena.html HTML zmienione: 0 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.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 1 linia

const area = document.getElementById('area');
const result = document.getElementById('result');
const M2_PER_LITER = 4;

document.getElementById('count').addEventListener('click', () => {
    const value = Number(area.value);
});

Podgląd strony po tym kroku (cena.html)

Krok 35: Liczba puszek: Math.ceil

Kryteria: ,

R.5.3 Skrypt oblicza minimalną liczbę puszek wystarczających do pomalowania pobranej powierzchni. Jedna puszka zawiera 1 litr farby, 1 litr farby wystarcza na pomalowanie 4 m2 powierzchni

R.5.4 Obliczona liczba puszek jest liczbą całkowitą, zawsze zaokrągloną do góry (dowolną metodą), należy sprawdzić dla liczb dodatnich

ok. 2 min

Polecenie z arkusza

Skrypt oblicza minimalną liczbę puszek wystarczających do pomalowania pobranej powierzchni. Jedna puszka zawiera 1 litr farby, 1 litr farby wystarcza na pomalowanie 4 m2 powierzchni

Powierzchnia przez 4 to liczba litrów, a jedna puszka to 1 litr. Math.ceil zaokrągla zawsze w górę - 5,5 m² to 1,375 litra, czyli 2 puszki, bo w 1 puszce farby zabraknie (R.5.3, R.5.4).

cena.html HTML zmienione: 0 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.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 1 linia

const area = document.getElementById('area');
const result = document.getElementById('result');
const M2_PER_LITER = 4;

document.getElementById('count').addEventListener('click', () => {
    const value = Number(area.value);
    const cans = Math.ceil(value / M2_PER_LITER);
});

Podgląd strony po tym kroku (cena.html)

Krok 36: Wynik przez textContent

Kryteria:

R.5.5 Pod przyciskiem wyświetlony jest wynik działania skryptu, w postaci tekstu: „Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: <wynik>”, gdzie <wynik> został obliczony skryptem

ok. 1 min

Polecenie z arkusza

Pod przyciskiem wyświetlony jest wynik działania skryptu, w postaci tekstu: „Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: <wynik>”

Szablon tekstowy wstawia liczbę puszek w miejsce ${cans}, a textContent wpisuje zwykły tekst (R.5.5).

cena.html HTML zmienione: 0 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.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 1 linia

const area = document.getElementById('area');
const result = document.getElementById('result');
const M2_PER_LITER = 4;

document.getElementById('count').addEventListener('click', () => {
    const value = Number(area.value);
    const cans = Math.ceil(value / M2_PER_LITER);
    result.textContent = `Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ${cans}`;
});

Podgląd strony po tym kroku (cena.html)

Krok 37: Sprawdzenie wpisanej powierzchni

ok. 2 min

Polecenie z arkusza

Skrypt pobiera z pola edycyjnego wielkość powierzchni do pomalowania

Puste pole daje Number(''), czyli 0 puszek, a liczba ujemna - ujemną liczbę puszek. Warunek !(value > 0) łapie wszystkie te przypadki naraz: zero, liczby ujemne i NaN (dla NaN każde porównanie daje false). Wtedy skrypt wypisuje prośbę i kończy działanie przez return.

Sprawdzone w Chrome: 5,5 → 2, 6 → 2, 4 → 1, 4,01 → 2, 0,1 → 1, 13 → 4, 100 → 25, a puste pole, 0 i -8 dają prośbę o poprawną wartość. Klucz sprawdza tylko liczby dodatnie - to dodatek ponad klucz.

cena.html HTML zmienione: 0 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.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <header id="banner">
        <h1><a href="index.html">Koszty farby</a></h1>
    </header>
    <main class="row">
        <section id="left">
            <h3>Mieszamy czy wyceniamy?</h3>
            <nav class="links">
                <a href="mieszamy.html">Mieszamy</a>
                <a href="cena.html">Wyceniamy</a>
            </nav>
        </section>
        <section id="right">
            <h3>Obliczanie na podstawie powierzchni zapotrzebowania na farbę</h3>
            <div>
                <label for="area">Podaj powierzchnię:</label>
                <input type="number" id="area" min="0" step="any">
            </div>
            <button type="button" id="count">Policz</button>
            <p id="result" aria-live="polite"></p>
        </section>
    </main>
    <footer>
        MALARZ<br>
        Stronę opracował: Bartosz Bryniarski
    </footer>
</body>
</html>

skrypt.js JavaScript zmienione: 4 linie

const area = document.getElementById('area');
const result = document.getElementById('result');
const M2_PER_LITER = 4;

document.getElementById('count').addEventListener('click', () => {
    const value = Number(area.value);
    if (!(value > 0)) {
        result.textContent = 'Podaj powierzchnię większą od zera.';
        return;
    }
    const cans = Math.ceil(value / M2_PER_LITER);
    result.textContent = `Liczba jednolitrowych puszek farby potrzebnych do pomalowania wynosi: ${cans}`;
});

Podgląd strony po tym kroku (cena.html)

Etap 5: Porównanie z wersją podstawową

Krok 38 · po tym etapie masz 36 z 36 kryteriów (pkt)

Krok 38: Co daje druga wersja

ok. 3 min

Obie wersje dają ten sam wygląd i ten sam wynik dla dodatnich powierzchni, i obie spełniają wszystkie 36 kryteriów. Różnice:

	wersja podstawowa	wersja nowoczesna
układ	`float` i `clear`	`<header>`, `<main>` z `flex`
odnośniki w nowej linii	`<br>` w HTML-u	`<nav>` i `display: block` w CSS
kolory	wpisane w każdej regule	zmienne CSS
pole	napis przed polem	`<label for>`
skrypt	w `<script>` na stronie, `onclick` w HTML-u	`skrypt.js` z `defer`, `addEventListener`
puste pole, liczba ujemna	wynik 0 albo -2	prośba o poprawną wartość
wynik	`innerHTML`	`textContent`

Na egzaminie wystarczy wersja podstawowa - klucz sprawdza obliczenie dla liczb dodatnich. Nowoczesna pokazuje, jak zabezpiecza się kalkulator przed danymi, których nikt nie przewidział.

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

Etap 6: Oddanie pracy
Krok 39 · po tym etapie masz 36 z 36 kryteriów (pkt)
Krok 39: Plik przeglądarka.txt i nagranie płyty
ok. 5 min
Polecenie z arkusza
Po zakończeniu pracy utwórz w folderze z numerem PESEL plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony.
W folderze z numerem PESEL muszą być: cena.html, dane_farby.jpg, dane_malowanie.jpg, index.html, kw1.jpg - kw3.jpg, kwerendy.txt, malarz.sql, mieszamy.html, obraz.jpg, przeglądarka.txt, skrypt.js, struktura_farby.jpg, struktura_malowanie.jpg i styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem PESEL.
przeglądarka.txt Tekst nowy plik
Google Chrome
Podgląd strony bez zmian - taki jak po kroku 37.

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.

Rozwiązanie krok po kroku: Koszty farby i kalkulator puszek (Nowoczesny kod (flex, addEventListener))

Etap 1: Baza danych

Krok 1: Folder zdającego i archiwum egzamin1.zip

Krok 2: Baza malarz

Krok 3: Tabela farby: cztery kolumny i klucz podstawowy

Krok 4: Tabela malowanie: klucz podstawowy z dwóch pól

Krok 5: Klucz obcy id_farby do tabeli farby

Krok 6: Dane tabeli farby z tabeli 1

Krok 7: Import malowanie.txt do tabeli malowanie

Krok 8: Kwerenda 1: cena niebieskiej farby

Krok 9: Kwerenda 2: kolor i cena jednego litra

Krok 10: Kwerenda 3: kolory farb w pomieszczeniu 3

Krok 11: Eksport bazy do pliku malarz.sql

Etap 2: Grafika i strona HTML

Krok 12: Grafika: obraz.jpg 200 × 200 px

Krok 13: Plik index.html i kodowanie

Krok 14: Tytuł i arkusz stylów

Krok 15: Bloki: header, dwa panele w main, stopka

Krok 16: Baner: nagłówek-odnośnik

Krok 17: Panel lewy: nagłówek i odnośnik „Mieszamy”

Krok 18: Odnośnik „Wyceniamy”

Krok 19: Stopka

Krok 20: Panel prawy index.html

Krok 21: Podstrona mieszamy.html

Krok 22: Podstrona cena.html: nagłówek

Krok 23: Etykieta i pole na powierzchnię

Krok 24: Przycisk i miejsce na wynik

Etap 3: Styl CSS

Krok 25: Zmienne z kolorami arkusza

Krok 26: Baner

Krok 27: Panel lewy

Krok 28: Panel prawy

Krok 29: Stopka

Krok 30: Obraz: marginesy

Krok 31: Układ: kontener flex i odnośniki w liniach

Etap 4: Skrypt JavaScript

Krok 32: Plik skrypt.js podpięty z defer

Krok 33: Nasłuchiwanie kliknięcia „Policz”

Krok 34: Odczyt powierzchni

Krok 35: Liczba puszek: Math.ceil

Krok 36: Wynik przez textContent

Krok 37: Sprawdzenie wpisanej powierzchni

Etap 5: Porównanie z wersją podstawową

Krok 38: Co daje druga wersja

Etap 6: Oddanie pracy

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

Podgląd