Egzamin praktyczny: konsola, aplikacja webowa, mobilna i desktopowa

Każdy arkusz praktyczny INF.04 zaczyna się od aplikacji konsolowej. Można ją napisać w C++, C#, Javie albo Pythonie. Ten kurs prowadzi przez wszystkie konsolowe zadania z 21 arkuszy z lat 2021–2026 w Pythonie, razem z dokumentacją i testami, których wymaga część III. W części II cztery arkusze mają aplikację webową, dziesięć mobilną i sześć desktopową. Te zadania też tu są: webowe w React, mobilne w Android Studio z Kotlinem, desktopowe w WPF z C#.

Kod piszesz i uruchamiasz na tej stronie. Przycisk „Uruchom” wykonuje program i pokazuje konsolę, a „Sprawdź” puszcza testy: wywołują twoje funkcje i klasy z różnymi danymi i mówią, co się nie zgadza. W zadaniach webowych „Uruchom” pokazuje działającą aplikację, a testy klikają w nią i wypełniają formularze. W zadaniach mobilnych i desktopowych strona rysuje ekran telefonu albo okno programu z twojego pliku znaczników, a testy czytają układ i kod, bez uruchamiania.

Co jest w kursie

Jak wygląda egzamin praktyczny

Na wykonanie zadania jest 180 minut. Żeby zdać część praktyczną, trzeba zdobyć co najmniej 75% punktów. Arkusz ma zawsze trzy części, a ocenie podlegają cztery rezultaty.

Rezultat „Implementacja, kompilacja, uruchomienie”

To punkty za sposób napisania kodu konsolowego, niezależnie od tego, czy algorytm działa. Klucze oceniania powtarzają te same kryteria:

• Każda instrukcja w osobnej linii, spacje wokół operatorów, wcięcia dla zagnieżdżonych bloków.
• Znaczące nazwy klas, metod i funkcji, polskie albo angielskie.
• Znaczące nazwy pól i zmiennych. Wyjątkiem są liczniki pętli i zmienne pomocnicze typu tmp. Nazwy takie jak x, fun, foo, tab nie spełniają kryterium, chyba że arkusz wyraźnie na nie pozwala.
• Typy pasujące do danych. W Pythonie typ wynika z przypisanej wartości: stan to True/False, licznik to liczba całkowita.
• Program rozmawia z użytkownikiem zrozumiale: pyta komunikatem i opisuje to, co wypisuje.
• Jest zrzut ekranu z uruchomienia programu albo z próby uruchomienia.

Co oddajesz

Tworzysz folder nazwany numerem zdającego (PESEL), a w nim podfoldery wskazane w arkuszu. Nazwy zmieniały się między sesjami, więc przepisuj je z arkusza litera po literze.

00000000000/
  konsolowa/        konsola.zip (cały projekt), plik .py z kodem
  mobilna/          mobilna.zip, plik układu XML i plik z kodem (gdy część II jest mobilna)
  webowa/           web.zip, zmieniane pliki źródłowe (gdy część II jest webowa)
  desktopowa/       archiwum projektu, plik okna XAML i plik z kodem (gdy część II jest desktopowa)
  dokumentacja/     konsola1.png, mobilna1.png, ..., egzamin.txt
  testy/            tylko gdy arkusz wymaga testów jednostkowych

Pliki na pulpicie

Część arkuszy korzysta z archiwum, które leży na pulpicie konta Egzamin. Jest zabezpieczone hasłem podanym w treści arkusza. W zadaniach konsolowych takie pliki wystąpiły dwa razy: Data.txt z albumami (czerwiec 2024) i znaki.txt z polskimi literami (czerwiec 2026). Pozostałe archiwa zawierają obrazy i dane do części II.

Pierwszy program: wypisz, wczytaj, policz

Program w Pythonie to instrukcje wykonywane od góry do dołu, po jednej w linii. Nie ma średników ani nawiasów klamrowych. Trzy rzeczy wystarczą na początek.

print("Witaj w programie")       # wypisuje tekst i przechodzi do nowej linii

imie = input("Podaj imię: ")     # czeka na tekst z klawiatury
wiek = int(input("Podaj wiek: "))  # input zawsze daje napis, int() robi z niego liczbę

print("Imię:", imie)             # po przecinku print wstawia spację
print(f"{imie} ma {wiek} lat")   # f-napis: w klamrach wartości zmiennych

Zmienna powstaje w chwili przypisania. Typu się nie deklaruje, wynika on z wartości: "Ola" to napis (str), 17 to liczba całkowita (int), 3.5 to liczba rzeczywista (float), True i False to wartości logiczne (bool).

Warunki i pętle

Blok kodu wyznacza wcięcie, zwyczajowo cztery spacje. Linia, po której zaczyna się blok, kończy się dwukropkiem.

if punkty >= 30:
    print("Zdane")
elif punkty >= 20:
    print("Blisko")
else:
    print("Niezdane")

Warunki łączy się słowami and, or, not. Równość to ==, różność !=.

while: dopóki warunek jest prawdziwy

Używasz jej, gdy nie wiesz, ile będzie powtórzeń. Typowy przypadek z arkuszy to pytanie o daną tak długo, aż będzie poprawna.

liczba = int(input("Podaj liczbę od 1 do 12: "))
while liczba < 1 or liczba > 12:
    liczba = int(input("Poza zakresem. Podaj liczbę od 1 do 12: "))

for: znana liczba powtórzeń

