Wzorzec egzaminacyjny „kalkulator”: kontrolki → obliczenie → akapit

Blisko połowa zadań z JavaScriptem w części praktycznej INF.03 to ten sam schemat: użytkownik wpisuje lub zaznacza dane, klika przycisk, a skrypt liczy coś i wypisuje wynik w akapicie pod przyciskiem. Ten schemat nazywamy kalkulatorem. Umiesz już wszystkie jego klocki – odczyt kontrolek (lekcja 13), konwersję (lekcja 3), warunki (lekcja 5), funkcje (lekcja 7) i zmianę treści (lekcja 11). W tej lekcji złożysz je w jedną, powtarzalną procedurę, która zdobywa wszystkie kryteria zasad oceniania – i przećwiczysz ją na trzech zadaniach na czas.

Jak wygląda zadanie „kalkulator”

Arkusz opisuje stronę (np. cena.html) z kilkoma kontrolkami i przyciskiem, a na końcu opisu skryptu podaje format wyniku. Oto oryginalne zadanie w stylu CKE, na którym będziemy pracować w całej lekcji:

Zasady oceniania dla takiego zadania (rezultat 5 „Skrypt”) wyglądałyby tak – każde kryterium za 0 lub 1:

Krok 0: czytaj kryterium po kryterium

Zanim napiszesz linię kodu, rozbij polecenie na czynności. Każde zdanie z arkusza to zwykle jedno kryterium, a każde kryterium to jedna–trzy linie kodu. Zrób sobie taką tabelę w głowie (albo na kartce brudnopisu, którą masz na egzaminie):

Z tej tabeli wynika kolejność pisania kodu. Przejdziemy ją krok po kroku.

Krok 1: HTML – przycisk i pusty akapit pod nim

Arkusz mówi „w pustym akapicie pod przyciskiem”. To znaczy dosłownie: <p> bez treści, z id, umieszczony za przyciskiem. Nie <div>, nie <span>, nie alert – egzaminator sprawdza miejsce wyświetlenia (w styczniu 2024 było to osobne kryterium: „komunikat wyświetlony w bloku głównym w akapicie”).

<label for="godziny">Liczba godzin:</label>
<input type="number" id="godziny" min="1" value="1">
<br>
<input type="radio" name="rower" value="8" id="miejski" checked>
<label for="miejski">Rower miejski – 8 zł/h</label>
<input type="radio" name="rower" value="20" id="elektryczny">
<label for="elektryczny">Rower elektryczny – 20 zł/h</label>
<br>
<input type="checkbox" id="kask">
<label for="kask">Kask (+5 zł)</label>
<br>
<button type="button" onclick="obliczKoszt()">Oblicz</button>
<p id="wynik"></p>

Trzy zasady:

1. Każda kontrolka ma id (radio – wspólne name i własne value). Bez tego nie ma czego czytać.
2. Przycisk ma type="button" albo nie jest w <form> – inaczej kliknięcie przeładuje stronę i wynik zniknie po ułamku sekundy.
3. Akapit jest pusty i ma id – <p id="wynik"></p>. Możesz go nazwać inaczej (komunikat, koszt), byle konsekwentnie w JS.

Krok 2: funkcja i jej uruchomienie – dwa style

Arkusze CKE „myślą” w dialekcie egzaminacyjnym: atrybut onclick, var, getElementById, innerHTML. Tabela pomocnicza dołączona do każdego arkusza wymienia właśnie onclick i innerHTML. Ty możesz pisać tak samo albo nowocześnie. Porównaj dwa równoważne rozwiązania tego samego zadania:

<label for="godziny">Liczba godzin:</label>
<input type="number" id="godziny" min="1" value="1"><br>
<input type="radio" name="rower" value="8" id="miejski" checked> <label for="miejski">Rower miejski – 8 zł/h</label>
<input type="radio" name="rower" value="20" id="elektryczny"> <label for="elektryczny">Rower elektryczny – 20 zł/h</label><br>
<input type="checkbox" id="kask"> <label for="kask">Kask (+5 zł)</label><br>
<button type="button" onclick="obliczKoszt()">Oblicz</button>
<p id="wynik"></p>

