Przejdź do głównej treści
E.14-02-22.01-SGStyczeń 2022 · 38 kroków · ok. 73 min · 36 kryteriów z klucza

Rozwiązanie krok po kroku: Hurtownia kawy z kalkulatorem zamówienia (Wersja podstawowa)

Witryna hurtowni kawy: strona główna index.html i podstrona zamowienia.html o tym samym układzie (menu i logo na górze, baner, blok lewy i prawy, stopka) - różnią się tylko blokiem lewym - oraz blog.html z jednym zdaniem. Do tego arkusz stylów styl.css z efektem po najechaniu na odnośnik, skrypt JavaScript liczący koszt zamówienia z numeru kawy i wagi, przeskalowane logo i obraz kawa.png - filiżanka i pochylony nad nią imbryk z napisem „Poczęstuj się kawą” na niewidocznym kole.

To arkusz E.14 ze stycznia 2022 - kwalifikacji formuły 2012, którą zastąpiła INF.03. 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 jest napisany najprościej (getElementById, drabinka if, innerHTML), a na końcu sprawdzony na błędnych danych i poprawiony.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (flex, addEventListener)” jest drugi sposób rozwiązania tego samego arkusza: znaczniki semantyczne (<nav>, <main>, <aside>), układ flexbox, etykiety <label> i skrypt w osobnym pliku z cennikiem w słowniku - obie wersje są zgodne z kluczem.

Obrazy pochodzą z oryginalnego archiwum CKE (załącznik na stronie arkusza). Układ stron jest zmierzony w Chrome, a skrypt sprawdzony prawdziwym kliknięciem dla wszystkich cen z tabeli 1 i numeru spoza niej.

