Rozwiązanie buduje stronę firmy malarskiej: baza malarz z farbami i planem malowania ścian i cztery zapytania (warunek, wyrażenie z dzieleniem i aliasem, złączenie tabel, a na koniec widok CREATE VIEW), grafika przeskalowana do 300 × 300 px z filtrem pikselizacji, dwie strony HTML - mieszamy.html z tabelą barw (scalone komórki nagłówkowe) i cena.html z kalkulatorem farby - oraz style w styl_1.css. W tym arkuszu nie ma PHP: skrypt działa w przeglądarce, w JavaScripcie - pobiera powierzchnię z pola liczbowego i liczy potrzebne puszki, zaokrąglając w górę.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej, z atrybutem onclick i innerHTML, a na końcu zostaje przerobiony na wersję z prawdziwych projektów: słuchacz zdarzenia, sprawdzenie wpisanej wartości i textContent.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid)” jest drugi sposób rozwiązania tego samego arkusza: bloki ustawione siatką CSS z nazwanymi obszarami (grid-template-areas) w znacznikach <nav>, <main> i <aside>, kolory w zmiennych CSS, a skrypt w osobnym pliku cena.js ze słuchaczem zdarzenia i sprawdzeniem wpisanej powierzchni - obie wersje są zgodne z kluczem.
Baza i grafika pochodzą z prawdziwego archiwum zad1 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. 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 części praktycznej to 75%, czyli 27 punktów - można stracić 9 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 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, nazwa malarz, porównywanie np. utf8mb4_polish_ci. Tabel z malarz.sql to nie zmienia: obie mają zestaw utf8mb4 zapisany we własnej definicji, a porównywanie bazy dziedziczą tylko tabele zakładane później bez własnego ustawienia.
Do bazy malarz zaimportuj tabele z pliku malarz.sql z rozpakowanego archiwum.
Import → malarz.sql → Wykonaj. Dwie tabele z obrazu 1, w relacji 1..n przez pole id_farby: farby (7 kolorów z cena za puszkę i pojemnosc w litrach) i malowanie (które ściany którego pomieszczenia malujesz jaką farbą i ilu puszkami). Uwaga: kolor biały zapisano w bazie 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.
Print Screen, zapis jako import.png - import w PNG, zrzuty zapytań w JPEG.
Zapytanie 1: wybierające jedynie cenę i pojemność czerwonej puszki farby.
Dwie kolumny i warunek na kolorze. 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”.
W SELECT można wpisać nie tylko kolumnę, ale wyrażenie: cena / pojemnosc liczy cenę litra dla każdego wiersza osobno. Alias ze spacją bierze cudzysłów: AS "cena jednostkowa". MySQL dzieli liczby całkowite z dokładnością do czterech miejsc: biały 4.0000, niebieski 11.6667, fioletowy 21.3333 - wartości jak w kluczu. Zrzut: kw2.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT cena, pojemnosc FROM farby WHERE kolor = "czerwony";
-- Zapytanie 2
SELECT kolor, cena / pojemnosc AS "cena jednostkowa" FROM farby;
Zapytanie 3: wybierające jedynie nazwy kolorów farb i liczbę puszek dla pomieszczenia o identyfikatorze 3.
Liczba puszek jest w malowanie, nazwa koloru w farby - łączysz je po id_farby. Kolumna o tej samej nazwie jest w obu tabelach, więc w warunku złączenia poprzedzasz ją nazwą tabeli. Wynik: zielony 2 i czerwony 2 - jak w kluczu. Zrzut: kw3.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT cena, pojemnosc FROM farby WHERE kolor = "czerwony";
-- Zapytanie 2
SELECT kolor, cena / pojemnosc AS "cena jednostkowa" FROM farby;
-- Zapytanie 3
SELECT kolor, liczba_puszek FROM malowanie JOIN farby ON malowanie.id_farby = farby.id_farby WHERE id_pomieszczenia = 3;
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 zapisane pod nazwą zapytanie, które w bazie wygląda jak tabela: CREATE VIEW pomieszczenie1 AS SELECT ... - po AS zwykłe zapytanie z kolumnami i warunkiem z arkusza. Danych nie kopiuje: przy każdym otwarciu widok wykonuje swoje zapytanie od nowa. W phpMyAdmin pojawia się w lewym drzewie w gałęzi Widoki - klikasz go i robisz zrzut kw4.jpg z czterema wierszami: 1, 1, 3; 2, 3, 2; 3, 1, 3; 4, 1, 2.
Drugie wykonanie CREATE VIEW z tą samą nazwą kończy się błędem „Table already exists”. Poprawka widoku: CREATE OR REPLACE VIEW.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT cena, pojemnosc FROM farby WHERE kolor = "czerwony";
-- Zapytanie 2
SELECT kolor, cena / pojemnosc AS "cena jednostkowa" FROM farby;
-- Zapytanie 3
SELECT kolor, liczba_puszek FROM malowanie JOIN farby ON malowanie.id_farby = farby.id_farby WHERE id_pomieszczenia = 3;
-- Zapytanie 4
CREATE VIEW pomieszczenie1 AS SELECT id_sciany, id_farby, liczba_puszek FROM malowanie WHERE id_pomieszczenia = 1;
Kroki 8-20 · po tym etapie masz 20 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.
Obraz ma 500 × 500 px. W GIMP-ie: Obraz → Skaluj obraz, 300 × 300 (obraz jest kwadratowy, więc łańcuch proporcji może zostać zamknięty). Potem Filtry → Rozmycie → Pikselizacja: obraz rozpada się na kwadratowe bloki jednolitego koloru - tu bloki po 15 px. Eksportuj jako obraz.png, nadpisując plik (R.2.1).
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.
Zbuduj całą stronę mieszamy.html, a cena.html powstanie z jej kopii - różnią się tylko blokiem środkowym. <!DOCTYPE html> i szkielet strony.
mieszamy.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8"> jako pierwszy element <head>.
mieszamy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Zadeklarowany język witryny: polski.
lang="pl" w <html>.
mieszamy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „malarz”.
<title>malarz</title> - małą literą, jak w arkuszu (R.2.3).
mieszamy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl_1.css prawidłowo połączony z kodem strony.
Uwaga na nazwę: styl_1.css, z podkreśleniem i cyfrą.
styl.css (jak w większości arkuszy) zamiast styl_1.css odcina wszystkie style - klucz R.3.5 i cały rezultat R.4.
mieszamy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<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.
<header>, trzy <section> z identyfikatorami left, middle, right (po angielsku) i <footer> (R.2.4).
mieszamy.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
</header>
<section id="left">
</section>
<section id="middle">
</section>
<section id="right">
</section>
<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">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
</section>
<section id="middle">
</section>
<section id="right">
</section>
<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>, a w każdym <li> odnośnik do drugiej podstrony. Ścieżki względne - same nazwy plików z tego samego folderu (R.2.6, R.3.2). W podglądzie kliknięcia są zablokowane.
mieszamy.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
</section>
<section id="right">
</section>
<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).
mieszamy.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<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 paragraf. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL).
mieszamy.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<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.
Pierwszy wiersz: komórka nagłówkowa „Składowe” połączona z drugą - colspan="2" - i „Wynik”. Dwa kolejne wiersze to zwykłe komórki <td>: żółty + czerwony = pomarańczowy, czerwony + niebieski = fioletowy (R.2.8, R.2.9).
mieszamy.html HTML zmienione: 17 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Barwy i ich pochodne</h2>
<table>
<tr>
<th colspan="2">Składowe</th>
<th>Wynik</th>
</tr>
<tr>
<td>żółty</td>
<td>czerwony</td>
<td>pomarańczowy</td>
</tr>
<tr>
<td>czerwony</td>
<td>niebieski</td>
<td>fioletowy</td>
</tr>
</table>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<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.
Zapisz mieszamy.html jako cena.html i podmień zawartość bloku środkowego:
<label for="area">; „m²” to m<sup>2</sup> - indeks górny (R.2.10),<input type="number"> - pole numeryczne: przeglądarka przyjmie tylko liczbę i doda strzałki (R.3.3),onclick="countCans()" - kliknięcie wywoła funkcję JavaScript, którą zaraz napiszesz (R.3.4),<p id="result"> - tu skrypt wpisze wynik.Na razie kliknięcie kończy się błędem w konsoli przeglądarki - funkcji jeszcze nie ma.
cena.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area">
<button onclick="countCans()">Policz</button>
<p id="result"></p>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 21-28 · po tym etapie masz 31 z 36 kryteriów (pkt)
Ustawione domyślne wartości dla wszystkich selektorów stylu CSS: krój czcionki Cambria.
Utwórz styl_1.css; selektor * (R.4.1).
styl_1.css CSS nowy plik * {
font-family: Cambria;
}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.
styl_1.css CSS zmienione: 6 linii * {
font-family: Cambria;
}
header, footer {
background-color: #829EB9;
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.
padding-top - tylko górny margines wewnętrzny. Wysokość bloku na stronie to 400 px treści plus 100 px marginesu.
styl_1.css CSS zmienione: 6 linii * {
font-family: Cambria;
}
header, footer {
background-color: #829EB9;
color: white;
text-align: center;
padding: 10px;
}
#left, #right {
background-color: #B3C6D9;
height: 400px;
width: 25%;
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.
25% + 50% + 25% = 100% szerokości - bez poziomych marginesów, żeby bloki zmieściły się obok siebie.
styl_1.css CSS zmienione: 7 linii * {
font-family: Cambria;
}
header, footer {
background-color: #829EB9;
color: white;
text-align: center;
padding: 10px;
}
#left, #right {
background-color: #B3C6D9;
height: 400px;
width: 25%;
padding-top: 100px;
}
#middle {
background-color: #E0E9F1;
height: 400px;
width: 50%;
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 - „marginesy wyliczane przez przeglądarkę”: przy ustalonej szerokości (80%) przeglądarka dzieli wolne miejsce po równo na lewo i prawo, więc tabela staje na środku. border-collapse: collapse łączy ramki komórek w jedną linię.
styl_1.css CSS zmienione: 6 linii * {
font-family: Cambria;
}
header, footer {
background-color: #829EB9;
color: white;
text-align: center;
padding: 10px;
}
#left, #right {
background-color: #B3C6D9;
height: 400px;
width: 25%;
padding-top: 100px;
}
#middle {
background-color: #E0E9F1;
height: 400px;
width: 50%;
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.
td, th - ramki komórek. td:hover zmienia wygląd tylko zwykłej komórki pod kursorem; komórki nagłówkowe zostają bez zmian (klucz R.4.9: „jedynie na komórce tabeli”). Najedź na komórkę w podglądzie.
styl_1.css CSS zmienione: 8 linii * {
font-family: Cambria;
}
header, footer {
background-color: #829EB9;
color: white;
text-align: center;
padding: 10px;
}
#left, #right {
background-color: #B3C6D9;
height: 400px;
width: 25%;
padding-top: 100px;
}
#middle {
background-color: #E0E9F1;
height: 400px;
width: 50%;
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 wypełnia szerokość bloku prawego - jest wtedy wyższy niż blok i może zachodzić na stopkę, co klucz wprost dopuszcza (R.3.1).
styl_1.css CSS zmienione: 4 linie * {
font-family: Cambria;
}
header, footer {
background-color: #829EB9;
color: white;
text-align: center;
padding: 10px;
}
#left, #right {
background-color: #B3C6D9;
height: 400px;
width: 25%;
padding-top: 100px;
}
#middle {
background-color: #E0E9F1;
height: 400px;
width: 50%;
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;
}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.
section { float: left; } - trzy bloki obok siebie; footer { clear: both; } - stopka pod nimi (R.3.1).
styl_1.css CSS zmienione: 6 linii * {
font-family: Cambria;
}
footer {
clear: both;
}
header, footer {
background-color: #829EB9;
color: white;
text-align: center;
padding: 10px;
}
section {
float: left;
}
#left, #right {
background-color: #B3C6D9;
height: 400px;
width: 25%;
padding-top: 100px;
}
#middle {
background-color: #E0E9F1;
height: 400px;
width: 50%;
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 29-32 · 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 JavaScript piszesz w <script> na końcu <body> strony cena.html - wykonuje się w przeglądarce, bez serwera. Zdefiniuj funkcję o tej samej nazwie, co w onclick przycisku: countCans (policz puszki). Na razie jest pusta - kliknięcie „Policz” nie powoduje już błędu, ale niczego nie robi.
cena.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area">
<button onclick="countCans()">Policz</button>
<p id="result"></p>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function countCans() {
}
</script>
</body>
</html>Pobrać z pola edycyjnego wielkość powierzchni do pomalowania.
document.getElementById("area") znajduje pole po identyfikatorze (tabela 1 arkusza), a .value to jego zawartość. Zapisz ją w zmiennej area (powierzchnia) zadeklarowanej słowem let (R.5.2).
cena.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area">
<button onclick="countCans()">Policz</button>
<p id="result"></p>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function countCans() {
let area = document.getElementById("area").value;
}
</script>
</body>
</html>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.
Puszka (1 litr) maluje 4 m², więc liczba puszek to powierzchnia podzielona przez 4 (R.5.3). Puszek nie kupuje się w ułamkach: 6 / 4 = 1,5 to w praktyce 2 puszki. Math.ceil zaokrągla zawsze w górę (R.5.4). Pole ma wartość tekstową („10”), ale operator / w JavaScripcie sam zamienia ją na liczbę.
Math.round(6 / 4) daje 2, ale Math.round(5 / 4) daje 1 - za mało farby. Zaokrąglenie „do najbliższej” nie jest zaokrągleniem w górę; parseInt i Math.floor obcinają w dół.
cena.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area">
<button onclick="countCans()">Policz</button>
<p id="result"></p>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function countCans() {
let area = document.getElementById("area").value;
let cans = Math.ceil(area / 4);
}
</script>
</body>
</html>Obliczony wynik jest wyświetlony pod przyciskiem i poprzedzony napisem o treści: „Liczba potrzebnych puszek: ” – obraz 3.
Wynik wpisujesz do pustego akapitu result przez innerHTML (tabela 1). Wpisz w podglądzie 10 i kliknij „Policz”: „Liczba potrzebnych puszek: 3” - jak na obrazie 3 (10 / 4 = 2,5, w górę 3) (R.5.5).
cena.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area">
<button onclick="countCans()">Policz</button>
<p id="result"></p>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function countCans() {
let area = document.getElementById("area").value;
let cans = Math.ceil(area / 4);
document.getElementById("result").innerHTML = "Liczba potrzebnych puszek: " + cans;
}
</script>
</body>
</html>Krok 33 · po tym etapie masz 36 z 36 kryteriów (pkt)
Przycisk „Policz”, po jego wybraniu uruchamia się skrypt.
Trzy poprawki z prawdziwych projektów:
addEventListener("click", countCans) zamiast atrybutu onclick w HTML: zachowanie przycisku jest w skrypcie, a HTML opisuje tylko wygląd. Przycisk dostaje identyfikator count.Number() zamienia tekst na liczbę (puste pole to 0), a warunek wypisuje prośbę o poprawną powierzchnię.textContent zamiast innerHTML - wpisujesz zwykły tekst, więc nic nie zostanie zinterpretowane jako HTML.Stara linia z innerHTML zostaje w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz przyjmuje onclick (R.3.4) i tego nie sprawdza.
cena.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>malarz</title>
<link rel="stylesheet" href="styl_1.css">
</head>
<body>
<header>
<h1>Malowanie pokoi i biur</h1>
</header>
<section id="left">
<h2>Menu</h2>
<ul>
<li><a href="mieszamy.html">Mieszamy</a></li>
<li><a href="cena.html">Wyceniamy</a></li>
</ul>
</section>
<section id="middle">
<h2>Zapotrzebowanie na farbę</h2>
<label for="area">Powierzchnia malowania (m<sup>2</sup>):</label>
<input type="number" id="area">
<button id="count">Policz</button>
<p id="result"></p>
</section>
<section id="right">
<img src="obraz.png" alt="Próbki farb">
</section>
<footer>
<h3>MALARZ</h3>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function countCans() {
let area = Number(document.getElementById("area").value);
let result = document.getElementById("result");
if (area <= 0) {
result.textContent = "Podaj powierzchnię większą od zera.";
return;
}
let cans = Math.ceil(area / 4);
result.textContent = "Liczba potrzebnych puszek: " + cans;
// document.getElementById("result").innerHTML = "Liczba potrzebnych puszek: " + cans;
}
document.getElementById("count").addEventListener("click", countCans);
</script>
</body>
</html>Krok 34 · 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.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony. Strony w tym arkuszu nie wymagają serwera - otwierają się wprost z dysku.
Sprawdź listę plików z arkusza, nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 33.
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.