Przejdź do głównej treści
EE.09-06-22.01-SGStyczeń 2022 · 25 kroków · ok. 72 min · 37 kryteriów z klucza

Rozwiązanie krok po kroku: Konfigurator stylów CSS w JavaScript (Nowoczesny kod (flex, addEventListener))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza auta z czterema zapytaniami, zdjęcie Gibraltaru o szerokości 300 px oraz strona konfigurator.html, na której kontrolki z bloku lewego zmieniają wygląd bloku prawego - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • flex zamiast float: blok lewy i prawy stoją w <main>, a obraz z listą - we wspólnym kontenerze; ani stopka, ani akapit nie potrzebują clear,
  • etykiety <label> przy każdej kontrolce, pola radio z wartościami (value="square") i przyciski z atrybutem data-color - kolor przycisku i kolor tła bierze się z tego samego miejsca,
  • zmienne CSS dla kolorów bloków,
  • skrypt w osobnym pliku skrypt.js, podpięty z atrybutem defer, z obsługą zdarzeń przez addEventListener zamiast atrybutów onclick w HTML-u,
  • ramka obrazu włączana klasą CSS, a rozmiar czcionki sprawdzany przed użyciem.

To arkusz EE.09 ze stycznia 2022 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Baza, zdjęcie i tekst pochodzą z oryginalnego archiwum CKE pliki6 (załącznik na stronie arkusza), zapytania i zrzuty są policzone na MariaDB 10.4, a każda reakcja skryptu sprawdzona w Chrome. Kroki bazy danych i grafiki są takie same jak w wersji podstawowej. Podgląd od kroku z HTML-em to działająca strona - kontrolki można klikać.

Jak liczą się punkty. Klucz ma 37 kryteriów (R.1.1 - R.5.6), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 28 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

  1. Etap 1: Baza danych

    Kroki 1-7 · po tym etapie masz 6 z 37 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum pliki6

    ok. 2 min
    Polecenie z arkusza

    Należy utworzyć folder o nazwie odpowiadającej numerowi PESEL zdającego lub w przypadku jego braku innemu numerowi, którym został podpisany arkusz. Archiwum należy rozpakować do tego folderu. Wszystkie wykonane w czasie egzaminu pliki w tym zrzuty ekranu, pliki strony, styli należy umieścić w tym folderze.

    Na pulpicie tworzysz folder nazwany numerem PESEL - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum pliki6.zip rozpakowujesz do tego folderu, podając hasło #s4mochody! (z krzyżykiem na początku, cyfrą 4 zamiast „a” i wykrzyknikiem na końcu). W środku są: auta.sql, gibraltar.jpg i Lorem Ipsum.txt.

  2. Krok 2: XAMPP i pusta baza auta

    ok. 2 min
    Polecenie z arkusza

    Uruchom usługi MySQL i Apache za pomocą XAMPP Control Panel. Za pomocą narzędzia phpMyAdmin wykonaj podane operacje na bazie danych: Utwórz bazę danych o nazwie auta

    W XAMPP Control Panel Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa auta, Utwórz. Sama strona tego zadania nie łączy się z bazą - baza służy tylko do czterech zapytań.

  3. Krok 3: Import pliku auta.sql i zrzut egzamin.jpg

    Kryteria:

    R.1.1 Wykonano import tabel do bazy auta , czynność udokumentowano plikiem o nazwie egzamin w formacie JPEG

    ok. 3 min
    Polecenie z arkusza

    Do bazy auta zaimportuj plik auta.sql z rozpakowanego archiwum. Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, w formacie JPEG o nazwie egzamin. 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

    Zaznacz bazę auta, karta Import, Wybierz plik → auta.sql, Wykonaj. Plik tworzy cztery tabele z kluczami głównymi i obcymi: klasa (3 wiersze), klienci (6), samochody (5) i wypozyczenia (7). Na zrzucie widać zielony komunikat o sukcesie i cztery tabele w lewym panelu.

    Zrzut całego ekranu z paskiem zadań zapisujesz jako egzamin.jpg.

    Typowe błędy

    Zrzut importu ma być w JPEG, a zrzuty zapytań w PNG - pomylony format to strata punktu.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 3

  4. Krok 4: Zapytanie 1: użytkownik Agnieszka z hasłem haslo4

    Kryteria: ,

    R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Utworzono zapytanie 1 tworzące użytkownika Agnieszka z hasłem haslo4. W pliku z kwerendami lub na zrzucie istnieje zapis np.: CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4'; (lub z @'localhost') oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest efekt poprawnie wykonanego zapytania

    ok. 3 min
    Polecenie z arkusza

    Zapisz i wykonaj zapytania SQL działające na bazie auta. Zapytania zapisz w pliku kwerendy.txt, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz. Wykonaj zrzuty ekranu przedstawiające wyniki działania kwerend. Zrzuty zapisz w formacie PNG i nadaj im nazwy kw1, kw2, kw3, kw4. Zrzuty powinny obejmować cały ekran monitora z widocznym paskiem zadań. Zapytanie 1: tworzące użytkownika Agnieszka z hasłem haslo4

    • CREATE USER 'Agnieszka' - nowe konto serwera bazy danych (nie wiersz w tabeli). Nazwa w apostrofach,
    • IDENTIFIED BY 'haslo4' - hasło konta; serwer zapisze jego skrót.

    Bez części @'host' konto może łączyć się z dowolnego komputera (%); klucz przyjmuje też 'Agnieszka'@'localhost'. Nowe konto nie ma jeszcze żadnych uprawnień - arkusz ich nie wymaga. phpMyAdmin odpowiada „MySQL zwrócił pusty wynik”, a konto widać na karcie Konta użytkowników. Zapytanie kopiujesz do nowego pliku kwerendy.txt, zrzut - do kw1.png.

    Typowe błędy

    Drugie wykonanie zgłosi błąd #1396 („Operation CREATE USER failed”) - konto już istnieje. Na zrzucie ma być efekt udanego wykonania.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: średni rocznik opli

    Kryteria:

    R.1.4 Utworzono zapytanie 2 liczące w tabeli samochody średnią arytmetyczną roczników samochodów, których marką jest opel. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT AVG(rocznik) FROM samochody WHERE marka='opel'; oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczna jest wartość 2017,5 (dowolnie zaokrąglona lub nie)

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: liczące w tabeli samochody średnią arytmetyczną roczników samochodów, których marką jest opel

    • SELECT AVG(rocznik) - funkcja AVG liczy średnią arytmetyczną kolumny,
    • FROM samochody,
    • WHERE marka = 'opel' - tylko wiersze opli.

    W tabeli są dwa ople: zafira z 2018 i insignia z 2017 roku, więc wynik to 2017.5000 - phpMyAdmin pokazuje średnią z czterema miejscami po przecinku. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: marki i imiona klientów przez tabelę wypozyczenia

    Kryteria:

    R.1.5 Utworzono zapytanie 3 wybierające nazwy marek samochodów i imiona klientów z nimi powiązane za pomocą tabeli wypozyczenia . Zapytanie wykorzystuje relację pomiędzy trzema tabelami. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT marka, imie FROM samochody JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id JOIN klienci ON klienci.id = wypozyczenia.klienci_id; możliwe również INNER JOIN lub za pomocą warunku oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są jedynie kolumny marka i imie; jedynie 7 rekordów

    ok. 4 min
    Polecenie z arkusza

    Zapytanie 3: wybierające jedynie nazwy marek samochodów i imiona klientów z nimi powiązane za pomocą tabeli wypozyczenia. Zapytanie wykorzystuje relację wiele do wielu pomiędzy trzema tabelami

    Relacja wiele do wielu nie ma bezpośredniego połączenia samochodu z klientem - łączy je tabela pośrednia wypozyczenia, w której każdy wiersz ma numer klienta (klienci_id) i numer samochodu (samochody_id):

    • SELECT marka, imie - tylko dwie kolumny,
    • FROM samochody,
    • JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id - do każdego samochodu jego wypożyczenia,
    • JOIN klienci ON klienci.id = wypozyczenia.klienci_id - do każdego wypożyczenia klient.

    Wynik ma 7 wierszy - tyle, ile wypożyczeń. Ford nie był wypożyczony, więc go nie ma; fiat i opel występują kilka razy, bo wypożyczało je kilku klientów (Jan dwa razy brał opla). Zrzut: kw3.png.

    Typowe błędy

    Złączenie samych tabel samochody i klienci (bez wypozyczenia) nie ma wspólnej kolumny - wyjdzie każdy samochód z każdym klientem, 30 wierszy.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';

