Arkusz E.14 : 2018 - czerwiec - zad. 05 (js)

Oznaczenie: E.14-05-18.06   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj aplikację internetową domu weselnego oraz zaprojektuj logo. Wykorzystaj do tego celu edytor tekstowy zaznaczający składnię oraz program do obróbki grafiki wektorowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Wyniki swojej pracy zapisz w folderze stworzonym na pulpicie konta Egzamin. Jako nazwy folderu użyj swojego numeru PESEL.

Pobierz zad5.zip

Rozpakuj archiwum zad5.zip a jego zawartość (grafikę obraczki.png) skopiuj do utworzonego folderu z numerem PESEL. Archiwum jest zabezpieczone hasłem: Z@d@niE

Grafika

Przy pomocy programu do obróbki grafiki wektorowej wykonaj logo zgodne z obrazem 1 (pokazano na nim kolejne kroki wykonania logotypu).

Obraz 1. Etapy wykonania logotypu

Grafika do przygotowania

Wymagania dotyczące grafiki:

  • Tło logo jest przezroczyste
  • Wielkie litery D i W powinny być napisane dowolną czcionką typu Sans Serif, np. Arial, Tahoma; kolor niebieski, wielkość czcionki 144
  • Wzajemne położenie liter przedstawiono na obrazie 1. Wymagane jest, aby D było wyżej niż W i aby obie litery na siebie nachodziły
  • Na obu kształtach liter zastosowano funkcję wykluczającą część wspólną obiektów
  • Obraz obraczki.png wypakowany z archiwum znajduje się za literami
  • Grafika powinna być wyeksportowana do formatu PNG i zapisana jako logo.png

Witryna internetowa

Plik tekstowy:

  • Witryna internetowa wymaga pliku Regulamin.txt z zawartością o treści: "Regulamin Domu Weselnego". Plik powinien być umieszczony w folderze, w którym znajdą się pliki witryny.

Obraz 2. Witryna internetowa

Widok witryny

Cechy witryny:

  • Nazwa pliku: wesela.html
  • Zastosowany właściwy standard kodowania polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki: "Dom Weselny"
  • Arkusz stylów w pliku o nazwie styl5.css prawidłowo połączony z kodem strony
  • Podział strony na bloki: baner, poniżej trzy panele: lewy, środkowy, prawy; poniżej dolny panel i pod nim stopka. Podział zrealizowany za pomocą znaczników sekcji, zgodnie z obrazem 2
  • Zawartość banera to nagłówek pierwszego stopnia zawierający:
    • Obraz logo.png o wysokości 70px
    • Tekst: "Dom Weselny zorganizuje wesele za Ciebie"
    • Obraz logo.png o wysokości 70px
  • Zawartość panelu lewego:
    • Nagłówek drugiego stopnia o treści: "Dom Weselny"
    • Trzy paragrafy (akapity) z treścią, kolejno: "ul. Przemysłowa 5", "Kalisz", odsyłacz do pliku logo.png z treścią "Pobierz logo"
  • Zawartość panelu środkowego:
    • Nagłówek drugiego stopnia o treści "Oferujemy"
    • Lista punktowa z trzema elementami: Wesela, Bankiety, Konferencje
  • Zawartość panelu prawego:
    • Umieszczony w paragrafie odsyłacz do pliku Regulamin.txt o treści: "czytaj regulamin"
  • Zawartość panelu dolnego:
    • Nagłówek drugiego stopnia o treści: "Ile będzie kosztowało moje wesele?"
    • Tekst: "Podaj liczbę gości: ", dalej pole numeryczne
    • Pole typu checkbox, po nim treść: "Wesele z poprawinami?"
    • Przycisk o treści "Oblicz koszt", którego wybranie uruchamia skrypt
    • Paragraf z miejscem na wyniki działania skryptu
  • Zawartość stopki: napis o treści: "Stronę internetową opracował:", dalej wstawiony swój numer PESEL. Numer PESEL powinien być zapisany pochyloną czcionką.

Styl CSS witryny internetowej

Plik styl5.css zawiera formatowanie:

  • Banera: kolor tła #1C59A7, biały kolor czcionki, wyrównanie tekstu do środka, wysokość 80px
  • Panelu lewego: kolor tła #3A70B5, szerokość 33%, wysokość 200px
  • Panelu środkowego: kolor tła #5A8AC8, szerokość 33%, wysokość 200px
  • Panelu prawego: kolor tła #86ACDD, wyrównanie tekstu do środka, szerokość 34%, wysokość 200px
  • Panelu dolnego: kolor tła #86ACDD, wyrównanie tekstu do środka, wysokość 300px
  • Stopki: kolor tła #1C59A7, biały kolor czcionki
  • Odsyłacza z panelu prawego: tło żółte, kolor czcionki niebieski, marginesy wewnętrzne 10px (Uwaga: tym stylem powinien być formatowany tylko odsyłacz z panelu prawego, pozostałe odsyłacze są formatowane domyślnie)

Skrypt

Wymagania dotyczące skryptu:

  • Wykonywany po stronie przeglądarki
  • Pobiera dane z obu pól z panelu dolnego (liczbę oraz stan pola typu checkbox)
  • Oblicza na podstawie pobranych wartości koszt wesela, według wytycznych
    • Koszt dla jednej osoby to 100 złotych
    • W przypadku wyprawiania poprawin, całkowity koszt należy powiększyć o 30%
  • Wyświetla pod przyciskiem tekst: „Koszt Twojego wesela to … złotych”, gdzie w miejscu kropek wstawiony jest obliczony koszt wesela
UWAGA!
Po zakończeniu pracy utwórz plik tekstowy. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Zrzut zapisz w folderze z Twoim numerem PESEL jako przeglądarka.txt.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: logo.png, przeglądarka.txt, Regulamin.txt, styl5.css, wesela.html, ewentualnie inne przygotowane pliki.
Po nagraniu płyty sprawdź poprawność nagrania. Opisz płytę swoim numerem PESEL i pozostaw na stanowisku, zapakowaną w pudełku wraz z arkuszem egzaminacyjnym.

Czas przeznaczony na wykonanie zadania wynosi 150 minut.

Ocenie będą podlegać 4 rezultaty:

  • grafika
  • witryna internetowa
  • styl CSS witryny internetowej
  • skrypt.

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, onscroll, onresize
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()