Rozwiązanie buduje stronę salonu rowerowego: baza rowery (rowery i ich producenci) i cztery zapytania - dwa warunki z AND, MIN/AVG/MAX z aliasami, JOIN i GROUP BY, wzorzec LIKE i UPDATE obniżający cenę o 25% - potem zdjęcie odbite i przeskalowane w edytorze grafiki, strona index.html z nagłówkiem przyklejonym do góry okna (position: fixed), kalkulatorem rozmiaru ramy, logotypami z dwiema klasami naraz, zagnieżdżoną listą i tabelą w stopce oraz trzy skrypty JavaScript: suwak przepisujący wzrost do pola, obliczenie rozmiaru ramy zależnie od typu roweru i dzisiejsza data w stopce.
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ą. Skrypty są najpierw pisane najprościej, jak robi to uczeń na egzaminie (oninput, onclick, onload w HTML, if dla każdego pola opcji), a na końcu zostają przerobione na wersję z prawdziwych projektów: nasłuchiwacze zdarzeń, pole i suwak zsynchronizowane w obie strony, sprawdzenie zakresu wzrostu i współczynniki w jednym obiekcie.
Baza i zdjęcia pochodzą z prawdziwego archiwum pliki22 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Skrypty sprawdzono w prawdziwej przeglądarce, a podgląd strony działa: przesuń suwak, wybierz typ roweru i kliknij „Sprawdź”.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (zdarzenia, walidacja)” jest drugi sposób rozwiązania tego samego arkusza: skrypt w osobnym pliku z nasłuchiwaczami zdarzeń, suwak i pole zsynchronizowane w obie strony, sprawdzanie zakresu wzrostu i data z toLocaleDateString od pierwszej linii - obie wersje są zgodne z kluczem.
Jak liczą się punkty. Klucz ma 45 kryteriów (R.1.1 - R.5.10), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 34 punkty - można stracić 11 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.
Kroki 1-7 · po tym etapie masz 6 z 45 kryteriów (pkt)
Utwórz bazę danych o nazwie rowery, z zestawem polskich znaków (np. utf8_unicode_ci)
Rozpakuj pliki22.7z z pulpitu (hasło {Row3RY} - razem z nawiasami klamrowymi, z cyfrą 3 zamiast „e”) do folderu z numerem zdającego - w tym arkuszu rozpakowane pliki mają leżeć właśnie tam. W phpMyAdmin: Nowa, nazwa rowery, porównywanie utf8_unicode_ci.
Do utworzonej bazy zaimportuj tabele z pliku rowery.sql
Zaznacz bazę rowery, potem Import → rowery.sql → Wykonaj. Powstają dwie tabele z ilustracji 1: producenci (6 firm) i rowery, w której pole producent_id wskazuje producenta. Pole typ przyjmuje wartości wymienione w arkuszu: szosowy, górski, gravel, elektryczny, miejski, cross, fatbike.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. 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
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.png. W tym arkuszu wszystkie zrzuty idą do PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie model, rozmiar ramy, rozmiar kół, kolor i cenę z tabeli rowery dla rowerów w typie górski, których cena jest mniejsza lub równa 4500
SELECT model, rozmiar_ramy, rozmiar_kol, kolor, cena - pięć pól; nazwy kolumn bierzesz z ilustracji 1 (rozmiar_kol bez „ó”),FROM rowery,WHERE typ = 'górski' AND cena <= 4500 - oba warunki naraz; „mniejsza lub równa” to <=.Wynik: 9 wierszy, od Fuse Comp 22 i Rockhopper Comp 22 do Marlin 5 i Roscoe 6 - jak w kluczu. Zapytania zapisujesz w kwerendy.txt, zrzut jako kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT model, rozmiar_ramy, rozmiar_kol, kolor, cena FROM rowery WHERE typ = 'górski' AND cena <= 4500;
Zapytanie 2: wybierające jedynie nazwy producentów oraz minimalną, średnią i maksymalną cenę rowerów zgrupowane dla każdego producenta. Kolumnom z cenami należy nadać nazwy (aliasy): „najtańszy”, „średnia cena”, „najdroższy”. Należy posłużyć się relacją
SELECT producenci.nazwa - nazwa producenta z drugiej tabeli,MIN(cena) AS 'najtańszy', AVG(cena) AS 'średnia cena', MAX(cena) AS 'najdroższy' - trzy funkcje agregujące; alias ze spacją („średnia cena”) musi stać w apostrofach,FROM rowery JOIN producenci ON producenci.id = rowery.producent_id - relacja: każdy rower łączy się ze swoim producentem,GROUP BY producent_id - funkcje liczą się osobno dla rowerów każdego producenta.Wynik: 6 wierszy - Cup, Knife, Glass, Teaspoon, Spoon, Fork. Siódmy producent nie ma w bazie żadnego roweru, więc złączenie go pomija. Zrzut: kw2.png.
Bez GROUP BY funkcje agregujące liczą całą tabelę i wynik ma jeden wiersz - klucz wymaga sześciu, po jednym na producenta.
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT model, rozmiar_ramy, rozmiar_kol, kolor, cena FROM rowery WHERE typ = 'górski' AND cena <= 4500;
-- Zapytanie 2
SELECT producenci.nazwa, MIN(cena) AS 'najtańszy', AVG(cena) AS 'średnia cena', MAX(cena) AS 'najdroższy'
FROM rowery JOIN producenci ON producenci.id = rowery.producent_id GROUP BY producent_id;
Zapytanie 3: wybierające jedynie id, model, typ i rozmiar kół rowerów karbonowych (w nazwie modelu zawierają słowo „Carbon”) w rozmiarze ramy L
SELECT id, model, typ, rozmiar_kol FROM rowery,WHERE model LIKE '%carbon%' - % zastępuje dowolny ciąg znaków, więc wzorzec łapie „Carbon” w dowolnym miejscu nazwy; porównywanie utf8_unicode_ci nie rozróżnia wielkości liter, więc carbon i Carbon dają to samo,AND rozmiar_ramy = 'L'.Wynik: 7 wierszy o identyfikatorach 5, 7, 13, 16, 18, 29, 52. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT model, rozmiar_ramy, rozmiar_kol, kolor, cena FROM rowery WHERE typ = 'górski' AND cena <= 4500;
-- Zapytanie 2
SELECT producenci.nazwa, MIN(cena) AS 'najtańszy', AVG(cena) AS 'średnia cena', MAX(cena) AS 'najdroższy'
FROM rowery JOIN producenci ON producenci.id = rowery.producent_id GROUP BY producent_id;
-- Zapytanie 3
SELECT id, model, typ, rozmiar_kol FROM rowery WHERE model LIKE '%carbon%' AND rozmiar_ramy = 'L';
Zapytanie 4: aktualizujące cenę rowerów gravelowych (typ: gravel) obniżając ją o 25%
UPDATE rowery - zmieniasz istniejące wiersze,SET cena = cena * 0.75 - nowa cena liczona ze starej: obniżka o 25% to 75% dawnej ceny (w SQL kropka dziesiętna),WHERE typ = 'gravel' - tylko rowery gravelowe.phpMyAdmin melduje 5 zmienionych wierszy, jak w kluczu; np. Topstone Carbon Ultegra RX kosztuje teraz 12750.00 zł. Zrzut z komunikatem albo z tabelą po zmianie: kw4.png.
UPDATE bez WHERE obniża ceny wszystkich rowerów w bazie. Zapytanie wykonujesz raz - każde kolejne uruchomienie obniża ceny o następne 25%.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT model, rozmiar_ramy, rozmiar_kol, kolor, cena FROM rowery WHERE typ = 'górski' AND cena <= 4500;
-- Zapytanie 2
SELECT producenci.nazwa, MIN(cena) AS 'najtańszy', AVG(cena) AS 'średnia cena', MAX(cena) AS 'najdroższy'
FROM rowery JOIN producenci ON producenci.id = rowery.producent_id GROUP BY producent_id;
-- Zapytanie 3
SELECT id, model, typ, rozmiar_kol FROM rowery WHERE model LIKE '%carbon%' AND rozmiar_ramy = 'L';
-- Zapytanie 4
UPDATE rowery SET cena = cena * 0.75 WHERE typ = 'gravel';
Kroki 8-26 · po tym etapie masz 23 z 45 kryteriów (pkt)
Plik 1.jpg należy obrócić wzdłuż osi pionowej oraz przeskalować z zachowaniem proporcji tak, aby jego szerokość wynosiła dokładnie 400 px. Zmodyfikowany obraz jest widoczny na ilustracji 2
Zdjęcie w archiwum leży do góry kołami (lewa połowa obrazu obok). Na ilustracji 2 ten sam rower stoi już normalnie, a przednie koło z amortyzatorem zostaje po prawej - to daje tylko odwrócenie góra-dół. W GIMP-ie: Obraz → Przekształć → Odbij pionowo, potem Obraz → Skaluj obraz, szerokość 400 px przy zamkniętym łańcuchu proporcji. Oryginał ma 1200 × 919 px, wysokość wychodzi sama: 306 px (klucz: 306 ±5) - tyle samo, co pozostałe cztery zdjęcia.
⚠️ Sprzeczność w arkuszu: „obrócić wzdłuż osi pionowej” sugeruje odbicie lewo-prawo (Odbij poziomo), ale wtedy rower nadal leżałby kołami do góry, a przód przeszedłby na lewo - niezgodnie z ilustracją 2, która pokazuje odwrócenie góra-dół. Klucz CKE powtarza sformułowanie arkusza i sprawdza wymiar (400 × 306 px ±5); arkusz każe trzymać się ilustracji („zmodyfikowany obraz jest widoczny na ilustracji 2”), więc robisz odwrócenie góra-dół.
Obrót o 180° (Obróć o 180°) też stawia rower na kołach, ale przenosi przód na lewą stronę - obraz jest wtedy lustrzanym odbiciem tego z ilustracji 2.
Składa się ze strony o nazwie index.html. Zapisana w języku HTML5
Deklaracja <!DOCTYPE html> i szkielet strony. Strona nie korzysta z bazy - zapytania robisz tylko w phpMyAdmin - więc wystarczy zwykły plik .html.
index.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny
Atrybut lang="pl" w znaczniku <html> - razem z deklaracją HTML5 to jedno kryterium klucza.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwszy element <head> - bez niego „Sprawdź” i „kołami” mogą wyświetlić się krzakami.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Salon rowerowy”
<title> w <head>. Z kodowaniem to drugie kryterium nagłówka strony.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa pliku: styl.css. Całe formatowanie ma pochodzić z tego pliku - żadnych atrybutów style w HTML-u.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, główny, boczny, dwa bloki stopki. Podział zrealizowany za pomocą semantycznych znaczników języka HTML 5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 3
Klucz wymaga wprost header, main, aside i dwóch footer (R.2.4). Znacznik <footer> może wystąpić na stronie więcej niż raz - to stopka dla treści, w której stoi, a nie „jedyna stopka strony”.
index.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Pięć obrazów od 1.jpg do 5.jpg. Wszystkie obrazy mają tekst alternatywny „rower”
Pięć <img>, każdy z alt="rower". Na razie są wielkie (400 px) - zmniejszysz je w CSS do 16% szerokości.
index.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Zawartość bloku głównego: Nagłówek pierwszego stopnia o treści „Dobierz rozmiar ramy roweru do wzrostu”. Nagłówek drugiego stopnia o treści „Wybierz rodzaj roweru”
<h1> i pod nim <h2>.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Pole opcji, domyślnie zaznaczone, z etykietą „górski z kołami 29”. Znacznik etykiety ma przypisaną klasę klasa_etykiety i podpowiedź „górski z kołami 29” w postaci "dymku"
<input type="radio"> z checked i etykieta <label> połączona z nim przez for/id (R.3.7). „Dymek” to atrybut title - przeglądarka pokazuje jego treść po zatrzymaniu kursora na elemencie (R.3.8). Klasa klasa_etykiety zrobi z etykiety ciemny kafelek (R.3.9).
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Pole opcji z etykietą „szosa”. Znacznik etykiety ma przypisaną klasę klasa_etykiety i podpowiedź „szosa” w postaci "dymku"
To samo bez checked: id="road", etykieta z tą samą klasą i title="szosa".
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Pole opcji z etykietą „trekking”. Znacznik etykiety ma przypisaną klasę klasa_etykiety i podpowiedź „trekking” w postaci "dymku"
Trzecie pole: id="trekking". Na ilustracji 2 kursor stoi właśnie na tej etykiecie i widać dymek „trekking”.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>W jednym momencie można zaznaczyć tylko jedno pole opcji
To zapewnia już kod z trzech poprzednich kroków: wszystkie pola mają ten sam name="bike", więc przeglądarka traktuje je jak jedną grupę - zaznaczenie „szosa” odznacza „górski”. Z pierwszym polem zaznaczonym na starcie to komplet kryterium R.3.4.
Różne wartości name w polach opcji - da się zaznaczyć wszystkie trzy naraz, a skrypt nie wie, który współczynnik wybrać.
index.html HTML zmienione: 0 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Podgląd strony bez zmian - taki jak po kroku 19.
Nagłówek drugiego stopnia o treści „Podaj swój wzrost”. Pole zakresu liczbowego z ustawionymi wartościami: domyślną 150, minimalną 100, maksymalną 220, zmiana wartości na suwaku powoduje wywołanie skryptu 1
Drugi <h2>, a pod nim <input type="range"> - suwak. min i max to skrajne położenia, value to położenie na starcie. Wywołanie Skryptu 1 dopiszesz razem z nim.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Pole edycyjne typu numerycznego z wartością domyślną 150
type="number" i value="150" - ta sama wartość startowa co suwak, więc oba pokazują to samo, zanim ktokolwiek czegoś dotknie.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
<input type="number" id="height" value="150">
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Poniżej przycisk „Sprawdź” z przypisaną klasą klasa_etykiety, którego kliknięcie wywołuje skrypt 2. Paragraf z wynikiem działania skryptu 2
<br> przenosi przycisk do nowej linii („poniżej”). Przycisk dostaje tę samą klasę co etykiety, więc też będzie ciemnym kafelkiem. Pusty akapit z id="result" czeka na wynik Skryptu 2. Na stronie są już wszystkie kontrolki z R.2.6: trzy pola opcji, trzy etykiety, suwak, pole i przycisk.
index.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Zawartość bloku bocznego: nagłówek pierwszego stopnia o treści „Polecane firmy”, paragraf z przypisanymi klasami logo1 i prawa z zawartością „cup”, paragraf z przypisaną klasą logo2 z zawartością „glass”, paragraf z przypisanymi klasami logo1 i srodek z zawartością „spoon”, paragraf z przypisanymi klasami logo2 i prawa z zawartością „teaspoon”, paragraf z przypisaną klasą logo1 z zawartością „fork”
Kilka klas jednego elementu wpisujesz w jednym atrybucie, rozdzielone spacją: class="logo1 prawa". Element dostaje wtedy style obu klas - logo1 decyduje o wielkości i kroju, prawa o wyrównaniu. Treść piszesz małymi literami, jak w arkuszu; wielkie litery „CUP” i „SPOON” z ilustracji 2 zrobi CSS.
Dwa osobne atrybuty (class="logo1" class="prawa") to błąd - przeglądarka bierze tylko pierwszy, a klucz mówi o tym wprost przy R.3.10.
index.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
</footer>
<footer>
</footer>
</body>
</html>Zawartość pierwszego bloku stopki: nagłówek czwartego stopnia o treści „Oferowane typy rowerów”, lista punktowana (nieuporządkowana) z elementami: „górskie”, „szosowe”, „miejskie”. Pierwszy element zagnieżdża drugą listę punktowaną z elementami „koła 29 cali”, „koła 26 cali”
Lista zagnieżdżona to cała druga <ul> wewnątrz pierwszego <li> - zaraz po słowie „górskie”, przed zamykającym </li> (R.2.8). Przeglądarka sama wcina podlistę.
<ul> wstawiona między </li> a następnym <li> (obok elementu, a nie w nim) jest niepoprawna składniowo - klucz wymaga podlisty wewnątrz pierwszego <li>.
index.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
</footer>
</body>
</html>Zawartość drugiego bloku stopki: nagłówek czwartego stopnia o treści „Informacje”, tabela o dwóch wierszach i dwóch kolumnach. W komórkach pierwszego wiersza wstawione: tekst „Autor: ”, numer zdającego; w komórkach drugiego wiersza: tekst „Aktualna data: ”, efekt działania skryptu 3
Dwa <tr> po dwie komórki <td>. W drugiej komórce pierwszego wiersza na egzaminie wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania (R.2.9). Ostatnia komórka ma id="date" - wpisze do niej datę Skrypt 3. Z tym krokiem są wszystkie nagłówki z R.2.5: dwa <h1>, <h2>, akapity w bloku bocznym i <h4> w stopkach.
index.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
</body>
</html>Kroki 27-39 · po tym etapie masz 34 z 45 kryteriów (pkt)
Dla ciała strony: szerokość 80%, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę
margin: auto dzieli wolne miejsce po równo na lewo i prawo - strona o szerokości 80% okna staje na środku.
styl.css CSS nowy plik body {
width: 80%;
margin: auto;
}Dla bloku nagłówkowego: wysokość 200 px, biały kolor tła, wyrównanie tekstu do środka, blok położony zawsze w odległości 0 px od góry względem okna przeglądarki, pozycja ta nie zmienia się nawet po przewinięciu całej strony
„Względem okna przeglądarki” i „nie zmienia się po przewinięciu” to dokładnie position: fixed (tabela 4 arkusza), a top: 0 dosuwa blok do górnej krawędzi okna. Taki blok wypada z normalnego układu strony - reszta treści zachowuje się tak, jakby go nie było, i wjeżdża pod niego. Dlatego za chwilę blok główny i boczny dostaną margines górny 200 px, równy wysokości nagłówka. Biały kolor tła jest potrzebny: bez niego przewijana treść prześwitywałaby przez nagłówek.
styl.css CSS zmienione: 7 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}Dla bloku głównego: szerokość 60%, wysokość 650 px, jedynie marginesy wewnętrzne prawy i lewy 2%, jedynie margines zewnętrzny górny 200 px
„Jedynie” oznacza osobne właściwości: padding-left i padding-right zamiast padding: 2% (który dałby też górny i dolny) oraz margin-top zamiast margin. Margines 200 px odsuwa treść spod przyklejonego nagłówka.
styl.css CSS zmienione: 7 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}Dla bloku bocznego: szerokość 20%, wysokość 650 px, cień bloku bez przesunięcia (przesunięcie 0 px), z rozmyciem 100 px w kolorze #02220a, jedynie margines zewnętrzny górny 200 px
box-shadow: 0px 0px 100px #02220a - przesunięcie poziome i pionowe 0, rozmycie 100 px, kolor (pomoc o box-shadow jest w arkuszu). Cień bez przesunięcia rozlewa się równo na wszystkie strony - na ilustracji 2 to ciemna poświata po bokach bloku.
styl.css CSS zmienione: 6 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}Dla obu bloków stopki: szerokość 50%, wysokość 170 px, kolor tła #02220a, biały kolor czcionki
Selektor footer obejmuje obie stopki. Ta reguła zamyka kryterium kolorów (R.4.1).
styl.css CSS zmienione: 6 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}Dla selektora obrazu: szerokość 16%, marginesy zewnętrzne 8 px, marginesy wewnętrzne 3 px, zaokrąglenie rogów 50%
Selektor znacznika img (uwaga arkusza). border-radius: 50% na prostokątnym zdjęciu daje elipsę - jak na ilustracji 2. Ta reguła zamyka kryteria szerokości i wysokości (R.4.2) oraz marginesów (R.4.4).
styl.css CSS zmienione: 6 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}Dla klasy klasa_etykiety: szerokość 18%, wysokość 60 px, wysokość wiersza (interlinia) 60 px, sposób wyświetlania liniowo-blokowy, kolor tła #02220a, biały kolor czcionki, wyrównanie tekstu do środka, obsłużone przepełnienie elementu – ukryte
Etykieta jest elementem liniowym i nie przyjmuje szerokości ani wysokości. display: inline-block (liniowo-blokowy) pozwala nadać jej wymiary, a mimo to kafelki stoją obok siebie w jednej linii. line-height: 60px równe wysokości ustawia jedną linię tekstu na środku w pionie, a overflow: hidden ucina tekst, który nie zmieści się w 18% szerokości.
styl.css CSS zmienione: 10 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}W momencie gdy kursor znajdzie się na elemencie z przypisaną klasą klasa_etykiety jego kolor tła zmienia się na ForestGreen
Pseudoklasa :hover po nazwie klasy. Na ilustracji 2 zielony jest kafelek „trekking”, nad którym stoi kursor.
styl.css CSS zmienione: 3 linie body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}
.klasa_etykiety:hover {
background-color: ForestGreen;
}Dla klasy logo1: wielkość czcionki 50 px, tekst przekształcony na wielkie litery, czcionka pochylona
text-transform: uppercase wyświetla tekst wielkimi literami, choć w HTML-u jest „cup” - w kodzie zostaje to, co wpisano. Pochylenie to font-style: italic.
styl.css CSS zmienione: 5 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}
.klasa_etykiety:hover {
background-color: ForestGreen;
}
.logo1 {
font-size: 50px;
text-transform: uppercase;
font-style: italic;
}Dla klasy logo2: wielkość czcionki 30 px, podkreślenie, krój czcionki Impact
Podkreślenie to text-decoration: underline. Obie klasy logotypów gotowe (R.4.8).
styl.css CSS zmienione: 5 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}
.klasa_etykiety:hover {
background-color: ForestGreen;
}
.logo1 {
font-size: 50px;
text-transform: uppercase;
font-style: italic;
}
.logo2 {
font-size: 30px;
text-decoration: underline;
font-family: Impact;
}Dla klasy prawa: wyrównanie tekstu do prawej. Dla klasy srodek: wyrównanie tekstu do środka
Dwie małe klasy. „Cup” i „teaspoon” mają po dwie klasy, więc biorą rozmiar z logo1/logo2, a wyrównanie z prawa - tak działa łączenie klas.
styl.css CSS zmienione: 6 linii body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}
.klasa_etykiety:hover {
background-color: ForestGreen;
}
.logo1 {
font-size: 50px;
text-transform: uppercase;
font-style: italic;
}
.logo2 {
font-size: 30px;
text-decoration: underline;
font-family: Impact;
}
.prawa {
text-align: right;
}
.srodek {
text-align: center;
}Dla selektora listy punktowanej: brak punktora
Selektor znacznika ul (uwaga arkusza) działa na obie listy, także zagnieżdżoną. Wcięcie podlisty zostaje - to domyślny margines wewnętrzny listy.
styl.css CSS zmienione: 3 linie body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}
.klasa_etykiety:hover {
background-color: ForestGreen;
}
.logo1 {
font-size: 50px;
text-transform: uppercase;
font-style: italic;
}
.logo2 {
font-size: 30px;
text-decoration: underline;
font-family: Impact;
}
.prawa {
text-align: right;
}
.srodek {
text-align: center;
}
ul {
list-style-type: none;
}Podział strony na bloki: nagłówkowy, główny, boczny, dwa bloki stopki. Podział zrealizowany za pomocą semantycznych znaczników języka HTML 5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 3
Nagłówek jest już poza układem (position: fixed), zostają cztery bloki. display: flex z flex-wrap: wrap na ciele strony ustawia je w rzędzie i zawija, gdy brakuje miejsca: blok główny (60% + 2 × 2% marginesu = 64%) i boczny (20%) mieszczą się w pierwszym rzędzie, a dwie stopki po 50% przechodzą razem do drugiego. Przy float trzeba by dodać clear pierwszej stopce - ale tylko jej, bo clear: both na obu stopkach postawiłoby drugą pod pierwszą. Bloki nie nachodzą na siebie, co klucz każe sprawdzić w inspektorze (R.3.1).
Bez marginesu górnego 200 px blok główny wjeżdża pod przyklejony nagłówek - w inspektorze bloki na siebie nachodzą i punkt R.3.1 przepada.
styl.css CSS zmienione: 4 linie body {
width: 80%;
margin: auto;
}
header {
height: 200px;
background-color: white;
text-align: center;
position: fixed;
top: 0;
}
main {
width: 60%;
height: 650px;
padding-left: 2%;
padding-right: 2%;
margin-top: 200px;
}
aside {
width: 20%;
height: 650px;
box-shadow: 0px 0px 100px #02220a;
margin-top: 200px;
}
footer {
width: 50%;
height: 170px;
background-color: #02220a;
color: white;
}
img {
width: 16%;
margin: 8px;
padding: 3px;
border-radius: 50%;
}
.klasa_etykiety {
width: 18%;
height: 60px;
line-height: 60px;
display: inline-block;
background-color: #02220a;
color: white;
text-align: center;
overflow: hidden;
}
.klasa_etykiety:hover {
background-color: ForestGreen;
}
.logo1 {
font-size: 50px;
text-transform: uppercase;
font-style: italic;
}
.logo2 {
font-size: 30px;
text-decoration: underline;
font-family: Impact;
}
.prawa {
text-align: right;
}
.srodek {
text-align: center;
}
ul {
list-style-type: none;
}
body {
display: flex;
flex-wrap: wrap;
}Kroki 40-46 · po tym etapie masz 45 z 45 kryteriów (pkt)
Skrypt 1: wykonywany po zmianie wartości pola zakresu liczbowego (po przesunięciu suwaka), pobiera wartość z pola zakresu liczbowego i wpisuje ją do pola edycyjnego
Skrypty piszesz w <script> na końcu <body>. Funkcja copyHeight czyta value suwaka i wpisuje ją do value pola liczbowego. Wywołuje ją atrybut oninput suwaka - zdarzenie zachodzi przy każdym ruchu, więc liczba zmienia się na bieżąco (z onchange zmieniłaby się dopiero po puszczeniu suwaka; oba są w tabeli 2 arkusza). Przesuń suwak w podglądzie.
index.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
</script>
</body>
</html>Skrypt 2: wykonywany po kliknięciu na przycisk „Sprawdź”, pobiera wartość z pola edycyjnego lub pola zakresu liczbowego (wzrost)
Druga funkcja, checkFrame, uruchamiana atrybutem onclick przycisku. Wzrost bierzesz z pola liczbowego: suwak i tak wpisuje do niego swoją wartość, a pole pozwala też podać wzrost z klawiatury.
index.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety" onclick="checkFrame()">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
function checkFrame() {
let height = document.getElementById("height").value;
}
</script>
</body>
</html>Oblicza rozmiar ramy roweru, w ten sposób, że mnoży wzrost przez współczynnik zależny od typu roweru. Typ roweru pobiera z pól opcji: gdy zaznaczono pole „górski z kołami 29” wartość współczynnika wynosi 0,26, gdy zaznaczono pole „szosa” wartość współczynnika wynosi 0,3, gdy zaznaczono pole „trekking” wartość współczynnika wynosi 0,28
Właściwość checked pola opcji ma wartość true, gdy pole jest zaznaczone (R.5.5). Sprawdź kolejno górski i szosę; jeśli żadne z nich, zaznaczony jest trekking - jedno pole w grupie jest zawsze zaznaczone, bo pierwsze ma checked od startu. W JavaScripcie część dziesiętną oddziela kropka: 0.26, nie 0,26.
index.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety" onclick="checkFrame()">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
function checkFrame() {
let height = document.getElementById("height").value;
let factor;
if (document.getElementById("mountain").checked) {
factor = 0.26;
} else if (document.getElementById("road").checked) {
factor = 0.3;
} else {
factor = 0.28;
}
}
</script>
</body>
</html>Oblicza rozmiar ramy roweru, w ten sposób, że mnoży wzrost przez współczynnik zależny od typu roweru, następnie dzieli wynik przez 2,54
Wzrost w centymetrach razy współczynnik daje długość ramy w centymetrach, a dzielenie przez 2,54 zamienia ją na cale (1 cal = 2,54 cm) - w calach podaje się rozmiar ram rowerowych. Wartość z pola jest tekstem, ale operator * sam zamienia ją na liczbę.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety" onclick="checkFrame()">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
function checkFrame() {
let height = document.getElementById("height").value;
let factor;
if (document.getElementById("mountain").checked) {
factor = 0.26;
} else if (document.getElementById("road").checked) {
factor = 0.3;
} else {
factor = 0.28;
}
let frame = height * factor / 2.54;
}
</script>
</body>
</html>Następnie dzieli wynik przez 2,54 i zaokrągla do liczby całkowitej
Math.round zaokrągla do najbliższej liczby całkowitej (od ,5 w górę): 150 cm w rowerze górskim to 15,35 cala, czyli 15.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety" onclick="checkFrame()">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
function checkFrame() {
let height = document.getElementById("height").value;
let factor;
if (document.getElementById("mountain").checked) {
factor = 0.26;
} else if (document.getElementById("road").checked) {
factor = 0.3;
} else {
factor = 0.28;
}
let frame = Math.round(height * factor / 2.54);
}
</script>
</body>
</html>Wyliczony rozmiar ramy wypisuje pod przyciskiem „Sprawdź” w formacie: „Zalecany rozmiar ramy to: <rozmiar> cali”, gdzie <rozmiar> oznacza obliczoną wartość
Napis sklejasz operatorem + i wpisujesz do akapitu result pod przyciskiem. Sprawdzone w przeglądarce: szosa i 189 cm daje „22 cali”, górski i 150 cm - „15 cali”. Na ilustracji 4 przy szosie i wzroście 189 w polu stoi wynik 20 - taki wynik daje dopiero wzrost z suwaka (położenie około 166-173 cm), czyli skrypt z ilustracji czytał suwak, a 189 wpisano w pole bez przesuwania suwaka. Arkusz pozwala czytać jedno albo drugie; pole jest pewniejsze, bo zawsze pokazuje to, co widzi użytkownik.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety" onclick="checkFrame()">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
function checkFrame() {
let height = document.getElementById("height").value;
let factor;
if (document.getElementById("mountain").checked) {
factor = 0.26;
} else if (document.getElementById("road").checked) {
factor = 0.3;
} else {
factor = 0.28;
}
let frame = Math.round(height * factor / 2.54);
document.getElementById("result").innerHTML = "Zalecany rozmiar ramy to: " + frame + " cali";
}
</script>
</body>
</html>Skrypt 3: wykonywany po załadowaniu strony, wyświetla aktualną (dzisiejszą) datę w formacie DD.MM.RRRR
new Date() tworzy obiekt z bieżącą datą i godziną (R.5.9). Metody z tabeli 3 arkusza: getDate() - dzień, getMonth() - miesiąc liczony od 0 (styczeń to 0, stąd + 1), getFullYear() - rok. Format DD.MM.RRRR wymaga dwóch cyfr, więc liczby mniejsze od 10 poprzedzasz zerem: 4 października to „04.10”, a nie „4.10”. Funkcję uruchamia atrybut onload w <body> - po załadowaniu całej strony. Nazwy funkcji i zmiennych (copyHeight, checkFrame, showDate, height, factor, frame, today) mówią, do czego służą (R.5.2).
Bez + 1 przy getMonth() data jest o miesiąc wcześniejsza - w październiku strona pokazałaby wrzesień.
index.html HTML zmienione: 13 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body onload="showDate()">
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150" oninput="copyHeight()">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety" onclick="checkFrame()">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
function copyHeight() {
document.getElementById("height").value = document.getElementById("heightRange").value;
}
function checkFrame() {
let height = document.getElementById("height").value;
let factor;
if (document.getElementById("mountain").checked) {
factor = 0.26;
} else if (document.getElementById("road").checked) {
factor = 0.3;
} else {
factor = 0.28;
}
let frame = Math.round(height * factor / 2.54);
document.getElementById("result").innerHTML = "Zalecany rozmiar ramy to: " + frame + " cali";
}
function showDate() {
let today = new Date();
let day = today.getDate();
let month = today.getMonth() + 1;
if (day < 10) {
day = "0" + day;
}
if (month < 10) {
month = "0" + month;
}
document.getElementById("date").innerHTML = day + "." + month + "." + today.getFullYear();
}
</script>
</body>
</html>Krok 47 · po tym etapie masz 45 z 45 kryteriów (pkt)
Skrypt 1: wykonywany po zmianie wartości pola zakresu liczbowego. Skrypt 2: wykonywany po kliknięciu na przycisk „Sprawdź”. Skrypt 3: wykonywany po załadowaniu strony
Wersję z egzaminu sprawdzono w przeglądarce także na złych danych: puste pole daje „Zalecany rozmiar ramy to: 0 cali”, a wzrost 40 cm - „Zalecany rozmiar ramy to: 4 cali”. Wpisanie liczby w pole nie przesuwa suwaka - dokładnie tę rozbieżność widać na ilustracji 4. Poprawki: wzrost poza zakresem suwaka (100-220 cm) daje komunikat zamiast wyniku, pole i suwak synchronizują się w obie strony, a współczynniki stoją w jednym obiekcie FACTORS - zaznaczone pole opcji znajduje selektor :checked, a jego id wybiera współczynnik bez drabinki if. Zero przed dniem i miesiącem dokłada padStart(2, "0"). Zdarzenia przypinasz w skrypcie przez addEventListener zamiast atrybutów oninput, onclick i onload - skrypt stoi na końcu <body>, więc datę można wpisać od razu. Na egzaminie wystarczy wersja wcześniejsza - klucz uznaje oba sposoby (R.3.3).
index.html HTML zmienione: 33 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Salon rowerowy</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<img src="1.jpg" alt="rower">
<img src="2.jpg" alt="rower">
<img src="3.jpg" alt="rower">
<img src="4.jpg" alt="rower">
<img src="5.jpg" alt="rower">
</header>
<main>
<h1>Dobierz rozmiar ramy roweru do wzrostu</h1>
<h2>Wybierz rodzaj roweru</h2>
<input type="radio" name="bike" id="mountain" checked>
<label for="mountain" class="klasa_etykiety" title="górski z kołami 29">górski z kołami 29</label>
<input type="radio" name="bike" id="road">
<label for="road" class="klasa_etykiety" title="szosa">szosa</label>
<input type="radio" name="bike" id="trekking">
<label for="trekking" class="klasa_etykiety" title="trekking">trekking</label>
<h2>Podaj swój wzrost</h2>
<input type="range" id="heightRange" min="100" max="220" value="150">
<input type="number" id="height" value="150">
<br>
<button class="klasa_etykiety">Sprawdź</button>
<p id="result"></p>
</main>
<aside>
<h1>Polecane firmy</h1>
<p class="logo1 prawa">cup</p>
<p class="logo2">glass</p>
<p class="logo1 srodek">spoon</p>
<p class="logo2 prawa">teaspoon</p>
<p class="logo1">fork</p>
</aside>
<footer>
<h4>Oferowane typy rowerów</h4>
<ul>
<li>górskie
<ul>
<li>koła 29 cali</li>
<li>koła 26 cali</li>
</ul>
</li>
<li>szosowe</li>
<li>miejskie</li>
</ul>
</footer>
<footer>
<h4>Informacje</h4>
<table>
<tr>
<td>Autor: </td>
<td>Bartosz Bryniarski</td>
</tr>
<tr>
<td>Aktualna data: </td>
<td id="date"></td>
</tr>
</table>
</footer>
<script>
const FACTORS = { mountain: 0.26, road: 0.3, trekking: 0.28 };
const heightRange = document.getElementById("heightRange");
const heightField = document.getElementById("height");
function checkFrame() {
const height = Number(heightField.value);
const result = document.getElementById("result");
if (heightField.value === "" || height < 100 || height > 220) {
result.textContent = "Podaj wzrost od 100 do 220 cm.";
return;
}
const bikeType = document.querySelector('input[name="bike"]:checked').id;
const frame = Math.round(height * FACTORS[bikeType] / 2.54);
result.textContent = "Zalecany rozmiar ramy to: " + frame + " cali";
}
function showDate() {
const today = new Date();
const day = String(today.getDate()).padStart(2, "0");
const month = String(today.getMonth() + 1).padStart(2, "0");
document.getElementById("date").textContent = day + "." + month + "." + today.getFullYear();
}
heightRange.addEventListener("input", function () {
heightField.value = heightRange.value;
});
heightField.addEventListener("input", function () {
heightRange.value = heightField.value;
});
document.querySelector("main button").addEventListener("click", checkFrame);
showDate();
// Wersja z egzaminu: oninput="copyHeight()", onclick="checkFrame()" i <body onload="showDate()"> w HTML, if/else if dla pól opcji
</script>
</body>
</html>Krok 48 · po tym etapie masz 45 z 45 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przegladarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W tym arkuszu plik nazywa się przegladarka.txt - bez „ą”, tak jak w treści zadania. Wpisz w nim nazwę przeglądarki, w której sprawdzasz stronę.
W folderze z numerem zdającego: 1.jpg - 5.jpg (1.jpg po przeróbce), index.html, import.png, kw1.png - kw4.png, kwerendy.txt, przegladarka.txt, styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przegladarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 47.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
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: Bartosz Bryniarski. 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.