-- Zapytanie 3
SELECT marka, imie
FROM samochody
JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id
JOIN klienci ON klienci.id = wypozyczenia.klienci_id;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: usunięcie kolumny cena

    Kryteria:

    R.1.6 Utworzono zapytanie 4 usuwające kolumnę cena z tabeli klasa . W pliku z kwerendami lub na zrzucie istnieje zapis np.: ALTER TABLE klasa DROP COLUMN cena; (poprawne też bez COLUMN) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczny jest efekt poprawnie wykonanego zapytania lub tabela bez kolumny cena

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: usuwające kolumnę cena z tabeli klasa

    ALTER TABLE klasa zmienia strukturę tabeli, a DROP COLUMN cena usuwa kolumnę razem z danymi (słowo COLUMN jest opcjonalne). Po wykonaniu karta Struktura tabeli klasa ma tylko id i klasa. Zrzut: kw4.png; kwerendy.txt ma komplet czterech zapytań.

    Typowe błędy

    Usunięcie kolumny jest nieodwracalne - nie ma „cofnij”. Drugie wykonanie zgłosi błąd #1091 („nie można usunąć kolumny, sprawdź, czy istnieje”).

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
CREATE USER 'Agnieszka' IDENTIFIED BY 'haslo4';

-- Zapytanie 2
SELECT AVG(rocznik) FROM samochody WHERE marka = 'opel';

-- Zapytanie 3
SELECT marka, imie
FROM samochody
JOIN wypozyczenia ON samochody.id = wypozyczenia.samochody_id
JOIN klienci ON klienci.id = wypozyczenia.klienci_id;