for i in range(5):         # 0, 1, 2, 3, 4
    print(i)

for i in range(1, 6):      # 1, 2, 3, 4, 5 (koniec nie wchodzi do zakresu)
    print(i)

for i in range(10, 0, -2): # 10, 8, 6, 4, 2 (trzecia liczba to krok)
    print(i)

break przerywa pętlę, continue przechodzi do następnego obrotu.

Listy, czyli tablice

Arkusze mówią „tablica”. W Pythonie jest nią lista. Arkusz ze stycznia 2025 pisze to wprost: „ma być tradycyjną tablicą, a w Python listą”.

liczby = [4, 9, 2]       # lista z trzema elementami
pusta = []
zera = [0] * 10          # dziesięć zer

print(liczby[0])         # 4, indeksy liczy się od zera
print(liczby[-1])        # 2, ostatni element
print(len(liczby))       # 3

liczby[1] = 7            # zmiana elementu
liczby.append(5)         # dopisanie na końcu
liczby.pop()             # usunięcie ostatniego

Po liście przechodzi się na dwa sposoby. Pierwszy daje same wartości, drugi indeksy, potrzebne do zamiany elementów i do wypisywania numerów.

for liczba in liczby:
    print(liczba)

for i in range(len(liczby)):
    print(i, liczby[i])

Wczytywanie z klawiatury i wypisywanie

liczby = []
for i in range(10):
    liczby.append(int(input(f"Podaj liczbę nr {i + 1}: ")))

# elementy oddzielone przecinkami: join skleja napisy, więc liczby zamieniamy przez str
print("Tablica:", ", ".join(str(liczba) for liczba in liczby))

Szukanie największego elementu i zamiana miejscami

Te dwie czynności są w każdym algorytmie sortowania. Arkusze zabraniają gotowych funkcji max(), sort() i sorted(), więc trzeba je umieć napisać w pętli.

indeks_max = 0
for i in range(1, len(liczby)):
    if liczby[i] > liczby[indeks_max]:
        indeks_max = i

tmp = liczby[0]                  # zamiana przez zmienną pomocniczą
liczby[0] = liczby[indeks_max]
liczby[indeks_max] = tmp

Funkcje

Prawie każdy arkusz wymaga, żeby algorytm był w osobnej funkcji, a program główny tylko ją wywoływał. Funkcję definiuje słowo def.

def pole_prostokata(bok_a, bok_b):
    return bok_a * bok_b          # wynik wraca do miejsca wywołania

wynik = pole_prostokata(3, 4)
print("Pole:", wynik)

Arkusze opisują funkcje zawsze tym samym językiem. Warto umieć go przełożyć na kod.

Lista jako argument

Gdy funkcja zmienia elementy przekazanej listy, zmiany widać po powrocie w programie głównym. Dlatego funkcja sortująca „nie zwraca wartości”: sortuje tablicę, którą dostała.

def wyzeruj_ujemne(liczby):
    for i in range(len(liczby)):
        if liczby[i] < 0:
            liczby[i] = 0

pomiary = [3, -1, 5, -8]
wyzeruj_ujemne(pomiary)
print(pomiary)      # [3, 0, 5, 0]

Program główny

Definicje funkcji i klas stoją na górze pliku. Pod nimi, bez wcięcia, jest program główny: wczytuje dane, wywołuje funkcje i wypisuje wyniki. To on jest „testem działania”, o którym piszą arkusze.

Napisy i znaki

Napis zachowuje się jak lista znaków, której nie da się zmieniać. Można go indeksować, mierzyć i przechodzić po nim pętlą. Nowy napis buduje się przez doklejanie.

tekst = "Ala ma kota"
print(len(tekst))        # 11
print(tekst[0])          # A
print("kot" in tekst)    # True

bez_spacji = ""
for znak in tekst:
    if znak != " ":
        bez_spacji = bez_spacji + znak

Python nie ma osobnego typu znakowego. „Typ znakowy o wartości 'K' lub 'M'” to po prostu napis długości 1.

Kody znaków

Szyfr Cezara i generator haseł wymagają przeliczania liter na liczby. ord() daje kod znaku, chr() znak o podanym kodzie. Małe litery łacińskie mają kody od 97 (a) do 122 (z).

print(ord("a"))              # 97
print(chr(100))              # d

numer = ord("c") - 97        # 2, czyli numer litery w alfabecie liczony od zera
litera = chr(numer + 97)     # z powrotem "c"

Przydatne operacje

Liczby losowe

Losowanie jest w co trzecim arkuszu: tablica do posortowania, rzut kością, zestaw liczb w loterii, znaki hasła. Służy do tego moduł random, który trzeba zaimportować na górze pliku.

import random

oczka = random.randint(1, 6)       # liczba całkowita od 1 do 6, oba końce wchodzą
print("Wyrzucono:", oczka)

liczby = []
for i in range(100):
    liczby.append(random.randint(0, 1000))

randint(a, b) to jedyna funkcja, jakiej potrzebujesz. Losowy element zestawu bierzesz przez losowy indeks:

cyfry = "0123456789"
znak = cyfry[random.randint(0, len(cyfry) - 1)]

Losowanie bez powtórzeń

W zestawie loterii liczby nie mogą się powtarzać. Losujesz w pętli while i dopisujesz liczbę tylko wtedy, gdy jeszcze jej nie ma.

zestaw = []
while len(zestaw) < 6:
    liczba = random.randint(1, 49)
    if liczba not in zestaw:
        zestaw.append(liczba)

