To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza sklep z widokiem, cztery zapytania, trzy fotele wycięte z jednej grafiki, strony kartaProduktu.html i sklep.html, okno z powiększeniem - i tak samo spełnia każde kryterium klucza. Inna jest droga:
grid-template-columns: 50% 50%) zamiast display: flex, kolory z arkusza w zmiennych CSS, miniatury w osobnym bloku zamiast znacznika <br>,skrypt.js dołączonym z atrybutem defer: HTML nie zawiera ani jednego onclick, a skrypt sam przypina obsługę kliknięć (addEventListener) i trzyma elementy w stałych (const),Dwie rzeczy zostają takie jak w wersji podstawowej, bo sprawdza je klucz: okno pokazuje i chowa zmiana style.display (R.5.4), a jego położenie to position: fixed z left, top i z-index (R.4.8).
Wersja podstawowa (zakładka obok) pisze skrypt atrybutami onclick i dopiero na końcu go poprawia; tu kod jest od razu taki, jak w prawdziwym projekcie. Na końcu jest krótkie porównanie obu wersji i podpowiedź, którą wybrać na egzaminie.
Baza i grafika pochodzą z prawdziwego archiwum pliki3 (załącznik na stronie arkusza, hasło w treści zadania). Skrypt został sprawdzony w prawdziwej przeglądarce: kliknięcie trzeciej miniatury, obrazu głównego, znaku ×, klawisza Esc i tła okna.
Jak liczą się punkty. Klucz ma 39 kryteriów (R.1.1 - R.5.7), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 7 z 39 kryteriów (pkt)
Utwórz bazę danych o nazwie sklep, z zestawem polskich znaków (np. utf8_polish_ci).
Rozpakuj pliki3.7z z pulpitu (hasło z treści zadania) i załóż folder z numerem zdającego. W phpMyAdmin: Nowa, nazwa sklep, porównywanie utf8_polish_ci. W SQL:
CREATE DATABASE sklep CHARACTER SET utf8 COLLATE utf8_polish_ci;
Do utworzonej bazy zaimportuj tabele z pliku sklep.sql.
Zaznacz bazę sklep, Import → sklep.sql → Wykonaj. Trzy tabele z ilustracji 1: klienci, meble (pole kategoria: 1 - sofy, 2 - fotele, 3 - komody; czyNowy: 1 nowy, 0 używany) i pośrednicząca zakupy relacji m:n.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Cały ekran, zapis jako import.png - w tym arkuszu wszystkie zrzuty są w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany.
Zapytanie 1: wybierające jedynie nazwę, styl i cenę tylko nowych mebli, których cena nie przekracza 1000 zł. Rekordy powinny być posortowane począwszy od najniższej ceny.
Każda klauzula w osobnej linii. „Nie przekracza” to <= - mebel za dokładnie 1000 zł też się liczy. ASC wpisane wprost pokazuje, że kierunek sortowania jest zamierzony. Wynik: 700, 800, 1000 (R.1.3), zrzut kw1.png.
cena < 1000 gubi sofę za dokładnie 1000 zł.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT nazwa, styl, cena
FROM meble
WHERE czyNowy = 1
AND cena <= 1000
ORDER BY cena ASC;
Zapytanie 2: tworzące widok (perspektywę) o nazwie komody zawierający jedynie pola idMeble, nazwa, kategoria, cena z tabeli meble jedynie dla kategorii równej 3. W pliku ze zrzutem należy przedstawić zawartość widoku komody.
Widok to zapisane zapytanie, którego używa się jak tabeli. Samo CREATE VIEW nie zwraca wierszy, więc na zrzut trzeba pokazać zawartość: kliknij komody w lewym panelu albo wykonaj SELECT * FROM komody - pięć komód o identyfikatorach 4-8 (R.1.4). Zrzut kw2.png.
Drugie wykonanie CREATE VIEW kończy się błędem „Table komody already exists” - do poprawiania widoku służy CREATE OR REPLACE VIEW.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT nazwa, styl, cena
FROM meble
WHERE czyNowy = 1
AND cena <= 1000
ORDER BY cena ASC;
-- Zapytanie 2
CREATE VIEW komody AS
SELECT idMeble, nazwa, kategoria, cena
FROM meble
WHERE kategoria = 3;
Zapytanie 3: zliczające cenę średnią, minimalną i maksymalną. Nazwy kolumn (aliasy): Średnia cena - „Średnia cena komód”, minimalna cena - „Minimalna”, maksymalna cena - „Maksymalna”. Średnia cena powinna być dowolnie zaokrąglona do liczby całkowitej. W zapytaniu należy posłużyć się utworzonym widokiem.
Trzy funkcje agregujące, każda w osobnej linii z aliasem w cudzysłowie (spacje i polskie litery). ROUND bez drugiego argumentu zaokrągla do całości - bez niego średnia to 2180.0000. FROM komody - widok, w którym warunek na kategorię już jest (R.1.5, R.1.6). Wynik: 2180, 700, 4000, zrzut kw3.png.
FROM meble WHERE kategoria = 3 daje te same liczby, ale arkusz każe użyć widoku - kryterium R.1.5 przepada.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT nazwa, styl, cena
FROM meble
WHERE czyNowy = 1
AND cena <= 1000
ORDER BY cena ASC;
-- Zapytanie 2
CREATE VIEW komody AS
SELECT idMeble, nazwa, kategoria, cena
FROM meble
WHERE kategoria = 3;
-- Zapytanie 3
SELECT ROUND(AVG(cena)) AS "Średnia cena komód",
MIN(cena) AS "Minimalna",
MAX(cena) AS "Maksymalna"
FROM komody;
Zapytanie 4: usuwające z tabeli klienci rekord, dla którego imię to Tomasz, a nazwisko Nowak.
DELETE z dwoma warunkami (AND) i tekstem w apostrofach. phpMyAdmin pyta o potwierdzenie i pokazuje „Usuniętych rekordów: 1” - zostają dwie klientki (R.1.7). Zrzut kw4.png.
DELETE FROM klienci; bez WHERE usuwa wszystkich klientów. Przed wykonaniem DELETE dobrze jest uruchomić SELECT z tym samym warunkiem i zobaczyć, co zostanie usunięte.
kwerendy.txt Tekst zmienione: 5 linii -- Zapytanie 1
SELECT nazwa, styl, cena
FROM meble
WHERE czyNowy = 1
AND cena <= 1000
ORDER BY cena ASC;
-- Zapytanie 2
CREATE VIEW komody AS
SELECT idMeble, nazwa, kategoria, cena
FROM meble
WHERE kategoria = 3;
-- Zapytanie 3
SELECT ROUND(AVG(cena)) AS "Średnia cena komód",
MIN(cena) AS "Minimalna",
MAX(cena) AS "Maksymalna"
FROM komody;
-- Zapytanie 4
DELETE FROM klienci
WHERE imie = 'Tomasz'
AND nazwisko = 'Nowak';
Kroki 8-28 · po tym etapie masz 20 z 39 kryteriów (pkt)
Z grafiki fotele.png należy wyciąć trzy fotele z pierwszej kolumny i nazwać kolejno fotel1.png, fotel2.png, fotel3.png.
fotele.png ma przezroczyste tło. W GIMP-ie Zaznaczenie prostokątne wokół górnego fotela z lewej kolumny, Obraz → Przytnij do zaznaczenia, Eksportuj jako fotel1.png, cofnij przycięcie (Ctrl+Z) i tak samo dla kolejnych.
Fotele powinny być obcięte bezpośrednio przy krawędziach, przezroczystość powinna być zachowana. Obrazów nie należy skalować.
Obraz → Przytnij do zawartości odcina przezroczyste brzegi, więc kadr dotyka fotela z każdej strony. Bez skalowania: fotel1.png ma 539 × 489 px. Eksport do PNG zachowuje przezroczystość.
JPEG zamienia przezroczyste tło na białe (R.2.1).
Podgląd strony bez zmian - taki jak po kroku 8.
Z grafiki fotele.png należy wyciąć trzy fotele z pierwszej kolumny i nazwać kolejno fotel1.png, fotel2.png, fotel3.png.
Tak samo środkowy (543 × 488 px) i dolny fotel (554 × 552 px) z lewej kolumny (R.2.1).
Witryna składa się z dwóch stron: kartaProduktu.html i sklep.html. Na stronie sklep.html znajduje się jedynie napis „strona w trakcie budowy”.
Sam napis w pełnym szkielecie HTML5 - z językiem, kodowaniem i tytułem karty. Odnośnik „Do strony głównej” będzie miał dokąd prowadzić.
sklep.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>Sklep meblowy</title>
</head>
<body>
<p>strona w trakcie budowy</p>
</body>
</html>Cechy strony kartaProduktu.html: zapisana w języku HTML5.
Plik kartaProduktu.html w folderze zdającego. <!DOCTYPE html> włącza tryb standardów HTML5, dalej szkielet: <html>, <head> i <body>.
kartaProduktu.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
lang="pl" w <html> - czytnik ekranu czyta polską wymową, przeglądarka dobiera słownik i dzielenie wyrazów.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8"> jako pierwszy element <head> - „jawnie” znaczy wpisane w kodzie, nie zostawione domysłowi przeglądarki. Plik zapisz też w UTF-8.
kartaProduktu.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „Fotel”.
<title>Fotel</title> - napis na karcie przeglądarki. Obok <meta name="viewport">: bez niego telefon pokazałby stronę pomniejszoną jak na monitorze. Arkusz tego nie wymaga, a w każdym współczesnym szablonie ta linia jest.
kartaProduktu.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>Fotel</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.
<link rel="stylesheet" href="styl.css"> - nazwa dokładnie z arkusza. Cały wygląd będzie w tym pliku, w HTML nie ma ani jednego atrybutu style.
Zła nazwa w href to brak stylów, a wtedy cały rezultat R.4 przepada.
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Skrypt działający po stronie klienta: zapisany w języku JavaScript.
Skrypt w osobnym pliku skrypt.js - tak jak style w styl.css: HTML opisuje treść, CSS wygląd, a JavaScript zachowanie. Arkusz pozwala na dodatkowe pliki („ewentualnie inne przygotowane pliki”).
<script src="skrypt.js" defer> stoi w <head>, a defer każe przeglądarce pobrać plik od razu, ale wykonać go dopiero, gdy cały HTML jest wczytany. Dzięki temu skrypt znajdzie wszystkie elementy strony, choć jest dołączony na górze, i nie wstrzymuje wyświetlania treści. Plik ma na razie tylko komentarz.
Skrypt w <head> bez defer wykona się przed wczytaniem <body> - document.querySelector nie znajdzie jeszcze obrazów i zwróci null.
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
</body>
</html>skrypt.js JavaScript nowy plik // Skrypt karty produktu: galeria miniatur i okno z powiększeniemPodział strony na bloki: nagłówkowy, główny i stopkę. Blok główny zawiera blok sekcji i blok artykułu. Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 5.
header, main z section i article, footer (R.2.4). Okno z powiększeniem nie jest częścią układu - klucz go tu nie liczy.
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
</header>
<main>
<section>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: nagłówek pierwszego stopnia o treści: „Sklep meblowy”. Linia pozioma.
<h1> i <hr> (element pusty, bez ukośnika w HTML5).
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku sekcji: obraz główny fotel1.png z tekstem alternatywnym „fotel”. Obraz jest formatowany klasą o nazwie obraz. Jego kliknięcie powoduje wywołanie funkcji JavaScript otwierającej okno.
Klasa obraz dla stylu (nazwy klas narzuca arkusz), identyfikator mainImage dla skryptu. W HTML-u nie ma onclick - obsługę kliknięcia przypnie skrypt.
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Poniżej trzy obrazy miniatur fotel1.png, fotel2.png, fotel3.png z tekstem alternatywnym „miniatura”. Obrazy są formatowane klasą miniatury. Kliknięcie każdej miniatury powoduje wywołanie funkcji JavaScript podmieniającej obraz główny.
Miniatury stoją w bloku <div class="thumbnails">. Blok zawsze zaczyna się w nowej linii, więc miniatury trafią pod obraz główny bez znacznika <br> - o układzie decyduje struktura, a nie łamanie wiersza wstawione w treść. Klasa miniatury przy każdym obrazie (R.2.6). div to tu blok pomocniczy - klucz R.2.4 je dopuszcza.
kartaProduktu.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Blok okna z ilustracji 3 formatowany klasą o nazwie okno, zawierający: znacznik ogólny liniowy <span> z zawartością × i formatowany klasą zamknij. Kliknięcie znacznika powoduje wywołanie funkcji zamykającej okno. Obraz bez źródła formatowany klasą obrazOkno.
<div class="okno"> z <span class="zamknij"> (encja × to znak ×) i obrazem bez src - źródło wstawi skrypt przy otwarciu (R.2.9, R.3.4).
Dwa dodatki dla czytników ekranu: title="Zamknij" przy znaku × (sam symbol × nic nie mówi, a title pokazuje się też jako dymek) i alt przy obrazie w oknie - obraz bez alt czytnik nazwie tylko „obraz”.
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku artykułu: nagłówek drugiego stopnia o treści: „Żółty Fotel”. Dwa paragrafy z treścią przekopiowaną z pliku opisFotel.txt zgodnie z ilustracją 2.
<h2> i dwa <p> - każda linia opisFotel.txt to osobny akapit. Tekst kopiuj z pliku, nie przepisuj z ilustracji.
kartaProduktu.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
</article>
</main>
<footer>
</footer>
</body>
</html>Tekst „Wybierz wariant fotela” zapisany za pomocą znacznika semantycznego oznaczającego tekst ważny, formatowany domyślnie jako pogrubiony.
Tekst ważny to <strong> (R.2.8). Napis opisuje listę wariantów, więc stoi w <label for="variant"> - kliknięcie napisu otwiera listę, a czytnik ekranu wie, czego dotyczy wybór. strong wewnątrz label zostaje - klucz go sprawdza.
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<label for="variant"><strong>Wybierz wariant fotela</strong></label>
</article>
</main>
<footer>
</footer>
</body>
</html>Lista rozwijana z elementami „wariant 1”, „wariant 2”, „wariant 3”.
<select> z id równym for etykiety i trzema opcjami.
kartaProduktu.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<label for="variant"><strong>Wybierz wariant fotela</strong></label>
<select id="variant" name="variant">
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
</article>
</main>
<footer>
</footer>
</body>
</html>Paragraf z przyciskiem „KUP TERAZ”. Przycisk nie ma funkcjonalności.
type="button" mówi wprost, że przycisk niczego nie wysyła - domyślny typ submit wysłałby formularz, gdyby przycisk kiedyś do niego trafił (R.2.7).
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<label for="variant"><strong>Wybierz wariant fotela</strong></label>
<select id="variant" name="variant">
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button type="button">KUP TERAZ</button></p>
</article>
</main>
<footer>
</footer>
</body>
</html>Paragraf z odnośnikiem do pliku sklep.html o treści „Do strony głównej”.
Ścieżka względna - oba pliki leżą w tym samym folderze (R.3.5).
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<label for="variant"><strong>Wybierz wariant fotela</strong></label>
<select id="variant" name="variant">
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button type="button">KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku stopki: linia pozioma. Paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego. Numer zdającego jest zapisany za pomocą znacznika semantycznego oznaczającego tekst uwypuklony, formatowany domyślnie jako pochylony.
<hr> i paragraf, tekst uwypuklony to <em> (R.2.5, R.2.8, R.2.10). Tu stoi nazwisko autora rozwiązania - na egzaminie w <em> wpisujesz swój numer zdającego (PESEL).
kartaProduktu.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>Fotel</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h1>Sklep meblowy</h1>
<hr>
</header>
<main>
<section>
<img src="fotel1.png" alt="fotel" class="obraz" id="mainImage">
<div class="thumbnails">
<img src="fotel1.png" alt="miniatura" class="miniatury">
<img src="fotel2.png" alt="miniatura" class="miniatury">
<img src="fotel3.png" alt="miniatura" class="miniatury">
</div>
<div class="okno" id="popup">
<span class="zamknij" title="Zamknij">×</span>
<img class="obrazOkno" id="popupImage" alt="powiększony fotel">
</div>
</section>
<article>
<h2>Żółty Fotel</h2>
<p>Nasz żółty fotel może być przygotowany w trzech wariantach, które można przeglądać na grafikach. Jest wygodny i elegancki. Wariant 1 polecamy do wnętrz klasycznych. Wariant 3 jest utrzymany w stylu glamour, a guzik na środku oparcia jest wykonany z kryształka. Wygodne podłokietniki sprawiają, że w tym fotelu naprawdę się odpoczywa. Wykonany z elastycznej pianki - materiału, który wyróżnia się plastycznością oraz sprężystością, zapewniając komfort siedzenia.</p>
<p>Zorganizujemy dla Ciebie bezpłatną dostawę oraz wniesiemy towar.</p>
<label for="variant"><strong>Wybierz wariant fotela</strong></label>
<select id="variant" name="variant">
<option>wariant 1</option>
<option>wariant 2</option>
<option>wariant 3</option>
</select>
<p><button type="button">KUP TERAZ</button></p>
<p><a href="sklep.html">Do strony głównej</a></p>
</article>
</main>
<footer>
<hr>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Kroki 29-40 · po tym etapie masz 31 z 39 kryteriów (pkt)
Styl CSS zdefiniowany jest w całości w zewnętrznym pliku o nazwie styl.css.
Zmienne w :root: Beige (tło strony i kolor znaku ×), Tan (przycisk i ramka obrazu) i tło okna. Tło okna zapisane nowszą składnią rgb(0 0 0 / 0.7) - trzy składowe po spacji, po ukośniku przezroczystość. To ten sam kolor co rgba(0, 0, 0, 0.7); inspektor przeglądarki pokazuje go właśnie w tej starszej postaci.
styl.css CSS nowy plik :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}Domyślnie, dla wszystkich selektorów: krój czcionki „Century Gothic”, w przypadku braku sans-serif.
Nazwa ze spacją w cudzysłowie, na końcu sans-serif (R.4.1).
styl.css CSS zmienione: 4 linie :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}Dla ciała strony: kolor tła Beige, rozmiar czcionki 140%.
Selektor body.
styl.css CSS zmienione: 5 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}Dla bloku nagłówkowego i stopki: wyrównanie tekstu do środka, marginesy wewnętrzne 20 px.
Jedna reguła dla dwóch selektorów (R.4.5).
styl.css CSS zmienione: 6 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}Dla bloku sekcji i bloku artykułu: szerokość 50%, wysokość 600 px.
Blok główny to siatka o dwóch kolumnach po 50% - szerokość sekcji i artykułu z arkusza zapisana w grid-template-columns (klucz R.4.4 to przyjmuje). Bloki stają obok siebie, a stopka zostaje pod spodem bez clear (R.3.1). Wysokość 600 px w regule obu bloków.
width: 50% na sekcji wewnątrz siatki dałoby połowę kolumny, czyli 25% strony.
styl.css CSS zmienione: 10 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}Dla przycisku: kolor tła Tan, zaokrąglenie rogów 20 px, marginesy wewnętrzne 10 px, rozmiar czcionki 150%.
Selektor button (R.4.2, R.4.3).
styl.css CSS zmienione: 7 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}Dla klasy obraz: szerokość 40%, marginesy wewnętrzne 20 px, obramowanie linią ciągłą o szerokości 1 px i kolorze Tan.
Szerokość, odstęp od ramki i ramka (R.4.6, R.4.7). Dodatkowo cursor: zoom-in - kursor z lupą podpowiada, że kliknięcie powiększy obraz.
styl.css CSS zmienione: 7 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid var(--accent);
cursor: zoom-in;
}Dla klasy miniatury: szerokość 15%.
15% szerokości bloku miniatur, czyli sekcji (R.4.4). Kursor rączki podpowiada, że miniaturę da się kliknąć.
styl.css CSS zmienione: 5 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid var(--accent);
cursor: zoom-in;
}
.miniatury {
width: 15%;
cursor: pointer;
}Dla klasy okno: kolor tła czarny z przezroczystością 0.7, szerokość 80%, pozycjonowana względem okna przeglądarki, od lewej strony 0, od góry 0, zawsze na wierzchu, element jest usunięty.
display: none - okna nie ma, dopóki skrypt go nie pokaże,position: fixed z top: 0 i left: 0 - przyklejone do lewego górnego rogu okna przeglądarki (tabela 3 arkusza), z-index: 10 - nad resztą strony,opacity: 0.7 (też dopuszczalne) przyciemniłoby całe okno razem z fotelem.Tu nie ma nowocześniejszej drogi: klucz R.4.8 sprawdza dokładnie te właściwości, a skrypt będzie przełączał display (R.5.4).
styl.css CSS zmienione: 10 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid var(--accent);
cursor: zoom-in;
}
.miniatury {
width: 15%;
cursor: pointer;
}
.okno {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 80%;
background-color: var(--overlay);
}Dla klasy obrazOkno: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, blokowy sposób wyświetlania.
margin: auto wyśrodkowuje tylko element blokowy węższy od rodzica - stąd para display: block i margin: auto.
styl.css CSS zmienione: 5 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid var(--accent);
cursor: zoom-in;
}
.miniatury {
width: 15%;
cursor: pointer;
}
.okno {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 80%;
background-color: var(--overlay);
}
.obrazOkno {
display: block;
margin: auto;
}Dla klasy zamknij: pozycjonowanie względem pierwszego rodzica, od góry 15 px, od prawej strony 35 px, czcionka koloru Beige, pogrubiona, o rozmiarze 40 px.
position: absolute liczy top i right od najbliższego pozycjonowanego przodka - okno ma position: fixed, więc znak × trafia w prawy górny róg okna (R.4.9).
styl.css CSS zmienione: 9 linii :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid var(--accent);
cursor: zoom-in;
}
.miniatury {
width: 15%;
cursor: pointer;
}
.okno {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 80%;
background-color: var(--overlay);
}
.obrazOkno {
display: block;
margin: auto;
}
.zamknij {
position: absolute;
top: 15px;
right: 35px;
font-size: 40px;
font-weight: bold;
color: var(--page-bg);
}Gdy kursor znajdzie się na elemencie przypisanym do klasy zamknij, zmienia się na pointer.
:hover i cursor: pointer (R.4.10).
styl.css CSS zmienione: 4 linie :root {
--page-bg: Beige;
--accent: Tan;
--overlay: rgb(0 0 0 / 0.7);
}
* {
font-family: "Century Gothic", sans-serif;
}
body {
font-size: 140%;
background-color: var(--page-bg);
}
header,
footer {
padding: 20px;
text-align: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
}
section,
article {
height: 600px;
}
button {
padding: 10px;
border-radius: 20px;
font-size: 150%;
background-color: var(--accent);
}
.obraz {
width: 40%;
padding: 20px;
border: 1px solid var(--accent);
cursor: zoom-in;
}
.miniatury {
width: 15%;
cursor: pointer;
}
.okno {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
width: 80%;
background-color: var(--overlay);
}
.obrazOkno {
display: block;
margin: auto;
}
.zamknij {
position: absolute;
top: 15px;
right: 35px;
font-size: 40px;
font-weight: bold;
color: var(--page-bg);
}
.zamknij:hover {
cursor: pointer;
}Kroki 41-47 · po tym etapie masz 39 z 39 kryteriów (pkt)
Należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim.
Skrypt zaczyna od znalezienia elementów, z którymi będzie pracował, i zapisuje je w stałych (const): obraz główny, okno, obraz w oknie i znak ×. Stała nie może dostać nowej wartości, więc przypadkowe mainImage = … skończy się błędem zamiast cichej pomyłki; let zostaje dla zmiennych, które się zmieniają.
document.querySelector (tabela 1 arkusza) przyjmuje selektor CSS - #mainImage to identyfikator, .zamknij klasa - więc jedna metoda zastępuje getElementById i getElementsByClassName. Elementy są szukane raz, a nie przy każdym kliknięciu (R.5.2).
skrypt.js JavaScript zmienione: 4 linie // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');Funkcja podmieniająca obraz główny: po kliknięciu dowolnej miniatury jest podmieniany obraz główny na obraz z miniatury. Na ilustracji 6 kliknięto miniaturę fotel3.png, obraz główny zmienił się na fotel3.png.
querySelectorAll('.miniatury') zwraca wszystkie trzy miniatury, a forEach wykonuje dla każdej tę samą funkcję. Każda dostaje addEventListener('click', …) - obsługę kliknięcia przypiętą ze skryptu, bez atrybutów onclick w HTML-u. Funkcja strzałkowa () => { … } pamięta swoją miniaturę (thumbnail), więc przepisuje do obrazu głównego jej src (R.3.3, R.5.3, R.5.5).
Kliknij trzecią miniaturę w podglądzie - obraz główny zmienia się na fotel z guzikiem, jak na ilustracji 6.
addEventListener('click', changeImage()) z nawiasami wywołuje funkcję od razu, przy wczytaniu strony, a jako obsługę kliknięcia przypina jej wynik. Przekazuje się samą funkcję, bez nawiasów.
skrypt.js JavaScript zmienione: 6 linii // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');
document.querySelectorAll('.miniatury').forEach((thumbnail) => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
});
});Funkcja otwierająca okno: pojawienie się okna jest realizowane poprzez zmianę sposobu wyświetlania bloku okna na blokowy.
popup.style.display = 'block' wpisuje styl wprost w element i wygrywa z display: none z reguły .okno - okno się pojawia, a reszta reguły (tło, pozycja, warstwa) działa dalej (R.5.4).
Tu forma jest narzucona: klucz R.5.4 sprawdza zmianę stylu elementu w skrypcie. W wielu projektach zamiast tego dodaje się klasę (popup.classList.add('open')) i trzyma wygląd w CSS - tutaj taka wersja nie dałaby tego punktu.
skrypt.js JavaScript zmienione: 4 linie // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');
document.querySelectorAll('.miniatury').forEach((thumbnail) => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
});
});
function openPopup() {
popup.style.display = 'block';
}Przypisanie do obrazu w bloku okna źródła grafiki z obrazu głównego.
Najpierw obraz w oknie dostaje src obrazu głównego w chwili kliknięcia (jeśli wybrano trzecią miniaturę - fotel3.png), dopiero potem okno się pokazuje - nie mignie poprzednim obrazem.
skrypt.js JavaScript zmienione: 1 linia // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');
document.querySelectorAll('.miniatury').forEach((thumbnail) => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
});
});
function openPopup() {
popupImage.src = mainImage.src;
popup.style.display = 'block';
}Po kliknięciu obrazu głównego otwiera się okno z tym obrazem (ilustracja 3).
Funkcja openPopup przypięta do kliknięcia obrazu głównego - bez nawiasów, bo przekazuje się samą funkcję (R.5.6). Kliknij fotel w podglądzie: przyciemnione okno z fotelem w naturalnym rozmiarze, jak na ilustracji 3.
skrypt.js JavaScript zmienione: 2 linie // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');
document.querySelectorAll('.miniatury').forEach((thumbnail) => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
});
});
function openPopup() {
popupImage.src = mainImage.src;
popup.style.display = 'block';
}
mainImage.addEventListener('click', openPopup);Funkcja zamykająca okno: po kliknięciu znaku × okno jest usuwane poprzez zastosowanie odpowiedniej właściwości CSS.
closePopup przywraca display: none i jest przypięta do kliknięcia znaku × (R.5.7).
skrypt.js JavaScript zmienione: 6 linii // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');
document.querySelectorAll('.miniatury').forEach((thumbnail) => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
});
});
function openPopup() {
popupImage.src = mainImage.src;
popup.style.display = 'block';
}
mainImage.addEventListener('click', openPopup);
function closePopup() {
popup.style.display = 'none';
}
closeButton.addEventListener('click', closePopup);Po kliknięciu znaku × okno jest usuwane poprzez zastosowanie odpowiedniej właściwości CSS.
Mały znak × to jedyna droga wyjścia, a użytkownicy odruchowo wciskają Esc albo klikają obok obrazu:
keydown na całym dokumencie z warunkiem event.key === 'Escape',click na oknie zamyka je tylko wtedy, gdy kliknięto samo tło - event.target to element, w który trafił kursor; kliknięcie fotela okna nie zamyka.Obie drogi wołają tę samą funkcję closePopup. Klucz tego nie wymaga.
skrypt.js JavaScript zmienione: 12 linii // Skrypt karty produktu: galeria miniatur i okno z powiększeniem
const mainImage = document.querySelector('#mainImage');
const popup = document.querySelector('#popup');
const popupImage = document.querySelector('#popupImage');
const closeButton = document.querySelector('.zamknij');
document.querySelectorAll('.miniatury').forEach((thumbnail) => {
thumbnail.addEventListener('click', () => {
mainImage.src = thumbnail.src;
});
});
function openPopup() {
popupImage.src = mainImage.src;
popup.style.display = 'block';
}
mainImage.addEventListener('click', openPopup);
function closePopup() {
popup.style.display = 'none';
}
closeButton.addEventListener('click', closePopup);
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
closePopup();
}
});
popup.addEventListener('click', (event) => {
if (event.target === popup) {
closePopup();
}
});Krok 48 · po tym etapie masz 39 z 39 kryteriów (pkt)
Czas przeznaczony na wykonanie zadania wynosi 150 minut.
Obie wersje dają komplet 39 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| sekcja i artykuł | display: flex, width: 50% | siatka grid-template-columns: 50% 50% |
| miniatury pod obrazem | <br> | blok div.thumbnails |
| skrypt | <script> na końcu strony | plik skrypt.js z defer |
| kliknięcia | atrybuty onclick w HTML-u | addEventListener w skrypcie |
| elementy | getElementById przy każdym kliknięciu | const i querySelector raz na początku |
| zamykanie okna | tylko znak × | znak ×, Esc, kliknięcie w tło |
Bez zmian zostały: style.display przy otwieraniu i zamykaniu okna (R.5.4) oraz position: fixed z z-index (R.4.8) - klucz sprawdza te właściwości wprost.
Na egzaminie: onclick z wersji podstawowej jest krótszy i egzaminator widzi go od razu przy obrazie (R.3.3 mówi o „zdarzeniu związanym z kliknięciem”). addEventListener spełnia to samo kryterium, ale kod obsługi jest w innym pliku - przy sprawdzaniu trzeba do niego zajrzeć. W obu wersjach miniatury to obrazy, a nie przyciski, więc nie da się ich wybrać klawiaturą; prawdziwy sklep owinąłby je w <button> - tu przeszkadza reguła button z arkusza, która nadałaby im wygląd przycisku „KUP TERAZ”.
Podgląd strony bez zmian - taki jak po kroku 47.
Krok 49 · po tym etapie masz 39 z 39 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W folderze z numerem zdającego: fotel1.png, fotel2.png, fotel3.png, import.png, kartaProduktu.html, kw1.png … kw4.png, kwerendy.txt, przeglądarka.txt, sklep.html, styl.css i skrypt.js - bez niego galeria i okno nie zadziałają. Płytę sprawdź po nagraniu i opisz 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.