-- Zapytanie 4
ALTER TABLE klasa DROP COLUMN cena;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Grafika i strona HTML

    Kroki 8-14 · po tym etapie masz 20 z 37 kryteriów (pkt)

    Krok 8: Grafika: gibraltar.jpg o szerokości 300 px

    Kryteria:

    R.2.1 Plik gibraltar.jpg jest przeskalowany z zachowaniem proporcji do szerokości dokładnie 300 px odpowiadająca temu wysokość wynosi 300 px ±5 px

    ok. 3 min
    Polecenie z arkusza

    Plik gibraltar.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji tak, aby szerokość wynosiła dokładnie 300 px i zapisać obraz pod tą samą nazwą

    Oryginał ma 400 × 400 px. W GIMP-ie Obraz → Skaluj obraz, łańcuch między szerokością a wysokością złączony (zachowanie proporcji), szerokość 300 - wysokość sama zmieni się na 300. Plik → Nadpisz gibraltar.jpg. Klucz dopuszcza wysokość 300 ± 5 px.

    Typowe błędy

    Ustawienie szerokości atrybutem width albo w CSS nie zmienia pliku - klucz mierzy sam plik gibraltar.jpg.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Krok 9: Plik konfigurator.html: kodowanie, tytuł, arkusz stylów

    Kryteria: , , ,

    R.2.2 Witrynę internetową zapisano w pliku o nazwie konfigurator.html

    R.2.3 Zastosowano właściwy standard kodowania polskich znaków dla witryny

    R.2.4 Nadano tytuł strony: "Style w JavaScript”

    R.3.5 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl6.css , formatowanie pochodzi jedynie z tego arkusza Uwaga: kryterium to nie jest spełnione również, gdy źle przypisano co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 3 min
    Polecenie z arkusza

    Składa się ze strony o nazwie konfigurator.html. Zastosowany właściwy standard kodowania polskich znaków. Tytuł strony widoczny na karcie przeglądarki: „Style w JavaScript”. Arkusz stylów w pliku o nazwie styl6.css prawidłowo połączony z kodem strony

    Plik konfigurator.html obok gibraltar.jpg, a w <head> od razu wszystko, co dotyczy całego dokumentu:

    • <meta charset="UTF-8"> - polskie litery (R.2.3),
    • viewport - telefon pokaże stronę w swojej szerokości (klucz tego nie ocenia),
    • <title>Style w JavaScript</title> (R.2.4),
    • <link> do styl6.css (R.3.5).
    konfigurator.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  10. Krok 10: Bloki: część główna z dwiema sekcjami i stopka

    Kryteria:

    R.2.5 Wygląd strony zdefiniowano dzieląc ją na bloki: lewy, prawy i stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: obok siebie lewy i prawy, poniżej stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2a. Zawartość stopki: napis o treści „Autor: ”, dalej wstawiony numer PESEL zdającego lub w przypadku jego braku inny numer, którym został podpisany arkusz

    Blok lewy i prawy to dwa znaczniki <section> w <main> - głównej treści strony. <main> jest kontenerem rzędu: w CSS dostanie display: flex. Stopka <footer> stoi poza nim, z napisem „Autor: ” i - zamiast numeru PESEL - imieniem i nazwiskiem autora, Bartosz Bryniarski (R.2.5).

    konfigurator.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>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  11. Krok 11: Nagłówek i przyciski koloru tła z atrybutem data-color

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku lewego: Nagłówek pierwszego stopnia o treści „Konfigurator stylu”. Paragraf (akapit) z tekstem „Podaj kolor tła” i w nowej linii trzy przyciski z podpisami: „Indigo”, „SteelBlue”, „Olive”

    • <h1> z nazwą konfiguratora,
    • akapit z pytaniem, a pod nim przyciski we wspólnym bloku <div class="buttons"> - „w nowej linii” bez <br>,
    • każdy przycisk ma type="button" (nie wysyła żadnego formularza) i atrybut data-color z nazwą koloru. Atrybuty data-* to miejsce na własne dane elementu: CSS pokoloruje po nim przycisk, a skrypt odczyta z niego kolor tła. Kolor jest zapisany raz, w HTML-u.
    konfigurator.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  12. Krok 12: Lista koloru czcionki i pole rozmiaru z etykietami

    Kryteria: ,

    R.2.7 W bloku lewym umieszczono kontrolki: trzy przyciski i listę rozwijaną z czterema elementami

    R.3.2 Pole edycyjne ma domyślną wartość 100% (za pomocą atrybutu value)

    ok. 3 min
    Polecenie z arkusza

    Paragraf z tekstem „Podaj kolor czcionki” i w nowej linii lista rozwijalna z wartościami: White, Tan, Bisque, Plum. Paragraf z tekstem „Podaj rozmiar czcionki w procentach, np. 200%” i w nowej linii pole edycyjne z wartością domyślną 100%

    Tekst akapitu jest zarazem etykietą kontrolki: <label for="color"> w akapicie łączy go z listą o id="color". Kliknięcie w napis otwiera listę, a czytnik ekranu przeczyta pytanie razem z kontrolką.

    • <select> z czterema <option> - tekst opcji jest jej wartością i nazwą koloru CSS (R.2.7 razem z przyciskami),
    • pole tekstowe z value="100%" (R.3.2). inputmode="numeric" pokaże na telefonie klawiaturę z cyframi, a size="6" - wąskie pole na kilka znaków.
    konfigurator.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  13. Krok 13: Checkbox ramki i pola radio punktorów

    Kryteria: , ,

    R.2.8 W bloku lewym umieszczono kontrolki: pole edycyjne, checkbox i trzy przyciski radio

    R.3.3 Pole checkbox jest domyślnie zaznaczone

    R.3.4 Jednocześnie może być zaznaczone tylko jedno pole typu radio

    ok. 3 min
    Polecenie z arkusza

    Paragraf z tekstem „Czy rysunek ma mieć ramkę?” i w nowej linii pole checkbox domyślnie zaznaczone i podpisane „Rysuj ramkę”. Paragraf z tekstem „Jaki jest typ punktora listy?” i w nowej linii trzy zgrupowane pola radio, z których pierwszy jest zaznaczony. Podpisy pól: dysk, kwadrat, okrąg

    • checkbox z checked (R.3.3) jest w środku <label> z podpisem „Rysuj ramkę” - kliknięcie w podpis też przełącza pole,
    • pola radio mają wspólne name="bullet", więc zaznaczone może być tylko jedno (R.3.4). Każde ma value z nazwą punktora CSS (disc, square, circle) - skrypt nie musi tłumaczyć „kwadrat” na square,
    • blok pól ma role="radiogroup" i aria-labelledby wskazujące akapit z pytaniem - czytnik ekranu ogłosi grupę razem z pytaniem.

    Kontrolki w bloku lewym: pole edycyjne, checkbox i trzy pola radio (R.2.8).

    konfigurator.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  14. Krok 14: Blok prawy: obraz z listą we wspólnym bloku i akapit

    Kryteria: , ,

    R.2.6 W bloku lewym zapisano nagłówek h1: "Konfigurator stylu" oraz przynajmniej jeden paragraf, w bloku prawym zapisano paragraf z treścią "Lorem ipsum… "

    R.2.9 W bloku prawym umieszczono obraz gibraltar.jpg z tekstem alternatywnym „półwysep Gibraltar”

    R.2.10 W bloku prawym umieszczono listę punktowaną o trzech elementach, zastosowano znaczniki <ul> i <li> wraz z ich zamknięciami

    ok. 3 min
    Polecenie z arkusza

    Zawartość bloku prawego: obraz gibraltar.jpg z tekstem alternatywnym „półwysep Gibraltar”. lista punktowana (nieuporządkowana) o trzech elementach: element 1, element 2, element 3. paragraf o treści „Lorem ipsum...”. Tekst znajduje się w pliku Lorem Ipsum.txt rozpakowanym z archiwum

    Obraz i lista mają stać obok siebie, akapit pod nimi - więc obraz i lista trafiają do wspólnego bloku <div class="media">, a akapit stoi za nim. CSS ustawi flex tylko na tym bloku.

    • <img> z alt="półwysep Gibraltar" (R.2.9), klasą framed (ramka - włącza ją CSS, wyłącza skrypt) oraz width i height - przeglądarka rezerwuje miejsce, zanim plik się wczyta, więc tekst nie „skacze”,
    • <ul> z trzema <li> (R.2.10),
    • akapit z całą treścią pliku Lorem Ipsum.txt (R.2.6 razem z akapitami bloku lewego).
    konfigurator.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>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
            <div class="media">
                <img src="gibraltar.jpg" alt="półwysep Gibraltar" class="framed" width="300" height="300">
                <ul id="list">
                    <li>element 1</li>
                    <li>element 2</li>
                    <li>element 3</li>
                </ul>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (konfigurator.html)

  15. Etap 3: Styl CSS

    Kroki 15-18 · po tym etapie masz 31 z 37 kryteriów (pkt)

    Krok 15: Plik styl6.css: zmienne kolorów i krój Georgia

    Kryteria:

    R.4.1 Ustawiono domyślny krój czcionki dla całej strony na Georgia (dla selektora * lub body lub html lub kontenera całej strony)

    ok. 2 min
    Polecenie z arkusza

    Cechy formatowania CSS: Są zawarte wyłącznie w zewnętrznym arkuszu stylów. Domyślne dla całej strony: krój czcionki Georgia

    Kolory bloków dostają nazwy w :root (--panel, --footer, --text), a reguły odwołują się do nich przez var(). * z krojem Georgia obejmuje też przyciski i pola (R.4.1). body bez marginesu - bloki dochodzą do krawędzi okna.

    styl6.css CSS nowy plik 
    :root {
    --panel: Maroon;
    --footer: DimGray;
    --text: white;
}