Klasy i obiekty

Połowa arkuszy każe napisać klasę. Klasa to opis: jakie dane ma obiekt (pola) i co potrafi (metody). Obiekt to konkretny egzemplarz.

class Film:
    def __init__(self, tytul):       # konstruktor, wykonuje się przy tworzeniu obiektu
        self.tytul = tytul           # pola powstają przez przypisanie do self
        self.liczba_wypozyczen = 0

    def wypozycz(self):              # metoda
        self.liczba_wypozyczen = self.liczba_wypozyczen + 1

    def opis(self):
        return f"{self.tytul}: {self.liczba_wypozyczen} wypożyczeń"


film = Film("Rejs")                  # utworzenie obiektu
film.wypozycz()
print(film.opis())                   # Rejs: 1 wypożyczeń

Zasady, które wystarczą na egzamin:

• Konstruktor nazywa się zawsze __init__, z dwoma podkreślnikami z każdej strony.
• Pierwszym parametrem każdej metody jest self, czyli obiekt, na którym metodę wywołano. Przy wywołaniu się go nie podaje.
• Do pól i metod własnego obiektu sięgasz zawsze przez self.. Samo tytul wewnątrz metody to zwykła zmienna lokalna.
• Pola deklaruje się w konstruktorze. Klucze oceniania przyjmują to wprost: „deklaracja pól w konstruktorze przez self”.

Widoczność pól i pola statyczne

Arkusze bardzo dokładnie opisują, kto ma dostęp do pola. W C# i Javie służą do tego słowa private, protected i public. Python ich nie ma, a widoczność oznacza się podkreślnikami przed nazwą.

Klucz oceniania potwierdza ten zapis: „w języku Python, dla pola typu private, dwa podkreślniki przed nazwą”. Pole z dwoma podkreślnikami jest naprawdę ukryte: próba odczytu obiekt.__tytul spoza klasy kończy się błędem AttributeError.

Getter i setter

Skoro pole jest ukryte, klasa udostępnia metody do odczytu i zmiany.

class Film:
    def __init__(self):
        self.__tytul = ""

    def ustaw_tytul(self, tytul):    # setter
        self.__tytul = tytul

    def pobierz_tytul(self):         # getter
        return self.__tytul

Pole statyczne

Pole statyczne należy do klasy, a nie do pojedynczego obiektu. Wszystkie obiekty widzą tę samą wartość. W arkuszach służy do liczenia utworzonych obiektów. Definiuje się je w ciele klasy, poza metodami, a zmienia przez nazwę klasy.

class Osoba:
    liczba_osob = 0                  # pole statyczne

    def __init__(self, imie):
        self.__imie = imie
        Osoba.liczba_osob = Osoba.liczba_osob + 1   # przez nazwę klasy, nie przez self


print(Osoba.liczba_osob)             # 0
pierwsza = Osoba("Ala")
druga = Osoba("Jan")
print(Osoba.liczba_osob)             # 2

Kilka konstruktorów i metody statyczne

W C# i Javie klasa może mieć kilka konstruktorów o różnej liczbie parametrów. Python pozwala tylko na jeden __init__. Arkusze o tym wiedzą i zawierają osobne uwagi dla Pythona.

Wartości domyślne

Konstruktor „bezparametrowy” i „z dwoma parametrami” zastępuje jeden konstruktor, w którym parametry mają wartości domyślne.

class Osoba:
    def __init__(self, id=0, imie=""):
        self.__id = id
        self.__imie = imie


nikt = Osoba()              # jak konstruktor bezparametrowy: id 0, imię puste
ala = Osoba(7, "Ala")       # jak konstruktor z dwoma parametrami

Domyślne None

Gdy konstruktor bez argumentu ma zrobić coś innego niż konstruktor z argumentem (na przykład wylosować wartość), parametr dostaje wartość domyślną None, a konstruktor sprawdza, czy ją dostał.

import random

class Kosc:
    def __init__(self, oczka=None):
        if oczka is None:
            self.oczka = random.randint(1, 6)
        else:
            self.oczka = oczka

Kopiowanie

Zamiast konstruktora kopiującego arkusz każe napisać metodę, która przepisuje dane z innego obiektu. Wewnątrz klasy wolno czytać prywatne pola innego obiektu tej samej klasy.

    def kopiuj(self, inna):
        self.__id = inna.__id
        self.__imie = inna.__imie

Metoda statyczna

Klasa-biblioteka nie tworzy obiektów, tylko grupuje funkcje. Jej metody są statyczne: nie mają self, poprzedza je @staticmethod, a wywołuje się je przez nazwę klasy.

class Przelicznik:
    @staticmethod
    def na_minuty(godziny):
        return godziny * 60


print(Przelicznik.na_minuty(2))      # 120, bez tworzenia obiektu

Dziedziczenie i klasy abstrakcyjne

Klasa potomna przejmuje pola i metody klasy bazowej i dokłada własne. Nazwę klasy bazowej podaje się w nawiasie.

class Urzadzenie:
    def komunikat(self, tresc):
        print(tresc)


class Lampa(Urzadzenie):                 # Lampa dziedziczy po Urzadzenie
    def __init__(self):
        self.__swieci = False

    def wlacz(self):
        if not self.__swieci:
            self.__swieci = True
            self.komunikat("Lampa włączona")   # metoda odziedziczona


lampa = Lampa()
lampa.wlacz()
lampa.komunikat("Koniec")                # metodę bazową widać też z zewnątrz

