To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza wycieczki z czterema zapytaniami, zdjęcie wykadrowane między kreskami i strona galeria.html z dużym zdjęciem między strzałkami, paskiem wjeżdżających miniatur i powiększeniem pod kursorem - i tak samo spełnia każde kryterium klucza. Inna jest droga:
grid-template-areas układa baner, trzy bloki, pasek miniatur i stopkę, a szerokości 15%, 70% i 15% stoją w grid-template-columns (klucz R.4.5 przyjmuje je wprost) - bez float i clear,<main>, pasek miniatur na flex,animation i wyłączane u osób, które w systemie ograniczyły ruch na ekranie,addEventListener) i obsługa strzałek klawiatury,Na końcu krótkie porównanie z wersją podstawową (zakładka obok). Baza i zdjęcia pochodzą z prawdziwego archiwum pliki9, zapytania zostały wykonane na tej bazie w MariaDB z XAMPP-a (także logowanie kontem Ewa), a skrypt i animacje są sprawdzone w prawdziwej przeglądarce Chrome.
Jak liczą się punkty. Klucz ma 34 kryteria (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania to 75%, czyli 26 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 6 z 34 kryteriów (pkt)
Utwórz bazę danych o nazwie wycieczki, z zestawem polskich znaków (np. utf8_unicode_ci)
Archiwum pliki9.zip rozpakuj hasłem G@leri@Animowan@ (trzy małpy w miejscu liter „a”) do folderu z numerem zdającego. W phpMyAdmin Nowa → wycieczki, porównywanie utf8_unicode_ci, albo zapytaniem:
CREATE DATABASE wycieczki CHARACTER SET utf8 COLLATE utf8_unicode_ci;
Do bazy zaimportuj tabele z pliku wycieczki.sql z rozpakowanego archiwum
Zaznaczona baza wycieczki, Import → wycieczki.sql. Dwie tabele z obrazu 1: wycieczki (7 wycieczek: miejsce, cena, liczba dni) i zdjecia (pliki 1.jpg - 7.jpg, każde z kluczem obcym Wycieczki_id).
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Cały ekran z paskiem zadań, w PNG. Zrzuty zapytań idą później do JPEG (kw1.jpg - kw4.jpg).
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie miejsce i liczbę dni dla wycieczek, których cena jest mniejsza od 1000 zł
Dwa pola i warunek na trzecie - kolumna w WHERE nie musi być na liście SELECT. Każda klauzula w osobnej linii: przy dłuższych zapytaniach od razu widać, co jest listą pól, a co warunkiem. Wynik: 5 wierszy - Gdańsk 2, Kraków 3, Niedzica 1, Szklarska Poręba 4, Wrocław 2, jak w kluczu. Zapytania zapisz w kwerendy.txt, zrzut jako kw1.jpg.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT miejsce, liczbaDni
FROM wycieczki
WHERE cena < 1000;
Zapytanie 2: liczące średnią cenę dla wycieczek pogrupowanych ze względu na liczbę dni (czyli średnia cena wycieczek jednodniowych, dwudniowych itd.). Kwerenda wybiera jedynie liczbę dni oraz średnią cenę, której kolumnę należy nazwać (alias) sredniaCena
GROUP BY liczbaDni - jedna grupa na każdą liczbę dni, AVG(cena) liczy średnią w grupie, AS sredniaCena nadaje kolumnie nazwę z arkusza,ROUND(..., 2) - cena ma grosze, więc dwa miejsca po przecinku (350.00) zamiast czterech, które daje samo AVG (350.0000). Klucz przyjmuje dowolną dokładność,ORDER BY liczbaDni - wiersze od jednodniowych do najdłuższych. MariaDB często zwraca grupy w tej kolejności i bez sortowania, ale to szczegół wykonania, nie gwarancja.Wynik: 1 - 150, 2 - 350, 3 - 500, 4 - 540, 7 - 1350, jak w kluczu. Zrzut: kw2.jpg.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT miejsce, liczbaDni
FROM wycieczki
WHERE cena < 1000;
-- Zapytanie 2
SELECT liczbaDni, ROUND(AVG(cena), 2) AS sredniaCena
FROM wycieczki
GROUP BY liczbaDni
ORDER BY liczbaDni;
Zapytanie 3: wybierające jedynie miejsce wycieczki i odpowiadającą mu nazwę zdjęcia dla wycieczek, których cena jest wyższa od 500 zł. Należy posłużyć się relacją
Aliasy w (wycieczki) i z (zdjecia): przy każdej kolumnie widać tabelę, a ON z.Wycieczki_id = w.id pokazuje parę kluczy relacji. w.cena > 500 - ostro większa, więc Kraków za dokładnie 500 zł odpada. Wynik: Pieniny 4.jpg, Szklarska Poręba 5.jpg, Tatry 6.jpg. Zrzut: kw3.jpg.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT miejsce, liczbaDni
FROM wycieczki
WHERE cena < 1000;
-- Zapytanie 2
SELECT liczbaDni, ROUND(AVG(cena), 2) AS sredniaCena
FROM wycieczki
GROUP BY liczbaDni
ORDER BY liczbaDni;
-- Zapytanie 3
SELECT w.miejsce, z.nazwa
FROM wycieczki AS w
JOIN zdjecia AS z ON z.Wycieczki_id = w.id
WHERE w.cena > 500;
Zapytanie 4: Tworzące użytkownika Ewa o haśle Ewa!Ewa dla bazy wycieczki na serwerze localhost
CREATE USER 'Ewa'@'localhost' IDENTIFIED BY 'Ewa!Ewa' - konto serwera: nazwa, host, z którego wolno się logować, i hasło w apostrofach (to jest zapis z klucza, R.1.6),GRANT SELECT ON wycieczki.* TO 'Ewa'@'localhost' - dodatek, który robi z konta użytkownika „dla bazy wycieczki”. Samo CREATE USER daje tylko prawo zalogowania się (USAGE), bez dostępu do żadnej bazy.Jakie prawa? Arkusz ich nie podaje, więc najmniejsze sensowne: odczyt (zasada najmniejszych uprawnień). Sprawdzone: Ewa odczytuje 7 wycieczek, a DELETE kończy się odmową dostępu. Na zrzucie kw4.jpg komunikat o wykonaniu przy zaznaczonej bazie wycieczki i wynik SHOW GRANTS.
⚠️ Rozbieżność arkusz-klucz: klucz CKE przyjmuje samo CREATE USER, które nie wiąże konta z bazą. GRANT niczego nie odbiera - kryterium ocenia zapis z pierwszej linii.
Hasło bez apostrofów (IDENTIFIED BY Ewa!Ewa) to błąd składni; bez @'localhost' konto dostaje host % (logowanie z dowolnego komputera).
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT miejsce, liczbaDni
FROM wycieczki
WHERE cena < 1000;
-- Zapytanie 2
SELECT liczbaDni, ROUND(AVG(cena), 2) AS sredniaCena
FROM wycieczki
GROUP BY liczbaDni
ORDER BY liczbaDni;
-- Zapytanie 3
SELECT w.miejsce, z.nazwa
FROM wycieczki AS w
JOIN zdjecia AS z ON z.Wycieczki_id = w.id
WHERE w.cena > 500;
-- Zapytanie 4
CREATE USER 'Ewa'@'localhost' IDENTIFIED BY 'Ewa!Ewa';
GRANT SELECT ON wycieczki.* TO 'Ewa'@'localhost';
Kroki 8-19 · po tym etapie masz 16 z 34 kryteriów (pkt)
Plik 6.jpg, wypakowany z archiwum, należy skadrować, tak aby była widoczna tylko część zdjęcia pomiędzy czarnymi kreskami (bez widocznych kresek). Odpowiednio wycięte zdjęcie powinno mieć rozmiary 640 px na 427 px. W przypadku drobnych rozbieżności rozmiaru spowodowanych niedokładnym przycięciem należy przeskalować obraz do dokładnego wymiaru 640 px na 427 px
Grafika jest taka sama jak w wersji podstawowej. W GIMP-ie narzędzie Kadrowanie, w jego opcjach pozycja 239, 0 i rozmiar 640 × 427 - zaznaczenie zaczyna się w pierwszej kolumnie za lewą kreską i kończy tuż przed prawą, więc skalowanie nie jest potrzebne. Plik → Nadpisz 6.jpg. Podgląd: oryginał z zaznaczonym kadrem.
Kadr z jedną kolumną kreski - przy krawędzi zostaje ciemny pasek, a klucz wymaga, żeby kreski nie były widoczne.
Składa się ze strony o nazwie galeria.html zapisanej w języku HTML5. Ustawiony język zawartości strony na polski. Jawnie zastosowany właściwy standard kodowania polskich znaków
<!DOCTYPE html>, <html lang="pl"> i <meta charset="UTF-8"> jako pierwszy element <head> - razem jedno kryterium (R.2.2). Strona nie ma PHP, otwiera się ją prosto z folderu.
galeria.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Biuro turystyczne”
<title> i przy okazji viewport - telefon nie pomniejsza strony do rozmiaru ekranu komputera.
galeria.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>Biuro turystyczne</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Całe formatowanie, także obie animacje, pochodzi ze styl.css.
Klucz odbiera R.3.4 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast #).
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: baner, poniżej trzy bloki: lewy, środkowy i prawy, poniżej blok miniatur, na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
Baner <header>, stopka <footer> (klucz R.2.4 wymaga ich wprost). Duże zdjęcie to główna treść strony - <main>, bloki ze strzałkami i pasek miniatur to <section>. Identyfikatory po angielsku (left, middle, right, thumbnails) posłużą siatce CSS jako nazwy pól. aria-label nazywa pasek miniatur dla czytnika ekranu - sekcja bez nagłówka nie ma innej nazwy.
galeria.html HTML zmienione: 12 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<section id="left">
</section>
<main id="middle">
</main>
<section id="right">
</section>
<section id="thumbnails" aria-label="Miniatury">
</section>
<footer>
</footer>
</body>
</html>Zawartość banera: nagłówek pierwszego stopnia o treści „Zwiedzamy Polskę”
<h1> w banerze.
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
</section>
<main id="middle">
</main>
<section id="right">
</section>
<section id="thumbnails" aria-label="Miniatury">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku lewego: przycisk o treści „<” (znak mniejszości – patrz tabela 2), którego wybranie powoduje wywołanie funkcji wyświetlającej poprzednie zdjęcie
< - encja z tabeli 2: goły „<” zaczynałby znacznik,type="button" - przycisk niczego nie wysyła, tylko uruchamia skrypt,aria-label="Poprzednie zdjęcie" - czytnik ekranu przeczyta, do czego służy przycisk, zamiast „mniejsze niż”. Na ekranie dalej widać strzałkę,previous - po nim skrypt podepnie funkcję.galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
</main>
<section id="right">
</section>
<section id="thumbnails" aria-label="Miniatury">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku środkowego: obraz o nazwie 1.jpg i tekście alternatywnym „Aktywne zdjęcie”
Obraz bez identyfikatora - to jedyny obraz w <main>, więc CSS i skrypt znajdą go selektorem #middle img.
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
</section>
<section id="thumbnails" aria-label="Miniatury">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku prawego: przycisk o treści „>” (znak większości – patrz tabela 2), którego wybranie powoduje wywołanie funkcji wyświetlającej następne zdjęcie
Lustrzany przycisk: encja >, type="button", aria-label="Następne zdjęcie", identyfikator next (R.2.6).
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
</section>
<footer>
</footer>
</body>
</html>Zawartość bloku miniatur: Siedem obrazów od 1.jpg do 7.jpg. Teksty alternatywne kolejno: Gdańsk, Kraków, Niedzica, Pieniny, Szklarska Poręba, Tatry, Wrocław
Siedem <img> w kolejności z arkusza (zgodnej z bazą). Ta lista będzie dla skryptu źródłem zdjęć galerii: kolejność miniatur wyznaczy kolejność przewijania, więc nowe zdjęcie w galerii to jedna linia HTML-u, bez zmian w skrypcie. Na razie zdjęcia są w pełnym rozmiarze.
galeria.html HTML zmienione: 7 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
</footer>
</body>
</html>Zawartość stopki: Nagłówek trzeciego stopnia o treści: „Autorem galerii jest:”. Paragraf z wstawionym numerem zdającego
<h3> i akapit. Na egzaminie w akapicie wpisujesz swój numer zdającego (PESEL), tu stoi autor rozwiązania. Komplet nagłówków i akapitu to R.2.5.
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
</footer>
</body>
</html>Odnośnik o treści „Więcej zdjęć” do strony http://pixabay.com otwierający się w nowej karcie przeglądarki
target="_blank" otwiera nową kartę (R.3.2). rel="noopener" odcina otwartą stronę od karty galerii: obca strona nie może przez window.opener podmienić adresu galerii. Nowe przeglądarki robią to same dla _blank, ale zapis jawny działa wszędzie. Adres zostaje dosłownie z arkusza (http://); pixabay sam przekieruje na https://.
target="blank" bez podkreślenia otwiera kartę nazwaną „blank” - kolejne kliknięcie trafia do tej samej karty. Poprawnie: _blank.
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
<a href="http://pixabay.com" target="_blank" rel="noopener">Więcej zdjęć</a>
</footer>
</body>
</html>Kroki 20-30 · po tym etapie masz 27 z 34 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Georgia, biały kolor czcionki
Dwa kolory z arkusza występują w kilku regułach (Maroon: baner, miniatury, stopka, strzałki; LightSalmon: bloki i przyciski), więc trafiają do zmiennych na :root. Selektor * z Georgią (i zapasowym krojem szeryfowym) oraz bielą - biel dostaje każdy element, także odnośnik (R.4.1). Na białym tle strony tekst chwilowo znika.
styl.css CSS nowy plik :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}Podział strony na bloki: baner, poniżej trzy bloki: lewy, środkowy i prawy, poniżej blok miniatur, na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
grid-template-areas rysuje obraz 2 słowami: baner przez trzy kolumny, potem trzy bloki obok siebie, pod nimi pasek miniatur i stopka, oba na całą szerokość. grid-template-columns: 15% 70% 15% to od razu szerokości bloków z arkusza (klucz R.4.5 przyjmuje je w tej postaci). Każdy blok dostaje nazwę pola przez grid-area.
W porównaniu z float: nie ma clear - pasek miniatur stoi pod blokami, bo siatka ma dla niego osobny wiersz (R.3.1).
styl.css CSS zmienione: 34 linie :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}Wspólne dla bloku banera i stopki: kolor tła Maroon, wyrównanie tekstu do środka, marginesy wewnętrzne 2 px
Jedna reguła na dwa selektory, kolor ze zmiennej (R.4.6).
styl.css CSS zmienione: 6 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}Wspólne dla bloków lewego, środkowego i prawego: kolor tła LightSalmon, wysokość 527 px
Trzy identyfikatory po przecinku. Selektor section nie wystarczyłby - złapałby pasek miniatur, a pominął <main>.
styl.css CSS zmienione: 5 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}Dodatkowo dla bloku lewego i prawego: szerokość 15%. Dodatkowo dla bloku środkowego: szerokość 70%
Te szerokości są już w grid-template-columns - nie dopisuje się width. Procentowa szerokość elementu siatki liczyłaby się od jego kolumny, więc width: 70% w kolumnie 70% dałoby blok szeroki na 49% strony.
width: 15% i width: 70% dopisane do bloków na siatce 15% 70% 15% zwężają je do 2,25% i 49% strony.
Podgląd strony bez zmian - taki jak po kroku 23.
Dla bloku miniatur: kolor tła Maroon, wysokość 70 px
Tło i wysokość z arkusza, a do tego:
display: flex - miniatury stają w rzędzie jako elementy elastyczne, a nie jako tekst w linii. Obraz w linii tekstu siedzi na linii bazowej i zostawia pod sobą kilka pikseli na „ogonki” liter; w flex tego odstępu nie ma i 70-pikselowe miniatury dokładnie wypełniają 70-pikselowy pasek,gap: 4px - stały odstęp zamiast spacji z kodu HTML (jej szerokość zależy od kroju),overflow: hidden - na początku animacji miniatury są rozsunięte i na wąskim ekranie wyszłyby poza pasek; tak „wjeżdżają” zza jego krawędzi, a strona nie dostaje poziomego paska przewijania.styl.css CSS zmienione: 8 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}
#thumbnails {
background-color: var(--maroon);
height: 70px;
display: flex;
gap: 4px;
overflow: hidden;
}Dla obu przycisków: kolor tła LightSalmon, kolor czcionki Maroon, bez obramowania, rozmiar czcionki 400%, blokowy sposób wyświetlania elementu, marginesy zewnętrzne automatycznie obliczane przez przeglądarkę, margines wewnętrzny górny 210 px
Selektor wskazuje przyciski w blokach ze strzałkami - gdyby na stronie pojawił się inny przycisk, nie dostanie 400%. display: block + margin: auto wyśrodkowuje przycisk w poziomie, padding-top: 210px spycha strzałkę mniej więcej na środek wysokości bloku. Kolor Maroon z tej reguły wygrywa z bielą z * (R.4.3). Ta reguła domyka kolory tła z R.4.2: Maroon banera, miniatur i stopki, LightSalmon bloków i przycisków. cursor: pointer (dodatek) - rączka nad przyciskiem bez ramki.
styl.css CSS zmienione: 12 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}
#thumbnails {
background-color: var(--maroon);
height: 70px;
display: flex;
gap: 4px;
overflow: hidden;
}
#left button,
#right button {
background-color: var(--salmon);
color: var(--maroon);
border: none;
font-size: 400%;
display: block;
margin: auto;
padding-top: 210px;
cursor: pointer;
}Dla obrazów miniatur: Styl miniatury: wysokość 70 px, animacja trwa 4 sekundy. Stan początkowy animacji: lewy margines wewnętrzny: 50 px. Stan końcowy animacji: lewy margines wewnętrzny: 0 px
@keyframes slide-in - klatki: from (stan początkowy) każda miniatura ma 50 px dopełnienia z lewej, to (stan końcowy) - 0. Klatki pośrednie liczy przeglądarka,animation: slide-in 4s - skrócony zapis animation-name i animation-duration w jednej linii (kolejne wartości skrótu to m.in. funkcja czasu i liczba powtórzeń). Nazwa z myślnikiem, jak nazwy właściwości CSS.Po wczytaniu strony miniatury stoją rozsunięte i przez 4 sekundy dosuwają się w lewo - „od prawej do lewej strony okna”, jak opisuje klucz. Wysokość miniatur 70 px domyka wysokości z R.4.4 (R.4.4, R.4.9).
Same klatki @keyframes bez animation w regule obrazu - animacja nigdy się nie uruchamia.
styl.css CSS zmienione: 14 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}
#thumbnails {
background-color: var(--maroon);
height: 70px;
display: flex;
gap: 4px;
overflow: hidden;
}
#left button,
#right button {
background-color: var(--salmon);
color: var(--maroon);
border: none;
font-size: 400%;
display: block;
margin: auto;
padding-top: 210px;
cursor: pointer;
}
#thumbnails img {
height: 70px;
animation: slide-in 4s;
}
@keyframes slide-in {
from {
padding-left: 50px;
}
to {
padding-left: 0;
}
}Dla obrazu z bloku środkowego: blokowy sposób wyświetlania elementu, marginesy zewnętrzne automatycznie obliczane przez przeglądarkę, górny margines wewnętrzny 45 px
To samo wyśrodkowanie co przy przyciskach: display: block + margin: auto. Ten krok domyka marginesy z R.4.7 i sposoby wyświetlania z R.4.8 (przyciski i zdjęcie blokowe, 400% i brak ramki przycisków).
styl.css CSS zmienione: 6 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}
#thumbnails {
background-color: var(--maroon);
height: 70px;
display: flex;
gap: 4px;
overflow: hidden;
}
#left button,
#right button {
background-color: var(--salmon);
color: var(--maroon);
border: none;
font-size: 400%;
display: block;
margin: auto;
padding-top: 210px;
cursor: pointer;
}
#thumbnails img {
height: 70px;
animation: slide-in 4s;
}
@keyframes slide-in {
from {
padding-left: 50px;
}
to {
padding-left: 0;
}
}
#middle img {
display: block;
margin: auto;
padding-top: 45px;
}Gdy kursor znajduje się na obrazie z bloku środkowego wykonana jest animacja: Stan początkowy animacji: skala 100%. Stan końcowy animacji: skala 120%. Styl obrazu: Skala 120%, czas trwania animacji 5 sekund
:hover - reguła działa, gdy kursor jest na zdjęciu. Klatki zoom-in prowadzą od scale(1) (100%) do scale(1.2) (120%) przez 5 sekund. transform: scale(1.2) w samej regule („Styl obrazu: Skala 120%”) trzyma powiększenie po końcu animacji - bez niego zdjęcie po 5 sekundach wróciłoby do 100%, choć kursor stoi na nim dalej (R.4.10). Po zjechaniu kursorem powiększenie znika od razu: animacja z @keyframes działa tylko w jedną stronę, a klucz wymaga właśnie jej.
styl.css CSS zmienione: 14 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}
#thumbnails {
background-color: var(--maroon);
height: 70px;
display: flex;
gap: 4px;
overflow: hidden;
}
#left button,
#right button {
background-color: var(--salmon);
color: var(--maroon);
border: none;
font-size: 400%;
display: block;
margin: auto;
padding-top: 210px;
cursor: pointer;
}
#thumbnails img {
height: 70px;
animation: slide-in 4s;
}
@keyframes slide-in {
from {
padding-left: 50px;
}
to {
padding-left: 0;
}
}
#middle img {
display: block;
margin: auto;
padding-top: 45px;
}
#middle img:hover {
transform: scale(1.2);
animation: zoom-in 5s;
}
@keyframes zoom-in {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}Dodatek spoza arkusza - klucz go nie ocenia. Zapytanie @media (prefers-reduced-motion: reduce) jest prawdziwe u osób, które w systemie zaznaczyły ograniczenie animacji (ruch na ekranie bywa dla nich męczący, a nawet wywołuje zawroty głowy). Dla nich obie animacje są wyłączone: miniatury stoją od razu na miejscu, a zdjęcie powiększa się bez płynnego przejścia. U pozostałych strona działa dokładnie jak w arkuszu.
styl.css CSS zmienione: 7 linii :root {
--maroon: Maroon;
--salmon: LightSalmon;
}
* {
font-family: Georgia, serif;
color: white;
}
body {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-areas:
"header header header"
"left middle right"
"thumbnails thumbnails thumbnails"
"footer footer footer";
}
header {
grid-area: header;
}
#left {
grid-area: left;
}
#middle {
grid-area: middle;
}
#right {
grid-area: right;
}
#thumbnails {
grid-area: thumbnails;
}
footer {
grid-area: footer;
}
header, footer {
background-color: var(--maroon);
text-align: center;
padding: 2px;
}
#left, #middle, #right {
background-color: var(--salmon);
height: 527px;
}
#thumbnails {
background-color: var(--maroon);
height: 70px;
display: flex;
gap: 4px;
overflow: hidden;
}
#left button,
#right button {
background-color: var(--salmon);
color: var(--maroon);
border: none;
font-size: 400%;
display: block;
margin: auto;
padding-top: 210px;
cursor: pointer;
}
#thumbnails img {
height: 70px;
animation: slide-in 4s;
}
@keyframes slide-in {
from {
padding-left: 50px;
}
to {
padding-left: 0;
}
}
#middle img {
display: block;
margin: auto;
padding-top: 45px;
}
#middle img:hover {
transform: scale(1.2);
animation: zoom-in 5s;
}
@keyframes zoom-in {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
@media (prefers-reduced-motion: reduce) {
#thumbnails img,
#middle img:hover {
animation: none;
}
}Kroki 31-35 · po tym etapie masz 34 z 34 kryteriów (pkt)
Działanie funkcji wyświetlającej następne zdjęcie: Zmienia aktywne zdjęcie w bloku środkowym na następne (np. 1.jpg na 2.jpg)
Skrypt na końcu <body> - wszystkie elementy już istnieją. Zostaje w pliku strony, bo klucz każe sprawdzać skrypt „w kodzie strony”.
const - stałe na duże zdjęcie i listę siedmiu miniatur; obie znajduje querySelector po selektorach CSS,photoIndex - pozycja wyświetlanego zdjęcia na liście miniatur, liczona od 0 (0 = 1.jpg). let, bo się zmienia,showPhoto(index) - jedno miejsce, które zmienia zdjęcie: plik bierze z miniatury o tym indeksie,nextPhoto prosi o pozycję o jeden dalej, a addEventListener("click", ...) podpina ją do przycisku „>” (R.3.3).Skrypt nie składa nazwy pliku z liczby - działa dla dowolnych nazw zdjęć. W podglądzie „>” już przewija galerię, ale za siódmym zdjęciem nie ma ósmej miniatury.
galeria.html HTML zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
<a href="http://pixabay.com" target="_blank" rel="noopener">Więcej zdjęć</a>
</footer>
<script>
const activePhoto = document.querySelector("#middle img");
const thumbnails = document.querySelectorAll("#thumbnails img");
let photoIndex = 0;
function showPhoto(index) {
photoIndex = index;
activePhoto.src = thumbnails[photoIndex].getAttribute("src");
}
function nextPhoto() {
showPhoto(photoIndex + 1);
}
document.querySelector("#next").addEventListener("click", nextPhoto);
</script>
</body>
</html>W przypadku, gdy jest wyświetlane ostatnie zdjęcie: 7.jpg zmienia zdjęcie na: 1.jpg
Reszta z dzielenia przez liczbę miniatur zawija numerację: przy siedmiu zdjęciach 7 % 7 daje 0, czyli pierwsze zdjęcie. Liczba 7 nie jest wpisana w skrypt - thumbnails.length policzy miniatury sama (R.5.3).
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
<a href="http://pixabay.com" target="_blank" rel="noopener">Więcej zdjęć</a>
</footer>
<script>
const activePhoto = document.querySelector("#middle img");
const thumbnails = document.querySelectorAll("#thumbnails img");
let photoIndex = 0;
function showPhoto(index) {
photoIndex = index % thumbnails.length;
activePhoto.src = thumbnails[photoIndex].getAttribute("src");
}
function nextPhoto() {
showPhoto(photoIndex + 1);
}
document.querySelector("#next").addEventListener("click", nextPhoto);
</script>
</body>
</html>Działanie funkcji wyświetlającej poprzednie zdjęcie: Zmienia aktywne zdjęcie w bloku środkowym na poprzednie (np. 3.jpg na 2.jpg)
Lustrzana funkcja previousPhoto prosi o pozycję o jeden wcześniej i dostaje własny nasłuchiwacz na przycisku „<”. Z 3.jpg (indeks 2) przechodzi na 2.jpg (R.5.4).
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
<a href="http://pixabay.com" target="_blank" rel="noopener">Więcej zdjęć</a>
</footer>
<script>
const activePhoto = document.querySelector("#middle img");
const thumbnails = document.querySelectorAll("#thumbnails img");
let photoIndex = 0;
function showPhoto(index) {
photoIndex = index % thumbnails.length;
activePhoto.src = thumbnails[photoIndex].getAttribute("src");
}
function nextPhoto() {
showPhoto(photoIndex + 1);
}
function previousPhoto() {
showPhoto(photoIndex - 1);
}
document.querySelector("#next").addEventListener("click", nextPhoto);
document.querySelector("#previous").addEventListener("click", previousPhoto);
</script>
</body>
</html>W przypadku, gdy jest wyświetlane pierwsze zdjęcie: 1.jpg zmienia zdjęcie na ostatnie: 7.jpg
Przy pierwszym zdjęciu previousPhoto prosi o indeks -1, a w JavaScripcie -1 % 7 daje -1 (reszta ma znak dzielnej), nie 6. Dlatego przed dzieleniem dodaje się liczbę miniatur: (-1 + 7) % 7 = 6, czyli 7.jpg, a dla indeksów dodatnich wynik się nie zmienia ((7 + 7) % 7 = 0). Jedna linia zawija numerację w obie strony (R.5.5).
Samo index % count przy pierwszym zdjęciu daje -1 - thumbnails[-1] nie istnieje i skrypt kończy się błędem.
galeria.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>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
<a href="http://pixabay.com" target="_blank" rel="noopener">Więcej zdjęć</a>
</footer>
<script>
const activePhoto = document.querySelector("#middle img");
const thumbnails = document.querySelectorAll("#thumbnails img");
let photoIndex = 0;
function showPhoto(index) {
const count = thumbnails.length;
photoIndex = (index + count) % count;
activePhoto.src = thumbnails[photoIndex].getAttribute("src");
}
function nextPhoto() {
showPhoto(photoIndex + 1);
}
function previousPhoto() {
showPhoto(photoIndex - 1);
}
document.querySelector("#next").addEventListener("click", nextPhoto);
document.querySelector("#previous").addEventListener("click", previousPhoto);
</script>
</body>
</html>Dodatki spoza arkusza - klucz ich nie ocenia:
alt miniatury, szablonem tekstowym. Na starcie zostaje dokładnie „Aktywne zdjęcie” z arkusza,keydown na całym dokumencie: strzałka w lewo i w prawo wywołują te same funkcje co przyciski. === porównuje bez zamiany typów.Nazwy mówią, co robią i co przechowują: activePhoto, thumbnails, photoIndex, showPhoto, nextPhoto, previousPhoto (R.5.6).
galeria.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biuro turystyczne</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zwiedzamy Polskę</h1>
</header>
<section id="left">
<button type="button" id="previous" aria-label="Poprzednie zdjęcie"><</button>
</section>
<main id="middle">
<img src="1.jpg" alt="Aktywne zdjęcie">
</main>
<section id="right">
<button type="button" id="next" aria-label="Następne zdjęcie">></button>
</section>
<section id="thumbnails" aria-label="Miniatury">
<img src="1.jpg" alt="Gdańsk">
<img src="2.jpg" alt="Kraków">
<img src="3.jpg" alt="Niedzica">
<img src="4.jpg" alt="Pieniny">
<img src="5.jpg" alt="Szklarska Poręba">
<img src="6.jpg" alt="Tatry">
<img src="7.jpg" alt="Wrocław">
</section>
<footer>
<h3>Autorem galerii jest:</h3>
<p>Bartosz Bryniarski</p>
<a href="http://pixabay.com" target="_blank" rel="noopener">Więcej zdjęć</a>
</footer>
<script>
const activePhoto = document.querySelector("#middle img");
const thumbnails = document.querySelectorAll("#thumbnails img");
let photoIndex = 0;
function showPhoto(index) {
const count = thumbnails.length;
photoIndex = (index + count) % count;
activePhoto.src = thumbnails[photoIndex].getAttribute("src");
activePhoto.alt = `Aktywne zdjęcie: ${thumbnails[photoIndex].alt}`;
}
function nextPhoto() {
showPhoto(photoIndex + 1);
}
function previousPhoto() {
showPhoto(photoIndex - 1);
}
document.querySelector("#next").addEventListener("click", nextPhoto);
document.querySelector("#previous").addEventListener("click", previousPhoto);
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowLeft") {
previousPhoto();
} else if (event.key === "ArrowRight") {
nextPhoto();
}
});
</script>
</body>
</html>Krok 36 · po tym etapie masz 34 z 34 kryteriów (pkt)
Obie wersje dają komplet 34 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| układ | float: left trzech bloków, clear paska miniatur | grid-template-areas na <body>, szerokości w grid-template-columns |
| duże zdjęcie | <section> | <main> - główna treść strony |
| pasek miniatur | obrazy w linii tekstu | flex z gap i overflow: hidden |
| animacje | animation-name + animation-duration | skrót animation, wyłączane przy prefers-reduced-motion |
| numer zdjęcia | photoNumber sklejany z „.jpg”, dwa warunki z liczbą 7 | indeks na liście miniatur, zawijanie (index + count) % count |
| zdarzenia | atrybuty onclick | addEventListener, do tego strzałki klawiatury |
| zapytanie 4 | samo CREATE USER (konto bez dostępu do bazy) | CREATE USER + GRANT SELECT ON wycieczki.* |
Na egzaminie wersja podstawowa jest prostsza do napisania z pamięci i trzyma się podpowiedzi z tabel arkusza. Nowoczesna działa dla dowolnej liczby i dowolnych nazw zdjęć - galerię rozbudowuje się w HTML-u, bez dotykania skryptu. Przy siatce pamiętaj, żeby szerokości bloków nie powtarzać w width.
Podgląd strony bez zmian - taki jak po kroku 35.
Krok 37 · po tym etapie masz 34 z 34 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. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt nazwa przeglądarki, w której sprawdzana była strona i animacje. W folderze z numerem zdającego: 1.jpg - 7.jpg (6.jpg wykadrowany), galeria.html, import.png, kw1.jpg - kw4.jpg, kwerendy.txt, przeglądarka.txt, styl.css. 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 35.
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.