function obliczKoszt() {
  var godziny = parseFloat(document.getElementById('godziny').value);
  var cenaZaGodzine;
  if (document.getElementById('elektryczny').checked) {
    cenaZaGodzine = 20;
  } else {
    cenaZaGodzine = 8;
  }
  var koszt = cenaZaGodzine * godziny;
  if (document.getElementById('kask').checked) {
    koszt = koszt + 5;
  }
  document.getElementById('wynik').innerHTML = 'Koszt wypożyczenia: ' + koszt + ' zł';
}

Ten sam efekt w stylu nowoczesnym – przycisk ma id, a funkcję podpina skrypt umieszczony pod przyciskiem:

<label for="godziny">Liczba godzin:</label>
<input type="number" id="godziny" min="1" value="1"><br>
<input type="radio" name="rower" value="8" id="miejski" checked> <label for="miejski">Rower miejski – 8 zł/h</label>
<input type="radio" name="rower" value="20" id="elektryczny"> <label for="elektryczny">Rower elektryczny – 20 zł/h</label><br>
<input type="checkbox" id="kask"> <label for="kask">Kask (+5 zł)</label><br>
<button type="button" id="oblicz">Oblicz</button>
<p id="wynik"></p>

const przyciskOblicz = document.querySelector('#oblicz');
const akapitWyniku = document.querySelector('#wynik');

function obliczKoszt() {
  const godziny = parseFloat(document.querySelector('#godziny').value);
  const cenaZaGodzine = parseFloat(document.querySelector('input[name="rower"]:checked').value);
  const kask = document.querySelector('#kask').checked;
  let koszt = cenaZaGodzine * godziny;
  if (kask) koszt += 5;
  akapitWyniku.textContent = `Koszt wypożyczenia: ${koszt} zł`;
}

przyciskOblicz.addEventListener('click', obliczKoszt);

Kiedy który styl jest w porządku na egzaminie?

Oba podejścia są poprawne. Jeśli masz choć cień wątpliwości, pisz styl egzaminacyjny – jest odporny na kolejność ładowania i wygląda jak przykłady CKE. Jeśli piszesz nowocześnie, pamiętaj o jednym: <script> na końcu <body>.

Krok 3: pobranie i konwersja

Kontrolki zwracają napisy. Zanim policzysz, zamień na liczby – inaczej "5" + 5 da "55", a mnożenie przypadkiem zadziała, więc błąd zauważysz dopiero przy dodawaniu dopłaty.

var godziny = document.getElementById('godziny').value;
var koszt = 8 * godziny;
koszt = koszt + 5;
document.getElementById('wynik').innerHTML = 'Koszt: ' + koszt + ' zł';

const godziny = parseFloat(document.getElementById('godziny').value);   // "3" → 3
const liczbaRat = parseInt(document.getElementById('raty').value);        // "12" → 12
const kask = document.getElementById('kask').checked;                      // true / false (bez konwersji)
const miasto = document.getElementById('miasto').value;                    // napis – zostaje napisem

Przypomnienie z lekcji 13: parseFloat do kwot i wymiarów, parseInt do liczby sztuk i rat, Number gdy chcesz, by puste pole dało 0, valueAsNumber gdy wolisz pominąć value. Checkbox i radio czytasz przez checked – to już wartość logiczna.

Krok 4: obliczenie

Obliczenie to zwykle 2–4 linie: mnożenie, suma zaznaczonych, warunek na dopłatę lub cenę zależną od wyboru, czasem zaokrąglenie. Zasady:

• Każdy checkbox osobno – kryterium „testując zaznaczenie każdego pola wyboru” (styczeń 2025). Cztery checkboxy = cztery if.
• Cena zależna od wyboru – if/else if/else po wartości radio lub pola numerycznego, albo bezpośrednio parseFloat(radio.value), jeśli w value wpisałeś cenę.
• „Zaokrąglona w górę do liczby całkowitej” = Math.ceil. „W dół” = Math.floor. „Do najbliższej” = Math.round. W styczniu 2023 (INF.03-01-23.01) brak zaokrąglenia w górę kosztował osobne kryterium.
• Dzielenie przez liczbę rat – uważaj na 0: dzielenie przez zero daje Infinity. Zabezpiecz min="1" w HTML, a najlepiej jeszcze if.
• Grosze – toFixed(2) daje napis z dwiema cyframi po przecinku ("12.50"). Użyj, gdy arkusz pokazuje kwotę z groszami; w innym wypadku zostaw liczbę.