Konstruktor klasy bazowej

Jeśli klasa bazowa ma konstruktor z parametrami, klasa potomna musi go wywołać przez super().__init__(...). Arkusz zapisuje to słowami „konstruktor wywołuje konstruktor klasy, po której dziedziczy”.

class Pojazd:
    def __init__(self, marka):
        self._marka = marka              # jeden podkreślnik: widoczne w klasach potomnych


class Rower(Pojazd):
    def __init__(self, marka, liczba_biegow):
        super().__init__(marka)
        self.__liczba_biegow = liczba_biegow

Klasa abstrakcyjna

„Klasa, której obiekt nie może być powołany” to klasa abstrakcyjna. Dziedziczy po ABC i ma co najmniej jedną metodę oznaczoną @abstractmethod, która nie ma treści. Klasa potomna musi tę metodę napisać.

from abc import ABC, abstractmethod

class Zwierze(ABC):
    @abstractmethod
    def glos(self):
        pass                             # brak domyślnej implementacji


class Pies(Zwierze):
    def glos(self):
        return "Hau"


pies = Pies()            # działa
zwierze = Zwierze()      # TypeError: nie można utworzyć obiektu klasy abstrakcyjnej

Czytanie pliku tekstowego

Arkusz z czerwca 2024 każe wczytać dane z pliku Data.txt. Plik otwiera funkcja open. Blok with sam go zamyka.

with open("Data.txt", encoding="utf-8") as plik:
    linie = plik.readlines()          # lista linii, każda kończy się znakiem nowej linii

for linia in linie:
    print(linia.strip())              # strip usuwa znak końca linii

Arkusz sam podpowiada parametr encoding="utf-8". Bez niego polskie litery mogą się wczytać jako krzaczki. Plik musi leżeć w folderze, z którego uruchamiasz program, najprościej obok pliku .py.

Rekordy o stałej liczbie linii

Dane w plikach egzaminacyjnych są ułożone w rekordy: kilka linii z kolejnymi polami, potem pusta linia. Jeśli rekord ma 5 pól i pustą linię, kolejne rekordy zaczynają się co 6 linii.

def wczytaj_albumy(nazwa_pliku):
    with open(nazwa_pliku, encoding="utf-8") as plik:
        linie = plik.readlines()

    albumy = []
    numer_linii = 0
    while numer_linii + 4 < len(linie):
        wykonawca = linie[numer_linii].strip()
        rok = int(linie[numer_linii + 3].strip())     # liczby trzeba zamienić z napisu
        albumy.append([wykonawca, rok])
        numer_linii = numer_linii + 6
    return albumy

Arkusz wymaga, żeby program wczytał wszystkie rekordy, także te, które ktoś później dopisze. Dlatego pętla idzie do końca listy linii, a nie do sztywno wpisanej liczby.

Dokumentacja: nagłówek, zrzuty, plik egzamin

Część III większości arkuszy to dokumentacja. Jest powtarzalna i daje pewne punkty, o ile zrobisz dokładnie to, co napisano.

Nagłówek funkcji lub metody

Arkusz podaje wzór i każe wstawić go w komentarzu nad funkcją albo pod jej nazwą. Wzór nie ma znaków komentarza, bo są różne w różnych językach. W Pythonie komentarz zaczyna znak #.

# **********************************************
# nazwa funkcji: nwd
# opis funkcji: wyznacza największy wspólny dzielnik metodą Euklidesa
# parametry: a - pierwsza liczba całkowita dodatnia
#            b - druga liczba całkowita dodatnia
# zwracany typ i opis: int - największy wspólny dzielnik liczb a i b
# autor: 00000000000
# **********************************************
def nwd(a, b):
    while a != b:
        if a > b:
            a = a - b
        else:
            b = b - a
    return a

• Etykiety przepisz ze wzoru w arkuszu co do słowa. W jednych arkuszach jest „nazwa funkcji”, w innych samo „nazwa”.
• W polu „autor” wpisujesz numer zdającego, czyli PESEL, a nie imię.
• Gdy funkcja nie ma parametrów albo nic nie zwraca, wpisujesz „brak”.
• Arkusz wskazuje, którą funkcję opisać. Czasem jest to „dowolna funkcja”, czasem konkretna, na przykład „funkcja wyznaczająca NWD” albo „metoda klasy bazowej”.

Dla klasy wzór jest inny: „nazwa klasy”, „pola”, „metody”, „informacje”, „autor”. Też trafia do komentarza nad klasą.

Zrzuty ekranu

• Cały ekran, z widocznym paskiem zadań. Wycięte okno nie spełnia wymagania.
• Na zrzucie ma być wynik działania programu oraz otwarte środowisko programistyczne albo terminal.
• Jeśli program się nie uruchamia, zrzut ma pokazywać listę błędów. To nadal punkt za „podjętą próbę uruchomienia”.
• Tyle zrzutów, ile interakcji podejmuje program. Nazwy dokładnie z arkusza: konsola1, konsola2 i tak dalej.

Plik egzamin

Krótki dokument tekstowy z informacjami o narzędziach. Arkusz wymienia, co ma zawierać. Zwykle są to:

System operacyjny: Windows 11
Środowiska programistyczne: PyCharm 2024, Android Studio
Emulator: Pixel 5 API 33
Języki programowania: Python 3.12, Kotlin

Testy: w programie głównym i jednostkowe

