Portal stacji paliw to baza samochody (z importu zadanie używa tabeli samochody), pięć zapytań - warunek na tekście, liczenie z warunkiem OR w nawiasie, UPDATE, utworzenie użytkownika (CREATE USER) i nadanie mu uprawnień (GRANT) - oraz dwie strony HTML, które różnią się tylko blokiem lewym: stacja.html z godzinami otwarcia w tabeli i obliczenia.html z dwoma polami liczbowymi i przyciskiem. Przycisk uruchamia skrypt JavaScript, który liczy koszt paliwa: 4 zł za litr benzyny, 3,5 zł za litr oleju napędowego, 0 zł dla innego rodzaju. Strony nie mają PHP - baza danych jest potrzebna tylko do zapytań.
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 napisany najprościej, elementami z tabeli DOM na ostatniej stronie arkusza (getElementById, .value, innerHTML, zdarzenie onclick), a na końcu poprawiony tam, gdzie testy pokazały realne błędy.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, JS w pliku)” jest drugi sposób rozwiązania tego samego arkusza: siatka CSS z kolumnami 60% i 40% zamiast float i clear, kolory w zmiennych CSS, formularz z obsługą zdarzenia submit i skrypt w osobnym pliku z cennikiem w jednym obiekcie - obie wersje są zgodne z kluczem.
Baza i grafiki pochodzą z prawdziwego archiwum pliki2.zip (załącznik do arkusza, hasło w treści zadania). Zapytania i zrzuty są policzone na MariaDB 10.4 - tej samej, która jest w XAMPP; użytkownik jan został naprawdę utworzony i sprawdzony logowaniem. Skrypt jest przetestowany w przeglądarce Chrome, a podgląd strony obliczenia.html działa - można wpisać wartości i kliknąć OBLICZ.
Jak liczą się punkty. Klucz ma 38 kryteriów (R.1.1 - R.5.5), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 29 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-8 · po tym etapie masz 7 z 38 kryteriów (pkt)
Utwórz bazę danych o nazwie samochody
Najpierw archiwum pliki2.zip z pulpitu (hasło PaLiWo5& - wielkość liter ma znaczenie, na końcu znak &) i folder z numerem zdającego, do którego trafiają baza.sql, home.png, znak.png i samochod.jpg. W phpMyAdmin: Nowa, nazwa samochody - tak samo jak tabela, z której korzysta zadanie.
Do bazy samochody zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Przy zaznaczonej bazie samochody: Import → baza.sql → Wykonaj. Plik zawiera kilka tabel z różnych zadań (m.in. ryby, lowisko, typy); tu potrzebna jest jedna - samochody z obrazu 1: 8 aut z marką, modelem, rocznikiem (typ YEAR), kolorem i stanem.
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, wklejenie do edytora grafiki i zapis jako import.png. Uwaga na formaty: import idzie do PNG, a zrzuty zapytań do JPEG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie pola marka i rocznik z tabeli samochody dla samochodów koloru niebieskiego
SELECT marka, rocznik - dwa pola,FROM samochody,WHERE kolor = 'niebieski' - kolor w bazie jest zapisany małymi literami, w rodzaju męskim.Wynik: dokładnie dwa wiersze - Fiat 2007 i Opel 2003, jak w kluczu. Zapytania trafiają do kwerendy.txt, zrzut wyniku do kw1.jpg.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT marka, rocznik FROM samochody WHERE kolor = 'niebieski';
Zapytanie 2: zliczające ile jest samochodów marki Toyota lub Opel, których stan jest bardzo dobry
SELECT COUNT(*) - liczba wierszy spełniających warunek,FROM samochody,WHERE (marka = 'Toyota' OR marka = 'Opel') - jedna z dwóch marek, w nawiasie,AND stan = 'bardzo dobry' - i jednocześnie bardzo dobry stan.Wynik: 2 (Opel Corsa i Toyota Corolla z 2016 roku) - jak w kluczu. Nawias jest konieczny: AND wiąże mocniej niż OR, więc bez nawiasu baza czyta warunek jako „każda Toyota albo Opel w bardzo dobrym stanie” i zwraca 4 (sprawdzone). W danych z archiwum jeden Fiat ma stan zapisany z literówką („bardzo bobry”) - na wynik tego zapytania nie wpływa, bo to nie Toyota ani Opel. Zrzut: kw2.jpg.
Klucz przy R.1.4 pisze wprost „nawias wymagany” - zapytanie bez nawiasu daje 4 zamiast 2 i nie jest uznawane.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT marka, rocznik FROM samochody WHERE kolor = 'niebieski';
-- Zapytanie 2
SELECT COUNT(*) FROM samochody WHERE (marka = 'Toyota' OR marka = 'Opel') AND stan = 'bardzo dobry';
Zapytanie 3: aktualizujące wartość pola stan na „dobry” w tabeli samochody dla samochodów starszych niż 2004 rok
UPDATE samochody - zmiana danych w istniejących wierszach,SET stan = 'dobry',WHERE rocznik < 2004 - „starszy niż 2004” to rocznik mniejszy od 2004; Toyota Yaris z 2004 roku się nie zmienia.Warunek spełniają dwa auta (Fiat z 2002 i Opel z 2003), ale phpMyAdmin pokazuje komunikat o jednym zmodyfikowanym rekordzie - Fiat miał już stan „dobry”, a baza liczy tylko wiersze, w których wartość naprawdę się zmieniła (sprawdzone). Na zrzucie kw3.jpg jest komunikat i tabela po zmianie: Opel Astra ma teraz stan „dobry” zamiast „porysowany lakier”. Zapytanie 2 po tej zmianie nadal daje 2.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT marka, rocznik FROM samochody WHERE kolor = 'niebieski';
-- Zapytanie 2
SELECT COUNT(*) FROM samochody WHERE (marka = 'Toyota' OR marka = 'Opel') AND stan = 'bardzo dobry';
-- Zapytanie 3
UPDATE samochody SET stan = 'dobry' WHERE rocznik < 2004;
Zapytanie 4: tworzące użytkownika jan na localhost z hasłem janKowalski1@
CREATE USER 'jan'@'localhost' - konto składa się z nazwy i hosta, z którego można się logować; localhost to ten sam komputer,IDENTIFIED BY 'janKowalski1@' - hasło podane jawnie; baza sama zapisze jego skrót.Zapytanie trzeba wykonać w zakładce SQL (nie przez formularz Konta użytkowników), bo klucz wymaga zrzutu z treścią zapytania, nazwą konta i niezaszyfrowanym hasłem. Zrzut: kw4.jpg.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT marka, rocznik FROM samochody WHERE kolor = 'niebieski';
-- Zapytanie 2
SELECT COUNT(*) FROM samochody WHERE (marka = 'Toyota' OR marka = 'Opel') AND stan = 'bardzo dobry';
-- Zapytanie 3
UPDATE samochody SET stan = 'dobry' WHERE rocznik < 2004;
-- Zapytanie 4
CREATE USER 'jan'@'localhost' IDENTIFIED BY 'janKowalski1@';
Zapytanie 5: nadające użytkownikowi jan prawo jedynie do wybierania, wstawiania i aktualizacji danych w tabeli samochody
GRANT SELECT, INSERT, UPDATE - wybieranie, wstawianie i aktualizacja; bez DELETE i bez zmian struktury,ON samochody.samochody - zapis baza.tabela: uprawnienie dotyczy tylko tej jednej tabeli (klucz uznaje też samo ON samochody, gdy zapytanie jest wykonywane przy wybranej bazie),TO 'jan'@'localhost' - konto z zapytania 4.Sprawdzone logowaniem jako jan: SELECT z tabeli samochody działa (8 aut), a DELETE z tej tabeli i SELECT z innej tabeli bazy kończą się odmową dostępu. Zrzut kw5.jpg ma komunikat i wynik SHOW GRANTS dla tego konta.
GRANT ALL albo ON *.* daje więcej, niż każe arkusz („jedynie”) - zapytanie nie spełnia warunku.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT marka, rocznik FROM samochody WHERE kolor = 'niebieski';
-- Zapytanie 2
SELECT COUNT(*) FROM samochody WHERE (marka = 'Toyota' OR marka = 'Opel') AND stan = 'bardzo dobry';
-- Zapytanie 3
UPDATE samochody SET stan = 'dobry' WHERE rocznik < 2004;
-- Zapytanie 4
CREATE USER 'jan'@'localhost' IDENTIFIED BY 'janKowalski1@';
-- Zapytanie 5
GRANT SELECT, INSERT, UPDATE ON samochody.samochody TO 'jan'@'localhost';
Kroki 9-28 · po tym etapie masz 21 z 38 kryteriów (pkt)
Pliki home.png i znak.png należy przeskalować z zachowaniem proporcji do szerokości 80 px
Dla każdego pliku w GIMP-ie: Obraz → Skaluj obraz, przy zablokowanym łańcuchu proporcji szerokość 80 px - wysokość sama zmieni się na 80, bo obie ikony są kwadratami 200 × 200. Zapis pod tą samą nazwą (Plik → Nadpisz), w PNG - przezroczyste tło wokół koła i kwadratu zostaje.
Plik samochod.jpg należy zapisać pod tą samą nazwą w formacie PNG z przezroczystym tłem
JPEG nie ma przezroczystości, więc obraz trzeba zapisać jako PNG. W GIMP-ie: Warstwa → Przezroczystość → Dodaj kanał alfa, potem różdżka (Zaznaczenie rozmyte) z progiem około 50 i kliknięcie w białe tło - zaznacza się całe tło połączone z brzegami, a białe odblaski na karoserii zostają, bo nie stykają się z tłem. Delete usuwa zaznaczone piksele. Na koniec Plik → Wyeksportuj jako samochod.png. Próg większy niż zero jest potrzebny, bo JPEG ma przy krawędziach jasne, ale nie czysto białe piksele - bez niego wokół auta zostaje biała obwódka, wyraźna na różowym tle bloku prawego.
Zmiana samego rozszerzenia nazwy na .png nie zmienia formatu ani tła - klucz sprawdza przezroczystość tła (R.2.2).
Składa się ze stron o nazwach stacja.html oraz obliczenia.html zapisanych w języku HTML 5. Obie strony różnią się jedynie blokiem lewym
Deklaracja <!DOCTYPE html> i szkielet strony. Najpierw powstaje cała strona stacja.html; obliczenia.html będzie jej kopią z innym blokiem lewym - dzięki temu wspólne części piszę raz.
stacja.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>.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Zadeklarowany język dla witryny: polski
Atrybut lang="pl" w znaczniku <html>. Razem z nazwami plików, deklaracją HTML5 i kodowaniem to jedno kryterium klucza (R.2.3).
stacja.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: „Stacja paliw”
<title> w <head>.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl2.css prawidłowo połączony z kodem strony
Nazwa pliku: styl2.css - z cyfrą 2. Całe formatowanie ma pochodzić z tego pliku, bez atrybutów style.
Klucz odbiera R.3.6 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast #).
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
</body>
</html>Podział strony na bloki: blok banera, poniżej blok menu, poniżej blok lewy i prawy, na dole stopka. 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
Baner to <header>, menu <nav>, stopka <footer>, a bloki lewy i prawy - <section> z identyfikatorami left i right. Bloki lewy i prawy staną obok siebie dzięki CSS.
stacja.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku banera: nagłówek pierwszego stopnia o treści „Całodobowa stacja paliw”
<h1> w <header>.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Obraz home.png, który jest odnośnikiem do strony stacja.html
Obraz staje się odnośnikiem, gdy <img> stoi wewnątrz znacznika <a>. Tekst alternatywny („strona główna”) mówi, dokąd prowadzi odnośnik - przyda się czytnikowi ekranu, bo odnośnik nie ma innego tekstu.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Obraz znak.png, który jest odnośnikiem do strony obliczenia.html
Tak samo jak ikona domu, z adresem drugiej strony. Kliknięcie ikony domu otwiera stronę z godzinami, ikony dystrybutora - stronę z obliczeniami (R.3.2); w podglądzie odnośniki są zablokowane, działają po otwarciu plików w przeglądarce.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Odnośnik do pliku kwerendy.txt o treści: „Pobierz dokumenty”
href z nazwą pliku leżącego w tym samym folderze. Przeglądarka otworzy plik tekstowy albo zaproponuje jego pobranie - klucz (R.3.3) uznaje oba zachowania.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
</section>
<section id="right">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: obraz samochod.png z tekstem alternatywnym „samochód”
Plik PNG po usunięciu tła i tekst alternatywny z polską literą „ó”. Identyfikator car przyda się w CSS - obraz samochodu ma osobne marginesy i obramowanie pod kursorem, a obrazy w menu nie. W menu są już obie ikony, a w bloku prawym samochód (R.2.8).
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: akapit (paragraf) o treści: „Stronę opracował: ”, oraz zawierający numer, którym został podpisany arkusz
Akapit <p> w <footer>. Na egzaminie w miejscu imienia i nazwiska wpisuje się numer, którym podpisano arkusz, czyli PESEL; w tym rozwiązaniu stoi tam „Bartosz Bryniarski”.
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Nagłówek drugiego stopnia o treści „Godziny otwarcia stacji”
<h2> w bloku lewym. Strona ma już <h1> w banerze, <h2> w bloku lewym i akapit w stopce (R.2.6).
stacja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Godziny otwarcia stacji</h2>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Tabela 3x3, której komórki są wypełnione zgodnie z obrazem 3
<table> z trzema wierszami <tr>, w każdym trzy komórki <td>. Pierwszy wiersz („Dzień”, „Od”, „Do”) też jest zwykłymi komórkami <td>: na obrazie 3 wygląda tak samo jak pozostałe, a klucz (R.2.7) wymienia znaczniki <table>, <tr> i <td> - styl obramowania będzie zapisany właśnie dla td.
Gdyby nagłówek tabeli był w <th>, reguła CSS dla td nie obramowałaby pierwszego wiersza - tabela nie wyglądałaby jak na obrazie 3.
stacja.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Godziny otwarcia stacji</h2>
<table>
<tr><td>Dzień</td><td>Od</td><td>Do</td></tr>
<tr><td>Pn - Sb</td><td>6:00</td><td>24:00</td></tr>
<tr><td>Nd</td><td>7:00</td><td>24:00</td></tr>
</table>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Składa się ze stron o nazwach stacja.html oraz obliczenia.html zapisanych w języku HTML 5. Obie strony różnią się jedynie blokiem lewym
Zapisz jako obliczenia.html - wszystko poza blokiem lewym zostaje (nagłówek strony, baner, menu, blok prawy, stopka), a zawartość bloku lewego zastępuje nagłówek drugiego stopnia „Orientacyjny koszt paliwa”.
obliczenia.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pole edycyjne typu numerycznego, z napisem nad polem: „Rodzaj paliwa (1-benzyna, 2-olej napędowy): ”
<input type="number"> - pole przyjmuje tylko liczbę i ma strzałki do zmiany wartości. Napis w <label>, a po nim <br> - pole przechodzi do następnej linii, więc napis stoi nad nim. Identyfikator fuel-type jest dla skryptu, który odczyta wartość pola.
obliczenia.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pole edycyjne typu numerycznego z napisem nad polem: „Ile litrów?”
Drugie pole tego samego typu, z identyfikatorem liters. Pole liczbowe przyjmuje też ułamki z kropką lub przecinkiem (zależnie od języka przeglądarki), np. 12,5 litra.
obliczenia.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Przycisk o treści „OBLICZ”
<button> pod polami. Pola i przycisk nie są w znaczniku <form> - nic nie jest wysyłane na serwer, przycisk uruchomi tylko skrypt w przeglądarce. W bloku lewym są już dwa pola i przycisk (R.2.10).
obliczenia.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button>OBLICZ</button>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 29-39 · po tym etapie masz 32 z 38 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Cambria, wyrównanie tekstu do środka
Selektor uniwersalny * dostaje każdy element, także h2 i komórki tabeli - dlatego zostaną wyśrodkowane, nawet gdy blok lewy wyrówna swój tekst do lewej.
styl2.css CSS nowy plik * {
font-family: Cambria;
text-align: center;
}Wspólne dla bloku banera i stopki: kolor tła rgb 120, 0, 46; biały kolor czcionki, marginesy wewnętrzne 5 px, rozmiar czcionki 150%
Jedna reguła dla dwóch selektorów. Kolor podany trzema liczbami zapisuje się funkcją rgb(120, 0, 46) - składowe czerwona, zielona i niebieska od 0 do 255. Rozmiar 150% powiększa też nagłówek <h1>, bo jego rozmiar jest liczony względem rodzica.
styl2.css CSS zmienione: 6 linii * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}Dla bloku menu: kolor tła rgb 173, 20, 87; wyrównanie tekstu do lewej strony
Selektor znacznika nav. Ikony i odnośnik są elementami w linii, więc ustawiają się od lewej krawędzi.
styl2.css CSS zmienione: 4 linie * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}Dla bloku lewego: kolor tła Snow; kolor czcionki OliveDrab, szerokość 60%, wysokość 322 px, wyrównanie tekstu do lewej strony
Snow i OliveDrab to nazwy kolorów CSS (bardzo jasny biały z odcieniem różu i oliwkowa zieleń). Do lewej wyrównają się napisy przy polach; nagłówek h2 zostaje na środku, bo reguła * działa na niego bezpośrednio. Menu i blok lewy mają już wyrównanie do lewej (R.4.7).
styl2.css CSS zmienione: 7 linii * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}Dla bloku prawego: kolor tła rgb 173, 20, 87; szerokość 40%, wysokość 322 px
60% + 40% = 100% - bloki zajmą razem całą szerokość. Kolory tła wszystkich bloków (R.4.2) i wysokości bloków lewego i prawego (R.4.5) są ustawione.
styl2.css CSS zmienione: 5 linii * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}Dla obrazu z samochodem: marginesy zewnętrzne 40 px, wewnętrzne 10 px
Reguła dla identyfikatora #car - ikony w menu jej nie dostaną. Wysokość się zgadza: obraz ma 222 px, do tego 2 × 10 px marginesu wewnętrznego i 2 × 40 px zewnętrznego, razem 322 px - dokładnie tyle, ile blok prawy.
styl2.css CSS zmienione: 4 linie * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}
#car {
margin: 40px;
padding: 10px;
}Gdy kursor myszy znajdzie się na samochodzie pojawia się obramowanie kropkowane o szerokości 1 px i kolorze YellowGreen
Pseudoklasa :hover, obramowanie dotted (kropkowane). Obramowanie otacza obraz razem z marginesem wewnętrznym 10 px, więc kropki stoją w odstępie od karoserii.
styl2.css CSS zmienione: 3 linie * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}
#car {
margin: 40px;
padding: 10px;
}
#car:hover {
border: 1px dotted YellowGreen;
}Dla selektora odnośnika: marginesy wewnętrzne górny i dolny 0 px, lewy i prawy 50 px, kolor czcionki YellowGreen
Selektor znacznika a - uwaga pod listą stylów każe tu użyć selektora znacznika, nie klasy. padding: 0 50px - pierwsza wartość dla góry i dołu, druga dla lewej i prawej strony. Reguła działa na wszystkie trzy odnośniki w menu, także te z ikonami - stąd odstępy między ikonami na obrazie 2. Wszystkie kolory czcionek (R.4.3) i marginesy wewnętrzne i zewnętrzne (R.4.6) są ustawione.
styl2.css CSS zmienione: 4 linie * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}
#car {
margin: 40px;
padding: 10px;
}
#car:hover {
border: 1px dotted YellowGreen;
}
a {
padding: 0 50px;
color: YellowGreen;
}Dla selektora tabeli i komórki tabeli: obramowanie linią ciągłą o grubości 1 px i kolorze OliveDrab
Dwa selektory znaczników, table i td, w jednej regule. Obramowanie tabeli i każdej komórki osobno daje podwójne linie, jak na obrazie 3.
Klucz (R.4.9) uznaje tylko selektory table i td - reguła dla klasy tabeli albo #left table nie jest liczona.
styl2.css CSS zmienione: 3 linie * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}
#car {
margin: 40px;
padding: 10px;
}
#car:hover {
border: 1px dotted YellowGreen;
}
a {
padding: 0 50px;
color: YellowGreen;
}
table, td {
border: 1px solid OliveDrab;
}Dodatkowo dla selektora tabeli: szerokość 90%
Osobna reguła dla table - 90% szerokości bloku lewego. Szerokości bloków i tabeli są ustawione (R.4.4).
styl2.css CSS zmienione: 3 linie * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}
#car {
margin: 40px;
padding: 10px;
}
#car:hover {
border: 1px dotted YellowGreen;
}
a {
padding: 0 50px;
color: YellowGreen;
}
table, td {
border: 1px solid OliveDrab;
}
table {
width: 90%;
}Podział strony na bloki: blok banera, poniżej blok menu, poniżej blok lewy i prawy, na dole stopka. 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
float: left dla bloków lewego i prawego - stają obok siebie (60% + 40%). Stopka z clear: both zaczyna się pod nimi; bez tego wsunęłaby się pod pływające bloki. Baner i menu są zwykłymi blokami na całą szerokość.
styl2.css CSS zmienione: 6 linii * {
font-family: Cambria;
text-align: center;
}
header, footer {
background-color: rgb(120, 0, 46);
color: white;
padding: 5px;
font-size: 150%;
}
nav {
background-color: rgb(173, 20, 87);
text-align: left;
}
#left {
background-color: Snow;
color: OliveDrab;
width: 60%;
height: 322px;
text-align: left;
}
#right {
background-color: rgb(173, 20, 87);
width: 40%;
height: 322px;
}
#car {
margin: 40px;
padding: 10px;
}
#car:hover {
border: 1px dotted YellowGreen;
}
a {
padding: 0 50px;
color: YellowGreen;
}
table, td {
border: 1px solid OliveDrab;
}
table {
width: 90%;
}
#left, #right {
float: left;
}
footer {
clear: both;
}Kroki 40-44 · po tym etapie masz 38 z 38 kryteriów (pkt)
Skrypt uruchamia się po wciśnięciu przycisku OBLICZ na stronie obliczenia.html
Język wykonywany po stronie przeglądarki to JavaScript: znacznik <script> na końcu <body> strony obliczenia.html, a w nim pusta na razie funkcja calculateCost. Przycisk dostaje atrybut onclick="calculateCost()" (zdarzenie z tabeli na ostatniej stronie arkusza) - kliknięcie wywołuje funkcję. Skrypt stoi za polami, więc gdy przycisk zadziała, pola już istnieją na stronie.
obliczenia.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button onclick="calculateCost()">OBLICZ</button>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
}
</script>
</body>
</html>Skrypt pobiera wartości z obu pól edycyjnych
document.getElementById znajduje pole po identyfikatorze, a właściwość .value oddaje to, co jest w nim wpisane. Wartość pola zawsze jest tekstem (np. "2"), także w polu liczbowym; puste pole daje pusty tekst.
obliczenia.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button onclick="calculateCost()">OBLICZ</button>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
}
</script>
</body>
</html>Następnie oblicza koszt paliwa ze względu na rodzaj i liczbę litrów uwzględniając: gdy rodzaj paliwa jest równy 1 – koszt jednego litra paliwa wynosi 4 zł, gdy rodzaj paliwa jest równy 2 – koszt jednego litra paliwa wynosi 3,5 zł
Instrukcja if / else if. Operator == porównuje z zamianą typu, więc tekst "1" z pola jest równy liczbie 1; mnożenie * też samo zamienia tekst na liczbę. W kodzie ułamek pisze się z kropką: 3.5 - zapis 3,5 w JavaScripcie to nie liczba.
obliczenia.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button onclick="calculateCost()">OBLICZ</button>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
let cost;
if (type == 1) {
cost = liters * 4;
} else if (type == 2) {
cost = liters * 3.5;
}
}
</script>
</body>
</html>W każdym innym przypadku koszt paliwa wynosi 0 zł
Ostatnia gałąź else - wykona się dla każdej innej wartości, także dla pustego pola i liczby 3.
obliczenia.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button onclick="calculateCost()">OBLICZ</button>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
let cost;
if (type == 1) {
cost = liters * 4;
} else if (type == 2) {
cost = liters * 3.5;
} else {
cost = 0;
}
}
</script>
</body>
</html>Następnie skrypt wyświetla wynik działania pod przyciskiem OBLICZ według wzoru: „koszt paliwa: <wartość> zł”, gdzie <wartość> oznacza obliczony wcześniej koszt paliwa.
Pod przyciskiem dochodzi pusty akapit <p id="result">, a ostatnia instrukcja funkcji wpisuje do niego tekst przez innerHTML. Operator + skleja napis z liczbą: "koszt paliwa: " + 40 + " zł". Sprawdzone w Chrome: rodzaj 1 i 10 litrów daje „koszt paliwa: 40 zł”, rodzaj 2 i 3 litry - „koszt paliwa: 10.5 zł”, rodzaj 3 - „koszt paliwa: 0 zł”. W podglądzie można wpisać własne wartości.
obliczenia.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button onclick="calculateCost()">OBLICZ</button>
<p id="result"></p>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
let cost;
if (type == 1) {
cost = liters * 4;
} else if (type == 2) {
cost = liters * 3.5;
} else {
cost = 0;
}
document.getElementById("result").innerHTML = "koszt paliwa: " + cost + " zł";
}
</script>
</body>
</html>Kroki 45-47 · po tym etapie masz 38 z 38 kryteriów (pkt)
Następnie skrypt wyświetla wynik działania pod przyciskiem OBLICZ według wzoru: „koszt paliwa: <wartość> zł”, gdzie <wartość> oznacza obliczony wcześniej koszt paliwa.
Test wersji egzaminacyjnej w Chrome: 4,1 litra oleju napędowego daje „koszt paliwa: 14.349999999999998 zł”. Liczby z ułamkiem komputer przechowuje w systemie dwójkowym i 4,1 nie da się zapisać dokładnie - mnożenie zostawia błąd na kilkunastym miejscu po przecinku. Do tego kwota ma kropkę zamiast przecinka („10.5 zł”). toFixed(2) zaokrągla do groszy i zwraca tekst z dwoma miejscami po przecinku, a replace(".", ",") zamienia kropkę na polski przecinek: teraz „14,35 zł” i „10,50 zł”. Stara linia została w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
obliczenia.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters"><br>
<button onclick="calculateCost()">OBLICZ</button>
<p id="result"></p>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
let cost;
if (type == 1) {
cost = liters * 4;
} else if (type == 2) {
cost = liters * 3.5;
} else {
cost = 0;
}
let text = cost.toFixed(2).replace(".", ",");
document.getElementById("result").innerHTML = "koszt paliwa: " + text + " zł";
// document.getElementById("result").innerHTML = "koszt paliwa: " + cost + " zł";
}
</script>
</body>
</html>Skrypt pobiera wartości z obu pól edycyjnych
Wersja egzaminacyjna liczy wszystko, co dostanie: −5 litrów benzyny daje „koszt paliwa: -20 zł”, a puste pole litrów - „koszt paliwa: 0 zł”, jakby tankowanie było darmowe (oba sprawdzone w Chrome). Na początku funkcji jest teraz warunek: przy pustym polu albo liczbie nie większej od zera skrypt wypisuje komunikat i kończy działanie instrukcją return. Atrybuty min="0" i step="0.01" w polu litrów ustawiają strzałki pola tak, że nie schodzą poniżej zera i przesuwają wartość o setne części - ale nie blokują wpisania liczby z klawiatury, dlatego sprawdzenie w skrypcie jest potrzebne. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
obliczenia.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters" min="0" step="0.01"><br>
<button onclick="calculateCost()">OBLICZ</button>
<p id="result"></p>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
if (liters === "" || Number(liters) <= 0) {
document.getElementById("result").innerHTML = "Podaj liczbę litrów większą od zera";
return;
}
let cost;
if (type == 1) {
cost = liters * 4;
} else if (type == 2) {
cost = liters * 3.5;
} else {
cost = 0;
}
let text = cost.toFixed(2).replace(".", ",");
document.getElementById("result").innerHTML = "koszt paliwa: " + text + " zł";
// document.getElementById("result").innerHTML = "koszt paliwa: " + cost + " zł";
}
</script>
</body>
</html>Skrypt uruchamia się po wciśnięciu przycisku OBLICZ na stronie obliczenia.html
Zamiast atrybutu onclick w HTML-u przycisk dostaje identyfikator calculate, a skrypt podpina funkcję metodą addEventListener("click", calculateCost) - nazwa funkcji bez nawiasów, bo przekazuje się samą funkcję, a nie wynik jej wywołania. HTML zostaje bez kodu JavaScript, a do jednego przycisku można podpiąć kilka funkcji. Sprawdzone w Chrome: wszystkie przypadki z poprzednich kroków dają ten sam wynik. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
obliczenia.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Stacja paliw</title>
<link rel="stylesheet" href="styl2.css">
</head>
<body>
<header>
<h1>Całodobowa stacja paliw</h1>
</header>
<nav>
<a href="stacja.html"><img src="home.png" alt="strona główna"></a>
<a href="obliczenia.html"><img src="znak.png" alt="koszt paliwa"></a>
<a href="kwerendy.txt">Pobierz dokumenty</a>
</nav>
<section id="left">
<h2>Orientacyjny koszt paliwa</h2>
<label for="fuel-type">Rodzaj paliwa (1-benzyna, 2-olej napędowy): </label><br>
<input type="number" id="fuel-type"><br>
<label for="liters">Ile litrów?</label><br>
<input type="number" id="liters" min="0" step="0.01"><br>
<button id="calculate">OBLICZ</button>
<p id="result"></p>
</section>
<section id="right">
<img src="samochod.png" alt="samochód" id="car">
</section>
<footer>
<p>Stronę opracował: Bartosz Bryniarski</p>
</footer>
<script>
function calculateCost() {
let type = document.getElementById("fuel-type").value;
let liters = document.getElementById("liters").value;
if (liters === "" || Number(liters) <= 0) {
document.getElementById("result").innerHTML = "Podaj liczbę litrów większą od zera";
return;
}
let cost;
if (type == 1) {
cost = liters * 4;
} else if (type == 2) {
cost = liters * 3.5;
} else {
cost = 0;
}
let text = cost.toFixed(2).replace(".", ",");
document.getElementById("result").innerHTML = "koszt paliwa: " + text + " zł";
// document.getElementById("result").innerHTML = "koszt paliwa: " + cost + " zł";
}
// Wersja z egzaminu: atrybut onclick="calculateCost()" w znaczniku przycisku.
document.getElementById("calculate").addEventListener("click", calculateCost);
</script>
</body>
</html>Krok 48 · po tym etapie masz 38 z 38 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Umieść go w folderze z numerem, którym został podpisany arkusz. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wystarczy nazwa przeglądarki, w której była sprawdzana strona.
W folderze z numerem zdającego: home.png, import.png, kw1.jpg - kw5.jpg, kwerendy.txt, obliczenia.html, przeglądarka.txt, samochod.png, stacja.html, styl2.css i znak.png. Po nagraniu płyty trzeba sprawdzić jej odczyt i opisać ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 47.
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.