Arkusz EE.09 : 2022 - styczeń - zad. 06 (js)

Oznaczenie: EE.09-06-22.01-SG   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj stronę konfiguratora stylów CSS, wykorzystując edytor zaznaczający składnię oraz edytor grafiki rastrowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajduje się archiwum ZIP o nazwie konfigurator.zip zabezpieczone hasłem: #s4mochody!

Pobierz konfigurator.zip

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.

Operacje na bazie danych

Do wykonania operacji na bazie należy wykorzystać przedstawione tabele. Tabele samochody, wypozyczenia i klienci tworzą relację wiele do wielu. Tabele samochody i klasa tworzą relację wiele do jednego.

Obraz 1. Tabele bazy danych

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
  • 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
  • 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
    • Zapytanie 2: liczące w tabeli samochody średnią arytmetyczną roczników samochodów, których marką jest opel
    • 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
    • Zapytanie 4: usuwające kolumnę cena z tabeli klasa

Witryna internetowa

Obraz 2a. Witryna internetowa po załadowaniu w przeglądarce

Obraz 2b. Wybrano kolejno: Olive, Tan, 200%, brak ramki, kwadrat. Ponieważ tekst w prawym panelu nie mieści się, pojawił się pionowy pasek przesuwania

Cechy grafiki:

  • 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ą

Cechy witryny:

  • 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
  • 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ść 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”
    • 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%
    • 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
  • 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
  • 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

Styl CSS witryny internetowej

Cechy formatowania CSS:

  • Są zawarte wyłącznie w zewnętrznym arkuszu stylów
  • Domyślne dla całej strony: krój czcionki Georgia
  • 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
  • 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
  • Dla przycisków zmieniających tło: kolor tła przycisku odpowiada jego podpisowi (np. kolor Indigo dla przycisku podpisanego Indigo)

Skrypt

W Tabeli 1 podano wybrane pola i metody modelu DOM języka JavaScript. Wymagania dotyczące skryptu:

  • 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
  • Po kliknięciu pola wyboru koloru czcionki, zostaje zmieniony kolor czcionki bloku prawego na kolor odpowiadający wyborowi
  • 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
  • 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
  • Po kliknięciu w pola radio jest ustawiony wybrany rodzaj formatowania punktorów listy

Tabela 1. Wybrane pola i metody modelu DOM języka JavaScript

Wyszukiwanie elementów
document.getElementById(Id)
document.getElementByTagName(TagName)
document.getElementsByClassName(ClassName)
Zmiana elementów
element.innerHTML = "nowa zawartość"
element.attribute = "nowa wartość"
element.setAttribute(atrybut,wartość)
element.style.property = "nowa wartość"
Dodawanie i usuwanie elementów
document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
document.write(text)
Wybrane właściwości obiektu style
backgroundColor, color, fontSize
fontStyle = "normal | italic | oblique | initial | inherit"
fontWeight = "normal | lighter | bold | bolder | value | initial | inherit"
Wybrane zdarzenia HTML
Zdarzenia myszy: onclick, ondblclick, onmouseover, onmouseout
Zdarzenia klawiatury: onkeydown, onkeypress, onkeyup
Zdarzenia obiektów: onload, onfocusin, onresize, onfocusout / onblur
Elementy formularzy
Ważniejsze typy pola input: button, checkbox, number, password, radio, text
Inne elementy: select, textarea
Metody i pola obiektu string (JS)
length
indexOf(text)
search(text)
substr(startIndex, endIndex)
replace(textToReplace, newText)
toUpperCase()
toLowerCase()
UWAGA!
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 folderze z numerem PESEL lub w przypadku jego braku w folderze z innym numerem, którym został podpisany arkusz powinny się znajdować pliki: egzamin.jpg, gibraltar.jpg, konfigurator.html, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, przeglądarka.txt, styl6.css, ewentualnie inne przygotowane pliki.
Po nagraniu płyty sprawdź poprawność nagrania w obecności przewodniczącego zespołu nadzorującego, na specjalnie przygotowanym do tego celu stanowisku. Opisz płytę swoim numerem PESEL lub w przypadku jego braku innym numerem, którym został podpisany arkusz i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będzie podlegać 5 rezultatów:

  • operacje na bazie danych
  • zawartość witryny internetowej
  • działanie witryny internetowej
  • styl CSS witryny internetowej
  • skrypt.