// cena zależna od numeru (jak w arkuszu „stacja paliw” z czerwca 2022)
function cenaPaliwa(rodzaj) {
  if (rodzaj === 1) return 4;
  else if (rodzaj === 2) return 3.5;
  else return 0;
}
console.log(cenaPaliwa(2) * 30);         // 105

// zaokrąglenie w górę (jak w arkuszu „malarz” ze stycznia 2023)
const powierzchnia = 37;
console.log(Math.ceil(powierzchnia / 4)); // 10 – nie 9.25 i nie 9

// rata z groszami
const koszt = 8000;
const raty = 12;
console.log((koszt / raty).toFixed(2));   // "666.67" – uwaga: to napis

Krok 5: dokładny format napisu

To tu ucieka najwięcej punktów. Kryterium brzmi: „pod przyciskiem wyświetla się napis Liczba potrzebnych puszek: <wynik>”. Egzaminator porównuje z arkuszem – drobne literówki i wielkość liter są tolerowane, ale brakujące słowo, dwukropek, jednostka albo zła kolejność mogą kosztować punkt. Przy formacie „Kurs odbędzie się w X. Koszt całkowity: Y zł. Płacisz N rat po Z zł” sprawdzane są trzy osobne kryteria: miasto, koszt, raty.

Dwa równoważne zapisy – wybierz ten, w którym robisz mniej literówek:

const koszt = 29;
const miasto = 'Gdańsk';
const raty = 3;

// konkatenacja (dialekt egzaminacyjny) – pilnuj spacji w cudzysłowach
console.log('Koszt wypożyczenia: ' + koszt + ' zł');

// template string – tekst wygląda jak w arkuszu, wartości w ${}
console.log(`Kurs odbędzie się w ${miasto}. Koszt całkowity: ${koszt} zł. Płacisz ${raty} rat po ${(koszt / raty).toFixed(2)} zł`);

Jeśli wynik ma kilka linii („w pierwszej linii imię i nazwisko, poniżej treść zgłoszenia” – styczeń 2024), użyj innerHTML z <br>:

wynik.innerHTML = imie.toUpperCase() + ' ' + nazwisko.toUpperCase() + '<br>' +
  'Treść Twojej sprawy:<br>' + tresc;

textContent wypisałby <br> jako zwykły tekst. Z kolei innerHTML traktuje treść jak HTML – jeśli użytkownik wpisze <b>, zostanie to zinterpretowane. Na egzaminie to bez znaczenia, w prawdziwej aplikacji wybieraj textContent, gdy nie potrzebujesz znaczników.

function policz() {
var powierzchnia = parseFloat(document.getElementById('pow').value);
var puszki = Math.ceil(powierzchnia / 4);
alert('Liczba puszek: ' + puszki);
}

Krok 6: walidacja – „Wprowadź poprawne dane.”

Niektóre arkusze (styczeń 2025, INF.03-02-25.01) wymagają: „gdy oba pola są wypełnione – wynik; w przeciwnym razie komunikat Wprowadź poprawne dane.”. Inne zwalniają z walidacji wprost („dla uproszczenia wszelką walidację należy pominąć”). Jeśli arkusz nic nie mówi – prosta walidacja nie zaszkodzi, ale nie trać na nią czasu.

Wzorzec: sprawdź na początku funkcji, wypisz komunikat i zakończ return, żeby nie liczyć dalej:

<label>Szerokość [m]: <input type="number" id="szerokosc"></label><br>
<label>Długość [m]: <input type="number" id="dlugosc"></label><br>
<button type="button" onclick="obliczPole()">Oblicz</button>
<p id="wynik"></p>