* {
    font-family: Georgia;
}

body {
    margin: 0;
}
    Podgląd strony po tym kroku (konfigurator.html)

  16. Krok 16: Bloki obok siebie na flex: tła, wysokości, szerokości, przewijanie

    Kryteria: , , , , ,

    R.3.1 Układ bloków lewego, prawego i stopki po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2a w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float i clear albo display flex albo grid)

    R.4.2 Ustawiono kolor tła Maroon dla bloku lewego i prawego oraz DimGray dla stopki

    R.4.3 Ustawiono biały kolor czcionki dla bloków lewego, prawego i stopki (lub wszystkich bloków)

    R.4.4 Ustawiono wysokość 600px dla bloku lewego i prawego

    R.4.5 Ustawiono szerokość bloku lewego 30% oraz prawego 70%

    R.4.6 Ustawiono paski przewijania dla bloku prawego, tak że pojawiają się tylko w przypadku, gdy zawartość bloku nie mieści się, np. overflow: auto;

    ok. 4 min
    Polecenie z arkusza

    Dla bloku lewego: kolor tła Maroon, biały kolor czcionki, wysokość 600 px, szerokość 30%. Dla bloku prawego: kolor tła Maroon, biały kolor czcionki, wysokość 600 px, szerokość 70%, paski przewijania pojawiające się tylko w przypadku, gdy zawartość bloku nie mieści się. Dla bloku stopki: kolor tła DimGray, biały kolor czcionki

    • main { display: flex } - obie sekcje stają w jednym rzędzie, stopka jest poza <main>, więc stoi pod nimi (R.3.1),
    • wspólne cechy bloków w jednej regule, szerokości osobno: 30% i 70% (R.4.4, R.4.5),
    • overflow: auto w bloku prawym - pasek przewijania tylko wtedy, gdy treść się nie mieści (R.4.6),
    • stopka: tło DimGray, biały tekst.

    Tła (R.4.2) i biały tekst (R.4.3) wszystkich trzech bloków są ustawione. Szerokości są na samych blokach, bo tak opisuje je klucz.

    Typowe błędy

    Bez overflow blok w kontenerze flex nie urośnie (ma stałą wysokość 600 px), ale tekst przy 200% wyjdzie poza blok i nałoży się na stopkę.

    styl6.css CSS zmienione: 26 linii 
    :root {
    --panel: Maroon;
    --footer: DimGray;
    --text: white;
}

