Przejdź do głównej treści
INF.03-03-26.01-SGStyczeń 2026 · 42 kroki · ok. 71 min · 38 kryteriów z klucza

Rozwiązanie krok po kroku: Witryna matematyczna pola figur (Wersja podstawowa)

Rozwiązanie buduje witrynę matematyczną „Pola figur”: najpierw animację GIF z pięciu kwadratów wyciętych z jednego obrazu, potem dwie strony z tym samym nagłówkiem, menu i stopką - index.html z dużą figurą, dwiema klikanymi miniaturami i kalkulatorem pola oraz kolo.html z animacją i wzorem na pole koła zapisanym znakiem specjalnym Π i indeksem górnym. Do tego styl z pseudoelementem ::first-letter i cieniem miniatur oraz dwa skrypty JavaScript: zmiana dużej figury po kliknięciu miniatury i obliczenie pola trójkąta albo prostokąta - zależnie od tego, która figura jest wybrana.

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 (onclick w HTML, getElementById, innerHTML), a na końcu zostają przerobione na wersję z prawdziwych projektów: nasłuchiwacze zdarzeń zamiast atrybutów, sprawdzenie danych i czytelny wynik.

To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid)” jest drugi sposób rozwiązania tego samego arkusza: układ na siatce CSS, kolory w zmiennych i skrypt w osobnym pliku z nasłuchiwaczami zdarzeń od pierwszej linii - obie wersje są zgodne z kluczem.

Grafiki pochodzą z prawdziwego archiwum pliki2 (załącznik do arkusza, hasło w treści zadania). Obrazy figur są w formacie BMP - 1d.bmp, 2d.bmp, 1m.bmp, 2m.bmp zostają bez zmian, dokładnie jak każe arkusz. Oba skrypty sprawdzono w prawdziwej przeglądarce na oryginalnych plikach BMP.