Arkusze znają dwa rodzaje testów. Starszy to zwykły program główny, który wywołuje funkcje i wypisuje wyniki. Nowszy to testy jednostkowe napisane w bibliotece do testów.

Test w programie głównym

Arkusz wymienia kroki, na przykład: wypisz licznik, utwórz obiekt, wywołaj metodę, wypisz licznik jeszcze raz. Wykonujesz je po kolei i każdy wynik opisujesz komunikatem.

film = Film()
print("Tytuł po utworzeniu:", film.pobierz_tytul())
film.ustaw_tytul("Rejs")
print("Tytuł po ustawieniu:", film.pobierz_tytul())
print("Wypożyczenia przed:", film.pobierz_liczbe_wypozyczen())
film.inkrementuj()
print("Wypożyczenia po:", film.pobierz_liczbe_wypozyczen())

Testy jednostkowe w unittest

Python ma bibliotekę unittest w standardzie. Testy pisze się w osobnym pliku, który importuje testowaną funkcję z pliku z programem.

import unittest
from konsola import szyfruj          # z pliku konsola.py bierzemy funkcję szyfruj


class TestSzyfrCezara(unittest.TestCase):
    def test_klucz_dodatni_przesuwa_litery(self):
        self.assertEqual(szyfruj("abc", 3), "def")

    def test_zawijanie_na_koncu_alfabetu(self):
        self.assertEqual(szyfruj("xyz", 3), "abc")


unittest.main()

• Klasa z testami dziedziczy po unittest.TestCase.
• Każdy przypadek testowy to osobna metoda. Jej nazwa musi zaczynać się od test_, inaczej biblioteka jej nie uruchomi.
• Nazwa ma mówić, co jest sprawdzane. Arkusz tego wymaga: „nazwy metod testujących należy dobrać tak, aby wyrażały cel danego testu”.
• Wynik sprawdza asercja. Najczęściej assertEqual(otrzymane, oczekiwane).

Komponent i JSX

W czterech arkuszach część II to aplikacja webowa typu front-end. Arkusz pozwala wybrać framework Angular albo bibliotekę React. Ten kurs używa Reacta. Wymagania się powtarzają: jeden komponent, formularz albo lista ze stylami Bootstrapa i reakcja na kliknięcie.

Projekt na egzaminie

Projekt tworzysz w terminalu narzędziem Vite. Arkusz ze stycznia 2025 nazywa folder projektu egzamin.

npm create vite@latest egzamin -- --template react    tworzy folder egzamin z projektem React
cd egzamin
npm install                                           pobiera biblioteki projektu
npm install bootstrap                                 dodaje Bootstrap
npm run dev                                           uruchamia aplikację pod adresem localhost:5173

Jeśli wpiszesz samo npm create vite@latest, Vite zapyta po kolei o nazwę projektu, bibliotekę (wybierz React) i wariant (wybierz JavaScript). Adres aplikacji terminal wypisuje po starcie. Zmiany w kodzie widać w przeglądarce od razu po zapisaniu pliku.

Komponent to funkcja, która zwraca JSX

JSX wygląda jak HTML wpisany w JavaScript. W nawiasach klamrowych wstawiasz wartości z kodu.

Tablica jest zwykłą stałą w komponencie. Nagłówek bierze liczbę z kursy.length, więc po dopisaniu kursu zmieni się sam. Arkusz z czerwca 2022 wymaga właśnie tego.

Czym JSX różni się od HTML

Stan i zdarzenia

React rysuje stronę, wywołując funkcję komponentu. Żeby po kliknięciu narysował ją ponownie, zmieniana wartość musi być stanem. Zwykłej zmiennej React nie obserwuje.

• useState(35) tworzy stan o wartości początkowej 35 i zwraca parę: aktualną wartość oraz funkcję, która ją zmienia.
• Funkcję zmieniającą nazywa się zwyczajowo set i nazwa stanu.
• Stanu nie zmienia się przypisaniem. liczbaPobran = liczbaPobran + 1 skończy się błędem, bo to stała. Zawsze wywołujesz funkcję zmieniającą.
• Po jej wywołaniu React uruchamia funkcję App jeszcze raz i poprawia na stronie to, co się zmieniło.

Zdarzenia

W atrybucie zdarzenia podajesz funkcję, a nie jej wywołanie. Nazwy zdarzeń pisze się z wielką literą w środku.

Listy i warunki

Arkusze wymagają, żeby lista powstawała z tablicy „niezależnie od jej wymiaru”. W React robi to metoda map: z każdego elementu tablicy tworzy kawałek JSX.

Każdy element wygenerowany w pętli dostaje atrybut key o wartości, która się nie powtarza. Dla napisów wystarczy sam napis, dla obiektów pole id. Bez klucza aplikacja działa, ale React wypisuje ostrzeżenie w konsoli.

Wyświetlanie warunkowe

Trzeci sposób to funkcja z instrukcją if, która zwraca JSX albo null. Klucz do arkusza ze stycznia 2025 opisuje właśnie taką funkcję.

Zmiana elementu tablicy w stanie

Tablica w stanie też jest zmieniana przez funkcję zmieniającą. Podajesz jej nową tablicę, w której jeden obiekt jest podmieniony.

Zapis { ...zdjecie, downloads: … } tworzy kopię obiektu z jednym polem zmienionym.

Formularze

Trzy z czterech arkuszy webowych to formularz. Szkielet ze stylami Bootstrapa arkusz podaje w tabeli pomocy po angielsku, w zwykłym HTML. Twoja praca to przepisać go na JSX, nadać polom znaczące identyfikatory i połączyć je ze stanem.