* {
    font-family: Georgia;
}

body {
    margin: 0;
}

main {
    display: flex;
}

#left,
#right {
    background-color: var(--panel);
    color: var(--text);
    height: 600px;
}

#left {
    width: 30%;
}

#right {
    width: 70%;
    overflow: auto;
}

footer {
    background-color: var(--footer);
    color: var(--text);
}
    Podgląd strony po tym kroku (konfigurator.html)

  17. Krok 17: Obraz i lista obok siebie, odstępy, ramka obrazu

    Kryteria: , ,

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 10px dla selektora p i img

    R.4.8 Ustawiono styl dla obrazu i listy, tak aby były wyświetlane obok siebie, paragraf pod nimi

    R.4.9 Ustawiono obramowanie obrazu linią ciągłą o grubości 1 px i białym kolorze (selektor img lub identyfikator lub klasa)

    ok. 3 min
    Polecenie z arkusza

    Dla elementów bloku prawego: obraz i lista są wyświetlane obok siebie, paragraf pod nimi. Dla paragrafu: marginesy wewnętrzne 10 px. Dla obrazu: marginesy wewnętrzne 10 px, obramowanie linią ciągłą o grubości 1 px i białym kolorze

    • .media { display: flex } - obraz i lista w jednym rzędzie, akapit stoi za blokiem, więc pod nimi (R.4.8). align-items: flex-start nie rozciąga listy na wysokość obrazu,
    • padding: 10px dla p i img (R.4.7),
    • ramka w regule img.framed - obraz z klasą framed ma białą ramkę 1 px (R.4.9). Skrypt będzie tylko dodawał i zdejmował tę klasę, a wygląd ramki zostaje w CSS.
    styl6.css CSS zmienione: 17 linii 
    :root {
    --panel: Maroon;
    --footer: DimGray;
    --text: white;
}

* {
    font-family: Georgia;
}

body {
    margin: 0;
}

main {
    display: flex;
}

#left,
#right {
    background-color: var(--panel);
    color: var(--text);
    height: 600px;
}

#left {
    width: 30%;
}

#right {
    width: 70%;
    overflow: auto;
}

footer {
    background-color: var(--footer);
    color: var(--text);
}


.media {
    display: flex;
    align-items: flex-start;
}

p {
    padding: 10px;
}

img {
    padding: 10px;
}

img.framed {
    border: 1px solid var(--text);
}
    Podgląd strony po tym kroku (konfigurator.html)

  18. Krok 18: Tło przycisków według atrybutu data-color

    Kryteria:

    R.4.10 Ustawiono kolory tła dla przycisków, pierwszy: Indigo, drugi: SteelBlue, trzeci: Olive

    ok. 2 min
    Polecenie z arkusza

    Dla przycisków zmieniających tło: kolor tła przycisku odpowiada jego podpisowi (np. kolor Indigo dla przycisku podpisanego Indigo)

    Selektor atrybutu button[data-color="Indigo"] trafia w przycisk z tą wartością atrybutu - niezależnie od jego pozycji w kodzie. Kolejność z klucza: Indigo, SteelBlue, Olive (R.4.10). Na końcu dwie reguły tylko dla wyglądu bloku lewego: etykiety pól radio z display: block (każde pole w osobnej linii, jak na obrazie 2a), a akapity z pytaniami bez dolnego marginesu i kontrolki wcięte o 10 px - kontrolka stoi tuż pod swoim pytaniem, na równi z jego tekstem.

    styl6.css CSS zmienione: 28 linii 
    :root {
    --panel: Maroon;
    --footer: DimGray;
    --text: white;
}

* {
    font-family: Georgia;
}

body {
    margin: 0;
}

main {
    display: flex;
}

#left,
#right {
    background-color: var(--panel);
    color: var(--text);
    height: 600px;
}

#left {
    width: 30%;
}

#right {
    width: 70%;
    overflow: auto;
}

footer {
    background-color: var(--footer);
    color: var(--text);
}


.media {
    display: flex;
    align-items: flex-start;
}

p {
    padding: 10px;
}

img {
    padding: 10px;
}

img.framed {
    border: 1px solid var(--text);
}

button[data-color="Indigo"] {
    background-color: Indigo;
}

