To trzeci sposób rozwiązania tego samego arkusza - te same punkty, inna technika generowania bloków recept. Wersja podstawowa i wersja nowoczesna budują każdy element osobno (document.createElement, appendChild). Ta wersja pisze szablon HTML w napisie:
prescriptionHtml() zwraca kod HTML jednego bloku recepty jako szablon tekstowy (napis w odwrotnych apostrofach z wstawkami ${...}),for...of skleja bloki wszystkich recept w jeden napis, a na końcu jedno przypisanie innerHTML wstawia całość do sekcji,escapeHtml() - bez niej nazwa leku ze znakiem < zepsułaby stronę albo wstrzyknęła na nią obcy kod.Klucz wprost dopuszcza innerHTML w kryteriach R.5.5 - R.5.7. Taki zapis wygląda jak docelowy HTML, więc łatwo go porównać z ilustracją 5 - tak samo działają szablony w PHP i w bibliotekach typu React. Baza, grafika, HTML i CSS są takie jak w wersji nowoczesnej (siatka CSS), różni się etap JavaScript.
Skrypt został sprawdzony w prawdziwej przeglądarce: cztery bloki z listami o 3, 2, 1 i 3 lekach, pięć bloków po dopisaniu recepty i nazwa leku ze znacznikiem wyświetlona jako tekst.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania to 75%, czyli 30 punktów. Przy każdym kroku jest napisane, które kryteria spełnia.
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@. W phpMyAdmin Nowa → recepty, porównywanie utf8_polish_ci:
CREATE DATABASE recepty CHARACTER SET utf8 COLLATE utf8_polish_ci;
Do utworzonej bazy zaimportuj tabele z pliku recepty.sql
Baza recepty → Import → recepty.sql. Cztery tabele z ilustracji 1: pacjenci, leki, typy i recepty - ta ostatnia łączy pacjentów z lekami (relacja m:n).
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
Cały ekran z paskiem zadań, zapis jako import.png.
Wykadrowany zrzut nie jest oceniany.
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 warunek też. Każda klauzula w osobnej linii. Wynik: pięć leków. Zapytanie do kwerendy.txt, zrzut kw1.png.
jednostka = 'szt' bez kropki nie znajduje żadnego wiersza.
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’
LIKE '%a' - % zastępuje dowolny ciąg znaków, więc wzorzec pasuje do imion kończących się na „a”; rokUr > 2000 - po 2000 roku, bez samego 2000. Drugi warunek w osobnej linii z AND z przodu - łatwo go dopisać albo zakomentować. Wynik: Anna Kowalska, 2001. Zrzut kw2.png.
LIKE 'a%' szuka imion zaczynających się od „a” (Anna, Adam) i gubi Joannę.
kwerendy.txt Tekst zmienione: 6 linii -- 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 AS l JOIN typy AS t ON t.idTypy = l.idTypy - złączenie z warunkiem w ON, krótkie aliasy tabel,GROUP BY t.idTypy, t.typ - jeden wiersz na typ; w grupowaniu stoją wszystkie wypisywane kolumny bez funkcji, więc zapytanie działa też przy ścisłym trybie SQL (ONLY_FULL_GROUP_BY),COUNT(*) AS liczba_lekow - ile leków w grupie, z czytelną nazwą kolumny.Wynik: syrop 3, tabletki 7, tabletki musujące 3. Zrzut kw3.png.
kwerendy.txt Tekst zmienione: 6 linii -- 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 t.typ, COUNT(*) AS liczba_lekow
FROM leki AS l
JOIN typy AS t ON t.idTypy = l.idTypy
GROUP BY t.idTypy, t.typ;
Zapytanie 4: tworzące użytkownika Lekarz na localhost z hasłem Lek@rz
CREATE USER 'Lekarz'@'localhost' IDENTIFIED BY 'Lek@rz' - konto, host i hasło. Wielkość liter w nazwie ma znaczenie. Samo konto nie ma żadnych uprawnień - nadaje się je osobno poleceniem GRANT, zawsze tylko te, które są potrzebne (zasada najmniejszych uprawnień). 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 t.typ, COUNT(*) AS liczba_lekow
FROM leki AS l
JOIN typy AS t ON t.idTypy = l.idTypy
GROUP BY t.idTypy, t.typ;
-- Zapytanie 4
CREATE USER 'Lekarz'@'localhost' IDENTIFIED BY 'Lek@rz';
Kroki 8-28 · po tym etapie masz 18 z 40 kryteriów (pkt)
Modyfikacje grafiki recepta.png: Butelka z zakrętką wypełniona kolorem czarnym
W GIMP-ie Wypełnienie kubełkiem, kolor czarny, klik w białe wnętrze butelki, potem w zakrętkę (osobny zamknięty obszar). Krzyża nie klikaj - jego wnętrze oddziela kontur.
Krzyż na butelce wypełniony kolorem czerwonym
Kolor czerwony (dowolny odcień - klucz to dopuszcza) i klik kubełkiem we wnętrze krzyża.
Podgląd strony bez zmian - taki jak po kroku 8.
Białe tło zamienione na tło przezroczyste
Zaznaczenie rozmyte - klik w białe tło - i Edycja → Wyczyść. Białe wnętrze blistra jest otoczone konturem, więc zostaje.
Docelowe wymiary grafiki 100 px na 100 px
Skaluj obraz na końcu - wypełnianie 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 jednym akapitem w szkielecie HTML5 - odnośniki z bloku nawigacyjnego mają 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
<!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
lang="pl" w <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>; obok <meta name="viewport"> dla telefonów - arkusz tego nie wymaga.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Konto pacjenta</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
<link rel="stylesheet" href="styl.css">.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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
header, nav, main z czterema section i footer (R.2.5). Sekcje mają identyfikatory z nazw z arkusza. Kolejność w kodzie nie decyduje tu o układzie - ustawi go siatka - więc zostaje kolejność z arkusza.
recepty.html HTML zmienione: 16 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 - strony leżą w jednym folderze.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 bieżącej strony dostaje aria-current="page" - czytnik ekranu powie „bieżąca strona”, a w CSS można go kiedyś wyróżnić. Arkusz tego nie wymaga.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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ą liniowe, więc stoją w jednym wierszu.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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”. Nagłówek trzeciego stopnia o treści „Dane pacjenta”
Obraz z archiwum ma już 100 × 100 px; <h3> stanie obok niego po dodaniu opływania.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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 akapity, jak w arkuszu.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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 - wypełni ją skrypt.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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”
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">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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.
recepty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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>. Na egzaminie wpisujesz w nim swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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" aria-current="page">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 29-39 · 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
Dwa brązy z arkusza trafiają do zmiennych CSS w :root - jasny występuje dwa razy (nawigacja i blok recepty pod kursorem). Potem * z krojem i rodziną zapasową sans-serif na końcu (R.4.1).
styl.css CSS nowy plik :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
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 ze zmiennej var(--brown).
styl.css CSS zmienione: 8 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
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 a własny kolor, który nie dziedziczy się po rodzicu - zmieni go reguła dla a.
styl.css CSS zmienione: 6 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}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
Blok główny to siatka z dwiema kolumnami 40% i 60% - szerokości lewych i prawych sekcji z arkusza (klucz R.4.4 dopuszcza grid-template-columns). grid-template-areas rysuje ilustrację 4 słowami: lewa1 obok prawa1, lewa1 sięga niżej, pod nią lewa2, a prawa2 zajmuje prawą kolumnę od drugiego wiersza.
Wiersze wynikają z wysokości z arkusza: pierwszy ma 120 px (wysokość prawa1), drugi 80 px (tyle lewa1 ma więcej: 200 - 120), trzeci auto - dopasuje się do reszty prawa2. Dzięki temu lewa2 zaczyna się dokładnie pod lewa1, a prawa2 pod prawa1, bez pustych pasów. Stopka stoi pod siatką bez clear (R.3.1).
Bez grid-template-rows (same wiersze auto) przeglądarka rozdziela wysokość prawa2 między dwa wiersze i lewa2 odsuwa się od lewa1 - układ odbiega od ilustracji 4.
styl.css CSS zmienione: 26 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
}
#lewa2 {
grid-area: lewa2;
}Dla bloków sekcji lewa1 i lewa2: szerokość 40%, wysokość 200 px. Dla bloku sekcji prawa1: szerokość 60%, wysokość 120 px
Szerokości dają kolumny siatki; wysokości stoją przy blokach, jak w arkuszu.
styl.css CSS zmienione: 9 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}Dla bloku sekcji prawa2: szerokość 60%, wysokość 400 px, paski przewijania zawsze widoczne
Dopisane do reguły #prawa2: overflow: scroll - paski są także przy pustej sekcji, jak na ilustracji 2. To zamyka kryterium wymiarów sekcji.
styl.css CSS zmienione: 2 linie :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
height: 400px;
overflow: scroll;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}Dla selektora obrazu: opływanie po jego prawej stronie, marginesy zewnętrzne 20 px
Tekst opływa obraz z prawej, czyli obraz pływa w lewo: float: left. Tu zostaje float - klucz R.4.8 podaje go wprost, a opływanie tekstem to jego właściwe zadanie (siatka służy do układu bloków, nie do oblewania obrazu tekstem).
styl.css CSS zmienione: 5 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
height: 400px;
overflow: scroll;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}
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.
styl.css CSS zmienione: 6 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
height: 400px;
overflow: scroll;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}
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
Reguła a zmienia kolor odnośników na biały; marginesy rozsuwają je w poziomie. Domyka kryteria kolorów, marginesów i rozmiarów czcionki.
styl.css CSS zmienione: 6 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
height: 400px;
overflow: scroll;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}
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: 7 linii :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
height: 400px;
overflow: scroll;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}
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, kolor ze zmiennej - ten sam brąz co nawigacja.
styl.css CSS zmienione: 4 linie :root {
--brown: #B17948;
--light-brown: #D9A97E;
}
* {
font-family: "Trebuchet MS", sans-serif;
}
header,
footer {
background-color: var(--brown);
color: white;
padding: 5px;
text-align: center;
}
nav {
background-color: var(--light-brown);
color: white;
text-align: center;
}
main {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 120px 80px auto;
grid-template-areas:
"lewa1 prawa1"
"lewa1 prawa2"
"lewa2 prawa2";
}
#lewa1 {
grid-area: lewa1;
}
#prawa1 {
grid-area: prawa1;
}
#prawa2 {
grid-area: prawa2;
height: 400px;
overflow: scroll;
}
#lewa2 {
grid-area: lewa2;
}
#lewa1,
#lewa2 {
height: 200px;
}
#prawa1 {
height: 120px;
}
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: var(--light-brown);
}Kroki 40-45 · po tym etapie masz 40 z 40 kryteriów (pkt)
Strukturę danych należy skopiować z pliku dane.json
Skrypt trafia do osobnego pliku skrypt.js, podpiętego w <head> z atrybutem defer: przeglądarka pobiera go równolegle i wykonuje po wczytaniu całego HTML-u, więc sekcja prawa2 już istnieje.
Na początek kopia całej zawartości dane.json. To nie jest czysty JSON, tylko instrukcja JavaScriptu - zmienna z obiektem. Jedna zmiana: var na const - nazwa pacjenci nie zostanie przypisana od nowa (zawartość tablicy nadal można zmieniać). Struktura jest kompletna, jak wymaga R.5.3.
Pominięcie części struktury (np. tylko tablica recepty) kosztuje R.5.3 - klucz wymaga, by była kompletna.
recepty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Konto pacjenta</title>
<link rel="stylesheet" href="styl.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<header>
<h2>Strefa pacjenta</h2>
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="recepty.html" aria-current="page">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>skrypt.js JavaScript nowy plik const 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"}
]
};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
Funkcja prescriptionHtml(prescription) zwraca kod HTML jednego bloku jako szablon tekstowy - napis w odwrotnych apostrofach, który może mieć wiele linii i wstawki ${...}. Na razie sam pusty <div class="recepty">.
Pętla for...of przechodzi po wszystkich receptach (po dopisaniu recepty - o jeden obieg więcej) i dokleja kolejne bloki do zmiennej html. Dopiero po pętli jedno przypisanie innerHTML wstawia całość do sekcji prawa2. Klucz dopuszcza innerHTML w R.5.5 - R.5.7; przypisanie raz zamiast innerHTML += w pętli jest szybsze, bo przeglądarka analizuje HTML jeden raz, a nie przy każdym obiegu od nowa. W podglądzie cztery puste brzoskwiniowe bloki.
skrypt.js JavaScript zmienione: 12 linii const 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"}
]
};
function prescriptionHtml(prescription) {
return `
<div class="recepty">
</div>`;
}
let html = '';
for (const prescription of pacjenci.recepty) {
html += prescriptionHtml(prescription);
}
document.querySelector('#prawa2').innerHTML = html;Wewnątrz jednego bloku generowane są: Paragraf o treści „Data wystawienia: ”, dalej wstawiona wartość z tablicy
W szablonie akapit z wstawką ${...}. Każda wartość z danych przechodzi przez escapeHtml(): zamienia &, <, > i cudzysłowy na encje. To konieczne przy innerHTML - napis jest czytany jako kod HTML, więc lek o nazwie <img src=x onerror=alert(1)> uruchomiłby obcy skrypt (atak XSS), a w nazwie „Witamina <C>” fragment w nawiasach zniknąłby jako nieznany znacznik. Zamiana & musi być pierwsza, inaczej popsułaby encje dopisane przez kolejne zamiany.
Szablon bez escapeHtml działa na danych z arkusza, ale pierwszy nietypowy znak w danych psuje stronę - przy innerHTML escapowanie to część poprawnego kodu, nie dodatek.
skrypt.js JavaScript zmienione: 10 linii const 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"}
]
};
function escapeHtml(text) {
return text
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''');
}
function prescriptionHtml(prescription) {
return `
<div class="recepty">
<p>Data wystawienia: ${escapeHtml(prescription.data)}</p>
</div>`;
}
let html = '';
for (const prescription of pacjenci.recepty) {
html += prescriptionHtml(prescription);
}
document.querySelector('#prawa2').innerHTML = 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.
Elementy listy powstają w zmiennej medicines przed szablonem bloku - pierwszy lek zawsze. Szablon wstawia je między <ol> i </ol>.
skrypt.js JavaScript zmienione: 3 linie const 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"}
]
};
function escapeHtml(text) {
return text
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''');
}
function prescriptionHtml(prescription) {
let medicines = `<li>${escapeHtml(prescription.lek1)}</li>`;
return `
<div class="recepty">
<p>Data wystawienia: ${escapeHtml(prescription.data)}</p>
<ol>${medicines}</ol>
</div>`;
}
let html = '';
for (const prescription of pacjenci.recepty) {
html += prescriptionHtml(prescription);
}
document.querySelector('#prawa2').innerHTML = 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
Pętla po trzech polach leków; <li> dopisuje się tylko dla niepustego wpisu (!==). Listy mają 3, 2, 1 i 3 elementy - jak na ilustracji 5.
<li> dla pustego leku pokazuje sam numer - klucz wymaga listy n-elementowej (R.5.9).
skrypt.js JavaScript zmienione: 6 linii const 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"}
]
};
function escapeHtml(text) {
return text
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''');
}
function prescriptionHtml(prescription) {
let medicines = '';
for (const medicine of [prescription.lek1, prescription.lek2, prescription.lek3]) {
if (medicine !== '') {
medicines += `<li>${escapeHtml(medicine)}</li>`;
}
}
return `
<div class="recepty">
<p>Data wystawienia: ${escapeHtml(prescription.data)}</p>
<ol>${medicines}</ol>
</div>`;
}
let html = '';
for (const prescription of pacjenci.recepty) {
html += prescriptionHtml(prescription);
}
document.querySelector('#prawa2').innerHTML = html;Nagłówek czwartego stopnia o treści „Kod: ”, dalej wstawiona wartość kodu z tablicy
Ostatni element szablonu: <h4> z kodem. Szablon wygląda teraz jak docelowy HTML bloku z ilustracji 5 - akapit, lista, kod - więc łatwo porównać go z wymaganiem wzrokiem. Sprawdzone w przeglądarce z dopisaną piątą receptą, której leki mają w nazwie znaczniki (<b>, <img>): powstaje pięć bloków, a znaczniki wyświetlają się jako tekst - nic się nie wykonuje.
skrypt.js JavaScript zmienione: 1 linia const 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"}
]
};
function escapeHtml(text) {
return text
.replaceAll('&', '&')
.replaceAll('<', '<')
.replaceAll('>', '>')
.replaceAll('"', '"')
.replaceAll("'", ''');
}
function prescriptionHtml(prescription) {
let medicines = '';
for (const medicine of [prescription.lek1, prescription.lek2, prescription.lek3]) {
if (medicine !== '') {
medicines += `<li>${escapeHtml(medicine)}</li>`;
}
}
return `
<div class="recepty">
<p>Data wystawienia: ${escapeHtml(prescription.data)}</p>
<ol>${medicines}</ol>
<h4>Kod: ${escapeHtml(prescription.kod)}</h4>
</div>`;
}
let html = '';
for (const prescription of pacjenci.recepty) {
html += prescriptionHtml(prescription);
}
document.querySelector('#prawa2').innerHTML = html;Krok 46 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wszystkie trzy wersje dają komplet 40 punktów. Różnią się tym, jak skrypt buduje bloki:
| API DOM (podstawowa, nowoczesna) | szablony tekstowe (ta wersja) | |
|---|---|---|
| tworzenie elementów | createElement + appendChild/append dla każdego znacznika | jeden napis HTML na blok |
| czytelność | struktura rozbita na wiele linii | szablon wygląda jak docelowy HTML |
| bezpieczeństwo | textContent - tekst nigdy nie jest kodem | escapeHtml przy każdej wartości - pominięcie jednej to luka |
| wstawienie | blok po bloku | jedno innerHTML na końcu |
Kiedy który sposób. Szablony są wygodne przy dużych, stałych fragmentach HTML (karta produktu, wiersz tabeli) - tak samo działają szablony w PHP, a biblioteki typu React czy Vue robią to z automatycznym escapowaniem. API DOM jest bezpieczniejsze domyślnie i lepsze, gdy elementy trzeba później zmieniać lub podpinać do nich zdarzenia. Na egzaminie klucz przyjmuje oba (R.5.5 - R.5.7 dopuszczają innerHTML); pamiętaj tylko, że innerHTML += w pętli przy dużej liczbie bloków jest wolne i kasuje zdarzenia przypięte wcześniej do elementów sekcji.
Podgląd strony bez zmian - taki jak po kroku 45.
Krok 47 · 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 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, skrypt.js, skierowania.html, styl.css. Bez skrypt.js sekcja recept zostanie pusta. Płytę sprawdź po nagraniu.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 45.
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.