Pole jest połączone ze stanem w obie strony: value pokazuje wartość ze stanu, a onChange zapisuje do stanu to, co wpisał użytkownik. Dzięki temu w chwili zatwierdzenia wszystkie dane masz już w zmiennych.

Zatwierdzenie formularza

• event.preventDefault() zatrzymuje domyślne zachowanie przeglądarki. Bez tej linii strona się przeładuje, stan wróci do początku, a konsola zostanie wyczyszczona.
• Wartość z pola jest zawsze napisem, także z pola type="number". Przed liczeniem zamień ją przez Number(). Inaczej "3" + 1 da "31".
• console.log wypisuje do konsoli przeglądarki (klawisz F12). Dwa arkusze każą pokazać wynik właśnie tam i udokumentować to zrzutem ekranu.

Pole nieaktywne i podpowiedź

Atrybut disabled dostaje wartość logiczną ze stanu. Gdy pole wyboru jest zaznaczone, pole hasła jest wyszarzone. Tak działa menedżer haseł z czerwca 2026.

Bootstrap: gotowe klasy zamiast własnego CSS

Bootstrap to arkusz stylów z gotowymi klasami. Nie piszesz reguł CSS, tylko dopisujesz elementom nazwy klas. Każdy arkusz webowy wymaga Bootstrapa i ma na końcu tabelę pomocy po angielsku z fragmentami jego dokumentacji. W kluczach oceniania konkretne klasy są osobnymi kryteriami, więc literówka w nazwie klasy to stracony punkt.

Dołączenie do projektu

npm install bootstrap                         w terminalu, w folderze projektu

Kilka klas wpisujesz w jednym atrybucie, oddzielone spacjami. Kolejność nie ma znaczenia.

Formularz

Pole wyboru i przełącznik

• form-check to blok, form-check-input pole, form-check-label etykieta. Te trzy klasy zawsze idą razem.
• Dopisanie form-switch do bloku zamienia kwadracik w przełącznik. To nadal input type="checkbox".
• form-check-inline na bloku ustawia kilka pól w jednym rzędzie.

Przyciski

Przycisk ma zawsze dwie klasy: btn i klasę koloru. Sama klasa koloru bez btn nie działa.

Arkusz zwykle nie podaje nazwy klasy, tylko kolor: „przycisk jest koloru niebieskiego za sprawą odpowiedniej klasy Bootstrap”. Te same końcówki działają dla tekstu (text-primary, text-danger) i tła (bg-primary, bg-light).

Odstępy

Nazwa klasy składa się z trzech części: litera właściwości, opcjonalnie litera strony, myślnik i rozmiar od 0 do 5.

Przykłady: p-2 to margines wewnętrzny 0,5 rem ze wszystkich stron, m-4 to zewnętrzny 1,5 rem, mt-3 to odstęp 1 rem od góry, px-5 to margines wewnętrzny 3 rem z lewej i prawej.

Tekst i obrazy

Układ

Bloki zdjęć w galerii ze stycznia 2025 staną obok siebie, gdy ich wspólny rodzic dostanie d-flex flex-wrap albo każdy blok d-inline-block.

Jak czytać pomoc w arkuszu

Projekt i układ ekranu w XML

W dziesięciu arkuszach część II to aplikacja mobilna. Arkusz pozwala na Android Studio albo .NET MAUI. Ten kurs używa Android Studio z językiem Kotlin. Aplikacja składa się z dwóch plików, które sam piszesz: układu ekranu w XML i kodu w Kotlinie.

Nowy projekt

1. W Android Studio wybierz New Project, a potem szablon Empty Views Activity. Szablon „Empty Activity” bez słowa Views tworzy projekt w Jetpack Compose, bez pliku XML, a arkusz wymaga interfejsu w języku znaczników.
2. Język: Kotlin. Nazwę projektu przepisz z arkusza, jeśli ją podaje.
3. Po utworzeniu poczekaj, aż Gradle skończy pobierać i budować. Trwa to kilka minut i warto zacząć od tego kroku.

Układ liniowy

Szablon wstawia do pliku układ ConstraintLayout. Arkusze wymagają rozkładu liniowego, więc zamieniasz go na LinearLayout. Układa on elementy jeden pod drugim albo jeden obok drugiego.

Rozmiary podaje się w dp, a rozmiar czcionki w sp. Arkusze piszą samo „marginesy 20” albo „wysokość 150”. Wpisujesz wtedy 20dp i 150dp.

Wygląd: kolory, czcionki, odstępy

Większość punktów za układ to konkretne cechy wyglądu wymienione w „Założeniach aplikacji”: kolor tła, kolor i rozmiar czcionki, marginesy, wyśrodkowanie. Klucz sprawdza je w kodzie XML, jedną po drugiej.

Wyśrodkowanie i wyrównanie

Są dwa podobne atrybuty i łatwo je pomylić.

Układ w układzie i podział szerokości

Elementy obok siebie wymagają poziomego układu liniowego włożonego w pionowy. Arkusze mówią o „zagłębionym rozkładzie horyzontalnym”.

Para layout_width="0dp" i layout_weight="1" oznacza „weź całe wolne miejsce”. Pole edycyjne rozciąga się, a przycisk zajmuje tyle, ile potrzebuje. Gdy wagę dostanie pięć obrazów, podzielą szerokość po równo.

Obraz i linia