function obliczPole() {
  const szerokosc = parseFloat(document.getElementById('szerokosc').value);
  const dlugosc = parseFloat(document.getElementById('dlugosc').value);
  const wynik = document.getElementById('wynik');

  if (isNaN(szerokosc) || isNaN(dlugosc)) {   // puste pole → parseFloat daje NaN
    wynik.innerHTML = 'Wprowadź poprawne dane.';
    return;                                    // koniec – nie liczymy dalej
  }

  const pole = szerokosc * dlugosc;
  wynik.innerHTML = 'Pole powierzchni pomieszczenia: ' + pole + ' m², koszt montażu ' + pole * 12 + ' zł';
}

isNaN(x) zwraca true, gdy x nie jest liczbą – łapie puste pole i błędny tekst. Jeśli chcesz dodatkowo odrzucić wartości ujemne lub zero: if (isNaN(szerokosc) || szerokosc <= 0 || …). Pełną walidację (HTML5 required, min, pattern) poznasz w lekcji 18.

Krok 7: test na dwóch zestawach danych

Zasady oceniania mówią wprost: „sprawdzane dla dwóch różnych miast”, „dla dwóch różnych wartości rat”. Egzaminator kliknie co najmniej dwa razy z innymi danymi. Ty zrób to pierwszy – i policz oczekiwany wynik na kartce, zanim klikniesz:

Zestawy dobieraj tak, by każda gałąź kodu zadziałała: inny radio, zaznaczony i niezaznaczony checkbox, inna pozycja listy. Jeśli zadanie ma walidację – trzeci test z pustym polem. Jeżeli wynik jest zły, nie zgaduj: otwórz konsolę (F12), dodaj console.log(godziny, cenaZaGodzine) i zobacz, która wartość jest nie taka.

Gdy skrypt nie działa – co sprawdzi egzaminator

Najgorszy scenariusz: błąd składni (brakujący nawias, literówka w getElementById) i skrypt w ogóle nie startuje. Zasady oceniania mają na to regułę: „jeśli skrypt się nie uruchamia, kryteria X sprawdza się w kodzie źródłowym” – w styczniu 2023 były to kryteria 5.1–5.4 (język, pobranie, dzielenie, zaokrąglenie), w styczniu 2025 – 5.1–5.4 i 5.8 (nazewnictwo). Kryteria wyjściowe (napis w akapicie, poprawny wynik dla dwóch zestawów) przepadają.

Wniosek: nawet niedziałający skrypt może zdobyć 4–5 z 8 kryteriów, jeśli w kodzie widać właściwe konstrukcje. Zadbaj, by w pliku było:

• <script> z funkcją (kryterium języka),
• document.getElementById(...).value lub .checked (pobranie danych),
• linia z działaniem z arkusza: / 4, Math.ceil(...), * liczbaGodzin (obliczenia),
• znaczące nazwy.

A żeby skrypt jednak działał – lista najczęstszych przyczyn „nic się nie dzieje”:

Nazewnictwo – osobne kryterium od 2024

Od stycznia 2024 każdy arkusz zawiera zdanie „należy stosować znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim”, a zasady oceniania mają osobny punkt: „skrypt używa co najmniej jednej zmiennej lub funkcji, nazwy odzwierciedlają cel”. To najtańszy punkt na egzaminie – pod warunkiem, że piszesz cenaZaGodzine, a nie c.

Nazwy bez polskich znaków (dlugosc, nie długość) – polskie litery w identyfikatorach są technicznie dozwolone, ale proszą się o literówkę. Styl camelCase (cenaZaGodzine) lub z podkreśleniem (cena_za_godzine) – oba akceptowane, byle konsekwentnie.

Pełny przykład: od polecenia do rozwiązania

Zbierzmy wszystko w jedno rozwiązanie zadania przewodniego – z komentarzami, który fragment zdobywa które kryterium. Ten plik możesz traktować jako szablon, który na egzaminie przerabiasz pod konkretne polecenie.

<h2>Cennik wypożyczalni</h2>
<label for="godziny">Liczba godzin:</label>
<input type="number" id="godziny" min="1" value="1"><br>
<input type="radio" name="rower" value="8" id="miejski" checked>
<label for="miejski">Rower miejski – 8 zł/h</label>
<input type="radio" name="rower" value="20" id="elektryczny">
<label for="elektryczny">Rower elektryczny – 20 zł/h</label><br>
<input type="checkbox" id="kask"> <label for="kask">Kask (+5 zł)</label><br>
<button type="button" onclick="obliczKoszt()">Oblicz</button>
<p id="wynik"></p>   <!-- 5.5: pusty akapit POD przyciskiem -->

