Arkusz E.14 : 2019 - styczeń - zad. 04 (js)

Oznaczenie: E.14-04-19.01   Limit czasu: 150 minut

Zadanie egzaminacyjne

Wykonaj aplikację internetową prezentującą możliwości HTML, CSS i JavaScript. Wykorzystaj pakiet XAMPP jako środowisko bazowo-aplikacyjne, edytor zaznaczający skadnię oraz program do obróbki grafiki rastrowej i wektorowej.

Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki4.zip zabezpieczone hasłem: @K4wA!.

Archiwum należy rozpakować.

Pobierz pliki4.zip

Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj swojego numeru PESEL. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

Grafika

Obraz logo.png przeskaluj z zachowaniem proporcji tak, aby wysokość wynosiła dokładnie 100px.

Z grafiki ksztalty.png wytnij kształt filiżanki i imbryka (obrazy 1a i 1b) z zachowaniem przezroczystości oraz tak, aby kształty były w całości i żadne fragmenty innych kształtów nie były widoczne. Za pomocą edytora grafiki wektorowej przygotuj nowy obraz zgodny z obrazem 1c. Uwzględnij wymagania:

  • Obraz jest przezroczysty
  • Widoczne są na nim kształt filiżanki i imbryka. Imbryk znajduje się po prawej stronie, jest obrócony, tak jakby jego zawartość wlewała się do filiżanki
  • Widoczny jest napis koloru brązowego o treści „Poczęstuj się kawą”
  • Tekst zapisany jest dowolną czcionką typu Serif. Na obrazie 1c jest to Georgia, dopuszczalne również inne czcionki Serif, np. Times New Roman
  • Tekst jest opisany na okręgu, okrąg jest niewidoczny
  • Utworzony obraz należy zapisać jako kawa w formacie przechowującym informację o przezroczystości. Obraz kawa powinien mieć wysokość nie większą niż 400 px

Obraz 1a. Filiżanka

Obraz 1b. Imbryk

Obraz 1c. Obraz kawa

Grafika do przygotowania

Witryna internetowa

Obraz 2. Witryna internetowa, strona główna

Szablon strony

Cechy witryny:

  • Strona główna o nazwie index.html oraz podstrony zamowienia.html i blog.html
  • W pliku blog.html należy umieścić jedynie tekst „Strona w trakcie budowy”
  • Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu prawego

Cechy wspólne dla stron index.html i zamowienia.html:

  • Zastosowany właściwy standard kodowanie polskich znaków
  • Tytuł strony widoczny na karcie przeglądarki "Hurtownia"
  • Arkusz stylów w pliku o nazwie styl4.css prawidłowo podłączony z kodem strony
  • Podział strony na bloki: na górze dwa bloki: logo i menu, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczków sekcji, zgodnie z obrazem 2
  • Zawartość bloku logo:
    • obraz logo.png z tekstem alternatywnym "hurtownia"
  • Zawartość bloku menu:
    • Odnośnik "Strona główna", prowadzący do pliku index.html
    • Odnośnik "Zamówienia", prowadzący do pliku zamowienia.html
    • Odnośnik "Blog o kawie", prowadzący do pliku blog.html
    • Odnośnik "Odwiedź także", prowadzący do strony http://gatunki-kawy.pl, odnośnik otwiera się w osobnej karcie przeglądarki
  • Zawartość banera:
    • nagłówek pierwszego stopnia o treści "Hurtownia kawy"
  • Zawartość bloku lewego:
    • Nagłówek drugiego stopnia o treści: "Oferta"
    • Lista numerowana (uporządkowana) o elementach: "Kawa palona Arabica", "Kawa palona Robusta", "Kawa bezkofeinowa", "Kawa zielona"
  • Zawartość stopki w postaci tekstu "Stronę przygotował:", dalej wstawiony numer PESEL, numer PESEL jest zapisany czcionką pogrubioną.

Cechy bloku prawego dla strony index.html:

  • Obraz kawa z tekstem alternatywnym: "Poczęstuj się"

Cechy bloku prawego dla strony zamowienia.html:

  • Napis "Podaj numer kawy:"
  • Poniżej pole edycyjne typu numerycznego
  • Poniżej napis "Podaj wagę w dekagramach"
  • Poniżej pole edycyjne typu numerycznego
  • Poniżej przycisk o treści "Zamów", kliknięcie przycisku powoduje wywołanie skryptu

Styl CSS witryny internetowej

Plik styl4.css zawiera formatowanie:

  • Wspólne dla całej strony: krój czcionki Arial
  • Dla bloku logo: kolor tła RGB 162,117,87, szerokość 20%, wysokość 100px
  • Dla bloku menu: kolor tła RGB 162,117,87, szerokość 40%, wysokość 100px, wyrównanie tekstu do prawej strony
  • Wspólne dla banera i stopki: kolor tła RGB 74, 45, 32, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 30px
  • Wspólne dla bloku lewego i prawego: kolor tła RGB 162,117,87; biały kolor czcionki, szerokość 50%, wysokość 500px
  • Dla selektora nagłówkowego pierwszego stopnia: odległość między literami 10px
  • Dla selektora odnośnika: kolor czcionki RGB 65, 98, 85; marginesy wewnętrzne 20px, marginesy zewnętrzne 10px, rozmiar czcionki 150%, wysokość linii 100px, obramowanie 1px, linią ciągłą o kolorze RGB 65, 98, 85
  • Dla elementu nr 4 ("Kawa zielona") listy umieszczonej w bloku lewym: tekst przekreślony

Skrypt

Wymagania dotyczące skryptu:

  • Wykonany po stronie przeglądarki
  • Wywołany na stronie zamowienia.html po kliknięciu przycisku "Zamów"
  • Skrypt pobiera wartości wpisane w oba pola edycyjne i oblicza koszt kawy uwzględniając jej numer i wagę
  • Ceny kawy ze względu na jej numer przedstawia tabela 1, w przypadku wpisania innej wartości niż 1-3 cena wynosi 0 zł
  • Po obliczeniu całkowitego kosztu kawy jest wyświetlany wynik pod przyciskiem w formacie: "Koszt zamówienia wynosi [koszt] zł", gdzie [koszt] oznacza obliczony koszt.

Tabela 1. Ceny kawy

Numer kawy Nazwa Cena za 1 dekagram
1 Kawa palona Arabica 5 zł
2 Kawa palona Robusta 6 zł
3 Kawa bezkofeinowa 7 zł
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, zapisz go w folderze z numerem PESEL, jako przeglądarka.txt.
Nagraj płytę z rezultatami pracy. W folderze z numerem PESEL powinny się znajdować pliki: blog, index, kawa, logo, przeglądarka, styl4, zamowienia, 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ędzie podlegać 5 rezultatów:

  • grafika
  • wygląd witryny internetowej
  • działanie witryny internetowej
  • 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()