button[data-color="SteelBlue"] {
    background-color: SteelBlue;
}

button[data-color="Olive"] {
    background-color: Olive;
}

.radios label {
    display: block;
}

#left p {
    margin-bottom: 0;
}

#left .buttons,
#left select,
#left #size,
#left > label,
#left .radios {
    margin-left: 10px;
}
    Podgląd strony po tym kroku (konfigurator.html)

  19. Etap 4: Skrypt JavaScript

    Kroki 19-23 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 19: Plik skrypt.js i zmiana tła przyciskami

    Kryteria: ,

    R.5.1 Dla przynajmniej jednego zdarzenia kontrolki przypisano do niego funkcję JavaScript (może być pusta)

    R.5.2 Po kliknięciu na przynajmniej jeden przycisk zmieniający tło, zostaje zmienione tło bloku prawego na kolor odpowiadający podpisowi przycisku

    ok. 4 min
    Polecenie z arkusza

    Skrypt: Napisany w języku JavaScript i wykonujący akcje spowodowane zdarzeniami kontrolek. Akcje modyfikują styl CSS bloku prawego i jego elementów, na podstawie przykładu przedstawionego na Obrazie 2b. Po kliknięciu na dowolny przycisk zmieniający tło, zostaje zmienione tło bloku prawego na kolor odpowiadający podpisowi przycisku

    Skrypt stoi w osobnym pliku skrypt.js, podpiętym w <head> z atrybutem defer: przeglądarka pobiera go równolegle ze stroną, a uruchamia dopiero wtedy, gdy cały HTML jest wczytany - elementy strony już istnieją.

    • trzy stałe const na elementy, które skrypt zmienia: blok prawy, obraz w nim (querySelector('img') - pierwszy obraz w bloku) i lista,
    • querySelectorAll('button[data-color]') - wszystkie przyciski z atrybutem koloru, forEach przechodzi po nich,
    • addEventListener('click', …) przypisuje każdemu przyciskowi funkcję obsługi kliknięcia (R.5.1). Funkcja odczytuje kolor z button.dataset.color (atrybut data-color) i wpisuje go do style.backgroundColor bloku prawego (R.5.2).

    HTML nie ma ani jednego atrybutu onclick - cała obsługa zdarzeń jest w jednym miejscu. Kliknij w podglądzie „Olive”.

    konfigurator.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>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
            <div class="media">
                <img src="gibraltar.jpg" alt="półwysep Gibraltar" class="framed" width="300" height="300">
                <ul id="list">
                    <li>element 1</li>
                    <li>element 2</li>
                    <li>element 3</li>
                </ul>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    skrypt.js JavaScript nowy plik 
    const right = document.getElementById('right');
const image = right.querySelector('img');
const list = document.getElementById('list');

document.querySelectorAll('button[data-color]').forEach((button) => {
    button.addEventListener('click', () => {
        right.style.backgroundColor = button.dataset.color;
    });
});
    Podgląd strony po tym kroku (konfigurator.html)

  20. Krok 20: Kolor czcionki po wyborze z listy

    Kryteria:

    R.5.3 Po wybraniu koloru z listy, zostaje zmieniony w bloku prawym kolor czcionki na wybrany

    ok. 2 min
    Polecenie z arkusza

    Po kliknięciu pola wyboru koloru czcionki, zostaje zmieniony kolor czcionki bloku prawego na kolor odpowiadający wyborowi

    Zdarzenie change listy zachodzi po wybraniu innej opcji. Funkcja dostaje obiekt zdarzenia, a event.target to sama lista - jej value (np. Plum) trafia do style.color bloku prawego (R.5.3). Arkusz pisze „po kliknięciu”, ale click zachodzi już przy rozwijaniu listy - change reaguje dokładnie na wybór.

    konfigurator.html HTML zmienione: 0 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
            <div class="media">
                <img src="gibraltar.jpg" alt="półwysep Gibraltar" class="framed" width="300" height="300">
                <ul id="list">
                    <li>element 1</li>
                    <li>element 2</li>
                    <li>element 3</li>
                </ul>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    skrypt.js JavaScript zmienione: 4 linie 
    const right = document.getElementById('right');
const image = right.querySelector('img');
const list = document.getElementById('list');

document.querySelectorAll('button[data-color]').forEach((button) => {
    button.addEventListener('click', () => {
        right.style.backgroundColor = button.dataset.color;
    });
});