// 5.1: JavaScript, funkcja wywoływana przyciskiem (onclick="obliczKoszt()")
// 5.6: znaczące nazwy – obliczKoszt, liczbaGodzin, cenaZaGodzine, koszt
function obliczKoszt() {
  // 5.2: pobranie danych z kontrolek + konwersja
  const liczbaGodzin = parseFloat(document.getElementById('godziny').value);
  const wybranyRower = document.querySelector('input[name="rower"]:checked');
  const cenaZaGodzine = parseFloat(wybranyRower.value);
  const zKaskiem = document.getElementById('kask').checked;

  // walidacja (arkusz jej nie wymaga, ale chroni przed NaN)
  if (isNaN(liczbaGodzin) || liczbaGodzin <= 0) {
    document.getElementById('wynik').innerHTML = 'Wprowadź poprawne dane.';
    return;
  }

  // 5.3: cena za godzinę × liczba godzin
  let koszt = cenaZaGodzine * liczbaGodzin;
  // 5.4: dopłata tylko przy zaznaczonym kasku
  if (zKaskiem) {
    koszt += 5;
  }

  // 5.5: dokładny format napisu w akapicie pod przyciskiem
  document.getElementById('wynik').innerHTML = 'Koszt wypożyczenia: ' + koszt + ' zł';
}

Testy: (3 h, miejski, bez kasku) → Koszt wypożyczenia: 24 zł; (2 h, elektryczny, kask) → Koszt wypożyczenia: 45 zł; (puste pole) → Wprowadź poprawne dane.

function obliczKoszt() {
var godziny = parseFloat(document.getElementById('godziny').value);
var cena = parseFloat(document.getElementById('kask').checked);
var koszt = godziny * 8 + cena;
document.getElementById('wynik').innerHTML = 'Koszt: ' + koszt + ' zł';
}

Na egzaminie

Ściąga

Zadania

Zadania 2–4 rób na czas: 20 minut każde, bez podglądania rozwiązania. Po skończeniu oceń się według listy kryteriów – uczciwie, 0 albo 1.

<label>Kwota w PLN: <input type="number" id="kwota" value="100" min="0"></label>
<select id="waluta">
  <option value="4.30">EUR</option>
  <option value="3.95">USD</option>
  <option value="5.05">GBP</option>
</select>
<button type="button" onclick="przelicz()">Przelicz</button>
<p id="wynik"></p>

function przelicz() {
  const kwotaPln = parseFloat(document.getElementById('kwota').value);
  const lista = document.getElementById('waluta');
  const kurs = parseFloat(lista.value);                        // value opcji = kurs
  const nazwaWaluty = lista.options[lista.selectedIndex].text; // widoczny tekst = nazwa
  const wynik = (kwotaPln / kurs).toFixed(2);
  document.getElementById('wynik').innerHTML = kwotaPln + ' PLN = ' + wynik + ' ' + nazwaWaluty;
}

<input type="checkbox" id="kursB"> <label for="kursB">Kurs kategorii B – 3200 zł</label><br>
<input type="checkbox" id="doszkalajace"> <label for="doszkalajace">Jazdy doszkalające – 600 zł</label><br>
<label>Liczba rat: <input type="number" id="raty" min="1" max="12" value="1"></label><br>
<label>Oddział:
  <select id="oddzial">
    <option>Poznań</option>
    <option>Wrocław</option>
    <option>Łódź</option>
  </select>
</label><br>
<button type="button" onclick="obliczRaty()">Oblicz</button>
<p id="wynik"></p>

function obliczRaty() {
  // kryterium 3: każde pole wyboru osobno
  let kosztCalkowity = 0;
  if (document.getElementById('kursB').checked) kosztCalkowity += 3200;
  if (document.getElementById('doszkalajace').checked) kosztCalkowity += 600;

  // kryterium 4: liczba rat i dzielenie
  const liczbaRat = parseInt(document.getElementById('raty').value);
  const rata = kosztCalkowity / liczbaRat;

  // kryterium 5: oddział z listy (tekst opcji)
  const oddzial = document.getElementById('oddzial').value;

  // kryteria 5–7: dokładny format
  document.getElementById('wynik').innerHTML =
    'Szkolenie w oddziale ' + oddzial + '. Koszt całkowity: ' + kosztCalkowity +
    ' zł. Płacisz ' + liczbaRat + ' rat po ' + rata + ' zł';
}