adjustViewBounds dopasowuje wysokość obrazu do jego proporcji, gdy szerokość jest rozciągnięta na cały ekran.

Kotlin: kod i zdarzenia

Kotlin jest podobny do Pythona bardziej, niż wygląda. Różnice, które mają znaczenie w arkuszach, mieszczą się w jednej tabeli.

Dostęp do elementów ekranu

Cały kod piszesz w funkcji onCreate, pod linią setContentView. Element z układu pobierasz po identyfikatorze, podając jego typ.

• findViewById<TextView>(R.id.napisLicznika) zwraca element o identyfikatorze napisLicznika. Typ w nawiasach ostrych musi zgadzać się ze znacznikiem w XML.
• setOnClickListener { … } podpina kod do kliknięcia. Działa na przyciskach, obrazach i napisach.
• Zmienna, która ma przetrwać między kliknięciami, jest polem klasy: stoi nad onCreate, a nie w środku bloku kliknięcia.
• Każdy użyty typ wymaga linii import na górze pliku. Android Studio dopisuje ją samo po wciśnięciu Alt+Enter na czerwonej nazwie.

Lista, suwak, pola radio

Trzy kontrolki wracają w arkuszach i każda ma własny sposób obsługi w kodzie.

Lista: kolekcja, adapter, odświeżenie

Widok listy sam nie przechowuje danych. Dane są w kolekcji w kodzie, a adapter zamienia jej elementy na wiersze listy.

• arrayListOf(…) tworzy listę, do której można dodawać. Zwykła tablica arrayOf ma stałą długość.
• android.R.layout.simple_list_item_1 to gotowy wygląd wiersza z systemu: jeden napis.
• Po każdej zmianie kolekcji wołasz adapter.notifyDataSetChanged(). Bez tego lista na ekranie się nie zmieni. Klucz z czerwca 2026 wymienia tę metodę z nazwy.
• Gdy kolekcja przechowuje obiekty własnej klasy, wiersz pokazuje wynik jej metody toString().
• Kliknięcie wiersza obsługuje setOnItemClickListener { _, _, pozycja, _ -> … }. Trzeci parametr to numer klikniętego wiersza.

Suwak

W XML suwak ma wartość maksymalną android:max i początkową android:progress. W kodzie reakcja na przesunięcie to obiekt z trzema metodami. Wszystkie trzy muszą być wpisane, choć potrzebna jest zwykle pierwsza.

Parametr progress jest liczbą całkowitą, czego arkusze wymagają. Rozmiar czcionki jest liczbą rzeczywistą, stąd toFloat(). Wartość maksymalną zmienia się w kodzie przez suwak.max = 18.

Pola radio

Pola włożone do RadioGroup wykluczają się: zaznaczone może być tylko jedno. W kodzie poleOdpowiedzi.isChecked mówi, czy pole jest zaznaczone, a grupaOdpowiedzi.clearCheck() odznacza wszystkie.

Tablica obrazów

Gdy obraz zależy od liczby, na przykład od liczby oczek, identyfikatory grafik wkłada się do tablicy i wybiera indeksem.

Projekt WPF i okno w XAML

W sześciu arkuszach część II to aplikacja desktopowa, czyli zwykłe okno systemu Windows z kontrolkami. Arkusz nie narzuca technologii. Ten kurs używa WPF z językiem C# w Visual Studio. Budowa jest taka sama jak w aplikacji mobilnej: wygląd okna opisuje plik znaczników, a działanie plik z kodem.

Nowy projekt

1. W Visual Studio wybierz Utwórz nowy projekt, a potem szablon Aplikacja WPF dla języka C#. Nie myl go z „Aplikacją Windows Forms” ani z biblioteką WPF.
2. Nazwij projekt tak, jak każe arkusz. W tym kursie projekt nazywa się Egzamin.
3. Uruchamiasz klawiszem F5.

Okno i panel

Znacznik Window opisuje okno. Jego atrybuty to tytuł, rozmiar i tło. W środku może być tylko jeden element, więc wkłada się tam panel, a kontrolki do panelu. Najprostszy panel to StackPanel: układa elementy jeden pod drugim.

• Nazwę kontrolki nadaje x:Name="poleImie". Pod tą nazwą kontrolka jest od razu dostępna w kodzie, bez żadnego wyszukiwania.
• Atrybuty piszesz wielką literą i bez przedrostka: Width, Margin, Content. Rozmiary są samymi liczbami.
• W StackPanel kontrolka zajmuje całą szerokość. Gdy podasz jej Width, staje na środku.

Układ okna: siatka, grupy, kolory

Okna z arkuszy mają etykiety obok pól i ramki z podpisem wokół grup kontrolek. Do pierwszego służy siatka Grid, do drugiego GroupBox.

Siatka

• Najpierw opisujesz wiersze i kolumny, potem każdej kontrolce podajesz jej miejsce: Grid.Row i Grid.Column, liczone od zera.
• Rozmiar Auto oznacza „tyle, ile potrzebuje treść”, gwiazdka * „całe pozostałe miejsce”, a liczba konkretny rozmiar.
• Grid.ColumnSpan="2" rozciąga kontrolkę na dwie kolumny. Tak ustawia się przycisk „Zatwierdź” pod dwiema grupami.
• Kontrolka bez podanego miejsca trafia do wiersza 0 i kolumny 0. Dwie takie kontrolki nakładają się na siebie.

Grupa z podpisem