Jak liczą się punkty. Klucz ma 38 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 29 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: Animacja

    Kroki 1-3 · po tym etapie masz 4 z 38 kryteriów (pkt)

    Krok 1: Pięć klatek 200 × 200 px wyciętych z klatki.jpg

    Kryteria: ,

    R.1.1 Animacja kolo.gif ma wymiary 200 px na 200 px

    R.1.2 W animacji zastosowany przynajmniej jeden kwadrat z grafiki klatki.jpg

    ok. 5 min
    Polecenie z arkusza

    Każdą klatką animacji jest jeden kwadrat z grafiki klatki.jpg, razem to pięć klatek animacji. Wymiary każdej klatki: 200 px na 200 px

    Rozpakuj pliki2.7z (hasło *M@tem@tyk@6 - gwiazdka na początku, trzy małpy zamiast „a”) i załóż folder z numerem zdającego. Obraz klatki.jpg ma 1122 × 220 px, a każdy z pięciu niebieskich kwadratów - około 205 × 204 px. W GIMP-ie tworzysz nowy obraz 200 × 200 px i dla każdego kwadratu: narzędzie zaznaczania prostokątnego z ustalonym rozmiarem 200 × 200, zaznaczenie w środku kwadratu, Kopiuj, w nowym obrazie Wklej jako nową warstwę. Pięć warstw w kolejności od lewej (ostatnia warstwa na dole listy to pierwsza klatka) - to pięć klatek z ilustracji 1. Brzegi kwadratów z cienką ramką wypadają poza zaznaczenie, a napis i koło mieszczą się w całości.

    Typowe błędy

    Klatka większa niż 200 × 200 px (np. cały kwadrat z ramką albo skalowanie całego obrazu) daje animację o złych wymiarach - klucz sprawdza dokładnie 200 × 200.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 1

  2. Krok 2: Pętla i opóźnienie 1 s: zrzut parametry.jpg

    Kryteria:

    R.1.4 Ustawiono opóźnienie między klatkami na 1 sekundę, co jest udokumentowane zrzutem ekranu - plik parametry.jpg , na którym widoczny jest cały obszar ekranu z paskiem zadań

    ok. 3 min
    Polecenie z arkusza

    Animacja jest powtarzana w nieskończoność, opóźnienie między klatkami 1 sekunda. Udokumentuj ustawienie parametrów animacji za pomocą zrzutu ekranu o nazwie parametry.jpg. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań.

    Plik → Eksportuj jako, nazwa kolo.gif. W oknie eksportu GIF zaznaczasz Jako animację i Pętla (powtarzanie w nieskończoność), opóźnienie 1000 ms (1 sekunda), Jedna klatka na warstwę (zastąp) i pole Użyj opóźnienia wprowadzonego powyżej dla wszystkich klatek. To ostatnie jest ważne: GIMP czyta też opóźnienie z nazwy warstwy (np. „Warstwa (100ms)”) i bez tego zaznaczenia nazwa warstwy wygrywa z wartością 1000. Zanim klikniesz Eksportuj, robisz zrzut całego ekranu z tym oknem i zapisujesz go jako parametry.jpg. Obraz w podglądzie kroku to odtworzenie tego okna z ustawieniami z arkusza - na egzaminie zrzut obejmuje cały ekran z paskiem zadań.

    Typowe błędy

    Bez zaznaczonego „Jako animację” GIMP zapisuje tylko jedną, spłaszczoną klatkę.

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

  3. Krok 3: Animacja kolo.gif

    Kryteria:

    R.1.3 Animacja składa się z pięciu klatek wyświetlanych jedna po drugiej, po ostatniej klatce jest wyświetlana pierwsza

    ok. 1 min
    Polecenie z arkusza

    Animację zapisz jako kolo.gif

    Eksportuj - powstaje kolo.gif: 5 klatek 200 × 200 px, każda po 1000 ms, po ostatniej znów pierwsza. Litery napisu „KOŁO” po kolei robią się czerwone, a koło miga na żółto i czerwono. Sprawdź plik, otwierając go w przeglądarce.

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

  4. Etap 2: Strona HTML

    Kroki 4-22 · po tym etapie masz 17 z 38 kryteriów (pkt)

    Krok 4: Plik index.html w HTML5

    ok. 2 min
    Polecenie z arkusza

    Składa się ze strony głównej index.html oraz podstrony kolo.html. Cechy wspólne dla obu stron: zapisane w języku HTML5

    Zacznij od strony głównej: deklaracja <!DOCTYPE html> i szkielet. Podstronę kolo.html zrobisz jako kopię gotowej strony głównej - mają ten sam nagłówek, menu i stopkę.

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

  5. Krok 5: Język strony

    Kryteria:

    R.2.1 W plikach index.html lub kolo.html znajduje się deklaracja HTML5 <!DOCTYPE HTML> i deklaracja języka zawartości witryny: polski np. <html lang="pl">

    ok. 1 min
    Polecenie z arkusza

    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>
    Podgląd strony po tym kroku (index.html)

  6. Krok 6: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowany właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy element <head> - bez niego „płaskich” i „trójkąt” 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>
    Podgląd strony po tym kroku (index.html)

  7. Krok 7: Tytuł strony

    Kryteria:

    R.2.2 W sekcji head znajduje się jawnie podany standard kodowania polskich znaków i tytuł strony "Pola figur"

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Pola figur”

    <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>Pola figur</title>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  8. Krok 8: Podpięcie arkusza stylów

    Kryteria:

    R.3.2 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl.css formatowanie CSS pochodzi jedynie z tego arkusza

    ok. 1 min
    Polecenie z arkusza

    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>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  9. Krok 9: Bloki: nagłówek, główny z trzema blokami, stopka

    Kryteria:

    R.2.3 W sekcji body zdefiniowany jest podział na bloki za pomocą semantycznych znaczników HTML5: header, main->nav+section+aside, footer (dopuszcza się stosowanie bloków pomocniczych)

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4. Zawartość bloku głównego: bloki nawigacyjny, sekcji i boczny

    Klucz wymaga wprost header, main z nav, section i aside w środku i footer (R.2.3). Kolejność w <main> to kolejność z ilustracji 4: od lewej menu, figura, kalkulator. W tym arkuszu dwie ilustracje mają numer 4 - układ bloków i wynik dla trójkąta; tutaj chodzi o układ.

    index.html HTML zmienione: 12 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
    </header>
    <main>
        <nav>
        </nav>
        <section>
        </section>
        <aside>
        </aside>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  10. Krok 10: Nagłówek strony

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nagłówkowego: nagłówek drugiego stopnia o treści „Pola figur płaskich”

    Drugiego stopnia, czyli <h2>, nie <h1> - arkusz mówi to wprost.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
        </nav>
        <section>
        </section>
        <aside>
        </aside>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  11. Krok 11: Menu: nagłówek

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku nawigacyjnego: Nagłówek trzeciego stopnia o treści „MENU”

    <h3> na początku bloku nawigacyjnego. Pierwszą literę powiększysz w CSS - na ilustracji 2 „M” jest dwa razy większe od reszty.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
        </nav>
        <section>
        </section>
        <aside>
        </aside>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  12. Krok 12: Menu: lista z dwoma odsyłaczami

    Kryteria:

    R.2.5 W bloku nawigacyjnym umieszczona jedna lista punktowana z dwoma elementami, zastosowane znaczniki <ul> i <li>

    ok. 2 min
    Polecenie z arkusza

    Lista punktowana (nieuporządkowana) z dwoma odsyłaczami o treści „Prostokąt i trójkąt”, prowadzący do strony index.html oraz „Okrąg i koło”, prowadzący do strony kolo.html

    Lista nieuporządkowana to <ul>, każdy punkt to <li> z odnośnikiem <a href> w środku. Adresy względne (index.html, kolo.html) - obie strony leżą w tym samym folderze. Drugi odnośnik zadziała, gdy powstanie kolo.html.

    index.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
        </section>
        <aside>
        </aside>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  13. Krok 13: Stopka

    ok. 1 min
    Polecenie z arkusza

    Zawartość stopki: paragraf o treści: „Autor: ”, dalej wpisany numer zdającego.

    Akapit w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
        </section>
        <aside>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  14. Krok 14: Sekcja: duża figura

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku sekcji strony index.html: Obraz 1d.bmp z tekstem alternatywnym „Figura”

    Duży trójkąt na start. Obraz dostaje id="figure" - po tym identyfikatorze Skrypt 1 znajdzie go i podmieni plik, a Skrypt 2 sprawdzi, która figura jest wybrana. Znacznik <br> kończy linię: miniatury mają stać poniżej.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
        </section>
        <aside>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  15. Krok 15: Sekcja: dwie miniatury z tą samą klasą

    Kryteria: ,

    R.2.6 Na stronie głównej w bloku sekcji umieszczone grafiki z tekstem alternatywnym: 1d.bmp , "Figura"; 1m.bmp , "Wybierz trójkąt"; 2m.bmp , "Wybierz prostokąt" (dopuszcza się dla obrazów 1m i 2m przycisk z obrazem)

    R.3.6 Do grafik 1m.bmp i 2m.bmp przypisana jest klasa

    ok. 2 min
    Polecenie z arkusza

    Poniżej obok siebie dwa obrazy: 1m.bmp z tekstem alternatywnym „Wybierz trójkąt” oraz 2m.bmp, z tekstem alternatywnym „Wybierz prostokąt”. Kliknięcie dowolnego z tych obrazów uruchamia skrypt 1. Do obu obrazów należy przypisać tę samą klasę

    Dwa <img> w jednej linii - obrazy są elementami liniowymi, więc stają obok siebie. Oba dostają class="choice": jedna reguła .choice w CSS nada im cień i zaokrąglenie. Obsługę kliknięcia dopiszesz razem ze Skryptem 1.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  16. Krok 16: Blok boczny: nagłówek kalkulatora

    Kryteria:

    R.2.4 W bloku nagłówkowym umieszczony <h2>: "Pola figur płaskich", w nawigacyjnym <h3> "MENU", na stronie głównej <h3> "Pole prostokąta / pole trójkąta" oraz w stopce <p> z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku bocznego strony index.html, rozkład elementów zgodny z ilustracją 2: Nagłówek trzeciego stopnia o treści: „Pole prostokąta / pole trójkąta”

    Drugi <h3> na stronie. Z tym krokiem są wszystkie nagłówki i akapit z kryterium R.2.4: <h2> w nagłówku, dwa <h3> i <p> w stopce.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  17. Krok 17: Pierwsza etykieta i pole

    Kryteria:

    R.3.7 Przynajmniej jedna etykieta jest powiązana z polem edycyjnym

    ok. 2 min
    Polecenie z arkusza

    Etykieta „Bok prostokąta / podstawa trójkąta:” oraz pole edycyjne powiązane z etykietą

    <label for="sideA"> łączy się z polem po jego id - kliknięcie napisu ustawia kursor w polu. Pole liczbowe (type="number"), bo będziesz mnożyć. Na ilustracji 2 pole stoi pod etykietą, stąd <br> za nią.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  18. Krok 18: Druga etykieta i pole

    ok. 1 min
    Polecenie z arkusza

    Etykieta „Drugi bok prostokąta / wysokość trójkąta:” oraz pole edycyjne powiązane z etykietą

    To samo dla drugiej wartości: for="sideB" i id="sideB".

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  19. Krok 19: Przycisk „Oblicz”

    Kryteria:

    R.2.7 Na stronie głównej umieszczone dwa pola edycyjne oraz przycisk Oblicz

    ok. 1 min
    Polecenie z arkusza

    Przycisk „Oblicz”, którego wciśnięcie powoduje wywołanie skryptu 2

    <button> poza formularzem niczego nie wysyła - zrobi tylko to, co każe mu skrypt. Obsługę wciśnięcia dopiszesz razem ze Skryptem 2. Na stronie są już dwa pola edycyjne i przycisk (R.2.7).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button>Oblicz</button>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  20. Krok 20: Pusty akapit na wynik

    ok. 1 min
    Polecenie z arkusza

    Paragraf przeznaczony na wynik. W stanie początkowym jest on pusty

    <p id="result"></p> - pusty, z identyfikatorem, po którym Skrypt 2 wstawi wynik. Stoi pod przyciskiem, jak wymaga arkusz.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button>Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  21. Krok 21: Podstrona kolo.html z animacją

    Kryteria: ,

    R.2.8 Na podstronie umieszczona animacja/grafika z kołem, z tekstem alternatywnym "koło"

    R.3.3 Wybranie odnośnika "Prostokąt i trójkąt" otwiera stronę główną, "Okrąg i koło" otwiera podstronę

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku sekcji strony kolo.html: Animacja kolo.gif z tekstem alternatywnym „koło”

    Zapisz index.html jako kolo.html - przychodzą razem wszystkie cechy wspólne obu stron: nagłówek strony, styl, menu i stopka. W sekcji zamiast trzech obrazów figur wstawiasz animację z alt="koło". Teraz oba odnośniki menu działają: „Prostokąt i trójkąt” otwiera stronę główną, „Okrąg i koło” - podstronę (R.3.3).

    kolo.html HTML nowy plik 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="kolo.gif" alt="koło">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button>Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (kolo.html)

  22. Krok 22: Podstrona: wzór na pole koła

    Kryteria:

    R.2.9 Na podstronie umieszczony paragraf o treści: Pole koła: P = Π * r2

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku bocznego strony kolo.html: Paragraf o treści „Pole koła: P = Π * r2”. Litera Pi (Π) powinna być zapisana za pomocą znaku specjalnego; oznaczenie potęgi powinno znajdować się w indeksie górnym.

    Kalkulator z bloku bocznego zamieniasz na jeden akapit. Litera &Pi; to znak specjalny z tabeli 1 arkusza (encja nazwana; to samo daje &#928;), a potęga w indeksie górnym to znacznik <sup>: r<sup>2</sup>.

    ⚠️ Sprzeczność w arkuszu: polecenie i tabela 1 każą użyć wielkiej litery Π (&Pi;), a ilustracja 3 pokazuje małą π (&pi;), poprawną matematycznie we wzorze na pole koła. Klucz CKE przyjmuje &Pi; - na egzaminie punkt daje wersja z klucza.

    Typowe błędy

    Wpisanie „r2” zwykłym tekstem albo litery π wklejonej ze schowka nie spełnia wymagań arkusza: potęga ma być w <sup>, a Pi - znakiem specjalnym.

    kolo.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="kolo.gif" alt="koło">
        </section>
        <aside>
            <p>Pole koła: P = &Pi; * r<sup>2</sup></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (kolo.html)

  23. Etap 3: Styl CSS

    Kroki 23-33 · po tym etapie masz 28 z 38 kryteriów (pkt)

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

    Kryteria:

    R.4.1 styl domyślny dla wszystkich selektorów (*): krój czcionki Garamond, serif (dozwolona tylko taka kolejność)

    ok. 1 min
    Polecenie z arkusza

    Domyślnie, dla wszystkich selektorów: krój czcionki Garamond, w przypadku braku serif

    Selektor *. Kolejność krojów ma znaczenie: najpierw Garamond, na końcu rodzina zapasowa serif - klucz dopuszcza tylko taką. Podgląd wraca na stronę główną.

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

  24. Krok 24: Nagłówek i stopka

    Kryteria: ,

    R.4.3 kolor czcionki: blok nagłówkowy i stopka - biały

    R.4.7 odstęp między literami: blok nagłówkowy i stopka - letter-spacing: 3px;

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla bloku nagłówkowego i stopki: kolor tła Navy, biały kolor czcionki, wyrównanie tekstu do środka, marginesy wewnętrzne 5 px, odstępy między literami 3 px

    Jedna reguła dla dwóch selektorów. Odstępy między literami to letter-spacing - na ilustracji 2 „P o l a f i g u r” jest rozstrzelone.

    styl.css CSS zmienione: 7 linii 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
    Podgląd strony po tym kroku (index.html)

  25. Krok 25: Trzy bloki: wysokość

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla bloku nawigacyjnego, sekcji i bocznego: wysokość 500 px

    Trzy selektory po przecinku - wspólna cecha w jednym miejscu.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
    Podgląd strony po tym kroku (index.html)

  26. Krok 26: Menu i blok boczny

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo dla bloku nawigacyjnego i bocznego: kolor tła DodgerBlue, szerokość 35%

    Dwa skrajne bloki mają ten sam kolor i szerokość.

    styl.css CSS zmienione: 4 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
    Podgląd strony po tym kroku (index.html)

  27. Krok 27: Sekcja

    Kryteria: ,

    R.4.2 kolor tła: blok nagłówkowy i stopka - Navy, blok nawigacyjny i boczny - DodgerBlue, blok sekcji - SkyBlue

    R.4.4 szerokość: blok nawigacyjny i boczny - 35%, blok sekcji - 30% (width lub grid-template- columns lub flex) wysokość: blok nawigacyjny, boczny oraz blok sekcji - 500px

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo dla bloku sekcji: kolor tła SkyBlue, szerokość 30%, wyrównanie tekstu do środka

    35% + 30% + 35% = 100%. Wyrównanie do środka działa też na obrazy, bo są elementami liniowymi - figura i miniatury stoją na środku sekcji. Ta reguła zamyka kryteria kolorów tła i wymiarów bloków.

    styl.css CSS zmienione: 5 linii 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  28. Krok 28: Układ bloków zgodny z ilustracją 4

    Kryteria:

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z ilustracją 4 w arkuszu egzaminacyjnym (prawidłowo zastosowano właściwości CSS decydujące o układzie bloków na stronie, np. float i clear albo display flex albo grid albo position)

    ok. 2 min
    Polecenie z arkusza

    Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 4

    Arkusz nie mówi, jak postawić trzy bloki w rzędzie - wybierasz display: flex na <main>: dzieci kontenera flex stają obok siebie w kolejności z HTML-a, a stopka sama zostaje pod spodem. Przy float trzeba by pamiętać o clear: both dla stopki (R.3.1).

    Typowe błędy

    Bloki, które na siebie zachodzą (sprawdzane w inspektorze), zabierają punkt za układ, nawet gdy strona „na oko” wygląda dobrze.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
main {
    display: flex;
}
    Podgląd strony po tym kroku (index.html)

  29. Krok 29: Pola i przycisk: marginesy

    Kryteria:

    R.4.6 marginesy wewnętrzne (padding) : blok nagłówkowy i stopka - 5px marginesy zewnętrzne (margin) : pole edycyjne i przycisk - 10px

    ok. 1 min
    Polecenie z arkusza

    Dla pola edycyjnego i przycisku: marginesy zewnętrzne 10 px

    Selektory znaczników input i button. Ta reguła zamyka kryterium marginesów (R.4.6).

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
main {
    display: flex;
}
input, button {
    margin: 10px;
}
    Podgląd strony po tym kroku (index.html)

  30. Krok 30: Nagłówki trzeciego stopnia wyśrodkowane

    Kryteria:

    R.4.5 wyrównanie tekstu do środka: blok nagłówkowy, stopka, blok sekcji oraz selektor h3

    ok. 1 min
    Polecenie z arkusza

    Dla selektora nagłówka trzeciego stopnia: wyrównanie tekstu do środka

    Selektor znacznika h3 - zgodnie z uwagą arkusza. Z wyrównaniem nagłówka, stopki i sekcji to komplet kryterium R.4.5.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
main {
    display: flex;
}
input, button {
    margin: 10px;
}
h3 {
    text-align: center;
}
    Podgląd strony po tym kroku (index.html)

  31. Krok 31: Pierwsza litera nagłówka dwa razy większa

    Kryteria:

    R.4.9 pseudoelement first-letter dla nagłówka trzeciego stopnia: rozmiar czcionki 200%

    ok. 2 min
    Polecenie z arkusza

    Dla selektora nagłówka trzeciego stopnia: pierwsza litera nagłówka ma rozmiar czcionki 200%

    Pseudoelement ::first-letter wybiera pierwszą literę tekstu elementu - bez dodatkowego <span> w HTML-u. „M” w „MENU” i „P” w „Pole prostokąta” rosną dwukrotnie, jak na ilustracji 2.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
main {
    display: flex;
}
input, button {
    margin: 10px;
}
h3 {
    text-align: center;
}
h3::first-letter {
    font-size: 200%;
}
    Podgląd strony po tym kroku (index.html)

  32. Krok 32: Akapity

    Kryteria:

    R.4.8 dla selektora p rozmiar czcionki - 150%

    ok. 1 min
    Polecenie z arkusza

    Dla selektora paragrafu: rozmiar czcionki 150%

    Selektor znacznika p. Działa na stopkę, wynik obliczenia i wzór na podstronie.

    styl.css CSS zmienione: 3 linie 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
main {
    display: flex;
}
input, button {
    margin: 10px;
}
h3 {
    text-align: center;
}
h3::first-letter {
    font-size: 200%;
}
p {
    font-size: 150%;
}
    Podgląd strony po tym kroku (index.html)

  33. Krok 33: Miniatury: cień, zaokrąglenie, kursor

    Kryteria:

    R.4.10 styl klasy przypisanej do grafik 1m.bmp i 2m.bmp : box-shadow: 5px 5px 10px DimGray; zaokrąglenie rogów 10px, marginesy zewnętrzne 5px, kursor pointer

    ok. 2 min
    Polecenie z arkusza

    Dla klasy przypisanej do grafik 1m.bmp i 2m.bmp: cień przesunięty o 5 px w pionie i poziomie, rozmycie 10 px kolor DimGray, zaokrąglenie rogów 10 px, marginesy zewnętrzne 5 px, kursor pointer.

    Selektor klasy z kropką: .choice. box-shadow: 5px 5px 10px DimGray - przesunięcie w poziomie, w pionie, rozmycie, kolor. cursor: pointer zmienia strzałkę w rączkę: użytkownik widzi, że miniaturę da się kliknąć.

    styl.css CSS zmienione: 6 linii 
    * {
    font-family: Garamond, serif;
}
header, footer {
    background-color: Navy;
    color: white;
    text-align: center;
    padding: 5px;
    letter-spacing: 3px;
}
nav, section, aside {
    height: 500px;
}
nav, aside {
    background-color: DodgerBlue;
    width: 35%;
}
section {
    background-color: SkyBlue;
    width: 30%;
    text-align: center;
}
main {
    display: flex;
}
input, button {
    margin: 10px;
}
h3 {
    text-align: center;
}
h3::first-letter {
    font-size: 200%;
}
p {
    font-size: 150%;
}
.choice {
    box-shadow: 5px 5px 10px DimGray;
    border-radius: 10px;
    margin: 5px;
    cursor: pointer;
}
    Podgląd strony po tym kroku (index.html)

  34. Etap 4: JavaScript

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

    Krok 34: Skrypt 1: funkcja zmieniająca dużą figurę

    Kryteria:

    R.5.1 Skrypt napisany w języku JavaScript i zawiera on przynajmniej jedną poprawną składniowo instrukcję wynikającą z treści zadania

    ok. 2 min
    Polecenie z arkusza

    Skrypt 1: gdy kliknięto w obraz 1m.bmp to duży obraz powyżej ustawiany jest na 1d.bmp, gdy kliknięto w obraz 2m.bmp to duży obraz powyżej ustawiany jest na 2d.bmp

    Skrypty piszesz w znaczniku <script> na końcu <body> - wtedy wszystkie elementy strony już istnieją. Jedna funkcja obsłuży obie miniatury: dostaje nazwę pliku w parametrze file i wpisuje ją do atrybutu src dużego obrazu znalezionego po id. Dzięki parametrowi nie trzeba pisać dwóch prawie identycznych funkcji.

    index.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button>Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  35. Krok 35: Skrypt 1: kliknięcie miniatury trójkąta

    Kryteria: ,

    R.5.2 Po kliknięciu w obraz 1m.bmp duży obraz zmieniany jest na 1d.bmp (trójkąt)

    R.3.4 Zdefiniowane dla przynajmniej jednej grafiki zdarzenie związane z jej kliknięciem, które uruchamia funkcję skryptu (obsługa zdarzenia zdefiniowana w HTML np. onClick lub w skrypcie np.: element.addEventListener(...), element.onClick = …)

    ok. 1 min
    Polecenie z arkusza

    Gdy kliknięto w obraz 1m.bmp to duży obraz powyżej ustawiany jest na 1d.bmp

    Atrybut onclick uruchamia funkcję po kliknięciu obrazu. Nazwę pliku podajesz w apostrofach, bo cała wartość atrybutu jest już w cudzysłowach.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" onclick="changeFigure('1d.bmp')">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button>Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  36. Krok 36: Skrypt 1: kliknięcie miniatury prostokąta

    Kryteria:

    R.5.3 Po kliknięciu w obraz 2m.bmp duży obraz zmieniany jest na 2d.bmp (prostokąt)

    ok. 1 min
    Polecenie z arkusza

    Gdy kliknięto w obraz 2m.bmp to duży obraz powyżej ustawiany jest na 2d.bmp

    Ta sama funkcja z innym plikiem. Kliknij miniatury w podglądzie: duża figura zmienia się na prostokąt i z powrotem na trójkąt.

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" onclick="changeFigure('1d.bmp')">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice" onclick="changeFigure('2d.bmp')">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button>Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  37. Krok 37: Skrypt 2: dane z pól edycyjnych

    Kryteria: ,

    R.5.4 Skrypt 2 pobiera dane z dwóch pól edycyjnych

    R.3.5 Zdefiniowane dla przycisku zdarzenie związane z jego wciśnięciem, które uruchamia funkcję skryptu (obsługa zdarzenia zdefiniowana w HTML np. onClick lub w skrypcie np.: element.addEventListener(...), element.onClick = …)

    ok. 2 min
    Polecenie z arkusza

    Skrypt 2: pobiera dane z pól edycyjnych

    Druga funkcja, calculate, uruchamiana atrybutem onclick przycisku (R.3.5). Wartość pola odczytujesz właściwością value - przychodzi jako tekst, np. „5”; przy mnożeniu (*) i dzieleniu (/) JavaScript sam zamieni ją na liczbę. Przy dodawaniu by tego nie zrobił: "5" + "10" to napis „510”, a nie 15 - dlatego przy dodawaniu wartości pól zawsze trzeba je najpierw zamienić na liczby.

    index.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" onclick="changeFigure('1d.bmp')">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice" onclick="changeFigure('2d.bmp')">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button onclick="calculate()">Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
        function calculate() {
            let a = document.getElementById("sideA").value;
            let b = document.getElementById("sideB").value;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  38. Krok 38: Skrypt 2: pole prostokąta

    Kryteria:

    R.5.6 Po wybraniu grafiki prostokąta skrypt liczy pole prostokąta na podstawie danych

    ok. 2 min
    Polecenie z arkusza

    Gdy w bloku głównym wybrano prostokąt (duży obraz to 2d.bmp), to na podstawie danych jest liczone pole prostokąta (ilustracja 5)

    Która figura jest wybrana, mówi atrybut src dużego obrazu. getAttribute("src") zwraca dokładnie to, co wpisano (2d.bmp); sama właściwość .src oddałaby pełny adres z http://localhost/... i porównanie by nie wyszło. Pole prostokąta to a * b.

    index.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" onclick="changeFigure('1d.bmp')">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice" onclick="changeFigure('2d.bmp')">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button onclick="calculate()">Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
        function calculate() {
            let a = document.getElementById("sideA").value;
            let b = document.getElementById("sideB").value;
            let area;
            if (document.getElementById("figure").getAttribute("src") == "2d.bmp") {
                area = a * b;
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  39. Krok 39: Skrypt 2: pole trójkąta, także na starcie

    Kryteria:

    R.5.5 Po wybraniu grafiki trójkąta skrypt liczy pole trójkąta na podstawie danych

    ok. 2 min
    Polecenie z arkusza

    Gdy w bloku głównym wybrano trójkąt (duży obraz to 1d.bmp) to na podstawie danych jest liczone pole trójkąta. Obliczenia powinny też działać dla stanu początkowego witryny (Skrypt 1 nie wykonał się ani razu), wtedy liczone jest pole trójkąta

    Gałąź else obejmuje wszystko poza prostokątem: trójkąt wybrany kliknięciem i stan początkowy, w którym duży obraz to od razu 1d.bmp. Pole trójkąta to podstawa razy wysokość przez dwa.

    index.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" onclick="changeFigure('1d.bmp')">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice" onclick="changeFigure('2d.bmp')">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button onclick="calculate()">Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
        function calculate() {
            let a = document.getElementById("sideA").value;
            let b = document.getElementById("sideB").value;
            let area;
            if (document.getElementById("figure").getAttribute("src") == "2d.bmp") {
                area = a * b;
            } else {
                area = a * b / 2;
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  40. Krok 40: Skrypt 2: wynik w akapicie pod przyciskiem

    Kryteria: ,

    R.5.7 Wynik jest wyświetlany pod przyciskiem

    R.5.8 W skryptach zastosowana przynajmniej jedna zmienna lub funkcja oraz nazwy wszystkich funkcji i zmiennych są w języku polskim lub angielskim i odzwierciedlają cel zastosowania

    ok. 2 min
    Polecenie z arkusza

    Wynik wyświetlany jest w paragrafie pod przyciskiem

    innerHTML wpisuje wynik do pustego akapitu result. Sprawdzone w przeglądarce: 5 i 10 na starcie daje 25, po kliknięciu prostokąta 50, a po powrocie do trójkąta 25 - jak na ilustracjach 4 i 5. Nazwy funkcji i zmiennych (changeFigure, calculate, area, file) mówią, do czego służą (R.5.8).

    index.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" onclick="changeFigure('1d.bmp')">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice" onclick="changeFigure('2d.bmp')">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button onclick="calculate()">Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }
        function calculate() {
            let a = document.getElementById("sideA").value;
            let b = document.getElementById("sideB").value;
            let area;
            if (document.getElementById("figure").getAttribute("src") == "2d.bmp") {
                area = a * b;
            } else {
                area = a * b / 2;
            }
            document.getElementById("result").innerHTML = area;
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  41. Etap 5: Dobre praktyki (poza kluczem)

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

    Krok 41: Nasłuchiwacze zdarzeń, sprawdzenie danych i opisany wynik

    ok. 4 min
    Polecenie z arkusza

    Przycisk „Oblicz”, którego wciśnięcie powoduje wywołanie skryptu 2. Kliknięcie dowolnego z tych obrazów uruchamia skrypt 1

    Wersję z egzaminu sprawdzono w przeglądarce także na złych danych: puste pola dają wynik 0, a podstawa -4 - pole -20. Poprawki: wartości zamieniasz jawnie na liczby (Number) i liczysz tylko dla dwóch liczb większych od zera, wynik opisujesz słowami („Pole trójkąta: 25”) i wpisujesz przez textContent, który nie interpretuje HTML-a. Obsługę kliknięć przenosisz z atrybutów onclick do skryptu: addEventListener dla przycisku i pętla po miniaturach, z których każda niesie nazwę pliku w atrybucie data-figure - HTML opisuje treść, a zachowanie siedzi w jednym miejscu. Na egzaminie wystarczy wersja wcześniejsza - klucz uznaje oba sposoby obsługi zdarzeń (R.3.4, R.3.5).

    index.html HTML zmienione: 21 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pola figur</title>
    <link rel="stylesheet" href="styl.css">
</head>
<body>
    <header>
        <h2>Pola figur płaskich</h2>
    </header>
    <main>
        <nav>
            <h3>MENU</h3>
            <ul>
                <li><a href="index.html">Prostokąt i trójkąt</a></li>
                <li><a href="kolo.html">Okrąg i koło</a></li>
            </ul>
        </nav>
        <section>
            <img src="1d.bmp" alt="Figura" id="figure">
            <br>
            <img src="1m.bmp" alt="Wybierz trójkąt" class="choice" data-figure="1d.bmp">
            <img src="2m.bmp" alt="Wybierz prostokąt" class="choice" data-figure="2d.bmp">
        </section>
        <aside>
            <h3>Pole prostokąta / pole trójkąta</h3>
            <label for="sideA">Bok prostokąta / podstawa trójkąta:</label><br>
            <input type="number" id="sideA"><br>
            <label for="sideB">Drugi bok prostokąta / wysokość trójkąta:</label><br>
            <input type="number" id="sideB"><br>
            <button type="button" id="calculate">Oblicz</button>
            <p id="result"></p>
        </aside>
    </main>
    <footer>
        <p>Autor: Bartosz Bryniarski</p>
    </footer>
    <script>
        function changeFigure(file) {
            document.getElementById("figure").src = file;
        }

        function calculate() {
            let a = Number(document.getElementById("sideA").value);
            let b = Number(document.getElementById("sideB").value);
            let result = document.getElementById("result");
            if (!(a > 0 && b > 0)) {
                result.textContent = "Podaj dwie liczby większe od zera.";
                return;
            }
            if (document.getElementById("figure").getAttribute("src") == "2d.bmp") {
                result.textContent = "Pole prostokąta: " + a * b;
            } else {
                result.textContent = "Pole trójkąta: " + a * b / 2;
            }
        }

        for (let thumbnail of document.querySelectorAll(".choice")) {
            thumbnail.addEventListener("click", function () {
                changeFigure(thumbnail.dataset.figure);
            });
        }
        document.getElementById("calculate").addEventListener("click", calculate);
        // Wersja z egzaminu: onclick="changeFigure('1d.bmp')" w obrazie i onclick="calculate()" w przycisku
    </script>
</body>
</html>
    Podgląd strony po tym kroku (index.html)

  42. Etap 6: Oddanie pracy

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

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

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.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 przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz stronę.

    W folderze z numerem zdającego: 1d.bmp, 1m.bmp, 2d.bmp, 2m.bmp (bez zmian z archiwum), index.html, kolo.html, kolo.gif, parametry.jpg, przeglądarka.txt, styl.css. 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 41.

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.