<label>Długość ogrodzenia [m]: <input type="number" id="dlugosc"></label><br>
<label>Wysokość [m]: <input type="number" id="wysokosc" step="0.1"></label><br>
<input type="radio" name="material" value="45" id="siatka" checked> <label for="siatka">Siatka – 45 zł/m²</label>
<input type="radio" name="material" value="80" id="panel"> <label for="panel">Panel – 80 zł/m²</label>
<input type="radio" name="material" value="120" id="drewno"> <label for="drewno">Drewno – 120 zł/m²</label><br>
<button type="button" id="oblicz">Oblicz</button>
<p id="wynik"></p>

function obliczKosztOgrodzenia() {
  const dlugosc = parseFloat(document.getElementById('dlugosc').value);
  const wysokosc = parseFloat(document.getElementById('wysokosc').value);
  const akapit = document.getElementById('wynik');

  // kryterium 5: walidacja – puste pole daje NaN
  if (isNaN(dlugosc) || isNaN(wysokosc)) {
    akapit.textContent = 'Wprowadź poprawne dane.';
    return;
  }

  // kryterium 3 i 4
  const powierzchnia = dlugosc * wysokosc;
  const cenaZaMetr = parseFloat(document.querySelector('input[name="material"]:checked').value);
  const koszt = powierzchnia * cenaZaMetr;

  // kryterium 6
  akapit.textContent = `Powierzchnia ogrodzenia: ${powierzchnia} m², koszt: ${koszt} zł`;
}

document.getElementById('oblicz').addEventListener('click', obliczKosztOgrodzenia);

<label>Powierzchnia trawnika [m²]: <input type="number" id="powierzchnia" min="1" value="100"></label>
<button type="button" onclick="policzWorki()">Policz</button>
<p id="wynik"></p>

function policzWorki() {
  const powierzchnia = parseFloat(document.getElementById('powierzchnia').value);
  const liczbaWorkow = Math.ceil(powierzchnia / 25);   // kryteria 3 i 4: dzielenie + w górę
  const koszt = liczbaWorkow * 39;                     // kryterium 5
  document.getElementById('wynik').innerHTML =
    'Liczba worków: ' + liczbaWorkow + '<br>Koszt: ' + koszt + ' zł';   // kryterium 6: dwie linie
}

<input type="number" id="powierzchnia">
<button onclick="policz">Policz</button>
<p id="wynik"></p>
<script>
  function policz() {
    var p = document.getElementById('powierzchnia').value;
    var w = Math.round(p / 25);
    var k = w + 39;
    alert('Liczba worków: ' + w + '<br>Koszt: ' + k + ' zł');
  }
</script>

<label>Powierzchnia trawnika [m²]: <input type="number" id="powierzchnia" min="1" value="101"></label>
<button type="button" onclick="policzWorki()">Policz</button>
<p id="wynik"></p>

function policzWorki() {
  var powierzchnia = parseFloat(document.getElementById('powierzchnia').value);   // 2: konwersja
  var liczbaWorkow = Math.ceil(powierzchnia / 25);                                 // 3: w górę
  var koszt = liczbaWorkow * 39;                                                   // 4: mnożenie
  document.getElementById('wynik').innerHTML =                                     // 5: akapit, nie alert
    'Liczba worków: ' + liczbaWorkow + '<br>Koszt: ' + koszt + ' zł';
}
// 1: w HTML onclick="policzWorki()" – z nawiasami; 6: znaczące nazwy

Test powtórkowy

var ilosc = document.getElementById('ilosc').value;
var cena = 10;
document.getElementById('wynik').innerHTML = 'Razem: ' + (ilosc + cena) + ' zł';

var cena = 200;
if (document.getElementById('rabat').checked == true) {
cena = cena * 0.9;
}
document.getElementById('wynik').innerHTML = 'Cena: ' + cena + ' zł';