Rozwiązanie buduje uproszczone konto pacjenta: baza recepty (pacjenci, leki, typy leków i recepty łączące pacjentów z lekami w relacji m:n) i cztery zapytania - warunek na tekst, LIKE z dwoma warunkami, COUNT z grupowaniem na złączonych tabelach i CREATE USER - potem grafika poprawiona kubełkiem (wypełnienia kolorem i przezroczyste tło), strony recepty.html, index.html i skierowania.html, style w styl.css z czterema blokami sekcji ułożonymi w dwie kolumny i skrypt JavaScript, który z tablicy recepty w strukturze danych z pliku dane.json buduje bloki recept - z datą, listą numerowaną leków (puste pomijając) i kodem.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej, metodami z tabeli 1 arkusza: pętla for, document.createElement, appendChild, a leki drugi i trzeci z osobnymi warunkami if. Na końcu skrypt zostaje przerobiony na wersję z prawdziwych projektów: textContent zamiast innerHTML, pętla po polach leków, dane w osobnym pliku i data w znaczniku <time>. W tym arkuszu nie ma PHP.
Obok są dwie kolejne wersje tego rozwiązania: zakładka Nowoczesny kod (grid, DOM) - siatka CSS, skrypt w osobnym pliku, textContent i <article> od pierwszej linijki - oraz zakładka Szablony tekstowe (innerHTML), w której bloki recept powstają z szablonów HTML zapisanych w napisach. Wszystkie trzy dają te same punkty.
Baza i grafiki pochodzą z prawdziwego archiwum pliki7 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Skrypt został sprawdzony w prawdziwej przeglądarce: cztery bloki z listami o 3, 2, 1 i 3 lekach, a po dopisaniu do tablicy piątej recepty - pięć bloków bez zmiany kodu.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 40 kryteriów (pkt)
Utwórz bazę danych o nazwie recepty, z zestawem polskich znaków (np. utf8_polish_ci)
Archiwum na pulpicie nazywa się pliki7.7z, choć to zadanie 06 - tak podaje arkusz. Hasło Rec3ptyPacj3nt@ ma cyfry 3 zamiast liter „e” i małpę na końcu. Załóż folder z numerem zdającego, a w phpMyAdmin bazę recepty z porównywaniem utf8_polish_ci.
Do utworzonej bazy zaimportuj tabele z pliku recepty.sql
Zaznacz bazę recepty, potem Import → recepty.sql → Wykonaj. Cztery tabele z ilustracji 1: pacjenci, leki, typy (syrop, tabletki, tabletki musujące) i recepty, która łączy pacjentów z lekami - jedna recepta to jeden lek dla jednego pacjenta.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.png - w tym arkuszu wszystkie zrzuty są w PNG.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie nazwy i ilości leków, dla których jednostka miary to sztuki (szt.)
Wartość w bazie to dokładnie szt. - z kropką, więc w warunku też: jednostka = 'szt.'. Wynik: pięć leków (Rutinoscorbin, APAP, Gardimax, Floradix, Chlorella). Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
jednostka = 'szt' bez kropki nie znajduje żadnego wiersza - porównanie tekstu musi być dokładne.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT nazwa, ilosc FROM leki WHERE jednostka = 'szt.';
Zapytanie 2: wybierające jedynie imię, nazwisko i rok urodzenia dla pacjentów urodzonych po 2000 roku, których imię jest zakończone literą ‘a’
imie LIKE '%a' - znak % oznacza dowolny ciąg znaków (także pusty), więc wzorzec pasuje do imion kończących się na „a”,rokUr > 2000 - „po 2000 roku” to rok większy niż 2000, bez samego 2000.Sam warunek na imię daje Joanna, Anna; po dodaniu roku zostaje jeden wiersz: Anna Kowalska, 2001. Zrzut: kw2.png.
LIKE 'a%' szuka imion zaczynających się od „a” - zwróciłoby Annę i Adama, ale bez Joanny.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, ilosc FROM leki WHERE jednostka = 'szt.';
-- Zapytanie 2
SELECT imie, nazwisko, rokUr FROM pacjenci WHERE imie LIKE '%a' AND rokUr > 2000;
Zapytanie 3: wybierające jedynie nazwy typów leków oraz zliczające liczbę leków danego typu. Należy posłużyć się relacją i grupowaniem
FROM leki JOIN typy USING(idTypy) - złączenie: nazwa typu jest w tabeli typy, leki w leki,GROUP BY leki.idTypy - jeden wiersz na typ,COUNT(*) - ile leków wpadło do grupy.Wynik: syrop 3, tabletki 7, tabletki musujące 3. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, ilosc FROM leki WHERE jednostka = 'szt.';
-- Zapytanie 2
SELECT imie, nazwisko, rokUr FROM pacjenci WHERE imie LIKE '%a' AND rokUr > 2000;
-- Zapytanie 3
SELECT typ, COUNT(*) FROM leki JOIN typy USING(idTypy) GROUP BY leki.idTypy;
Zapytanie 4: tworzące użytkownika Lekarz na localhost z hasłem Lek@rz
CREATE USER 'Lekarz'@'localhost' - nazwa konta i host, z którego wolno się logować, oba w apostrofach; IDENTIFIED BY 'Lek@rz' ustawia hasło. Wielkość liter w nazwie ma znaczenie: konto to Lekarz, nie lekarz. Sprawdzone na serwerze MariaDB z XAMPP-a: logowanie tym hasłem działa (Lekarz@localhost), ale odczyt tabeli leki kończy się odmową dostępu - samo utworzenie konta nie daje żadnych uprawnień (od tego jest GRANT). Zrzut z komunikatem: kw4.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT nazwa, ilosc FROM leki WHERE jednostka = 'szt.';
-- Zapytanie 2
SELECT imie, nazwisko, rokUr FROM pacjenci WHERE imie LIKE '%a' AND rokUr > 2000;
-- Zapytanie 3
SELECT typ, COUNT(*) FROM leki JOIN typy USING(idTypy) GROUP BY leki.idTypy;
-- Zapytanie 4
CREATE USER 'Lekarz'@'localhost' IDENTIFIED BY 'Lek@rz';
Kroki 8-29 · po tym etapie masz 18 z 40 kryteriów (pkt)
Modyfikacje grafiki recepta.png: Butelka z zakrętką wypełniona kolorem czarnym
recepta.png (640 × 640 px) to czarny kontur na białym tle. W GIMP-ie narzędzie Wypełnienie kubełkiem, kolor czarny, tryb „Wypełnienie podobnych kolorów” i klik w biały środek butelki - kontur zatrzymuje farbę. Zakrętka to osobny zamknięty obszar, więc drugi klik w nią. Krzyża nie klikasz - jego wnętrze jest oddzielone konturem i zostaje białe.
Krzyż na butelce wypełniony kolorem czerwonym
Kolor pierwszoplanowy na czerwony (dowolny odcień - klucz to dopuszcza) i klik kubełkiem w białe wnętrze krzyża. Czerwony krzyż z czarnym konturem na czarnej butelce - jak na ilustracji 3.
Podgląd strony bez zmian - taki jak po kroku 8.
Białe tło zamienione na tło przezroczyste
Obraz ma już kanał alfa (rogi poza ramką są przezroczyste). Zaznaczenie rozmyte - klik w białe tło wewnątrz ramki - i Edycja → Wyczyść. Białe wnętrze blistra i tabletek to osobne obszary otoczone konturem, więc różdżka ich nie zaznacza i zostają białe, jak na ilustracji 3.
Docelowe wymiary grafiki 100 px na 100 px
Obraz → Skaluj obraz, 100 × 100 px - obraz jest kwadratowy, więc proporcje zostają. Przeskaluj na końcu: wypełnianie i zaznaczanie na dużym obrazie jest dokładniejsze. Eksport do PNG zachowuje przezroczystość.
Witryna składa się ze stron index.html, recepty.html, skierowania.html. W plikach index.html i skierowania.html należy napisać „Strona w trakcie budowy”
Dwie strony z samym napisem w szkielecie HTML5 - odnośniki z bloku nawigacyjnego będą miały dokąd prowadzić.
index.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Strona główna</title>
</head>
<body>
<p>Strona w trakcie budowy</p>
</body>
</html>skierowania.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Skierowania</title>
</head>
<body>
<p>Strona w trakcie budowy</p>
</body>
</html>Cechy strony recepty.html: Zapisana w języku HTML5
Deklaracja <!DOCTYPE html> i szkielet strony.
recepty.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny
Atrybut lang="pl" w znaczniku <html>.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwszy element <head>.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony „Konto pacjenta”
<title> w <head>.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
Nazwa: styl.css.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, nawigacyjny, główny i stopka. Blok główny zawiera cztery bloki sekcji. Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 4
Klucz wymaga header, nav, main z czterema section i footer (R.2.5). Sekcje mają różne wymiary, więc każda dostaje identyfikator z nazwy z arkusza: lewa1, prawa1, prawa2, lewa2. Kolejność w kodzie jest taka jak w arkuszu (lewa1, prawa1, prawa2, lewa2) - przy pływających blokach dokładnie ona ustawi je w dwie kolumny z ilustracji 4.
recepty.html HTML zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
<section id="lewa1">
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: Nagłówek drugiego stopnia o treści: „Strefa pacjenta”
Drugiego stopnia, czyli <h2>.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
</nav>
<main>
<section id="lewa1">
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nawigacyjnego: Odnośnik do strony index.html o treści „Strona główna”
Ścieżka względna index.html - wszystkie strony leżą w tym samym folderze.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
</nav>
<main>
<section id="lewa1">
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Odnośnik do strony recepty.html o treści „Recepty”
Odnośnik do strony, na której jesteś - w menu witryny prowadzi z powrotem na recepty z każdej innej strony.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
</nav>
<main>
<section id="lewa1">
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Odnośnik do strony skierowania.html o treści „Skierowania”
Trzeci odnośnik. Odnośniki są elementami liniowymi, więc stoją w jednym wierszu.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku sekcji lewa1: Obraz pacjent.png z tekstem alternatywnym „dane pacjenta”
Grafika z archiwum ma już 100 × 100 px.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Nagłówek trzeciego stopnia o treści „Dane pacjenta”
<h3> pod obrazem - po dodaniu opływania w CSS stanie obok niego.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Paragraf o treści „Agnieszka”. Paragraf o treści „Nowak”
Dwa osobne akapity, jak w arkuszu - imię i nazwisko w osobnych wierszach.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku sekcji prawa1: Obraz recepta.png z tekstem alternatywnym „dane recept”. Nagłówek trzeciego stopnia o treści „Dane recept”
Przerobiona grafika i <h3>. Sekcja prawa2 zostaje pusta - jej zawartość wygeneruje skrypt.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku sekcji lewa2: Obraz lekarz.png z tekstem alternatywnym „dane lekarza”. Nagłówek trzeciego stopnia o treści „Dane lekarza”
Czwarta sekcja jest w kodzie ostatnia, ale na stronie stanie pod lewa1. Z tym krokiem są wszystkie trzy obrazy z klucza.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
</section>
</main>
<footer>
</footer>
</body>
</html>Paragraf o treści „lek. Marian Kowal”. Paragraf o treści „numer PWZ: 4387203”
PWZ to numer prawa wykonywania zawodu lekarza.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku stopki: Paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego. Numer zdającego zapisany za pomocą znacznika semantycznego oznaczającego tekst uwypuklony, formatowany domyślnie jako pochylony
Tekst uwypuklony to <em> (kursywa). Na egzaminie w <em> wpisujesz swój numer zdającego (PESEL); tutaj stoi imię i nazwisko autora rozwiązania. Z tym krokiem są wszystkie nagłówki i akapity z klucza.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
</body>
</html>Kroki 30-41 · po tym etapie masz 29 z 40 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki Trebuchet MS, w przypadku braku sans-serif
Nazwa ze spacją w cudzysłowie, na końcu rodzina zapasowa sans-serif.
styl.css CSS nowy plik * {
font-family: "Trebuchet MS", sans-serif;
}Dla bloków nagłówkowego i stopki: kolor tła #B17948, biały kolor tekstu, marginesy wewnętrzne 5 px, wyrównanie tekstu do środka
Kolor zapisany szesnastkowo: #B17948 to po kolei składowe czerwona (B1), zielona (79) i niebieska (48).
styl.css CSS zmienione: 6 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}Dla bloku nawigacyjnego: kolor tła #D9A97E, kolor czcionki biały, wyrównanie tekstu do środka
Odnośniki zostają na razie niebieskie: przeglądarka nadaje znacznikowi a własny kolor, który nie dziedziczy się po rodzicu. Zmienisz go regułą dla a.
styl.css CSS zmienione: 5 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}Dla bloków sekcji lewa1 i lewa2: szerokość 40%, wysokość 200 px
Selektory identyfikatorów z krzyżykiem #, po przecinku.
styl.css CSS zmienione: 4 linie * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}Dla bloku sekcji prawa1: szerokość 60%, wysokość 120 px
Lewa i prawa kolumna dają razem 100%.
styl.css CSS zmienione: 4 linie * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}Dla bloku sekcji prawa2: szerokość 60%, wysokość 400 px, paski przewijania zawsze widoczne
„Zawsze widoczne” to overflow: scroll - paski są także przy pustej sekcji, jak na ilustracji 2 widać oba suwaki. To zamyka kryterium wymiarów sekcji.
styl.css CSS zmienione: 5 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}Podział zrealizowany za pomocą semantycznych znaczników języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków był zgodny z ilustracją 4
Arkusz nie mówi, jak ustawić sekcje - wybierasz float: lewe pływają w lewo, prawe w prawo, a stopka z clear: both zaczyna się pod najdłuższą kolumną. Zadziała tylko przy kolejności z arkusza: lewa1 (od góry z lewej), prawa1 (od góry z prawej), prawa2 (pod prawa1, bo ma ona tylko 120 px), lewa2 (pod lewa1, bo element pływający nie może zacząć się wyżej niż poprzedni). Gdyby lewa2 stała w kodzie przed prawa2, wskoczyłaby na wysokość 120 px obok lewa1. Lewa kolumna ma 400 px, prawa 520 px - niższa kończy się wcześniej, jak na ilustracji 4 (R.3.1).
styl.css CSS zmienione: 9 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}
#lewa1, #lewa2 {
float: left;
}
#prawa1, #prawa2 {
float: right;
}
footer {
clear: both;
}Dla selektora obrazu: opływanie po jego prawej stronie, marginesy zewnętrzne 20 px
„Opływanie po prawej stronie” obrazu - tekst płynie z prawej, czyli obraz pływa w lewo: float: left. Nagłówki i akapity sekcji stają obok obrazów, jak na ilustracji 2.
styl.css CSS zmienione: 4 linie * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}
#lewa1, #lewa2 {
float: left;
}
#prawa1, #prawa2 {
float: right;
}
footer {
clear: both;
}
img {
float: left;
margin: 20px;
}Dla selektora nagłówka czwartego stopnia: wyrównanie tekstu do prawej strony, kolor czcionki czerwony, rozmiar czcionki 120%
W <h4> skrypt wypisze kod recepty - na razie na stronie nie ma żadnego <h4>.
styl.css CSS zmienione: 5 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}
#lewa1, #lewa2 {
float: left;
}
#prawa1, #prawa2 {
float: right;
}
footer {
clear: both;
}
img {
float: left;
margin: 20px;
}
h4 {
text-align: right;
color: red;
font-size: 120%;
}Dla selektora odnośnika: biały kolor czcionki, rozmiar czcionki 150%, marginesy zewnętrzne 30 px
Dopiero reguła dla a zmienia kolor odnośników na biały. Marginesy po 30 px rozsuwają je w poziomie (odnośnik jest liniowy, więc margines górny i dolny nie przesuwa wierszy). Ta reguła zamyka kryteria kolorów, marginesów i rozmiarów czcionki.
styl.css CSS zmienione: 5 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}
#lewa1, #lewa2 {
float: left;
}
#prawa1, #prawa2 {
float: right;
}
footer {
clear: both;
}
img {
float: left;
margin: 20px;
}
h4 {
text-align: right;
color: red;
font-size: 120%;
}
a {
color: white;
font-size: 150%;
margin: 30px;
}Dla klasy recepty: kolor tła PeachPuff, marginesy wewnętrzne 20 px, zewnętrzne 40 px, zaokrąglenie rogów 20 px
Styl bloków, które wygeneruje skrypt.
styl.css CSS zmienione: 6 linii * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}
#lewa1, #lewa2 {
float: left;
}
#prawa1, #prawa2 {
float: right;
}
footer {
clear: both;
}
img {
float: left;
margin: 20px;
}
h4 {
text-align: right;
color: red;
font-size: 120%;
}
a {
color: white;
font-size: 150%;
margin: 30px;
}
.recepty {
background-color: PeachPuff;
padding: 20px;
margin: 40px;
border-radius: 20px;
}Gdy kursor znajdzie się na elemencie z przypisaną klasą recepty, kolor tła zmienia się na #D9A97E
Pseudoklasa :hover - ten sam brąz co blok nawigacyjny.
styl.css CSS zmienione: 3 linie * {
font-family: "Trebuchet MS", sans-serif;
}
header, footer {
background-color: #B17948;
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: #D9A97E;
color: white;
text-align: center;
}
#lewa1, #lewa2 {
width: 40%;
height: 200px;
}
#prawa1 {
width: 60%;
height: 120px;
}
#prawa2 {
width: 60%;
height: 400px;
overflow: scroll;
}
#lewa1, #lewa2 {
float: left;
}
#prawa1, #prawa2 {
float: right;
}
footer {
clear: both;
}
img {
float: left;
margin: 20px;
}
h4 {
text-align: right;
color: red;
font-size: 120%;
}
a {
color: white;
font-size: 150%;
margin: 30px;
}
.recepty {
background-color: PeachPuff;
padding: 20px;
margin: 40px;
border-radius: 20px;
}
.recepty:hover {
background-color: #D9A97E;
}Kroki 42-47 · po tym etapie masz 40 z 40 kryteriów (pkt)
Strukturę danych należy skopiować z pliku dane.json
Otwórz dane.json w edytorze i skopiuj całość do <script> na końcu <body>. Mimo rozszerzenia to nie jest czysty JSON, tylko gotowa instrukcja JavaScriptu: zmienna pacjenci z obiektem, w którym tablica recepty ma cztery elementy, każdy z polami data, kod i lek1 - lek3. Do pojedynczej recepty dostajesz się indeksem: pacjenci.recepty[0].data to „8.03.2025”. Na stronie jeszcze nic się nie zmienia - dane tylko leżą w pamięci.
recepty.html HTML zmienione: 15 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
</script>
</body>
</html>Struktura jest uproszczona, dane innych pacjentów nie będą dodawane, ale może ulec zmianie tablica recepty. W tym mogą zostać dopisane nowe elementy do tablicy, co należy uwzględnić w skrypcie. Generowanych jest tyle bloków ile jest elementów tablicy recepty. Każdy blok ma przypisaną klasę recepty
Pętla for idzie do pacjenci.recepty.length, a nie do stałej 4 - po dopisaniu recepty do tablicy skrypt sam zrobi jeden blok więcej. W każdym obiegu document.createElement("div") tworzy blok w pamięci, setAttribute("class", "recepty") nadaje mu klasę, a appendChild wstawia go do sekcji prawa2. W podglądzie cztery puste brzoskwiniowe bloki - styl klasy czekał już w CSS.
recepty.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var block = document.createElement("div");
block.setAttribute("class", "recepty");
section.appendChild(block);
}
</script>
</body>
</html>Wewnątrz jednego bloku generowane są: Paragraf o treści „Data wystawienia: ”, dalej wstawiona wartość z tablicy
Ten sam schemat dla akapitu: utworzyć <p>, ustawić treść (stały tekst plus data z elementu [i]), dołączyć do bloku - nie do sekcji.
recepty.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
date.innerHTML = "Data wystawienia: " + pacjenci.recepty[i].data;
block.appendChild(date);
section.appendChild(block);
}
</script>
</body>
</html>Lista numerowana (uporządkowana) z nazwami leków pobranymi z tablicy. Pod jednym indeksem tablicy recepty mogą być maksymalnie trzy leki, zapisane w polach lek1, lek2, lek3. Pierwszy lek zawsze jest wpisany.
Lista numerowana to <ol>, element listy to <li>. Pierwszy lek jest zawsze, więc <li> z polem lek1 tworzysz bez warunku: element trafia do listy, a lista do bloku.
recepty.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
date.innerHTML = "Data wystawienia: " + pacjenci.recepty[i].data;
block.appendChild(date);
var list = document.createElement("ol");
var medicine1 = document.createElement("li");
medicine1.innerHTML = pacjenci.recepty[i].lek1;
list.appendChild(medicine1);
block.appendChild(list);
section.appendChild(block);
}
</script>
</body>
</html>Kolejne wpisy mogą być puste. Gdy wpis jest pusty – nie jest uwzględniany w liście. Na ilustracji 5 pokazano wygenerowany drugi i trzeci blok dla indeksów [1] i [2] tablicy recepty. Pod indeksem [1] zdefiniowano tylko dwa leki, pod indeksem [2] zdefiniowano tylko jeden lek – dlatego listy mają kolejno dwa i jeden element
Pusty wpis w danych to pusty napis "", więc warunek != "" przepuszcza tylko wpisane leki. Bez niego lista miałaby puste pozycje „2.” i „3.”. W podglądzie listy mają po 3, 2, 1 i 3 leki - drugi i trzeci blok jak na ilustracji 5.
Element <li> utworzony dla pustego leku wyświetla sam numer - klucz wymaga listy n-elementowej, gdzie n to liczba wpisanych leków (R.5.9).
recepty.html HTML zmienione: 10 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
date.innerHTML = "Data wystawienia: " + pacjenci.recepty[i].data;
block.appendChild(date);
var list = document.createElement("ol");
var medicine1 = document.createElement("li");
medicine1.innerHTML = pacjenci.recepty[i].lek1;
list.appendChild(medicine1);
if (pacjenci.recepty[i].lek2 != "") {
var medicine2 = document.createElement("li");
medicine2.innerHTML = pacjenci.recepty[i].lek2;
list.appendChild(medicine2);
}
if (pacjenci.recepty[i].lek3 != "") {
var medicine3 = document.createElement("li");
medicine3.innerHTML = pacjenci.recepty[i].lek3;
list.appendChild(medicine3);
}
block.appendChild(list);
section.appendChild(block);
}
</script>
</body>
</html>Nagłówek czwartego stopnia o treści „Kod: ”, dalej wstawiona wartość kodu z tablicy
Ostatni element bloku: <h4> z kodem, czerwony i przy prawej krawędzi dzięki stylowi h4. Na ilustracjach jest „kod:” z małej litery, w poleceniu „Kod:” - piszesz jak w poleceniu, a wielkości liter klucz i tak nie ocenia. Każdy blok ma teraz akapit z datą, listę i kod. Sprawdzone w przeglądarce także z dopisaną do tablicy piątą receptą (jeden lek): powstaje pięć bloków, ostatni z jednoelementową listą - bez zmiany kodu.
recepty.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
date.innerHTML = "Data wystawienia: " + pacjenci.recepty[i].data;
block.appendChild(date);
var list = document.createElement("ol");
var medicine1 = document.createElement("li");
medicine1.innerHTML = pacjenci.recepty[i].lek1;
list.appendChild(medicine1);
if (pacjenci.recepty[i].lek2 != "") {
var medicine2 = document.createElement("li");
medicine2.innerHTML = pacjenci.recepty[i].lek2;
list.appendChild(medicine2);
}
if (pacjenci.recepty[i].lek3 != "") {
var medicine3 = document.createElement("li");
medicine3.innerHTML = pacjenci.recepty[i].lek3;
list.appendChild(medicine3);
}
block.appendChild(list);
var code = document.createElement("h4");
code.innerHTML = "Kod: " + pacjenci.recepty[i].kod;
block.appendChild(code);
section.appendChild(block);
}
</script>
</body>
</html>Kroki 48-50 · po tym etapie masz 40 z 40 kryteriów (pkt)
Pod jednym indeksem tablicy recepty mogą być maksymalnie trzy leki, zapisane w polach lek1, lek2, lek3.
Trzy prawie identyczne fragmenty dla lek1, lek2 i lek3 zastępuje wewnętrzna pętla po tablicy nazw pól: prescription[fields[j]] odczytuje pole o nazwie zapisanej w zmiennej (zapis w nawiasach kwadratowych zamiast kropki). Pierwszy lek przechodzi przez ten sam warunek - jest zawsze wpisany, więc i tak trafi na listę. Zmienna prescription skraca powtarzane pacjenci.recepty[i]. Zamiast innerHTML używasz textContent: tekst z danych nie jest wtedy czytany jako HTML, więc nazwa leku z < i > nie zepsuje strony. Sprawdzone w przeglądarce: te same bloki co wcześniej. Na egzaminie wystarczy wersja wcześniejsza - klucz dopuszcza nawet innerHTML +=.
recepty.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script>
var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var prescription = pacjenci.recepty[i];
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
date.textContent = "Data wystawienia: " + prescription.data;
block.appendChild(date);
var list = document.createElement("ol");
var fields = ["lek1", "lek2", "lek3"];
for (var j = 0; j < fields.length; j++) {
if (prescription[fields[j]] != "") {
var item = document.createElement("li");
item.textContent = prescription[fields[j]];
list.appendChild(item);
}
}
block.appendChild(list);
var code = document.createElement("h4");
code.textContent = "Kod: " + prescription.kod;
block.appendChild(code);
section.appendChild(block);
}
// wersja z egzaminu: innerHTML i osobne bloki if dla lek2 i lek3
</script>
</body>
</html>Strukturę danych należy skopiować z pliku dane.json
Plik z arkusza nazywa się dane.json, ale zawiera instrukcję JavaScriptu (var pacjenci = ...;), a nie czysty JSON - tego nie wczyta ani JSON.parse, ani fetch z metodą .json(). Uczciwa nazwa to dane.js: dołączasz go znacznikiem <script src="dane.js"> przed skryptem, który z danych korzysta, i nowa recepta to zmiana w jednym pliku z danymi, bez otwierania HTML-a. W prawdziwej aplikacji dane przyszłyby z serwera jako JSON przez fetch, ale to wymaga serwera WWW - strona otwierana z dysku by tego nie obsłużyła. Na egzaminie wystarczy wersja wcześniejsza - arkusz każe dane skopiować.
dane.js JavaScript nowy plik var pacjenci = {
"id": "1",
"imie": "Agnieszka",
"nazwisko": "Nowak",
"wystawca": "lek. Marian Kowal",
"numer": "4387203",
"recepty": [
{"id": "0", "data": "8.03.2025", "kod": "1220", "lek1": "Witamina C", "lek2": "Potas", "lek3": "Syrop prawoślazowy"},
{"id": "1", "data": "23.04.2025", "kod": "4634", "lek1": "APAP", "lek2": "Witamina B", "lek3": ""},
{"id": "2", "data": "13.05.2025", "kod": "2913", "lek1": "Melatonina", "lek2": "", "lek3": ""},
{"id": "3", "data": "30.10.2025", "kod": "1105", "lek1": "Witamina C", "lek2": "Calcium", "lek3": "Sinupret"}
]
};recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script src="dane.js"></script>
<script>
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var prescription = pacjenci.recepty[i];
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
date.textContent = "Data wystawienia: " + prescription.data;
block.appendChild(date);
var list = document.createElement("ol");
var fields = ["lek1", "lek2", "lek3"];
for (var j = 0; j < fields.length; j++) {
if (prescription[fields[j]] != "") {
var item = document.createElement("li");
item.textContent = prescription[fields[j]];
list.appendChild(item);
}
}
block.appendChild(list);
var code = document.createElement("h4");
code.textContent = "Kod: " + prescription.kod;
block.appendChild(code);
section.appendChild(block);
}
// wersja z egzaminu: innerHTML i osobne bloki if dla lek2 i lek3
</script>
</body>
</html>Paragraf o treści „Data wystawienia: ”, dalej wstawiona wartość z tablicy
Data „8.03.2025” jest czytelna dla człowieka, ale nie dla wyszukiwarki czy kalendarza. Znacznik <time> z tabeli 3 arkusza niesie obok tekstu datę w formacie maszynowym: datetime="2025-03-08". Rozbij napis metodą split(".") na dzień, miesiąc i rok i złóż w kolejności rok-miesiąc-dzień, dzień uzupełniając zerem (padStart). Na ekranie nic się nie zmienia; sprawdzone w przeglądarce, że pierwsza recepta ma datetime="2025-03-08". Na egzaminie wystarczy wersja wcześniejsza - klucz tego nie sprawdza.
recepty.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html">Recepty</a>
<a href="skierowania.html">Skierowania</a>
</nav>
<main>
<section id="lewa1">
<img src="pacjent.png" alt="dane pacjenta">
<h3>Dane pacjenta</h3>
<p>Agnieszka</p>
<p>Nowak</p>
</section>
<section id="prawa1">
<img src="recepta.png" alt="dane recept">
<h3>Dane recept</h3>
</section>
<section id="prawa2">
</section>
<section id="lewa2">
<img src="lekarz.png" alt="dane lekarza">
<h3>Dane lekarza</h3>
<p>lek. Marian Kowal</p>
<p>numer PWZ: 4387203</p>
</section>
</main>
<footer>
<p>Autor strony: <em>Bartosz Bryniarski</em></p>
</footer>
<script src="dane.js"></script>
<script>
var section = document.getElementById("prawa2");
for (var i = 0; i < pacjenci.recepty.length; i++) {
var prescription = pacjenci.recepty[i];
var block = document.createElement("div");
block.setAttribute("class", "recepty");
var date = document.createElement("p");
var parts = prescription.data.split(".");
var time = document.createElement("time");
time.setAttribute("datetime", parts[2] + "-" + parts[1] + "-" + parts[0].padStart(2, "0"));
time.textContent = prescription.data;
date.textContent = "Data wystawienia: ";
date.appendChild(time);
block.appendChild(date);
var list = document.createElement("ol");
var fields = ["lek1", "lek2", "lek3"];
for (var j = 0; j < fields.length; j++) {
if (prescription[fields[j]] != "") {
var item = document.createElement("li");
item.textContent = prescription[fields[j]];
list.appendChild(item);
}
}
block.appendChild(list);
var code = document.createElement("h4");
code.textContent = "Kod: " + prescription.kod;
block.appendChild(code);
section.appendChild(block);
}
// wersja z egzaminu: innerHTML i osobne bloki if dla lek2 i lek3
</script>
</body>
</html>Krok 51 · po tym etapie masz 40 z 40 kryteriów (pkt)
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: import.png, index.html, kw1.png - kw4.png, kwerendy.txt, lekarz.png, pacjent.png, przeglądarka.txt, recepta.png, recepty.html, skierowania.html, styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 50.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.