document.getElementById('color').addEventListener('change', (event) => {
    right.style.color = event.target.value;
});
    Podgląd strony po tym kroku (konfigurator.html)

  21. Krok 21: Rozmiar czcionki po wyjściu z pola, ze sprawdzeniem wartości

    Kryteria:

    R.5.4 Po wpisaniu rozmiaru czcionki i opuszczeniu kontrolki (np. onfocusout lub onblur), zmieniany jest rozmiar czcionki dla całego bloku prawego. Należy wpisać wartość, np. 200%, 50%

    ok. 4 min
    Polecenie z arkusza

    Po wpisaniu rozmiaru czcionki i wyjściu z kontrolki (tabulacją lub kliknięciem myszą w obszar poza kontrolką), zmieniany jest rozmiar czcionki dla całego bloku prawego. Nie jest wymagana walidacja tego pola, należy założyć, że pole jest wypełnione poprawnie

    Wyjście z pola to zdarzenie blur (R.5.4). Arkusz zwalnia z walidacji, ale w wersji nowoczesnej wartość jest sprawdzana od razu - kosztuje to kilka linii:

    • trim() obcina spacje z brzegów,
    • wyrażenie regularne /^\d{1,3}%$/ przepuszcza tylko od jednej do trzech cyfr i znak procentu, a parseInt z warunkiem - wartości od 50 do 300%,
    • poprawna wartość trafia do style.fontSize bloku prawego i do zmiennej lastSize; niepoprawna nie zmienia strony, a pole wraca do ostatniej poprawnej wartości.

    Sprawdzone w Chrome: 200% daje czcionkę 32 px i pasek przewijania jak na obrazie 2b, a 5000% i abc nie zmieniają strony i przywracają w polu 200%.

    konfigurator.html HTML zmienione: 0 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
            <div class="media">
                <img src="gibraltar.jpg" alt="półwysep Gibraltar" class="framed" width="300" height="300">
                <ul id="list">
                    <li>element 1</li>
                    <li>element 2</li>
                    <li>element 3</li>
                </ul>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    skrypt.js JavaScript zmienione: 15 linii 
    const right = document.getElementById('right');
const image = right.querySelector('img');
const list = document.getElementById('list');

document.querySelectorAll('button[data-color]').forEach((button) => {
    button.addEventListener('click', () => {
        right.style.backgroundColor = button.dataset.color;
    });
});

document.getElementById('color').addEventListener('change', (event) => {
    right.style.color = event.target.value;
});

const sizeField = document.getElementById('size');
let lastSize = sizeField.value;

sizeField.addEventListener('blur', () => {
    const value = sizeField.value.trim();
    const percent = Number.parseInt(value, 10);

    if (/^\d{1,3}%$/.test(value) && percent >= 50 && percent <= 300) {
        right.style.fontSize = value;
        lastSize = value;
    } else {
        sizeField.value = lastSize;
    }
});
    Podgląd strony po tym kroku (konfigurator.html)

  22. Krok 22: Ramka obrazu: funkcja przełączająca klasę

    Kryteria:

    R.5.5 Jeżeli zaznaczono pole checkbox, w bloku prawym jest dodawane obramowanie obrazu, w przeciwnym wypadku usuwane obramowanie

    ok. 3 min
    Polecenie z arkusza

    Po kliknięciu w pole checkbox, w zależności od stanu pola, jest dodawane lub usuwane obramowanie obrazu – wymagana realizacja zdarzenia za pomocą funkcji

    Arkusz wymaga funkcji, więc obsługa ma nazwę: updateFrame, przekazaną do addEventListener('change', updateFrame) - bez nawiasów, bo przekazuje się samą funkcję, a nie wynik jej wywołania.

    classList.toggle('framed', warunek) dodaje klasę, gdy warunek jest prawdziwy, i zdejmuje, gdy fałszywy. Warunkiem jest stan checkboxa, więc obraz ma ramkę dokładnie wtedy, gdy pole jest zaznaczone (R.5.5). Wygląd ramki zostaje w CSS (img.framed) - skrypt nie zna jej grubości ani koloru.

    konfigurator.html HTML zmienione: 0 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
            <div class="media">
                <img src="gibraltar.jpg" alt="półwysep Gibraltar" class="framed" width="300" height="300">
                <ul id="list">
                    <li>element 1</li>
                    <li>element 2</li>
                    <li>element 3</li>
                </ul>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    skrypt.js JavaScript zmienione: 6 linii 
    const right = document.getElementById('right');
const image = right.querySelector('img');
const list = document.getElementById('list');

document.querySelectorAll('button[data-color]').forEach((button) => {
    button.addEventListener('click', () => {
        right.style.backgroundColor = button.dataset.color;
    });
});

document.getElementById('color').addEventListener('change', (event) => {
    right.style.color = event.target.value;
});

const sizeField = document.getElementById('size');
let lastSize = sizeField.value;

sizeField.addEventListener('blur', () => {
    const value = sizeField.value.trim();
    const percent = Number.parseInt(value, 10);

    if (/^\d{1,3}%$/.test(value) && percent >= 50 && percent <= 300) {
        right.style.fontSize = value;
        lastSize = value;
    } else {
        sizeField.value = lastSize;
    }
});

function updateFrame() {
    image.classList.toggle('framed', document.getElementById('frame').checked);
}

document.getElementById('frame').addEventListener('change', updateFrame);
    Podgląd strony po tym kroku (konfigurator.html)

  23. Krok 23: Punktory listy z pól radio

    Kryteria:

    R.5.6 Po kliknięciu w pola radio jest ustawiony wybrany rodzaj formatowania punktorów listy w bloku prawym

    ok. 2 min
    Polecenie z arkusza

    Po kliknięciu w pola radio jest ustawiony wybrany rodzaj formatowania punktorów listy

    Każde pole radio dostaje obsługę zdarzenia change - zachodzi, gdy pole zostaje zaznaczone. Wartość pola (value="square") jest gotową nazwą punktora, więc trafia wprost do style.listStyleType listy (R.5.6). Jedna pętla obsługuje trzy pola i obsłużyłaby czwarte bez zmian w skrypcie.

    Sprawdzone w Chrome cały scenariusz z obrazu 2b: Olive, Tan, 200%, odznaczona ramka i kwadrat.

    konfigurator.html HTML zmienione: 0 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Style w JavaScript</title>
    <link rel="stylesheet" href="styl6.css">
    <script src="skrypt.js" defer></script>