Jak liczą się punkty. Klucz ma 36 kryteriów (R.1.1 - R.5.4), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 27 punktów - można stracić 9 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.

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

  1. Etap 1: Grafika

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

    Krok 1: Folder zdającego i archiwum pliki2

    ok. 2 min
    Polecenie z arkusza

    Aby wykonać zadanie, zaloguj się na konto Egzamin bez hasła. Na pulpicie znajdziesz archiwum ZIP o nazwie pliki2.zip zabezpieczone hasłem: @K4wA! Archiwum należy rozpakować. Na pulpicie konta Egzamin utwórz folder. Jako nazwy folderu użyj numeru, którym został podpisany arkusz. Rozpakowane pliki umieść w tym folderze. Wyniki swojej pracy zapisz w tym folderze.

    Na pulpicie tworzysz folder nazwany numerem, którym podpisano arkusz (PESEL) - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora, Bartosz Bryniarski. Archiwum rozpakowujesz do tego folderu z hasłem @K4wA! (wielkość liter ma znaczenie). W środku są dwa obrazy: logo.png (220 × 122 px, napis „I ♥ COFFEE” z ziaren kawy) i ksztalty.png (414 × 492 px, naczynia kuchenne na przezroczystym tle).

    Archiwum do pobrania jest na stronie arkusza w serwisie - CKE wydała je pod nazwą pliki4.zip przy zadaniu ze stycznia 2019, z tym samym hasłem i tymi samymi plikami.

  2. Krok 2: logo.png: wysokość 110 px

    Kryteria:

    R.1.1 Obraz logo przeskalowano z zachowaniem proporcji tak, że jego wysokość wynosi 110 px, odpowiadająca temu szerokość wynosi 198 px (± 5 px)

    ok. 2 min
    Polecenie z arkusza

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

    W edytorze grafiki rastrowej (np. GIMP): Obraz → Skaluj obraz, łańcuch między szerokością a wysokością zamknięty (to jest „zachowanie proporcji”), wysokość 110 px. Szerokość przelicza się sama: 220 × 110 / 122 = 198,4, czyli 198 px - dokładnie tyle podaje klucz (198 px ±5). Eksport pod tą samą nazwą: Plik → Nadpisz logo.png. Wysokość 110 px to także wysokość bloku menu i logo na stronie.

    Typowe błędy

    Rozpięty łańcuch i sama wysokość 110 px dają logo 220 × 110 - spłaszczone, bez punktu.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 2

  3. Krok 3: Wycięcie filiżanki i imbryka

    ok. 4 min
    Polecenie z arkusza

    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.

    W ksztalty.png naczynia leżą blisko siebie - imbryk sąsiaduje z dzbankiem i mleczniczką, a filiżanka ze spodkiem stoi tuż pod nim. W GIMP-ie narzędzie Zaznaczanie rozmytego kliknięte na imbryku zaznacza tylko jego (przezroczyste tło oddziela kształty); pokrywka i ucho są połączone z korpusem, więc wejdą w zaznaczenie w całości. Edycja → Kopiuj i Edycja → Wklej jako → Nowy obraz - nowy obraz zachowuje przezroczystość. To samo z filiżanką: kliknięcie zaznacza ją razem ze spodkiem.

    Na podglądzie oba wycięte kształty na szachownicy (tak edytor pokazuje przezroczystość) - bez fragmentów sąsiednich naczyń.

    Typowe błędy

    Zaznaczenie prostokątne zostawia w rogach kawałki dzbanka albo mleczniczki - klucz R.1.4 wymaga, by żadne fragmenty innych kształtów nie były widoczne.

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

  4. Krok 4: Obraz kawa: filiżanka i pochylony imbryk

    Kryteria: ,

    R.1.3 Obraz z R.1.2 jest przezroczysty

    R.1.4 Na obrazie umieszczono kształt filiżanki i imbryka. Imbryk znajduje się po prawej stronie, jest pochylony, tak jakby jego zawartość wlewała się do filiżanki oraz kształty są w całości i żadne fragmenty innych kształtów nie są widoczne

    ok. 4 min
    Polecenie z arkusza

    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.

    Kompozycję składasz w edytorze grafiki wektorowej (np. Inkscape) - jest potrzebny do napisu na kole. Nowy dokument, Plik → Importuj oba wycięte kształty (PNG zachowa przezroczystość). Filiżankę ustaw po lewej, niżej, imbryk po prawej, wyżej. Imbryk obróć narzędziem zaznaczania: drugie kliknięcie na obiekcie pokazuje strzałki obrotu - w tym rozwiązaniu o 30 stopni w lewo, tak że dziobek opada nad filiżankę, jakby kawa się z niego wlewała (obraz 1c). W Inkscape obrót o konkretny kąt daje Obiekt → Przekształć → Obrót.

    Tło dokumentu zostaje przezroczyste - w Inkscape strona nie ma tła, dopóki go nie ustawisz.

  5. Krok 5: Napis „Poczęstuj się kawą” na niewidocznym kole

    Kryteria: ,

    R.1.5 Na obrazie umieszczono napis koloru brązowego (dowolny odcień) o treści: „Poczęstuj się kawą” oraz tekst jest zapisany dowolną czcionką typu Serif (widoczne szeryfy)

    R.1.6 Tekst jest opisany na kole i koło nie jest widoczne

    ok. 5 min
    Polecenie z arkusza

    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 kole, koło jest niewidoczne.

    W Inkscape:

    • narzędziem Elipsa z klawiszem Ctrl rysujesz koło wokół filiżanki i imbryka,
    • narzędziem Tekst piszesz Poczęstuj się kawą, krój Georgia (szeryfowy), duży rozmiar, kolor brązowy (tu #8b5a00),
    • zaznaczasz tekst i koło (Shift) i wybierasz Tekst → Wstaw na ścieżkę - litery układają się wzdłuż okręgu,
    • koło ma zostać niewidoczne: zaznacz je (np. w panelu Obiekty) i zdejmij mu obrys i wypełnienie (X na pasku kolorów przy wciśniętym Shift usuwa obrys). Nie usuwaj koła - tekst zniknąłby razem ze ścieżką.

    Początek tekstu przesuwasz, obracając koło - napis ma biec od lewego dołu przez górę na prawo, jak na obrazie 1c. Tu został wyśrodkowany na łuku od 120 do 25 stopni (licząc zgodnie z ruchem wskazówek zegara od godziny 3).

    Typowe błędy

    Usunięte koło zabiera ze sobą tekst na ścieżce. Koło z widocznym obrysem to strata R.1.6.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zrzut ekranu edytor.png

    Kryteria:

    R.1.7 Czynność umieszczenia tekstu na kole udokumentowano zrzutem ekranu w pliku edytor.png , na którym widoczny jest edytor grafiki wektorowej i funkcja wstawiająca tekst na ścieżkę

    ok. 2 min
    Polecenie z arkusza

    Aby udokumentować umieszczenie tekstu na kole wykonaj zrzut ekranu, na którym będzie widoczne środowisko edytora grafiki wektorowej oraz funkcja (np. menu ze wskazaną funkcją) realizująca to zadanie. Zrzut zapisz w formacie PNG i nazwij edytor. Nie kadruj zrzutu. Powinien on obejmować cały ekran, z widocznym paskiem zadań.

    Zrzut robisz w chwili, gdy na ekranie widać okno Inkscape i rozwinięte menu Tekst z podświetloną pozycją Wstaw na ścieżkę - najprościej tuż przed jej kliknięciem w poprzednim kroku. Klawisz Print Screen kopiuje cały ekran (z paskiem zadań), wklejasz go jako nowy obraz w GIMP-ie (Edycja → Wklej jako → Nowy obraz) i eksportujesz jako edytor.png.

    Ten zrzut zależy od Twojego stanowiska, dlatego rozwiązanie nie zawiera pliku - to praca do wykonania na egzaminie.

    Typowe błędy

    Zrzut samego okna (Alt+Print Screen) albo przycięty - bez paska zadań - nie jest oceniany (uwaga w kluczu przy R.1).

  7. Krok 7: Zapis kawa.png, wysokość najwyżej 400 px

    Kryteria:

    R.1.2 Obraz kawa zapisano w formacie umożliwiającym zapis przezroczystości, np. PNG oraz jego wysokość jest nie większa niż 400 px

    ok. 2 min
    Polecenie z arkusza

    Utworzony obraz należy zapisać jako kawa w formacie umożliwiającym zapisanie przezroczystości. Obraz kawa powinien mieć wysokość nie większą niż 400 px.

    Plik → Eksportuj (w Inkscape panel eksportu), format PNG - zapisuje przezroczystość; obszar eksportu: rysunek (sama treść, bez pustej strony). Wysokość ustawiasz w polach rozmiaru eksportu, tu 380 px przy szerokości 439 px - mniej niż dopuszczalne 400 px. Nazwa pliku: kawa.png.

    Typowe błędy

    Eksport do JPEG wypełnia tło białym kolorem - przepada przezroczystość (R.1.3) i format (R.1.2). Eksport całej strony A4 daje obraz wyższy niż 400 px.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Etap 2: Strona index.html

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

    Krok 8: Plik index.html

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: strona główna o nazwie index.html oraz podstrony zamowienia.html i blog.html. Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu lewego.

    W edytorze zaznaczającym składnię tworzysz plik index.html ze szkieletem HTML5 (<!DOCTYPE html>, <html lang="pl">, <head>, <body>). Strona główna powstaje pierwsza: podstrona zamówień będzie jej kopią z innym blokiem lewym, więc wszystko, co wspólne, wpisujesz tylko raz.

    index.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  9. Krok 9: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Cechy wspólne dla stron index.html i zamówienia.html: zastosowany właściwy standard kodowania polskich znaków.

    <meta charset="UTF-8"> na początku <head> (plik zapisany w UTF-8). Bez tego „Sklep z kawą” i „Poczęstuj się” mogą wyświetlić się z krzakami. Klucz R.2.1 ocenia kodowanie razem z nazwami trzech plików - punkt przyjdzie po utworzeniu blog.html.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  10. Krok 10: Tytuł strony

    Kryteria:

    R.2.2 Przynajmniej jednej stronie nadano tytuł: "Kochamy kawę”

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki „Kochamy kawę”.

    <title> w <head> - napis na karcie przeglądarki. Nie myl go z nagłówkiem banera („Sklep z kawą”).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  11. Krok 11: Podpięcie arkusza stylów styl.css

    ok. 1 min
    Polecenie z arkusza

    Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.

    <link rel="stylesheet" href="styl.css"> w <head>. Plik stylów powstanie po HTML-u.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  12. Krok 12: Sześć bloków strony

    Kryteria:

    R.2.3 Wygląd przynajmniej jednej strony zdefiniowano dzieląc ją na bloki: menu, logo, baner, lewy, prawy, stopka. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki: na górze dwa bloki: menu i logo, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    Bloki w kolejności czytania obrazu 2: menu i logo (<section> z identyfikatorami menu i logo), baner <header>, blok lewy i prawy (<section> left i right) i stopka <footer>. Identyfikatory są potrzebne, bo bloki mają różne style. Obok siebie ustawi je CSS.

    index.html HTML zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
    </section>
    <section id="logo">
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  13. Krok 13: Blok menu: cztery odnośniki

    ok. 2 min
    Polecenie z arkusza

    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”, prowadzący do pliku blog.html; odnośnik „Gatunki kawy”, prowadzący do strony http://gatunki-kawy.pl/

    Cztery znaczniki <a> jeden za drugim - odstępy między nimi da styl odnośnika (marginesy 30 px). Trzy pierwsze prowadzą do plików w folderze zdającego (adres względny, sama nazwa pliku), czwarty do innej witryny - adres bezwzględny, z http://. Podstrony zamówień i bloga jeszcze nie istnieją, więc te dwa odnośniki zadziałają po ich utworzeniu.

    Typowe błędy

    Adres gatunki-kawy.pl bez http:// przeglądarka potraktuje jak nazwę pliku w folderze zdającego.

    index.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  14. Krok 14: Blok logo

    Kryteria:

    R.2.6 Na przynajmniej jednej stronie w bloku logo umieszczono grafikę logo.png z tekstem alternatywnym "Kawa"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku logo: obraz logo.png z tekstem alternatywnym „Kawa”.

    <img> z przeskalowanym logo (198 × 110 px) i tekstem alternatywnym „Kawa” - czytnik ekranu przeczyta go zamiast obrazu.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  15. Krok 15: Baner: „Sklep z kawą”

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Sklep z kawą”.

    <h1> w banerze - jedyny nagłówek pierwszego stopnia na stronie. Punkt R.2.4 przyjdzie razem z nagłówkiem „Oferta”.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Blok prawy: nagłówek „Oferta”

    Kryteria:

    R.2.4 Na przynajmniej jednej stronie w banerze zapisano h1: "Sklep z kawą" oraz w bloku prawym zapisano h3: "Oferta"

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku prawego: nagłówek trzeciego stopnia o treści: „Oferta”.

    Trzeciego stopnia to <h3>. Arkusz pomija <h2> - tu wymagany jest właśnie <h3>, a klucz sprawdza znacznik, nie wygląd.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h3>Oferta</h3>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Lista punktowana z ofertą

    Kryteria:

    R.2.5 Na przynajmniej jednej stronie w bloku prawym zapisano listę punktowaną o elementach: „Arabica”, „Robusta”, „bezkofeinowa”, „zielona”, zastosowano znaczniki <ul>, <li> oraz ich zamknięcia

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku prawego: lista punktowana (nieuporządkowana) o elementach: „Arabica”, „Robusta”, „bezkofeinowa”, „zielona”.

    Lista punktowana (nieuporządkowana) to <ul>, elementy - <li>, każdy z zamknięciem </li> (klucz wymaga zamknięć). Trzeci element dostaje identyfikator decaf - w CSS tylko on będzie przekreślony.

    index.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Stopka: autor strony

    Kryteria:

    R.2.9 Na przynajmniej jednej stronie w stopce umieszczono numer zdającego zapisany czcionką pogrubioną

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: tekst „Stronę przygotował: ”, dalej wstawiony numer zdającego, numer jest zapisany czcionką pogrubioną.

    Na egzaminie wpisujesz swój numer (PESEL) - w tym rozwiązaniu w jego miejscu stoi imię i nazwisko autora. Pogrubienie <b> to jedyne formatowanie, które klucz pozwala zrobić w HTML.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  19. Krok 19: Blok lewy strony głównej: obraz kawa

    Kryteria:

    R.2.7 Na stronie głównej w bloku lewym umieszczono grafikę kawa z tekstem alternatywnym „filiżanka kawy?”

    ok. 1 min
    Polecenie z arkusza

    Cechy bloku lewego dla strony index.html: obraz kawa z tekstem alternatywnym „filiżanka kawy?”.

    <img src="kawa.png"> z tekstem alternatywnym razem ze znakiem zapytania - dokładnie tak, jak w arkuszu. Przezroczyste tło obrazu pokaże kolor bloku.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        <img src="kawa.png" alt="filiżanka kawy?">
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  20. Etap 3: Podstrony zamowienia.html i blog.html

    Kroki 20-24 · po tym etapie masz 19 z 36 kryteriów (pkt)

    Krok 20: Plik zamowienia.html

    Kryteria:

    R.3.2 Na przynajmniej jednej stronie kliknięcie odnośnika „Strona główna” otwiera plik index.html i kliknięcie odnośnika „Zamówienia” otwiera zamowienia.html

    ok. 1 min
    Polecenie z arkusza

    Strona główna oraz podstrona zamówienia są identyczne, za wyjątkiem panelu lewego.

    Zapisujesz index.html jako zamowienia.html i opróżniasz blok lewy - dostanie formularz. Teraz działają odnośniki „Strona główna” i „Zamówienia” na obu stronach.

    zamowienia.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  21. Krok 21: Pole numeru kawy

    Kryteria:

    R.3.4 Przynajmniej jedno pole edycyjne jest typu number

    ok. 1 min
    Polecenie z arkusza

    Cechy bloku lewego dla strony zamowienia.html: napis „Podaj numer kawy: ”, pole edycyjne typu numerycznego.

    Napis i pole <input type="number"> w jednej linii, jak na obrazie 3; <br> przenosi dalszą część do nowej linii. Identyfikator coffee jest dla skryptu.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  22. Krok 22: Pole wagi

    ok. 1 min
    Polecenie z arkusza

    Poniżej napis „Podaj wagę w dekagramach: ”, pole edycyjne typu numerycznego.

    Drugie pole liczbowe, identyfikator weight.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
        Podaj wagę w dekagramach: <input type="number" id="weight"><br>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  23. Krok 23: Przycisk „Zamów” i paragraf na wynik

    Kryteria:

    R.2.8 Na stronie zamówień w bloku lewym umieszczono dwa pola edycyjne i przycisk "Zamów"

    ok. 2 min
    Polecenie z arkusza

    Poniżej przycisk o treści „Zamów”, kliknięcie przycisku powoduje wywołanie skryptu.

    onclick="order()" wywoła funkcję order ze skryptu (napiszesz ją po stylach). Pusty paragraf result pod przyciskiem to miejsce na „Koszt zamówienia wynosi: …” - arkusz każe wypisać wynik pod przyciskiem.

    zamowienia.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
        Podaj wagę w dekagramach: <input type="number" id="weight"><br>
        <button onclick="order()">Zamów</button>
        <p id="result"></p>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  24. Krok 24: Plik blog.html

    Kryteria: ,

    R.2.1 Witrynę internetową zapisano w plikach index.html, zamowienia.html i blog.html oraz w przynajmniej jednym pliku zastosowano właściwy standard kodowania polskich znaków

    R.3.3 Na przynajmniej jednej stronie działa przynajmniej jeden odnośnik z: „Blog” - blog.html lub „Gatunki kawy” - http://gatunki-kawy.pl/

    ok. 1 min
    Polecenie z arkusza

    W pliku blog.html należy umieścić jedynie tekst „Strona w trakcie budowy”.

    Plik blog.html z jednym zdaniem - „jedynie tekst”, więc bez szkieletu HTML; przeglądarka i tak go wyświetli. Teraz są wszystkie trzy pliki witryny i działa odnośnik „Blog”.

    blog.html HTML nowy plik 
    Strona w trakcie budowy
    Podgląd strony po tym kroku (blog.html)

  25. Etap 4: Styl CSS

    Kroki 25-33 · po tym etapie masz 31 z 36 kryteriów (pkt)

    Krok 25: Plik styl.css: krój Garamond

    Kryteria: ,

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

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

    ok. 1 min
    Polecenie z arkusza

    Cechy formatowania CSS: wspólne dla całej strony: krój czcionki Garamond.

    Plik styl.css, selektor * - wszystkie elementy strony, także pola i przycisk formularza. Od tej chwili obie strony mają działający arkusz stylów.

    styl.css CSS nowy plik 
    * {
    font-family: Garamond;
}
    Podgląd strony po tym kroku (index.html)

  26. Krok 26: Bloki logo i menu

    ok. 2 min
    Polecenie z arkusza

    Dla bloku logo: kolor tła Olive; szerokość 25%, wysokość 110 px. Dla bloku menu: kolor tła Olive; szerokość 75%, wysokość 110 px.

    Olive, SaddleBrown, Wheat, LightGrey to nazwy kolorów CSS - wpisujesz je wprost, tak jak w arkuszu. Szerokości 75% i 25% razem dają cały wiersz.

    styl.css CSS zmienione: 10 linii 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
}
    Podgląd strony po tym kroku (index.html)

  27. Krok 27: Baner i stopka

    Kryteria: ,

    R.4.3 Ustawiono biały kolor czcionki dla bloków banera i stopki

    R.4.7 Ustawiono marginesy wewnętrzne (padding) 30px dla banera i stopki

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla banera i stopki: kolor tła SaddleBrown, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 30 px.

    Brązowe tło, biały tekst, wyśrodkowanie i dopełnienie 30 px ze wszystkich stron. Wysokości arkusz nie podaje - baner i stopka mają tyle, ile treść plus dopełnienie.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
}
    Podgląd strony po tym kroku (index.html)

  28. Krok 28: Blok lewy i prawy

    Kryteria: , , ,

    R.4.2 Ustawiono kolor tła Olive dla bloku logo i menu oraz SaddleBrown dla banera i stopki, oraz Wheat dla bloku lewego i prawego

    R.4.4 Ustawiono wysokość bloków logo i menu na 110px oraz bloków lewego i prawego na 450px

    R.4.5 Ustawiono szerokość logo na 25%, menu na 75%, bloków lewego i prawego na 50%

    R.4.6 Ustawiono wyrównanie tekstu do środka dla banera, bloku lewego i stopki oraz rozmiar czcionki 150% bloku lewego i prawego

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla bloku lewego i prawego: kolor tła Wheat, szerokość 50%, wysokość 450 px, rozmiar czcionki 150%. Dodatkowo dla bloku lewego: wyrównanie czcionki do środka.

    Wspólna reguła dla obu bloków i osobna, krótka reguła tylko dla lewego - wyśrodkowanie. Wszystkie kolory, szerokości i wysokości z arkusza są już ustawione.

    styl.css CSS zmienione: 9 linii 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
}
#left, #right {
    background-color: Wheat;
    width: 50%;
    height: 450px;
    font-size: 150%;
}
#left {
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  29. Krok 29: Układ: bloki obok siebie

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu przynajmniej jednej strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym

    ok. 3 min
    Polecenie z arkusza

    Podział strony na bloki: na górze dwa bloki: menu i logo, poniżej baner, poniżej dwa bloki: lewy i prawy oraz na dole stopka. Podział zrealizowany za pomocą znaczników sekcji tak, aby układ bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2.

    • float: left dla menu, logo, bloku lewego i prawego - bloki stają obok siebie, dopóki mieszczą się w szerokości strony (75% + 25% i 50% + 50%),
    • clear: both dla banera i stopki - schodzą pod bloki opływane i zajmują całą szerokość.

    Menu stoi w HTML przed logo, więc jest po lewej - jak na obrazie 2. Pomiar w Chrome przy oknie 1280 px: menu 948 px, logo 316 px (oba 110 px wysokości), blok lewy i prawy po 632 × 450 px.

    Typowe błędy

    Logo przed menu w HTML-u ustawi logo po lewej - układ niezgodny z obrazem 2.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
    float: left;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
    float: left;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
    clear: both;
}
#left, #right {
    background-color: Wheat;
    width: 50%;
    height: 450px;
    font-size: 150%;
    float: left;
}
#left {
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  30. Krok 30: Nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Dla selektora nagłówka pierwszego stopnia: odległość między literami 12 px.

    letter-spacing: 12px rozstawia litery „Sklep z kawą”.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
    float: left;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
    float: left;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
    clear: both;
}
#left, #right {
    background-color: Wheat;
    width: 50%;
    height: 450px;
    font-size: 150%;
    float: left;
}
#left {
    text-align: center;
}
h1 {
    letter-spacing: 12px;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Odnośniki menu

    Kryteria:

    R.4.8 Ustawiono cechy: odległość między literami 12px dla selektora h1 oraz wysokość linii 110px, bez podkreślenia dla selektora a

    ok. 2 min
    Polecenie z arkusza

    Dla selektora odnośnika: kolor czcionki LightGrey, marginesy zewnętrzne 30 px, rozmiar czcionki 150%, wysokość linii 110 px, bez podkreślenia.

    Selektor a obejmuje wszystkie odnośniki - na stronie są tylko te w menu. line-height: 110px to wysokość linii równa wysokości bloku menu, dzięki czemu napisy stoją dokładnie w połowie jego wysokości. Marginesy 30 px rozsuwają odnośniki w poziomie (górny i dolny margines elementu w linii tekstu nie zmienia układu), text-decoration: none zdejmuje podkreślenie.

    ⚠️ Rozbieżność w kluczu: kryterium R.4.8 łączy odstęp liter nagłówka z wysokością linii i brakiem podkreślenia odnośnika, a R.4.10 sprawdza te dwie cechy odnośnika jeszcze raz, razem z resztą jego stylu. Kryteria się pokrywają - oba są spełnione przez ten sam kod.

    styl.css CSS zmienione: 7 linii 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
    float: left;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
    float: left;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
    clear: both;
}
#left, #right {
    background-color: Wheat;
    width: 50%;
    height: 450px;
    font-size: 150%;
    float: left;
}
#left {
    text-align: center;
}
h1 {
    letter-spacing: 12px;
}
a {
    color: LightGrey;
    margin: 30px;
    font-size: 150%;
    line-height: 110px;
    text-decoration: none;
}
    Podgląd strony po tym kroku (index.html)

  32. Krok 32: Odnośnik pod kursorem

    Kryteria:

    R.4.10 Dla odnośnika ustawiono: kolor czcionki LightGrey, rozmiar czcionki 150%, marginesy zewnętrzne 30 px, oraz wysokość linii (line-height) 110px, bez podkreślenia dla selektora a (text-decoration: none) oraz gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały oraz dodawane jest jedynie dolne obramowanie 1 px, linią ciągłą o białym kolorze

    ok. 2 min
    Polecenie z arkusza

    Gdy kursor znajdzie się na odnośniku jego kolor czcionki zmienia się na biały oraz dodawane jest jedynie dolne obramowanie 1 px, linią ciągłą o białym kolorze.

    Pseudoklasa :hover działa, gdy kursor jest nad elementem. border-bottom: 1px solid white dodaje tylko dolną krawędź - ciągłą, białą, grubości 1 px (jak przy „Blog” na obrazie 2). Najedź kursorem na odnośnik w podglądzie.

    Typowe błędy

    border: 1px solid white rysuje ramkę ze wszystkich stron - arkusz wymaga „jedynie dolnego” obramowania.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
    float: left;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
    float: left;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
    clear: both;
}
#left, #right {
    background-color: Wheat;
    width: 50%;
    height: 450px;
    font-size: 150%;
    float: left;
}
#left {
    text-align: center;
}
h1 {
    letter-spacing: 12px;
}
a {
    color: LightGrey;
    margin: 30px;
    font-size: 150%;
    line-height: 110px;
    text-decoration: none;
}
a:hover {
    color: white;
    border-bottom: 1px solid white;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: Przekreślona „bezkofeinowa”

    Kryteria:

    R.4.9 Ustawiono styl tekstu przekreślonego, który zastosowano tylko do trzeciego elementu listy "bezkofeinowa"

    ok. 1 min
    Polecenie z arkusza

    Dla elementu nr 3 („bezkofeinowa”) listy umieszczonej w bloku lewym: tekst przekreślony.

    text-decoration: line-through przekreśla tekst. Selektor identyfikatora #decaf trafia tylko w trzeci element listy - pozostałe zostają bez zmian (sprawdzone w Chrome: przekreślony jest wyłącznie trzeci).

    ⚠️ Rozbieżność arkusz-klucz: arkusz pisze o liście „umieszczonej w bloku lewym”, ale jedyna lista na stronie stoi w bloku prawym (blok lewy ma obraz kawa albo formularz zamówienia). Klucz R.4.9 mówi po prostu o trzecim elemencie listy „bezkofeinowa” - przekreślenie dostaje element listy z bloku prawego.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond;
}
#logo {
    background-color: Olive;
    width: 25%;
    height: 110px;
    float: left;
}
#menu {
    background-color: Olive;
    width: 75%;
    height: 110px;
    float: left;
}
#banner, footer {
    background-color: SaddleBrown;
    color: white;
    text-align: center;
    padding: 30px;
    clear: both;
}
#left, #right {
    background-color: Wheat;
    width: 50%;
    height: 450px;
    font-size: 150%;
    float: left;
}
#left {
    text-align: center;
}
h1 {
    letter-spacing: 12px;
}
a {
    color: LightGrey;
    margin: 30px;
    font-size: 150%;
    line-height: 110px;
    text-decoration: none;
}
a:hover {
    color: white;
    border-bottom: 1px solid white;
}
#decaf {
    text-decoration: line-through;
}
    Podgląd strony po tym kroku (index.html)

  34. Etap 5: Skrypt

    Kroki 34-36 · po tym etapie masz 36 z 36 kryteriów (pkt)

    Krok 34: Funkcja order: odczyt obu pól

    Kryteria: , ,

    R.5.1 Skrypt napisano w języku JavaScript, zawiera on przynajmniej jedną zgodną ze składnią instrukcję

    R.5.2 Skrypt prawidłowo pobiera wartości z pól edycyjnych

    R.3.5 Kliknięcie przycisku powoduje wywołanie skryptu (nazwa funkcji w skrypcie jest skojarzona z odpowiednim zdarzeniem przycisku)

    ok. 3 min
    Polecenie z arkusza

    Wymagania dotyczące skryptu: wykonywany po stronie przeglądarki; wywoływany na stronie zamowienia.html po kliknięciu przycisku „Zamów”.

    Skrypt JavaScript na końcu <body> strony zamówień. Funkcja order - ta z onclick przycisku „Zamów” - odczytuje oba pola: getElementById znajduje pole po identyfikatorze, a .value to wpisana w nim wartość (tekst).

    zamowienia.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
        Podaj wagę w dekagramach: <input type="number" id="weight"><br>
        <button onclick="order()">Zamów</button>
        <p id="result"></p>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let number = document.getElementById("coffee").value;
            let weight = document.getElementById("weight").value;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  35. Krok 35: Cena z tabeli 1 i koszt

    Kryteria:

    R.5.3 Skrypt oblicza całkowity koszt kawy mnożąc wagę i cenę kawy ustaloną na podstawie numeru kawy (1 - 5zł, 2 - 7zł, 4 - 6zł, inne - 0 zł)

    ok. 3 min
    Polecenie z arkusza

    Skrypt pobiera wartości z obu pól edycyjnych i oblicza koszt kawy uwzględniając jej numer i wagę, zgodnie z tabelą 1; w przypadku, gdy podano inną wartość niż 1, 2, 4 cena wynosi 0 zł.

    Drabinka if / else if / else to tabela 1 zapisana w kodzie: numer 1 - 5 zł, 2 - 7 zł, 4 - 6 zł, każdy inny (także 3 i puste pole) - 0 zł. Koszt to cena za dekagram razy waga; operator * sam zamienia tekst z pola na liczbę.

    Typowe błędy

    Numer 3 nie ma ceny w tabeli 1 (kawa bezkofeinowa jest przekreślona w ofercie) - według arkusza daje 0 zł, nie „brak wyniku”.

    zamowienia.html HTML zmienione: 11 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
        Podaj wagę w dekagramach: <input type="number" id="weight"><br>
        <button onclick="order()">Zamów</button>
        <p id="result"></p>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let number = document.getElementById("coffee").value;
            let weight = document.getElementById("weight").value;
            let price;
            if (number == 1) {
                price = 5;
            } else if (number == 2) {
                price = 7;
            } else if (number == 4) {
                price = 6;
            } else {
                price = 0;
            }
            let cost = price * weight;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  36. Krok 36: Wynik pod przyciskiem

    Kryteria:

    R.5.4 Wynik obliczeń jest wyświetlany pod przyciskiem w formacie: „Koszt zamówienia wynosi: <koszt> zł”, gdzie <koszt> oznacza obliczoną wartość

    ok. 2 min
    Polecenie z arkusza

    Po obliczeniu całkowitego kosztu kawy jest wyświetlany wynik pod przyciskiem w formacie: „Koszt zamówienia wynosi: <koszt> zł”, gdzie <koszt> oznacza obliczoną wartość.

    innerHTML wpisuje tekst do paragrafu pod przyciskiem, a + skleja początek, obliczoną liczbę i „ zł” (ze spacją przed). Sprawdzone kliknięciem w Chrome: numer 1 i 10 dag - „Koszt zamówienia wynosi: 50 zł” (jak na obrazie 3), 2 i 3 dag - 21 zł, 4 i 5 dag - 30 zł, numer 3 albo 9 - 0 zł.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
        Podaj wagę w dekagramach: <input type="number" id="weight"><br>
        <button onclick="order()">Zamów</button>
        <p id="result"></p>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let number = document.getElementById("coffee").value;
            let weight = document.getElementById("weight").value;
            let price;
            if (number == 1) {
                price = 5;
            } else if (number == 2) {
                price = 7;
            } else if (number == 4) {
                price = 6;
            } else {
                price = 0;
            }
            let cost = price * weight;
            document.getElementById("result").innerHTML = "Koszt zamówienia wynosi: " + cost + " zł";
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  37. Etap 6: Dobre praktyki (poza kluczem)

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

    Krok 37: Walidacja wejścia: waga zamówienia

    ok. 4 min
    Polecenie z arkusza

    Skrypt pobiera wartości z obu pól edycyjnych i oblicza koszt kawy uwzględniając jej numer i wagę, zgodnie z tabelą 1; w przypadku, gdy podano inną wartość niż 1, 2, 4 cena wynosi 0 zł.

    Wersja z poprzednich kroków liczy z każdej wagi. Test w Chrome: kawa nr 1 i waga -4 - strona pokazuje „Koszt zamówienia wynosi: -20 zł”, a puste pole wagi daje „0 zł”, jakby zamówienie było darmowe. Pole type="number" przyjmuje liczby ujemne, a na stronie, która przyjmuje zamówienia, taki wynik mógłby trafić dalej (np. do koszyka).

    Poprawka sprawdza wagę przed liczeniem: puste pole albo liczba nie większa od zera - zamiast kosztu komunikat „Podaj wagę większą od zera”. Przy okazji wynik trafia do paragrafu przez textContent zamiast innerHTML - wstawia zwykły tekst i nigdy nie wykona znaczników HTML, co ma znaczenie, gdy w komunikacie znajdzie się coś wpisanego przez użytkownika. Stare linie zostają w komentarzu. Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.

    zamowienia.html HTML zmienione: 9 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kochamy kawę</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <section id="menu">
        <a href="index.html">Strona główna</a>
        <a href="zamowienia.html">Zamówienia</a>
        <a href="blog.html">Blog</a>
        <a href="http://gatunki-kawy.pl/">Gatunki kawy</a>
    </section>
    <section id="logo">
        <img src="logo.png" alt="Kawa">
    </section>
    <header id="banner">
        <h1>Sklep z kawą</h1>
    </header>
    <section id="left">
        Podaj numer kawy: <input type="number" id="coffee"><br>
        Podaj wagę w dekagramach: <input type="number" id="weight"><br>
        <button onclick="order()">Zamów</button>
        <p id="result"></p>
    </section>
    <section id="right">
        <h3>Oferta</h3>
        <ul>
            <li>Arabica</li>
            <li>Robusta</li>
            <li id="decaf">bezkofeinowa</li>
            <li>zielona</li>
        </ul>
    </section>
    <footer>
        Stronę przygotował: <b>Bartosz Bryniarski</b>
    </footer>
    <script>
        function order() {
            let number = document.getElementById("coffee").value;
            let weight = document.getElementById("weight").value;
            let price;
            if (number == 1) {
                price = 5;
            } else if (number == 2) {
                price = 7;
            } else if (number == 4) {
                price = 6;
            } else {
                price = 0;
            }
            // let cost = price * weight;
            // document.getElementById("result").innerHTML = "Koszt zamówienia wynosi: " + cost + " zł";
            let result = document.getElementById("result");
            if (weight === "" || Number(weight) <= 0) {
                result.textContent = "Podaj wagę większą od zera";
            } else {
                let cost = price * weight;
                result.textContent = "Koszt zamówienia wynosi: " + cost + " zł";
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  38. Etap 7: Oddanie pracy

    Krok 38 · po tym etapie masz 36 z 36 kryteriów (pkt)

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

    ok. 3 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz w folderze z 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 powinny się znajdować pliki: blog, edytor, index, kawa, logo, przeglądarka, styl, zamowienia, ewentualnie inne przygotowane pliki.

    W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony (otwierasz index.html dwuklikiem - witryna nie potrzebuje serwera).

    W folderze zdającego muszą być: blog.html, edytor.png, index.html, kawa.png, logo.png (110 px wysokości), przeglądarka.txt, styl.css i zamowienia.html; ksztalty.png może zostać. 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 37.

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