Rozwiązanie obejmuje bazę baza (pracownicy i stanowiska) z czterema zapytaniami - warunek na stażu, średnia pensja AVG z grupowaniem i złączeniem tabel, podzapytanie z MAX wskazujące najlepiej zarabiającego i UPDATE podnoszący staż wszystkich o rok - potem zdjęcie przeskalowane do 500 px, stronę obrazki.html z banerem, czterema blokami ze zdjęciami (pola opcji, przyciski, suwaki) i stopką, style w styl.css oraz skrypt JavaScript, który nakłada na zdjęcia filtry CSS: rozmycie, sepię, negatyw, odcienie szarości, przezroczystość i jasność ustawioną suwakiem.
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 powstaje najpierw w najprostszej postaci, elementami z tabeli 2 arkusza (atrybut onclick, getElementById, checked, value, style.filter), a na końcu zostaje przerobiony na wersję z prawdziwych projektów: etykiety pól opcji, obsługa zdarzeń w skrypcie i wartości filtrów zapisane w jednym miejscu.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid)” jest drugi sposób rozwiązania tego samego arkusza: bloki na siatce CSS, kolory w zmiennych, pola opcji z etykietami bez <br> i jedna funkcja nakładająca filtr na zdjęcie bloku, wywoływana z nasłuchiwaczy zdarzeń - obie wersje są zgodne z kluczem.
Baza i zdjęcia pochodzą z prawdziwego archiwum pliki12 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Każda wersja skryptu była uruchomiona w przeglądarce Chrome: zaznaczenie każdego pola opcji, kliknięcie każdego przycisku i przesunięcie obu suwaków; w podglądzie możesz zrobić to samo.
Jak liczą się punkty. Klucz ma 41 kryteriów (R.1.1 - R.5.10), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 31 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 41 kryteriów (pkt)
Utwórz bazę danych o nazwie baza, z zestawem polskich znaków (np. utf8_unicode_ci)
Najpierw rozpakowanie pliki12.zip z pulpitu (hasło #TransfoRm@cje - krzyżyk na początku, wielkie T i R, małpa zamiast „a”) do folderu nazwanego numerem zdającego. W phpMyAdmin: Nowa, nazwa baza (tak, baza nazywa się po prostu „baza”), porównywanie utf8_unicode_ci.
Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Zaznacz bazę baza, potem Import → baza.sql → Wykonaj. Powstają dwie tabele z obrazu 1: pracownicy (imię, nazwisko, pensja, staż w latach, klucz obcy stanowiska_id) i stanowiska.
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. Import idzie do PNG, zrzuty zapytań 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 imię i pensję pracowników ze stażem mniejszym niż 5 lat
SELECT imie, pensja,FROM pracownicy,WHERE staz < 5 - „mniejszym niż”, więc bez równości: osoby ze stażem 5 nie wchodzą.Wynik: 2 wiersze - Janusz i Andżelika, obie pensje 4700. Zapytania zapisujesz w kwerendy.txt, zrzut jako kw1.jpg. To zapytanie wykonaj przed zapytaniem 4 - po podniesieniu stażu wynik mógłby się zmienić (klucz o tym wspomina).
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, pensja FROM pracownicy WHERE staz < 5;
Zapytanie 2: liczące średnią pensję pracowników ze względu na rodzaj stanowiska. Zapytanie pokazuje średnią pensję na danym stanowisku i nazwę stanowiska. Należy posłużyć się relacją
SELECT AVG(pensja), nazwa - funkcja agregująca AVG liczy średnią w każdej grupie,FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id - złączenie przez relację, bo nazwa stanowiska jest w drugiej tabeli,GROUP BY nazwa - jedna grupa na stanowisko.Wynik: 5 wierszy - Dyrektor 8000, Kadrowa 5000, Kierownik 6000, Logistyk 4890, Operator 3920. MariaDB wypisuje średnią z czterema miejscami po przecinku (4890.0000) - klucz dopuszcza dowolne zaokrąglenie. Zrzut: kw2.jpg.
Bez GROUP BY zapytanie zwraca jedną średnią dla całej firmy - zrzut nie ma pięciu wierszy.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, pensja FROM pracownicy WHERE staz < 5;
-- Zapytanie 2
SELECT AVG(pensja), nazwa FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id GROUP BY nazwa;
Zapytanie 3: wybierające jedynie imię, nazwisko i pensję pracownika, którego pensja jest najwyższa. Zapytanie musi mieć charakter uniwersalny, a najwyższa pensja powinna zostać wyliczona np. przez zagnieżdżone zapytanie (podzapytanie)
SELECT imie, nazwisko, pensja FROM pracownicy,WHERE pensja = (SELECT MAX(pensja) FROM pracownicy) - podzapytanie w nawiasie wykonuje się najpierw i zwraca jedną liczbę: najwyższą pensję w tabeli.„Uniwersalne” znaczy, że nie wpisujesz 8000 na sztywno - po podwyżce komuś innemu zapytanie wskaże właściwą osobę samo. Wynik: 1 wiersz - Krzysztof Dobromilski, 8000. Zrzut: kw3.jpg.
WHERE pensja = 8000 daje dziś ten sam wynik, ale nie jest uniwersalne - klucz wymaga, żeby najwyższa pensja była wyliczona. Uwaga też na SELECT imie, nazwisko, MAX(pensja) FROM pracownicy: klucz go przyjmuje, ale imię i nazwisko pochodzą wtedy z pierwszego wiersza tabeli, a nie od osoby z najwyższą pensją - sprawdzone: po podwyżce Joanny Trojanowskiej do 9000 takie zapytanie pokazuje „Krzysztof Dobromilski 9000”, a wersja z podzapytaniem - Trojanowską.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, pensja FROM pracownicy WHERE staz < 5;
-- Zapytanie 2
SELECT AVG(pensja), nazwa FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id GROUP BY nazwa;
-- Zapytanie 3
SELECT imie, nazwisko, pensja FROM pracownicy WHERE pensja = (SELECT MAX(pensja) FROM pracownicy);
Zapytanie 4: aktualizujące staż wszystkich pracowników, nowa wartość stażu jest wyższa o jeden rok
UPDATE pracownicy SET staz = staz + 1 - po prawej stronie znaku = stoi stara wartość pola, więc każdy wiersz dostaje swój staż powiększony o 1. Brak WHERE jest tu celowy: „wszystkich pracowników”. phpMyAdmin pokazuje „Zmodyfikowanych rekordów: 14”; na zrzucie kw4.jpg jest też tabela po zmianie (dyrektor ma już 31 lat stażu). Wykonaj je raz - każde ponowne kliknięcie dodaje kolejny rok.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, pensja FROM pracownicy WHERE staz < 5;
-- Zapytanie 2
SELECT AVG(pensja), nazwa FROM pracownicy JOIN stanowiska ON pracownicy.stanowiska_id = stanowiska.id GROUP BY nazwa;
-- Zapytanie 3
SELECT imie, nazwisko, pensja FROM pracownicy WHERE pensja = (SELECT MAX(pensja) FROM pracownicy);
-- Zapytanie 4
UPDATE pracownicy SET staz = staz + 1;
Kroki 8-25 · po tym etapie masz 19 z 41 kryteriów (pkt)
Grafikę pszczola.jpg należy przeskalować z zachowaniem proporcji do szerokości 500 px.
Oryginał ma 592 × 391 px. W GIMP-ie Obraz → Skaluj obraz, szerokość 500 px przy zamkniętym łańcuchu proporcji - wysokość wychodzi 330 px (klucz: 330 ±5). Pozostałe trzy zdjęcia mają już 500 × 330 px, więc po tej zmianie wszystkie cztery bloki wyglądają jednakowo.
Składa się ze strony o nazwie obrazki.html zapisanej w języku HTML5
Deklaracja <!DOCTYPE html> i szkielet z sekcjami <head> i <body>.
obrazki.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Ustawiony język zawartości strony na polski
Atrybut lang="pl" w znaczniku <html>.
obrazki.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>. Z deklaracją HTML5, językiem i sekcjami head i body to jedno kryterium klucza.
obrazki.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: „Efekty obrazu”
<title> w <head>. Uwaga: tytuł to „Efekty obrazu”, a nagłówek w banerze - „Efekty na obrazach”.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa pliku: styl.css. Całe formatowanie ma pochodzić z tego pliku (R.3.6). Skrypt zmienia style.filter zdjęć - to działanie skryptu, a nie formatowanie w HTML-u.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na baner, poniżej cztery bloki, na dole stopka. 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> (R.2.4), a cztery bloki to cztery <section> w jednym <main>. Wspólny rodzic ułatwi ustawienie bloków po dwa w rzędzie, a identyfikatory block1 - block4 pozwolą odwołać się do konkretnego bloku.
obrazki.html HTML zmienione: 14 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
<section id="block1">
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość banera: nagłówek drugiego stopnia o treści „Efekty na obrazach”
Drugiego stopnia, czyli <h2> - arkusz nie przewiduje <h1>.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku: Obraz pszczola.jpg z tekstem alternatywnym o treści „pszczoła na fioletowym kwiatku”
Obraz z przeskalowanym plikiem i tekstem alternatywnym. Identyfikator image1 przyda się skryptowi - po nim znajdzie zdjęcie, na które nakłada filtr.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1">
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej trzy pola opcji: „Blur”, „Sepia” i „Negatyw”, zgrupowane tak, że jednocześnie może być wybrane tylko jedno pole
Pole opcji to <input type="radio">. Grupę tworzy wspólna wartość atrybutu name (effect) - przeglądarka pozwala zaznaczyć tylko jedno pole z tej samej grupy (R.3.3). Identyfikatory blur, sepia, invert pozwolą skryptowi sprawdzić, które pole jest zaznaczone. <br> po obrazie i po każdym polu ustawia je jedno pod drugim, jak na obrazie 2.
Trzy różne wartości name (albo brak name) pozwalają zaznaczyć wszystkie trzy pola naraz - punkt za grupowanie przepada.
obrazki.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformacje obrazu 1
Przycisk <button>. Działanie (zdarzenie kliknięcia) dostanie w części ze skryptem.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość drugiego bloku: Obraz pomarancza.jpg z tekstem alternatywnym o treści „drzewo pomarańczy”. Poniżej przycisk „Kolorowy” oraz przycisk „Czarno-biały”, ich kliknięcie powoduje transformację obrazu 2
Zdjęcie image2 i dwa przyciski obok siebie (przyciski są elementami liniowymi, więc stają w jednym wierszu). Uwaga: w opisie skryptu arkusz nazywa pierwszy przycisk „Kolory”, ale w zawartości bloku i w kluczu (R.2.8) jest „Kolorowy” - ta nazwa trafia na przycisk.
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość trzeciego bloku: Obraz owoce.jpg z tekstem alternatywnym o treści „Kosz pełen owoców”. Poniżej pole edycyjne w postaci suwaka z wartością minimalną 0 i maksymalną 100, wartość ustawiona w stanie początkowym to 100
Suwak to <input type="range"> (tabela 2 arkusza wymienia typ range). Atrybuty min="0", max="100" i value="100" - suwak startuje przy prawej krawędzi, jak na obrazie 2 (R.3.4). Identyfikator opacityRange mówi, do czego służy: ustawia przezroczystość.
Bez value="100" suwak staje na środku (domyślnie połowa zakresu) - klucz wymaga wartości początkowej 100.
obrazki.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformację obrazu 3
Drugi przycisk „Zastosuj” - tym razem dla przezroczystości.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość czwartego bloku: Obraz zolw.jpg z tekstem alternatywnym o treści „Żółw w wodzie”. Poniżej pole edycyjne w postaci suwaka z wartością minimalną 0 i maksymalną 250
Wartości początkowej arkusz tym razem nie podaje, więc suwak staje w połowie zakresu (125) - dokładnie jak na obrazie 2. Wszystkie cztery bloki mają już zdjęcia z tekstami alternatywnymi (R.2.6), a bloki 3 i 4 - suwaki (R.2.9).
obrazki.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
</section>
</main>
<footer>
</footer>
</body>
</html>Poniżej przycisk „Zastosuj”, którego kliknięcie powoduje transformację obrazu 4
Trzeci przycisk „Zastosuj”. Komplet przycisków: „Kolorowy” i „Czarno-biały” w bloku 2 oraz „Zastosuj” w blokach 1, 3 i 4 (R.2.8).
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: Paragraf (akapit) z odnośnikiem do adresu http://www.css.com/, o treści „Zobacz inne efekty obrazu”. Odnośnik otwiera się w nowej karcie przeglądarki
Odnośnik w akapicie. Nową kartę otwiera atrybut target="_blank" (R.3.2).
Bez target="_blank" strona css.com otwiera się w tej samej karcie - druga część kryterium R.3.2 nie jest spełniona.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
</footer>
</body>
</html>Paragraf o treści: „Stronę wykonał: ”, dalej wstawiony numer zdającego.
Drugi akapit stopki. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania. Nagłówek <h2> w banerze i dwa akapity w stopce to kryterium R.2.5.
obrazki.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 26-34 · po tym etapie masz 30 z 41 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Century, w przypadku jego braku Serif, wyrównanie tekstu do środka
Selektor uniwersalny *. Najpierw Century, na końcu rodzina zapasowa serif - klucz uznaje tylko taką kolejność. text-align: center wyśrodkowuje też zdjęcia, pola i przyciski, bo to elementy liniowe.
styl.css CSS nowy plik * {
font-family: Century, serif;
text-align: center;
}Wspólne dla banera i stopki: kolor tła Indigo, biały kolor czcionki, tekst pochylony, marginesy wewnętrzne 2 px
Jedna reguła dla dwóch selektorów. Pochylenie: font-style: italic (R.4.6).
styl.css CSS zmienione: 6 linii * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}Wspólny dla czterech bloków: szerokość 50%, wysokość 470 px
Selektor section łapie wszystkie cztery bloki. Bloki stoją jeszcze jeden pod drugim - po dwa w rzędzie ustawi je reguła układu.
styl.css CSS zmienione: 4 linie * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}Dla selektora obrazu: marginesy wewnętrzne 3 px, zewnętrzne 10 px, obramowanie linią kreskową o grubości 2 px koloru SlateBlue
Selektor znacznika img - uwaga w arkuszu: styl obrazu wyłącznie selektorem znacznika. Linia kreskowa to dashed (dotted to kropki). Wewnętrzny margines 3 px odsuwa ramkę od zdjęcia.
styl.css CSS zmienione: 5 linii * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed SlateBlue;
}Dla odnośnika: biały kolor czcionki
Bez tej reguły odnośnik w stopce byłby granatowy na fioletowym tle.
styl.css CSS zmienione: 3 linie * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed SlateBlue;
}
a {
color: white;
}Dla przycisków: kolor tła SlateBlue, biały kolor czcionki, brak obramowania, marginesy wewnętrzne górny i dolny 10 px, lewy i prawy 20 px, margines zewnętrzny górny 10 px
padding: 10px 20px - pierwsza wartość to góra i dół, druga to lewo i prawo. border: none usuwa szarą ramkę przycisku. Ta reguła zamyka kryteria kolorów tła (R.4.2), białego tekstu (R.4.3), marginesów wewnętrznych (R.4.7), zewnętrznych (R.4.8) i obramowań (R.4.9).
styl.css CSS zmienione: 7 linii * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed SlateBlue;
}
a {
color: white;
}
button {
background-color: SlateBlue;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
}W momencie, gdy kursor myszy znajdzie się na przycisku, jego kolor tła zmienia się na Indigo
Pseudoklasa :hover. Najedź w podglądzie na dowolny przycisk.
styl.css CSS zmienione: 3 linie * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed SlateBlue;
}
a {
color: white;
}
button {
background-color: SlateBlue;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
}
button:hover {
background-color: Indigo;
}Jedynie dla pól edycyjnych w postaci suwaka: szerokość 80%
„Jedynie dla suwaków” - samo input objęłoby też pola opcji i rozciągnęło je na całą szerokość. Selektor atrybutu input[type="range"] trafia tylko w pola typu range (klucz uznaje też klasę albo dwa identyfikatory). Szerokości: bloki 50% i suwaki 80% - R.4.5.
styl.css CSS zmienione: 3 linie * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed SlateBlue;
}
a {
color: white;
}
button {
background-color: SlateBlue;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
}
button:hover {
background-color: Indigo;
}
input[type="range"] {
width: 80%;
}Podział strony na baner, poniżej cztery bloki, na dole stopka. 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
<main> jako kontener flex: bloki stają w rzędzie, a flex-wrap: wrap przenosi trzeci blok do nowej linii, gdy dwa po 50% wypełnią szerokość - wychodzą dwa rzędy po dwa bloki. Stopka nie potrzebuje clear, bo flex nie wypuszcza bloków poza <main> (R.3.1).
display: flex bez flex-wrap: wrap ściska wszystkie cztery bloki w jednym rzędzie po 25% - układ jest niezgodny z obrazem 2.
styl.css CSS zmienione: 4 linie * {
font-family: Century, serif;
text-align: center;
}
header, footer {
background-color: Indigo;
color: white;
font-style: italic;
padding: 2px;
}
section {
width: 50%;
height: 470px;
}
img {
padding: 3px;
margin: 10px;
border: 2px dashed SlateBlue;
}
a {
color: white;
}
button {
background-color: SlateBlue;
color: white;
border: none;
padding: 10px 20px;
margin-top: 10px;
}
button:hover {
background-color: Indigo;
}
input[type="range"] {
width: 80%;
}
main {
display: flex;
flex-wrap: wrap;
}Kroki 35-40 · po tym etapie masz 41 z 41 kryteriów (pkt)
Transformacje obrazu 1: Gdy zaznaczono pole Blur na obraz jest nakładany filtr rozmycia o dowolnej wartości z przedziału 4 px ÷ 8 px
Przycisk „Zastosuj” w bloku 1 dostaje zdarzenie onclick, które wywołuje funkcję applyEffect (R.3.5). Funkcja sprawdza właściwość checked pola opcji - jest true, gdy pole jest zaznaczone (R.5.2). Filtr nakłada się przez style.filter, wartością z tabeli 3: blur(5px) - 5 px mieści się w przedziale 4-8 px (R.5.5). Zaznacz w podglądzie „Blur” i kliknij „Zastosuj”.
obrazki.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
}
</script>
</body>
</html>Gdy zaznaczono pole Sepia na obraz nakładany jest filtr kolorów sepii (efekt starej fotografii) o wartości 100%
To samo dla drugiego pola: sepia(100%) - pełna sepia, jak w tabeli 1 arkusza. Każdy filtr zastępuje poprzedni, bo do style.filter przypisujesz nową wartość, a nie dopisujesz.
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
if (document.getElementById("sepia").checked) {
document.getElementById("image1").style.filter = "sepia(100%)";
}
}
</script>
</body>
</html>Gdy zaznaczono pole Negatyw na obraz nakładany jest filtr odwrócenia kolorów (negatyw) w 100%
Negatyw to filtr invert (odwrócenie kolorów), w 100%. Sprawdzone w Chrome: po kolei Blur, Sepia, Negatyw i za każdym razem „Zastosuj” - filtr zdjęcia to blur(5px), sepia(100%), invert(100%).
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
if (document.getElementById("sepia").checked) {
document.getElementById("image1").style.filter = "sepia(100%)";
}
if (document.getElementById("invert").checked) {
document.getElementById("image1").style.filter = "invert(100%)";
}
}
</script>
</body>
</html>Transformacje obrazu 2: Po wciśnięciu przycisku „Kolory” obraz ma zdjęty filtr odcieni szarości. Po wciśnięciu przycisku „Czarno-biały” na obraz jest nakładany filtr odcieni szarości o wartości 100%
Jedna funkcja z parametrem dla obu przycisków: setGrayscale(100) daje pełne odcienie szarości, setGrayscale(0) zdejmuje filtr (0% to oryginał - tabela 3). Wartość filtra jest sklejana z tekstu i liczby: "grayscale(" + percent + "%)". Przycisk z arkusza „Kolory” to ten sam przycisk, który w bloku 2 nazywa się „Kolorowy” - klucz używa obu nazw (R.5.3, R.5.8).
obrazki.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button onclick="setGrayscale(0)">Kolorowy</button>
<button onclick="setGrayscale(100)">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function setGrayscale(percent) {
document.getElementById("image2").style.filter = "grayscale(" + percent + "%)";
}
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
if (document.getElementById("sepia").checked) {
document.getElementById("image1").style.filter = "sepia(100%)";
}
if (document.getElementById("invert").checked) {
document.getElementById("image1").style.filter = "invert(100%)";
}
}
</script>
</body>
</html>Transformacje obrazu 3: Po wciśnięciu przycisku „Zastosuj” na obraz jest nakładany filtr przezroczystości o wartości, która została wskazana suwakiem
Pozycję suwaka odczytuje właściwość value (od 0 do 100). Filtr opacity przyjmuje procenty: 100% to pełne zdjęcie, 0% - całkiem przezroczyste (R.5.4). Test w Chrome: suwak na 40, „Zastosuj”, filtr zdjęcia to opacity(40%). Przesuń suwak w podglądzie w lewo i kliknij „Zastosuj” - kosz z owocami blednie razem z kreskową ramką, bo filtr działa na cały element <img>, łącznie z jego obramowaniem.
obrazki.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button onclick="setGrayscale(0)">Kolorowy</button>
<button onclick="setGrayscale(100)">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button onclick="applyOpacity()">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function setGrayscale(percent) {
document.getElementById("image2").style.filter = "grayscale(" + percent + "%)";
}
function applyOpacity() {
let opacity = document.getElementById("opacityRange").value;
document.getElementById("image3").style.filter = "opacity(" + opacity + "%)";
}
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
if (document.getElementById("sepia").checked) {
document.getElementById("image1").style.filter = "sepia(100%)";
}
if (document.getElementById("invert").checked) {
document.getElementById("image1").style.filter = "invert(100%)";
}
}
</script>
</body>
</html>Transformacje obrazu 4: Po wciśnięciu przycisku „Zastosuj” na obraz jest nakładany filtr zmiany jasności o wartości, która została wskazana suwakiem.
Ten sam wzór z filtrem brightness: 100% to oryginał, mniej przyciemnia (0% - całkiem czarne), więcej rozjaśnia - suwak sięga do 250% (R.5.9). Pełny test w Chrome przechodzi wszystkie przypadki: trzy pola opcji, oba przyciski bloku 2 i oba suwaki. Nazwy funkcji i zmiennych mówią, co robią: applyEffect, setGrayscale, applyOpacity, applyBrightness, opacity, brightness, percent (R.5.10).
obrazki.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<input type="radio" name="effect" id="blur">Blur<br>
<input type="radio" name="effect" id="sepia">Sepia<br>
<input type="radio" name="effect" id="invert">Negatyw<br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button onclick="setGrayscale(0)">Kolorowy</button>
<button onclick="setGrayscale(100)">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button onclick="applyOpacity()">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button onclick="applyBrightness()">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function setGrayscale(percent) {
document.getElementById("image2").style.filter = "grayscale(" + percent + "%)";
}
function applyOpacity() {
let opacity = document.getElementById("opacityRange").value;
document.getElementById("image3").style.filter = "opacity(" + opacity + "%)";
}
function applyBrightness() {
let brightness = document.getElementById("brightnessRange").value;
document.getElementById("image4").style.filter = "brightness(" + brightness + "%)";
}
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
if (document.getElementById("sepia").checked) {
document.getElementById("image1").style.filter = "sepia(100%)";
}
if (document.getElementById("invert").checked) {
document.getElementById("image1").style.filter = "invert(100%)";
}
}
</script>
</body>
</html>Kroki 41-42 · po tym etapie masz 41 z 41 kryteriów (pkt)
Poniżej trzy pola opcji: „Blur”, „Sepia” i „Negatyw”, zgrupowane tak, że jednocześnie może być wybrane tylko jedno pole
W wersji z egzaminu napis „Sepia” to zwykły tekst obok pola - trzeba trafić w małe kółko. Pole opcji opakowane w <label> zaznacza się także po kliknięciu w napis (sprawdzone w Chrome), a czytnik ekranu odczytuje nazwę pola. Wygląd strony się nie zmienia. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
obrazki.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<label><input type="radio" name="effect" id="blur">Blur</label><br>
<label><input type="radio" name="effect" id="sepia">Sepia</label><br>
<label><input type="radio" name="effect" id="invert">Negatyw</label><br>
<button onclick="applyEffect()">Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button onclick="setGrayscale(0)">Kolorowy</button>
<button onclick="setGrayscale(100)">Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button onclick="applyOpacity()">Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button onclick="applyBrightness()">Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
function setGrayscale(percent) {
document.getElementById("image2").style.filter = "grayscale(" + percent + "%)";
}
function applyOpacity() {
let opacity = document.getElementById("opacityRange").value;
document.getElementById("image3").style.filter = "opacity(" + opacity + "%)";
}
function applyBrightness() {
let brightness = document.getElementById("brightnessRange").value;
document.getElementById("image4").style.filter = "brightness(" + brightness + "%)";
}
function applyEffect() {
if (document.getElementById("blur").checked) {
document.getElementById("image1").style.filter = "blur(5px)";
}
if (document.getElementById("sepia").checked) {
document.getElementById("image1").style.filter = "sepia(100%)";
}
if (document.getElementById("invert").checked) {
document.getElementById("image1").style.filter = "invert(100%)";
}
}
</script>
</body>
</html>Realizuje transformacje obrazów. Przykładowe wyniki transformacji są umieszczone w tabeli 1. Tabela 3 specyfikuje wartości właściwości filter, którą należy zastosować w skryptach
Trzy zmiany. addEventListener przypina obsługę kliknięcia w skrypcie, więc przyciski w HTML-u nie mają już atrybutów onclick. Zaznaczone pole opcji znajduje jeden selektor input[name="effect"]:checked - zamiast trzech osobnych if. Wartości filtrów stoją w jednym obiekcie radioFilters (identyfikator pola → filtr), a wszystkie bloki korzystają z jednej funkcji setFilter, więc czwarte pole opcji to jedna linia w obiekcie. Sprawdzone w Chrome tym samym pełnym testem co wersja z egzaminu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
obrazki.html HTML zmienione: 28 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Efekty obrazu</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Efekty na obrazach</h2>
</header>
<main>
<section id="block1">
<img src="pszczola.jpg" alt="pszczoła na fioletowym kwiatku" id="image1"><br>
<label><input type="radio" name="effect" id="blur">Blur</label><br>
<label><input type="radio" name="effect" id="sepia">Sepia</label><br>
<label><input type="radio" name="effect" id="invert">Negatyw</label><br>
<button>Zastosuj</button>
</section>
<section id="block2">
<img src="pomarancza.jpg" alt="drzewo pomarańczy" id="image2"><br>
<button>Kolorowy</button>
<button>Czarno-biały</button>
</section>
<section id="block3">
<img src="owoce.jpg" alt="Kosz pełen owoców" id="image3"><br>
<input type="range" min="0" max="100" value="100" id="opacityRange"><br>
<button>Zastosuj</button>
</section>
<section id="block4">
<img src="zolw.jpg" alt="Żółw w wodzie" id="image4"><br>
<input type="range" min="0" max="250" id="brightnessRange"><br>
<button>Zastosuj</button>
</section>
</main>
<footer>
<p><a href="http://www.css.com/" target="_blank">Zobacz inne efekty obrazu</a></p>
<p>Stronę wykonał: Bartosz Bryniarski</p>
</footer>
<script>
const radioFilters = { blur: "blur(5px)", sepia: "sepia(100%)", invert: "invert(100%)" };
function setFilter(imageId, value) {
document.getElementById(imageId).style.filter = value;
}
document.querySelector("#block1 button").addEventListener("click", function () {
const checked = document.querySelector('input[name="effect"]:checked');
if (checked) {
setFilter("image1", radioFilters[checked.id]);
}
});
document.querySelector("#block2 button:nth-of-type(1)").addEventListener("click", function () {
setFilter("image2", "grayscale(0%)");
});
document.querySelector("#block2 button:nth-of-type(2)").addEventListener("click", function () {
setFilter("image2", "grayscale(100%)");
});
document.querySelector("#block3 button").addEventListener("click", function () {
setFilter("image3", "opacity(" + document.getElementById("opacityRange").value + "%)");
});
document.querySelector("#block4 button").addEventListener("click", function () {
setFilter("image4", "brightness(" + document.getElementById("brightnessRange").value + "%)");
});
/* Wersja z egzaminu: atrybuty onclick w przyciskach i funkcje applyEffect (trzy osobne if),
setGrayscale, applyOpacity, applyBrightness. */
</script>
</body>
</html>Krok 43 · po tym etapie masz 41 z 41 kryteriów (pkt)
UWAGA: 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 wpisujesz nazwę przeglądarki, w której sprawdzana była strona - przy filtrach CSS to ważne, bo starsze przeglądarki ich nie obsługują.
W folderze z numerem zdającego: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, obrazki.html, owoce.jpg, pomarancza.jpg, pszczola.jpg, przeglądarka.txt, styl.css, zolw.jpg. Po nagraniu płyty 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 42.
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.