</head>
<body>
    <main>
        <section id="left">
            <h1>Konfigurator stylu</h1>

            <p>Podaj kolor tła</p>
            <div class="buttons">
                <button type="button" data-color="Indigo">Indigo</button>
                <button type="button" data-color="SteelBlue">SteelBlue</button>
                <button type="button" data-color="Olive">Olive</button>
            </div>

            <p><label for="color">Podaj kolor czcionki</label></p>
            <select id="color">
                <option>White</option>
                <option>Tan</option>
                <option>Bisque</option>
                <option>Plum</option>
            </select>

            <p><label for="size">Podaj rozmiar czcionki w procentach, np. 200%</label></p>
            <input type="text" id="size" value="100%" inputmode="numeric" size="6">

            <p>Czy rysunek ma mieć ramkę?</p>
            <label><input type="checkbox" id="frame" checked> Rysuj ramkę</label>

            <p id="bullet-question">Jaki jest typ punktora listy?</p>
            <div class="radios" role="radiogroup" aria-labelledby="bullet-question">
                <label><input type="radio" name="bullet" value="disc" checked> dysk</label>
                <label><input type="radio" name="bullet" value="square"> kwadrat</label>
                <label><input type="radio" name="bullet" value="circle"> okrąg</label>
            </div>
        </section>
        <section id="right">
            <div class="media">
                <img src="gibraltar.jpg" alt="półwysep Gibraltar" class="framed" width="300" height="300">
                <ul id="list">
                    <li>element 1</li>
                    <li>element 2</li>
                    <li>element 3</li>
                </ul>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section>
    </main>
    <footer>
        Autor: Bartosz Bryniarski
    </footer>
</body>
</html>
    skrypt.js JavaScript zmienione: 6 linii 
    const right = document.getElementById('right');
const image = right.querySelector('img');
const list = document.getElementById('list');

document.querySelectorAll('button[data-color]').forEach((button) => {
    button.addEventListener('click', () => {
        right.style.backgroundColor = button.dataset.color;
    });
});

document.getElementById('color').addEventListener('change', (event) => {
    right.style.color = event.target.value;
});

const sizeField = document.getElementById('size');
let lastSize = sizeField.value;

sizeField.addEventListener('blur', () => {
    const value = sizeField.value.trim();
    const percent = Number.parseInt(value, 10);

    if (/^\d{1,3}%$/.test(value) && percent >= 50 && percent <= 300) {
        right.style.fontSize = value;
        lastSize = value;
    } else {
        sizeField.value = lastSize;
    }
});

function updateFrame() {
    image.classList.toggle('framed', document.getElementById('frame').checked);
}

document.getElementById('frame').addEventListener('change', updateFrame);

document.querySelectorAll('input[name="bullet"]').forEach((radio) => {
    radio.addEventListener('change', () => {
        list.style.listStyleType = radio.value;
    });
});
    Podgląd strony po tym kroku (konfigurator.html)

  24. Etap 5: Porównanie z wersją podstawową

    Krok 24 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 24: Co jest inaczej i którą wersję wybrać na egzaminie

    ok. 3 min

    Obie wersje dają komplet 37 punktów. Różnice:

    wersja podstawowawersja nowoczesna
    układ blokówfloat: left sekcji, clear stopki<main> z display: flex
    obraz obok listyfloat obrazu i listy, clear akapituwspólny blok .media na flex
    kolor przycisków:nth-child(2) - :nth-child(4)button[data-color="…"]
    opisy kontrolektekst w akapicie, <br><label for>, etykiety obejmujące pola
    wartości pól radiobrak, typ w wywołaniu funkcjivalue="square" w HTML-u
    gdzie jest skrypt<script> na końcu stronyskrypt.js z defer
    zdarzeniaonclick, onchange, onblur w HTML-uaddEventListener w skrypcie
    ramkastyle.border w skrypcieklasa framed przełączana classList.toggle
    rozmiar czcionkiwartość z pola bez sprawdzeniabiała lista 50-300%

    Klucz oceniał skutek, nie sposób: przypisanie funkcji do zdarzenia (R.5.1) spełnia zarówno onclick="…", jak i addEventListener.

    Na egzaminie wersja podstawowa trzyma się pól i zdarzeń z tabeli 1 arkusza i łatwiej ją napisać z pamięci. Nowoczesna oddziela treść, wygląd i zachowanie: kolor przycisku zmienia się w jednym atrybucie, nowy punktor to jedno pole radio, a błędnie wpisany rozmiar nie psuje strony.

    Podgląd strony bez zmian - taki jak po kroku 23.

  25. Etap 6: Oddanie pracy

    Krok 25 · po tym etapie masz 37 z 37 kryteriów (pkt)

    Krok 25: Plik przeglądarka.txt i nagranie płyty

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz, w folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz, plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt nazwa przeglądarki, w której sprawdzany był skrypt. W folderze z numerem zdającego: egzamin.jpg, gibraltar.jpg, konfigurator.html, kw1.png - kw4.png, kwerendy.txt, przeglądarka.txt, skrypt.js (arkusz dopuszcza „inne przygotowane pliki”) i styl6.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

    Podgląd strony bez zmian - taki jak po kroku 23.

Podgląd

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: . 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.

Potwierdzenie

Informacja