GroupBox, tak jak okno, przyjmuje jeden element, więc w środku znów jest panel. Pola radio włożone do jednego panelu działają jako grupa: zaznaczone może być tylko jedno.

Wygląd

C#: kod i zdarzenia

C# ma nawiasy klamrowe i średniki, a każda zmienna ma podany typ. Poza tym instrukcje są te same co w Pythonie.

Kliknięcie przycisku

Zdarzenie łączysz z kodem w dwóch miejscach. W XAML przycisk dostaje atrybut Click z nazwą metody, a w pliku z kodem piszesz metodę o tej nazwie.

• Nagłówek metody jest zawsze taki sam: private void Nazwa(object sender, RoutedEventArgs e). Visual Studio wpisze go samo, gdy w XAML po Click= wybierzesz „Nowy program obsługi zdarzeń” albo dwa razy klikniesz przycisk w projektancie.
• Nazwa w XAML i nazwa metody muszą być identyczne. Gdy metoda zniknie z kodu, a atrybut zostanie, projekt się nie skompiluje.
• Kontrolki są dostępne po nazwach z x:Name: poleImie.Text, napisPowitania.Content.
• Zmienna, która ma przetrwać między kliknięciami albo być wspólna dla dwóch metod, jest polem klasy: stoi nad konstruktorem, poza metodami.

Lista rozwijana, suwak, obrazy i pliki

Lista rozwijana

Tekst wybranej pozycji daje w kodzie listaStanowisk.Text, a jej numer listaStanowisk.SelectedIndex. Gdy nic nie wybrano, tekst jest pusty, a numer wynosi -1.

Suwak

Suwak zgłasza zdarzenie ValueChanged. Jego metoda ma inny drugi parametr niż metoda kliknięcia.

• Value jest liczbą rzeczywistą. Liczbę całkowitą dostajesz przez rzutowanie: (int)suwak.Value, a dla składowej koloru (byte)suwak.Value.
• Jedną metodę można podpiąć pod kilka suwaków. Wystarczy w każdym wpisać tę samą nazwę w ValueChanged.

Kolor z trzech składowych

Tło i kolor czcionki to w kodzie pędzle. Dla gotowych kolorów wystarczy Brushes.Red. Te typy wymagają linii using System.Windows.Media; na górze pliku.

Zmiana obrazu w kodzie

Początek adresu pack://application:,,,/ oznacza „z zasobów tej aplikacji”. Typ BitmapImage wymaga linii using System.Windows.Media.Imaging;. Gdy takiego zasobu nie ma, powstaje wyjątek, który można złapać blokiem try i catch i wtedy wyczyścić obraz przez obraz.Source = null;.

Inne zdarzenia i pliki

Klasa File wymaga using System.IO;, a SaveFileDialog wymaga using Microsoft.Win32;. Plik z danymi musi leżeć obok programu: we właściwościach pliku ustaw „Kopiuj do katalogu wyjściowego: Kopiuj, jeśli nowszy”.

Wszystkie arkusze

Dwadzieścia jeden arkuszy z lat 2021–2026. Arkusz ze stycznia 2022 jest powtórzeniem arkusza z czerwca 2021, więc różnych zadań jest dwadzieścia. Kolumna „Pliki” mówi, co jest w archiwum z pulpitu. Hasło do archiwum jest zawsze w treści arkusza. Arkusze z aplikacją webową i mobilną mają w kolumnie „Część II” przycisk do ćwiczenia.

Arkusze, klucze oceniania i archiwa pochodzą z serwisu zawodowe.edu.pl. Archiwum Web1.7z do arkusza z czerwca 2026 pochodzi z repozytorium Gierak/INF.04_Rozwiazania.

Ściąga: język arkusza a Python, React, Android i WPF

Klasy

Funkcje i dane

Aplikacja webowa w React

Aplikacja mobilna: układ w XML

Aplikacja mobilna: kod w Kotlinie

Aplikacja desktopowa: okno w XAML

Aplikacja desktopowa: kod w C#

Zanim oddasz pracę

• Nazwy funkcji, klas i pól coś znaczą. Żadnych x, fun, tab.
• Każde input ma komunikat, każdy wynik opis.
• Nie ma gotowych funkcji, których arkusz zabrania: sort, sorted, max, min.
• Funkcja, która „nie zawiera operacji wejścia-wyjścia”, nie ma w środku print ani input.
• Nad wskazaną funkcją jest nagłówek w komentarzu z numerem zdającego.
• Zrzuty obejmują cały ekran i mają nazwy z arkusza.
• W folderze jest archiwum całego projektu i osobno plik .py.
• W aplikacji webowej nie ma getElementById ani onclick="…", a identyfikatory pól nie są przepisane z pomocy.
• W folderze web albo webowa jest web.zip z całym projektem i osobno zmieniane pliki źródłowe.
• W aplikacji mobilnej każdy element używany w kodzie ma android:id, a napisy i kolory zgadzają się z arkuszem co do znaku.
• W folderze mobilna jest mobilna.zip z całym projektem oraz osobno activity_main.xml i MainActivity.kt.
• W aplikacji desktopowej tytuł okna ma numer zdającego, a każda metoda wpisana w XAML istnieje w kodzie.
• Obrazy w projekcie WPF mają akcję kompilacji „Zasób”, a plik z danymi kopiuje się do katalogu wyjściowego.

Quiz

Pytania o to, jak wymagania z arkuszy zapisać w Pythonie, w React, w Android Studio i w WPF. Po kliknięciu odpowiedzi zobaczysz wyjaśnienie.