Wyniki egzaminu

Nowy egzamin
Informacje o egzaminie:
  • Zawód: Technik programista
  • Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
  • Data rozpoczęcia: 10 czerwca 2025 11:22
  • Data zakończenia: 10 czerwca 2025 11:44

Egzamin zdany!

Wynik: 31/40 punktów (77,5%)

Wymagane minimum: 20 punktów (50%)

Pochwal się swoim wynikiem!
Facebook
X.com
LinkedIn
Szczegółowe wyniki:
Pytanie 1

Aby zliczyć wszystkie wiersze w tabeli Koty, należy wykorzystać zapytanie

A. SELECT COUNT(Koty) AS ROWNUM
B. SELECT COUNT(ROWNUM) FROM Koty
C. SELECT ROWNUM() FROM Koty
D. SELECT COUNT(*) FROM Koty
Aby policzyć wszystkie wiersze tabeli Koty, należy skorzystać z polecenia SQL SELECT COUNT(*), które zwraca liczbę wszystkich rekordów w danej tabeli. Funkcja COUNT(*) jest częścią standardu SQL i działa na zasadzie zliczania wszystkich wierszy, niezależnie od tego, czy zawierają one wartości NULL. Wartością zwróconą przez to polecenie będzie liczba całkowita, która przedstawia całkowitą liczbę wierszy w tabeli Koty. Przykład zastosowania tego polecenia w praktyce może wyglądać następująco: po wykonaniu zapytania na bazie danych, użytkownik otrzyma wynik, który jasno wskazuje, ile kotów znajduje się w tabeli. Ten sposób zliczania jest efektywny i szeroko stosowany w aplikacjach zarządzających bazami danych, umożliwiając szybkie i precyzyjne uzyskanie potrzebnych informacji. Przy indeksowaniu i optymalizacji zapytań, COUNT(*) jest najczęściej używaną funkcją, co czyni ją kluczowym narzędziem w pracy z relacyjnymi bazami danych.
Pytanie 2

Jaki rezultat uzyskamy po uruchomieniu załączonego skryptu?

<?php
class Owoc {
  function __construct() {     echo "test1";     }
  function __destruct() {     echo "test2";     }
}
$gruszka = new Owoc();
?>

A. Pojawi się tylko komunikat "test1"
B. Na ekranie pojawią się oba komunikaty: "test1" oraz "test2"
C. Pojawi się jedynie komunikat "test2"
D. Nie zostanie wyświetlony żaden komunikat
Skrypt w PHP definiuje klasę Owoc z dwoma metodami specjalnymi __construct() i __destruct(). Metoda __construct() jest automatycznie wywoływana podczas tworzenia instancji klasy. W tym wypadku, w momencie utworzenia obiektu $gruszka, zostanie wykonana metoda __construct(), która wyświetli napis test1. Następnie, gdy skrypt kończy działanie lub obiekt jest usuwany z pamięci, wywoływana jest metoda __destruct(). W tym przypadku, po zakończeniu skryptu, wywołana zostanie metoda __destruct(), która wyświetli napis test2. Metody konstruktorów i destruktorów są podstawą zarządzania cyklem życia obiektu w PHP, pozwalając na inicjalizację ustawień, jak również zwalnianie zasobów. Użycie ich jest kluczowe w projektowaniu obiektowo-zorientowanym, gdzie każda klasa może definiować własne sposoby obsługi zasobów. Praktyka ta wspiera modularność i utrzymanie kodu, co jest standardem w profesjonalnym programowaniu.
Pytanie 3

Podaj polecenie SQL, które wprowadza kolumnę miesiacSiewu do istniejącej tabeli rosliny?

A. INSERT INTO rosliny VALUES (miesiacSiewu int)
B. ALTER TABLE rosliny ADD miesiacSiewu int
C. CREATE TABLE rosliny {miesiacSiewu int}
D. UPDATE rosliny ADD miesiacSiewu int
Wszystkie błędne odpowiedzi opierają się na nieprawidłowym rozumieniu funkcji i zastosowania instrukcji w SQL. Polecenie INSERT INTO rosliny VALUES (miesiacSiewu int) jest niewłaściwe, ponieważ służy do wstawiania nowych rekordów do tabeli, a nie do modyfikacji jej struktury. Wstawiając dane, należy określić wartości dla istniejących kolumn, a nie definiować nowego pola. Funkcja UPDATE rosliny ADD miesiacSiewu int również jest myląca, gdyż polecenie UPDATE jest używane do aktualizacji istniejących danych w tabeli, a nie do dodawania nowych kolumn. Ponadto, dodawanie kolumny powinno odbywać się za pomocą ALTER TABLE, a nie poprzez UPDATE. Ostatecznie, CREATE TABLE rosliny {miesiacSiewu int} jest niewłaściwe, ponieważ polecenie CREATE TABLE jest stosowane do tworzenia nowej tabeli, a nie do modyfikacji istniejącej. Warto zauważyć, że w SQL każda instrukcja ma swoje specyficzne zastosowanie; nie można ich dowolnie zamieniać. Typowe błędy w myśleniu o SQL mogą prowadzić do nieefektywnego zarządzania danymi, dlatego kluczowe jest zrozumienie różnic między instrukcjami, aby skutecznie korzystać z możliwości baz danych.
Pytanie 4

Zakładając, że zmienna tablicowa $tab jest wypełniona liczbami naturalnymi, wynikiem programu będzie wypisanie

$liczba = $tab[0];
foreach ($tab as $element)
{
    if ($element > $liczba)
        $liczba = $element;
}
echo $liczba;

A. elementu tablicy, który jest równy wartości $tab[0].
B. tych elementów, które są większe od zmiennej $liczba.
C. największego elementu tablicy.
D. najmniejszego elementu tablicy.
Poprawna odpowiedź sugeruje, że wynikiem programu będzie wypisanie największego elementu tablicy. To jest prawidłowe, ponieważ program używa techniki znanej jako pętla iteracyjna, aby przejść przez każdy element tablicy i porównać go z aktualnie największą znaną wartością. Na początku, największa znana wartość jest ustawiona na pierwszy element tablicy. Następnie, dla każdego elementu tablicy, program sprawdza, czy element jest większy od największej znanej wartości. Jeśli tak, to ta wartość staje się nową największą znaną wartością. Po przejściu przez wszystkie elementy, program wypisuje największą znaną wartość. Jest to standardowa technika stosowana w programowaniu, aby znaleźć największy element w tablicy lub liście.
Pytanie 5

Dla tablicy n-elementowej o nazwie t[n], algorytm, zapisany w formie kroków, ma za zadanie obliczenie sumy

Ilustracja do pytania
A. sumy wszystkich elementów tablicy
B. n-elementów tablicy
C. sumy tych elementów tablicy, których wartości są nieparzyste
D. co drugiego elementu tablicy
Algorytm, który masz na zdjęciu, ma na celu sumowanie co drugiego elementu w tablicy. Na początku ustalamy zmienne i=0 oraz wynik=0. Używamy pętli while, żeby przejść przez tablicę, a zmienna i zwiększa się o 2 za każdym razem, więc idealnie nadaje się do zbierania co drugiego elementu. W kroku K3 dodajemy aktualny element tablicy do zmiennej wynik, co w praktyce oznacza, że sumujemy elementy, które są na parzystych indeksach (czyli te z miejsc 0, 2, 4 i tak dalej). Takie podejście jest dosyć popularne, kiedy musimy wyodrębniać fragmenty danych z większej tablicy. Można to wykorzystać w różnych sytuacjach, gdzie liczy się efektywność, jak na przykład przy przetwarzaniu dużych zbiorów danych. Dzięki temu zmniejszamy złożoność obliczeniową i lepiej zarządzamy pamięcią. W branży często doradza się unikanie niepotrzebnych iteracji i skupianie się na mądrym projektowaniu algorytmów, co zdecydowanie prowadzi do lepszego kodu.
Pytanie 6

Czy przedstawione w języku CSS ustawienia czcionki będą dotyczyć dla ```* { font-family: Tahoma; color: Teal; }```?

A. znaczników o id równym *
B. znaczników z klasą przypisaną równą *
C. całego dokumentu HTML, niezależnie od późniejszych reguł CSS
D. całego dokumentu HTML, jako domyślne formatowanie dla wszystkich elementów strony
Właściwość CSS zastosowana w podanym kodzie dotyczy wszystkich elementów HTML na stronie, ponieważ użycie selektora * oznacza, że formatowanie będzie miało zastosowanie do każdego elementu, niezależnie od jego typu. Oznacza to, że czcionka Tahoma oraz kolor Teal będą domyślnie stosowane do tekstu we wszystkich znacznikach HTML. Tego rodzaju podejście jest zgodne z dobrymi praktykami w projektowaniu stron, ponieważ pozwala na jednolite formatowanie bez konieczności stylizowania każdego elementu z osobna. Przykładem zastosowania może być stworzenie spójnego wyglądu strony, gdzie wszystkie nagłówki, akapity i inne teksty mają ten sam styl, co poprawia czytelność i estetykę. Dodatkowo, takie zastosowanie stylów jest efektywne, gdyż zmiana stylu w kontekście całej strony odbywa się poprzez edytowanie jednego miejsca w kodzie CSS, co oszczędza czas i zmniejsza ryzyko błędów.
Pytanie 7

W JavaScript funkcja document.getElementById(id) ma na celu

A. umieścić tekst o treści ’id’ na stronie internetowej
B. zweryfikować poprawność formularza o identyfikatorze id
C. pobrać wartości z formularza i przypisać je do zmiennej id
D. zwrócić referencję do pierwszego elementu HTML o wskazanym id
Fajnie, że zwróciłeś uwagę na metodę document.getElementById(id). To naprawdę ważne narzędzie w JavaScript, jeśli chodzi o pracę z DOM. Dzięki niej możesz łatwo znaleźć element HTML, który ma konkretny identyfikator, co jest super przydatne, gdy chcesz coś zmienić na stronie. Na przykład, żeby zmienić tekst nagłówka, używasz: document.getElementById('header').innerText = 'Nowy tekst nagłówka'. Warto pamiętać, żeby identyfikatory były unikalne, bo to potem ułatwia odnajdywanie i manipulację tymi elementami. Unikaj też zbyt ogólnych nazw, bo to może prowadzić do zamieszania. Metoda ta jest naprawdę szeroko stosowana w nowoczesnym programowaniu stron internetowych, co czyni strony bardziej interaktywnymi i dynamicznymi.
Pytanie 8

Co można powiedzieć o stylu hiperłącza na podstawie opisu CSS, zakładając, że żadne inne style nie zostały zdefiniowane?

a:link {
  color: green;
  text-decoration: none;
}

a:hover {
  color: red;
  text-decoration: underline;
}

A. Tekst odwiedzonego hiperłącza jest koloru czerwonego.
B. Gdy kursor znajdzie się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony.
C. Hiperłącze jest zawsze podkreślone.
D. Gdy hiperłącze jest nieodwiedzone, jego tekst jest koloru niebieskiego z podkreśleniem.
Twoja odpowiedź jest poprawna. W przypadku hiperłącza, w momencie, gdy kursor znajduje się na obszarze hiperłącza, pojawia się podkreślenie i tekst przyjmuje kolor czerwony. Jest to efekt zastosowania stylu CSS w stanie 'hover'. Styl ten umożliwia dynamiczną zmianę wyglądu elementu, kiedy kursor myszy znajduje się nad nim. Jest to praktyka powszechnie stosowana w celu zwiększenia użyteczności i interaktywności stron internetowych. Dobrą praktyką jest również zapewnienie kontrastu między kolorem tła a tekstem dla lepszej czytelności. W tym przypadku, kolor tekstu zmienia się na czerwony, co zapewnia wyraźny kontrast i zwraca uwagę użytkownika. Równocześnie dodanie podkreślenia jest dodatkowym wizualnym wskaźnikiem, że dany element jest hiperłączem. Zastosowanie takiego stylu pozwala na intuicyjne i efektywne poruszanie się po stronie internetowej.
Pytanie 9

W języku CSS wprowadzono poniższe formatowanie. Oznacza to, że tekst w kolorze niebieskim będzie zapisany

Ilustracja do pytania
A. cały tekst nagłówków bez względu na ich formatowanie
B. pochylony tekst akapitu
C. pogrubiony tekst akapitu
D. cały tekst akapitu bez względu na jego formatowanie
W języku CSS selektor > jest używany do stylizowania bezpośrednich potomków danego elementu. W podanym przykładzie p > i oznacza, że reguła CSS będzie zastosowana do elementu i będącego bezpośrednim dzieckiem elementu p. To oznacza, że tylko tekst zapisany w tagu i wewnątrz paragrafu p będzie miał kolor niebieski. Jest to powszechnie stosowane podejście do precyzyjnego stylizowania elementów na stronach internetowych, z zachowaniem struktury dokumentu HTML. Takie rozwiązanie pozwala na lepszą kontrolę nad wyglądem i prezentacją dokumentu, co jest istotne przy tworzeniu responsywnych i estetycznych stron. Praktyczne zastosowanie tego stylu można zobaczyć w przypadku, gdy chcemy wyróżnić pewne frazy w paragrafie, na przykład cytaty lub terminy. Warto pamiętać, że używanie selektorów potomstwa poprawia czytelność i efektywność kodu CSS, co jest dobrą praktyką w profesjonalnym kodowaniu frontendowym. Zachowanie spójności i przejrzystości stylów jest kluczowe w większych projektach, gdzie wiele osób pracuje nad kodem.
Pytanie 10

Jakie są odpowiednie kroki w odpowiedniej kolejności, które należy podjąć, aby nawiązać współpracę pomiędzy aplikacją internetową po stronie serwera a bazą danych SQL?

A. nawiązanie połączenia z serwerem baz danych, wybór bazy, zapytanie do bazy - wyświetlane na stronie WWW, zamknięcie połączenia
B. wybór bazy, zapytanie do bazy, nawiązanie połączenia z serwerem baz danych, wyświetlenie na stronie WWW, zamknięcie połączenia
C. wybór bazy danych, nawiązanie połączenia z serwerem baz danych, zapytanie do bazy - wyświetlane na stronie WWW, zamknięcie połączenia
D. zapytanie do bazy, wybór bazy, wyświetlenie na stronie WWW, zamknięcie połączenia
Aby nawiązać współpracę między aplikacją internetową a bazą danych SQL, niezbędne jest przestrzeganie odpowiedniej sekwencji kroków. Proces ten rozpoczyna się od nawiązania połączenia z serwerem baz danych, co jest kluczowe, ponieważ bez aktywnego połączenia aplikacja nie ma możliwości komunikacji z bazą. Następnie dokonujemy wyboru konkretnej bazy danych, z którą chcemy pracować. Jest to istotny krok, ponieważ w przypadku serwera mogą istnieć różne bazy, a aplikacja musi wiedzieć, z którą z nich ma się połączyć. Po dokonaniu wyboru bazy następuje wysłanie zapytania do bazy danych, które może być zapytaniem typu SELECT, INSERT, UPDATE, lub DELETE w zależności od potrzeb aplikacji. Po zrealizowaniu zapytania wyniki są przetwarzane i wyświetlane na stronie internetowej. Ostatnim krokiem jest zamknięcie połączenia z bazą danych, co jest ważne dla zarządzania zasobami, zapobiega to wyciekom pamięci i utrzymuje wydajność serwera. Te kroki są zgodne z ogólnymi standardami tworzenia aplikacji webowych i wzorcami projektowymi, jak na przykład architektura MVC, gdzie kontroler jest odpowiedzialny za zarządzanie komunikacją z bazą danych.
Pytanie 11

Wskaźnik HTML, który umożliwia oznaczenie tekstu jako błędnego lub nieodpowiedniego poprzez jego przekreślenie, to jaki?

A.
B.
C.
D.
jest znacznikiem HTML używanym do oznaczania tekstu, który jest nieprawidłowy lub nieaktualny. Umożliwia to zachowanie kontekstu, w którym tekst był używany, ale informuje użytkowników, że nie jest już aktualny. Przykład zastosowania: jeśli w artykule naukowym cytujemy dane, które zostały później zaktualizowane, możemy je umieścić w znaczniku , aby wskazać, że te informacje są już nieaktualne. Praktyczne zastosowanie znaczników HTML, takich jak , jest istotne w kontekście dostępności i poprawności treści. Używanie odpowiednich znaczników pozwala przeglądarkom oraz czytnikom ekranu lepiej interpretować zawartość, co jest zgodne z wytycznymi WCAG (Web Content Accessibility Guidelines). Warto również zauważyć, że jest preferowane w nowoczesnym HTML5 w porównaniu do starszych znaczników, takich jak, które są uznawane za przestarzałe. Stosowanie znaczników zgodnych z aktualnymi standardami zwiększa interoperacyjność oraz przyszłościowość kodu.
Pytanie 12

Jak można umieścić komentarz w kodzie PHP, używając odpowiednich symboli?

A. /? ... ?/
B. /* ... */
C.
D.
Pierwsza z podanych opcji, używająca składni '/? ... ?/', nie jest poprawnym sposobem na tworzenie komentarzy w PHP. Taka składnia nie jest zgodna z żadnym standardowym formatem komentarzy w tym języku, co czyni ją nieaktywną i nieczytelną dla interpretera. Z kolei opcja z '' jest oznaczeniem bloku PHP, który pozwala na wstawienie kodu PHP w plikach HTML, ale nie jest przeznaczona do tworzenia komentarzy. Komentarze w PHP nie są interpretowane w obrębie takich znaczników, a ich działanie jest całkowicie inne. Z kolei użycie znaku '' jest typowe dla HTML, a nie dla PHP. Chociaż takie komentarze są używane do wykluczania fragmentów kodu HTML, nie będą skuteczne w kodzie PHP, gdyż interpreter PHP ich nie zrozumie. W PHP stosujemy wyłącznie standardowe oznaczenia komentarzy, aby zapewnić, że kod będzie działał poprawnie oraz aby uniknąć błędów w interpretacji skryptu.
Pytanie 13

W języku CSS, aby ustalić wewnętrzny górny margines, czyli przestrzeń pomiędzy elementem a jego otaczającym obramowaniem, należy zastosować komendę

A. padding-top
B. local-top
C. border-top
D. outline-top
W języku CSS, aby zdefiniować wewnętrzny górny margines elementu, należy użyć właściwości padding-top. Marginesy wewnętrzne (padding) to przestrzeń, która znajduje się pomiędzy zawartością elementu a jego obramowaniem, co pozwala na stworzenie efektu oddzielenia treści od krawędzi. Wartości padding-top można ustalać w jednostkach takich jak px, em, rem czy %. Na przykład, kod CSS 'padding-top: 20px;' doda 20 pikseli odstępu od górnej krawędzi obramowania do zawartości elementu. Właściwość ta jest standardowo wspierana we wszystkich nowoczesnych przeglądarkach i jest częścią specyfikacji CSS Box Model, która określa, jak przestrzeń jest zorganizowana w obrębie elementów HTML. Użycie padding-top jest kluczowe, gdy chcemy, aby nasza strona była estetyczna i czytelna, co ma istotne znaczenie w projektowaniu responsywnym, gdzie różne urządzenia mogą wymagać różnych wartości paddingu, aby utrzymać spójność wizualną. Poprawne stosowanie padding-top przyczynia się również do lepszej dostępności strony, co jest istotnym aspektem w nowoczesnym web designie.
Pytanie 14

Jaki program jest wykorzystywany do edycji dźwięku?

A. Audacity
B. CorelDRAW
C. GIMP
D. Inkscape
Audacity to naprawdę fajny program do obróbki dźwięku, który jest używany przez wielu, zarówno hobbystów, jak i profesjonalistów. Jest to open-source, więc można go ściągnąć za darmo. Dzięki niemu możesz nagrywać dźwięki z mikrofonu lub z innych źródeł, co jest super przydatne. Możliwości edytowania ścieżek dźwiękowych są ogromne – masz różne efekty, jak kompresja, EQ czy reverb, które naprawdę mogą wzbogacić Twoje nagrania. Obsługuje też wiele formatów plików, jak WAV, MP3 czy OGG, co sprawia, że jest wszechstronny. Sam z niego korzystam do nagrywania podcastów i muszę przyznać, że dobrze się sprawdza. Ważne, żeby pamiętać, że Audacity jest popularne w branży, bo pozwala na solidną pracę z dźwiękiem, co jest kluczowe, jeśli planujesz coś profesjonalnego. Jest też duża społeczność użytkowników, więc program ciągle się rozwija i aktualizuje. To na pewno coś, czego warto spróbować!
Pytanie 15

Kod został napisany w języku JavaScript. W podanej definicji obiektu metodą jest element o nazwie.

var obj1 = {
  czescUlamkowa: 10,
  czescCalkowita: 20,
  oblicz: function() {.....}
}

A. czescCalkowita
B. oblicz
C. czescUlamkowa
D. obj1
W podanym kodzie JavaScript obiekt obj1 zawiera trzy elementy czescUlamkowa czescCalkowita i oblicz Istotnym aspektem definicji obiektów w JavaScript jest możliwość definiowania metod czyli funkcji będących częścią obiektu W podanym obiekcie metoda oblicz zdefiniowana jest jako funkcja przypisana do klucza o tej samej nazwie To właśnie odróżnia metodę od zwykłych właściwości obiektu czyli czescUlamkowa i czescCalkowita które są wartościami liczbowymi Metody w JavaScript są wykorzystywane do wykonywania operacji wewnątrz obiektu co pozwala na manipulację jego danymi i zachowaniami Przykładowo metoda oblicz może służyć do kalkulacji bazującej na innych właściwościach obiektu takich jak czescUlamkowa i czescCalkowita Definiując metody w obiektach uzyskujemy spójność i enkapsulację dzięki czemu obiekt może sam zarządzać swoimi danymi i operacjami Rozumienie metod w kontekście obiektów jest kluczowe zwłaszcza w paradygmacie programowania obiektowego gdzie obiekty mogą posiadać zarówno dane jak i funkcjonalności związane z tymi danymi
Pytanie 16

Zawarty w poniższym kodzie, napisanym w języku C++, ma na celu wypisanie dla podanych dowolnych całkowitych liczb różniących się od zera

Ilustracja do pytania
A. wszystkie liczby
B. wyłącznie liczby nieparzyste
C. jedynie liczby parzyste
D. liczby pierwsze
Prezentowany kod źródłowy w języku C++ jest zaprogramowany do wypisywania tylko liczb parzystych spośród wprowadzanych przez użytkownika liczb całkowitych różnych od zera. Kluczowym elementem jest tutaj operacja modulo (%), która oblicza resztę z dzielenia liczby przez 2. Dla liczb parzystych wynik tej operacji wynosi 0, co jest sprawdzane w warunku if. Kod używa pętli while, która pozwala na wprowadzanie i sprawdzanie wielu liczb w sposób iteracyjny, aż do momentu wprowadzenia zera, które kończy działanie programu. Zrozumienie tej struktury jest kluczowe w programowaniu i pozwala na efektywne filtrowanie danych. W praktyce taki mechanizm mógłby być użyty w systemach analizujących dane wejściowe pod kątem ich właściwości liczbowych. Podstawowe operacje na liczbach, takie jak modulo, są szeroko stosowane w algorytmach i strukturach danych, gdzie ważne jest klasyfikowanie czy filtrowanie elementów według zadanych kryteriów. Warto zwrócić uwagę na efektywność tego podejścia, które minimalizuje zbędne operacje poprzez bezpośrednie sprawdzanie warunku wewnątrz pętli.
Pytanie 17

Które z poniższych stwierdzeń jest poprawne w kontekście grafiki rastrowej?

A. Grafika rastrowa nie jest zapisywana w formacie WMF (ang. Windows Metafile Format - format metaplików Windows).
B. Jest to przedstawienie obrazu poprzez siatkę pikseli, które są odpowiednio kolorowane w układzie pionowo-poziomym na ekranie komputera, drukarce lub innym urządzeniu wyjściowym.
C. Obraz zapisywany jest za pomocą figur geometrycznych rozmieszczonych w układzie współrzędnych.
D. Podczas skalowania obraz nie traci na jakości.
Grafika rastrowa, znana również jako bitmapa, to sposób przedstawiania obrazu poprzez siatkę pikseli. Piksel, będący najmniejszym elementem obrazu, jest odpowiednio kolorowany, co pozwala na uzyskanie pełnozakresowego obrazu. Takie podejście jest powszechnie stosowane w różnych dziedzinach, od fotografii cyfrowej po projektowanie graficzne. W przypadku grafiki rastrowej, każdy piksel jest przypisany do konkretnego miejsca na siatce, co skutkuje tym, że zmieniając rozmiar obrazu poprzez skalowanie, jakość obrazu ulega pogorszeniu, gdyż piksele mogą być rozciągane lub stłumione. Warto też zauważyć, że formaty plików, takie jak JPEG, PNG czy BMP, są typowymi formatami dla grafiki rastrowej, gdzie każdy z nich ma swoje zastosowanie i charakterystyki. Przykładowo, JPEG jest idealny do zdjęć ze względu na kompresję stratną, podczas gdy PNG obsługuje przezroczystość. Zrozumienie tego, jak grafika rastrowa działa i jakie są jej ograniczenia, jest kluczowe dla każdego, kto pracuje z obrazem w środowisku cyfrowym.
Pytanie 18

W bazie danych znajdują się dwie tabele, które są ze sobą połączone relacją 1..n. Jakiej klauzuli SQL należy użyć, aby uzyskać odpowiadające sobie dane z obu tabel?

A. AND
B. INNER LINK
C. JOIN
D. OUTER LINK
Klauzula JOIN w SQL służy do łączenia tabel w bazie danych, pozwalając na pobranie powiązanych danych z różnych tabel. W przypadku relacji 1..n, przy której jedna tabela (nazwa tabeli `A`) może mieć wiele powiązanych rekordów w drugiej tabeli (nazwa tabeli `B`), klauzula JOIN jest idealna do uzyskania korespondujących wartości z obu tabel. Przykład zastosowania to: SELECT A.*, B.* FROM A JOIN B ON A.id = B.a_id; W powyższym zapytaniu `A.id` to klucz główny tabeli `A`, a `B.a_id` to klucz obcy w tabeli `B`, który odnosi się do `A`. Klauzula JOIN może przyjmować różne formy, takie jak INNER JOIN, LEFT JOIN, RIGHT JOIN, i FULL JOIN, które różnią się sposobem łączenia danych i wynikami. JOIN jest standardem SQL, co oznacza, że jest wspierany przez większość systemów zarządzania bazami danych, takich jak MySQL, PostgreSQL, Oracle, czy Microsoft SQL Server. Użycie klauzuli JOIN jest kluczowe w relacyjnych bazach danych, gdzie dane są rozdzielone w różnych tabelach, ale muszą być analizowane łącznie.
Pytanie 19

Jaką instrukcję w JavaScript można uznać za równoważną pod względem funkcjonalności do zaprezentowanej?

Ilustracja do pytania
A. Kod 2
B. Kod 4
C. Kod 3
D. Kod 1
Kod 2 jest poprawny, ponieważ struktura instrukcji warunkowych w JavaScript jest równoważna z wyrażeniem switch przedstawionym w pytaniu. Instrukcja switch pozwala na wykonanie jednej z wielu gałęzi kodu w zależności od wartości wyrażenia, w tym przypadku zmiennej 'dzialanie'. Każdy 'case' w switch odpowiada warunkowi 'if' w strukturze if-else if. W Kodzie 2 każda operacja matematyczna, jak dodawanie czy odejmowanie, jest przypisana do odpowiedniego warunku dzięki zastosowaniu if-else if, co dokładnie odwzorowuje zachowanie switch. Jest to zgodne z dobrą praktyką programistyczną, gdzie wybór między switch a if-else if zależy od przejrzystości i liczby porównywanych przypadków. Kod 2 jest bardziej czytelny, co jest ważne w utrzymywaniu i rozwijaniu kodu produkcyjnego. Praktyczne zastosowanie takiej struktury można znaleźć w budowaniu aplikacji, gdzie decyzje podejmowane są na podstawie wielu możliwych wartości zmiennej.
Pytanie 20

Jakie jest zadanie funkcji przedstawionej w języku JavaScript? 

 function fun1(a, b) {
    if (a % 2 != 0) a++;
    for (n = a; n <= b; n+=2)
        document.write(n);
}

A. zwrócenie wartości liczb parzystych od a do b
B. wypisanie liczb parzystych z zakresu od a do b
C. wypisanie wszystkich liczb z zakresu od a do b
D. sprawdzenie, czy liczba a jest nieparzysta; w przypadku potwierdzenia, wypisanie jej
Odpowiedzi takie jak "wypisanie wszystkich liczb z przedziału od a do b" oraz "zwrócenie wartości parzystych liczb od a do b" ilustrują powszechne nieporozumienia dotyczące działania funkcji oraz jej logiki. Funkcja nie wypisuje wszystkich liczb z przedziału, ponieważ jej konstrukcja ogranicza wyniki do liczb parzystych. Odpowiedź ta nie uwzględnia kluczowego kroku w funkcji, polegającego na modyfikacji zmiennej a, co oznacza, że w przypadku nieparzystego a, pierwsza wypisana liczba będzie parzysta. Natomiast odpowiedź sugerująca, że funkcja zwraca wartości parzyste, jest również myląca, ponieważ funkcja nie zwraca wartości (nie używa return), a jedynie wypisuje je na stronie za pomocą document.write(). To może prowadzić do nieporozumień, zwłaszcza w kontekście oczekiwań dotyczących struktury danych. Typowym błędem myślowym jest zakładanie, że pętle for mogą generować wszystkie liczby w danym zakresie, gdy w rzeczywistości sposób ich inkrementacji (w tym przypadku o 2) determinuje, które wartości są ostatecznie wyświetlane. Przykładem na to jest sytuacja, gdy użytkownik nie dostrzega, że pętla zmienia krok zwiększenia i przez to nie uzyskuje pełnej sekwencji liczb. Warto zwrócić uwagę na konwencje programistyczne, takie jak zasady dotyczące wypisywania danych i używania zwrotów, co jest kluczowe dla tworzenia przejrzystego i efektywnego kodu.
Pytanie 21

Zgodnie z zasadami ACID, które odnoszą się do realizacji transakcji, wymóg trwałości (ang. durability) oznacza, że

A. w trakcie wykonywania transakcji dane mogą być zmieniane przez inne transakcje
B. w przypadku naruszenia spójności bazy danych transakcja usuwa tabele z kluczami obcymi
C. dane zatwierdzone przez transakcję powinny być dostępne niezależnie od wydarzeń, które nastąpią po jej zakończeniu
D. transakcja może w pewnych okolicznościach być podzielona na dwa niezależne etapy
Trwałość (czyli durability) w bazach danych to taka cecha, która mówi, że jak już zatwierdzisz transakcję, to wszystkie zmiany zostaną na zawsze w systemie. To znaczy, że niezależnie od tego, co się później wydarzy, jak na przykład awaria, Twoje dane są bezpieczne. To naprawdę ważne, bo pozwala na utrzymanie spójności i pewności, że system działa tak, jak powinien. Weźmy na przykład systemy bankowe. Gdy robisz przelew, musisz być pewien, że pieniądze poszły tam, gdzie miały, nawet jak serwer padnie tuż po zakończeniu transakcji. Dobrze jest mieć też takie mechanizmy, jak zapisywanie dzienników, które pomagają odtworzyć dane, jeśli coś pójdzie nie tak. Trwałość to kluczowa sprawa w projektowaniu baz danych, bo buduje zaufanie użytkowników oraz pozwala spełnić różne normy i regulacje.
Pytanie 22

Jakiego elementu w języku HTML brakuje, aby walidator HTML zgłosił ostrzeżenie lub błąd?

A.
B.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. przynajmniej jednego <h1></span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. <link></span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Element <title> jest kluczowym składnikiem dokumentu HTML, ponieważ określa tytuł strony, który jest wyświetlany na karcie przeglądarki oraz w wynikach wyszukiwania. W każdym poprawnie skonstruowanym dokumencie HTML powinien znajdować się co najmniej jeden element <title>, a jego brak skutkuje ostrzeżeniem lub błędem walidatora HTML. Zgodnie z specyfikacją HTML5, element <title> powinien być umieszczony wewnątrz sekcji <head>. Dobrą praktyką jest, aby tytuł był krótki, ale jednocześnie informacyjny i zawierał istotne słowa kluczowe, co może poprawić widoczność w wyszukiwarkach. Na przykład, tytuł 'Strona Główna - Moja Firma' jasno określa zawartość i cel strony, co jest korzystne dla użytkowników i robotów wyszukiwarek. Pamiętaj, że niepoprawna struktura dokumentu HTML może prowadzić do problemów z indeksowaniem przez wyszukiwarki oraz może wpłynąć na doświadczenie użytkownika. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 23</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="testy-wydajnosciowe-maja-na-celu-sprawdzenie-400f3051" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Celem testów wydajnościowych jest ocena</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-danger bg-opacity-10 border-danger text-danger "> <div class="flex-grow-1"> <span>A. zdolności programu do funkcjonowania w sytuacjach, gdy system działa niepoprawnie</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. zdolności programu do funkcjonowania w sytuacjach, gdy sprzęt działa niepoprawnie</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. ciągu zdarzeń, w którym prawdopodobieństwo danego zdarzenia zależy tylko od wyniku zdarzenia wcześniejszego</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded bg-success bg-opacity-10 text-success "> <div class="flex-grow-1"> <span>D. stopnia, w jakim system lub moduł spełnia wymagania dotyczące wydajności</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-danger mb-0"> Analizując pozostałe odpowiedzi, można zauważyć, że żadna z nich nie odnosi się bezpośrednio do istoty testów wydajnościowych. Pierwsza z nich sugeruje, że testy te mają na celu sprawdzenie zdolności oprogramowania do działania w warunkach wadliwej pracy sprzętu. Chociaż testowanie pod kątem awarii sprzętowych jest istotnym elementem inżynierii oprogramowania, to nie jest to kluczowy aspekt testów wydajnościowych. Testy wydajnościowe koncentrują się na ocenie wydajności, a nie na sprawdzaniu reakcji systemu na uszkodzenia sprzętu. Druga odpowiedź dotyczy zdolności oprogramowania do działania w warunkach wadliwej pracy systemu, co także jest ważnym zagadnieniem w kontekście testowania, lecz nie jest to celem testów wydajnościowych. Testowanie odporności i niezawodności systemu jest częścią testowania funkcjonalnego, a nie wydajnościowego. Z kolei ostatnia z propozycji odnosi się do analizy ciągu zdarzeń, w którym prawdopodobieństwo każdego zdarzenia zależy jedynie od wyniku poprzedniego. To zagadnienie dotyczy bardziej teorii prawdopodobieństwa i statystyki, a nie bezpośrednio wydajności oprogramowania. Testy wydajnościowe skupiają się na mierzeniu i optymalizacji parametrów, a nie na analizie statystycznej zdarzeń w kontekście ich prawdopodobieństwa. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 24</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="w-jezyku-php-nalezy-zapisac-warunek-ktory-bedzie-413aed51" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>W języku PHP stwórz warunek, który będzie prawdziwy, gdy zmienna <pre>$a </pre> będzie jakąkolwiek liczbą całkowitą mniejszą niż -10 lub gdy zmienna <pre>$b </pre> będzie liczbą z zakresu (25, 75). Wyrażenie logiczne w tym warunku powinno mieć postać</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. ($a < -10) and (($b > 25) and ($b < 75))</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>B. ($a < -10) or (($b > 25) and ($b < 75))</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. ($a < -10) or (($b > 25) or ($b < 75))</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. ($a < -10) and (($b > 25) or ($b < 75))</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Wyrażenie logiczne ($a < -10) or (($b > 25) and ($b < 75)) jest poprawne, ponieważ spełnia warunki określone w treści zadania. Warunek ten sprawdza, czy zmienna $a jest mniejsza od -10 lub czy zmienna $b mieści się w przedziale od 25 do 75, co oznacza, że musi być większa niż 25 oraz mniejsza niż 75 jednocześnie. Takie podejście jest zgodne z zasadami logiki i jest typowe w programowaniu w PHP. Praktycznym zastosowaniem tego typu warunków może być filtrowanie danych użytkowników na podstawie wieku lub kwot transakcji, gdzie istotne jest spełnienie kilku kryteriów. Warto również zauważyć, że użycie operatora 'or' w tym przypadku jest kluczowe, gdyż pozwala na spełnienie przynajmniej jednego z warunków, co jest istotne w kontekście przyjmowania danych. Dobre praktyki w programowaniu sugerują, aby zawsze dokładnie definiować warunki logiczne oraz unikać nadmiarowych złożoności, co czyni kod bardziej czytelnym i łatwiejszym w utrzymaniu. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 25</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="w-jezyku-php-wykonujac-operacje-na-bazie-mysql-413c9e38" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>W języku PHP, przy pracy z bazą MySQL, aby zakończyć sesję z bazą, należy wywołać</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. mysqli_exit()</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>B. mysqli_close()</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. mysqli_commit()</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. mysqli_rollback()</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Odpowiedź mysqli_close() jest prawidłowa, ponieważ ta funkcja jest używana do zamknięcia połączenia z bazą danych MySQL w języku PHP. Po zakończeniu wszystkich operacji na bazie danych, zaleca się wywołanie tej funkcji, aby zwolnić zasoby systemowe oraz zamknąć połączenie, co jest zgodne z dobrymi praktykami programistycznymi. Użycie mysqli_close() jest istotne, ponieważ niezamknięte połączenia mogą prowadzić do wycieków pamięci i wyczerpania dostępnych zasobów, co z kolei może wpłynąć na wydajność aplikacji. W praktyce, jeśli mamy otwarte połączenie z bazą danych, po zakończeniu operacji, takich jak pobieranie lub wstawianie danych, używamy mysqli_close($connection), gdzie $connection to nasza zmienna reprezentująca połączenie. Oprócz tego, pamiętajmy, że dbanie o odpowiednie zarządzanie połączeniami ma kluczowe znaczenie dla bezpieczeństwa i stabilności naszych aplikacji. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 26</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="wskaz-zapisany-w-jezyku-javascript-warunek-ktory-62513300" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Wskaż warunek w języku JavaScript, który ma na celu sprawdzenie, czy przynajmniej jeden z poniższych przypadków jest spełniony: 1) dowolna naturalna liczba a jest liczbą trzycyfrową 2) dowolna liczba całkowita b jest liczbą ujemną</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. ((a>99)||(a<1000))&&(b<0)</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. ((a>99)&&(a<1000))&&(b<0)</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded bg-success bg-opacity-10 text-success "> <div class="flex-grow-1"> <span>C. ((a>99)&&(a<1000))||(b<0)</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-danger bg-opacity-10 border-danger text-danger "> <div class="flex-grow-1"> <span>D. ((a>99)||(a<1000))||(b<0)</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-danger mb-0"> Wszystkie pozostałe odpowiedzi zawierają błędy w logice warunków, które prowadzą do niepoprawnych wywołań logicznych. W przypadku pierwszego zapisu ((a>99)||(a<1000))||(b<0) użycie operatora '||' w pierwszej części oznacza, że wystarczy, aby a było większe niż 99 lub mniejsze niż 1000, co w praktyce nigdy nie wyklucza a z zakresu liczb naturalnych, ponieważ wszystkie liczby naturalne (w tym te jedno- i dwu-cyfrowe) spełniają ten warunek. To powoduje, że wynik będzie zawsze prawdziwy, niezależnie od wartości a. Kolejny zapis ((a>99)&&(a<1000))&&(b<0) również jest błędny, ponieważ wymaga, aby obie części były prawdziwe równocześnie. Oznacza to, że zarówno warunek trzycyfrowości liczby a, jak i warunek, że b musi być liczbą ujemną, muszą być spełnione, aby całość była prawdziwa. W sytuacji, gdy a jest liczbą trzycyfrową, ale b jest liczbą dodatnią, wynik będzie fałszywy, co nie spełnia założonych wymagań, które mówią o tym, że wystarczy, aby jeden z przypadków był prawdziwy. Wreszcie, ostatni zapis ((a>99)&&(a<1000))&&(b<0) jest identyczny w swej logice do poprzedniego, jedynie potwierdza, że oba warunki muszą być spełnione jednocześnie, co z kolei ogranicza możliwości otrzymania prawdziwego wyniku. W kontekście programowania i analizy logicznej, kluczowe jest zrozumienie operatorów logicznych oraz ich zastosowanie w konstrukcjach warunkowych, aby uzyskać zamierzony efekt działania. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 27</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="proces-w-ktorym-wykrywa-sie-i-usuwa-bedy-w-kodz-76487b58" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Czynność, w której identyfikuje się i eliminuje błędy w kodzie źródłowym programów, to</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. normalizacja</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. kompilowanie</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. standaryzacja</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>D. debugowanie</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Debugowanie to kluczowy proces w inżynierii oprogramowania, który polega na identyfikacji, lokalizacji oraz usuwaniu błędów (bugów) w kodzie źródłowym. W trakcie debugowania programista używa różnych narzędzi, takich jak debuggery, które pozwalają na analizę działania programu w czasie rzeczywistym. Przykłady takie jak GDB dla systemów Linux czy Visual Studio Debugger dla aplikacji na Windows ilustrują, jak można krok po kroku monitorować zmienne i wykonanie kodu. Proces ten jest niezbędny do zapewnienia wysokiej jakości oprogramowania, a jego znaczenie podkreślają standardy takie jak ISO/IEC 25010, które definiują jakość oprogramowania w kontekście użyteczności, wydajności oraz niezawodności. Debugowanie nie tylko poprawia działanie aplikacji, ale również przyczynia się do lepszego zrozumienia kodu przez programistów, co jest istotne w kontekście przyszłej konserwacji i rozwoju oprogramowania. Właściwe techniki debugowania, takie jak użycie punktów przerwania czy analizowanie stanu stosu, mogą znacząco przyspieszyć proces rozwoju i redukować liczbę wprowadzanego do produkcji kodu z błędami. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 28</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="na-potrzeby-strony-internetowej-przygotowano-graf-0460c6c2" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Dla celu strony internetowej stworzono grafikę rysunek.jpg o wymiarach: szerokość 200 px, wysokość 100 px. Aby zaprezentować tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można użyć znacznika</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. <img src="/rysunek.png"></span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-danger bg-opacity-10 border-danger text-danger "> <div class="flex-grow-1"> <span>B. <img src="/rysunek.png" style="width: 25px; height:50px;"></span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded bg-success bg-opacity-10 text-success "> <div class="flex-grow-1"> <span>C. <img src="/rysunek.png" style="width: 50px"></span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. <img src="/rysunek.png" style="width: 25px; height:25px;"></span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-danger mb-0"> Wybór innych opcji, takich jak <img src="/rysunek.png" style="width: 25px; height:50px;"> czy <img src="/rysunek.png" style="width: 25px; height:25px;"> prowadzi do nieproporcjonalnego wyświetlenia obrazu, co skutkuje jego zniekształceniem. Ustalenie zarówno szerokości, jak i wysokości w stylach CSS sprawia, że obrazek jest zmuszony do dopasowania się do tych wymiarów, co narusza jego naturalne proporcje. To podejście jest niezgodne z zaleceniami dotyczącymi responsywności, które sugerują, aby ograniczać się do jednego wymiaru, co pozwala drugiemu na automatyczne dostosowanie. Typowym błędem jest przyjęcie, że podanie obu wymiarów w pikselach zawsze przyniesie optymalny efekt wizualny, co jest mylące i może prowadzić do złego doświadczenia użytkownika. Zniekształcenie obrazów nie tylko obniża estetykę strony, ale także może wpływać na jej użyteczność oraz SEO. Dobrą praktyką jest również używanie atrybutów 'alt' w znacznikach obrazów, aby poprawić dostępność i SEO, co nie zostało uwzględnione w żadnej z opcji. Warto także zauważyć, że stosowanie odpowiednich formatów obrazów i ich optymalizacja pod względem rozmiaru pliku są kluczowe dla przyspieszenia ładowania strony. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 29</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="w-jezyku-html-zdefiniowano-hiperacze-ze-znakiem-2b880d89" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>W HTML zdefiniowano hiperłącze zawierające znak #. Co się wydarzy po kliknięciu na ten odsyłacz?</p> <figure class="figure mt-3"> <img src="/images/6771.png" class="figure-img img-fluid rounded" alt="Ilustracja do pytania" itemprop="image"> </figure> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. Uruchomi się skrypt o nazwie dane</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. Otworzy się nowa karta przeglądarki o nazwie dane</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded bg-success bg-opacity-10 text-success "> <div class="flex-grow-1"> <span>C. Strona przewinie się do elementu o id równym dane</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-danger bg-opacity-10 border-danger text-danger "> <div class="flex-grow-1"> <span>D. Zostanie wskazany względny adres URL o nazwie dane</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-danger mb-0"> Pierwsza odpowiedź nie jest trafna, bo myśli, że kliknięcie w hiperłącze otworzy nową kartę w przeglądarce. Żeby tak się stało, trzeba użyć atrybutu target="_blank", ale w tym przypadku to nie ma sensu. Druga odpowiedź sugeruje, że kliknięcie wywoła jakiś skrypt, co też jest błędem. Żeby uruchomić skrypt przez <a>, musiałbyś skorzystać z JavaScriptu i użyć onclick, a w przypadku href z # to nie działa. Trzecia odpowiedź wspomina o adresie względnym, co też nie jest właściwe w kontekście znaku # w URL. Adresy względne dotyczą ścieżek związanych z aktualnym URL, a nie nawigacją wewnętrzną do elementów na stronie. To częsty błąd początkujących w tworzeniu stron. Dobrze jest zrozumieć różnice między nawigacją wewnętrzną a zewnętrzną oraz jak to wszystko działa w HTML. Poprawne użycie # jest bardzo ważne, jeśli chcesz, żeby Twój interfejs był przyjazny i dostępny dla użytkowników. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 30</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="wskaz-poprawne-stwierdzenie-dotyczace-przedstawio-d75e650c" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Wskaż właściwe twierdzenie odnoszące się do zaprezentowanego kodu HTML.</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. Lokalizacja pliku jest nieprawidłowa, brak w niej ścieżki bezwzględnej.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. Użytkownik nie będzie miał możliwości kontrolowania odtwarzania wideo.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>C. Kod może nie działać w przeglądarkach, które nie obsługują HTML5.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. Plik animacja.mp4 powinien mieć rozdzielczość 640x480 pikseli, aby był odtwarzany.</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Kod HTML przedstawiony w pytaniu wykorzystuje znacznik <video>, który jest elementem HTML5 pozwalającym na osadzanie filmów w dokumentach internetowych. W kontekście poprawnej odpowiedzi, kluczowym jest zrozumienie, że przeglądarki muszą obsługiwać HTML5, aby mogły w pełni funkcjonować z tym kodem. W przypadku starszych przeglądarek, które nie wspierają HTML5, element <video> może nie być wyświetlany lub nie będzie działał prawidłowo. Dlatego istotne jest, aby deweloperzy testowali swoje aplikacje w różnych środowiskach oraz aby korzystali z odpowiednich polyfilli dla starszych przeglądarek, które mogą poprawić ich funkcjonalność. Przykładowo, użycie biblioteki JavaScript takiej jak Video.js może pomóc w zapewnieniu wsparcia dla elementów wideo w szerszym zakresie przeglądarek. Dbałość o kompatybilność z różnymi wersjami przeglądarek to nie tylko kwestia estetyki, ale również użyteczności i dostępności aplikacji internetowych. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 31</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="fragment-kodu-napisany-w-jezyku-html-zamieszczony-349f1520" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Fragment kodu w języku HTML zawarty w ramce ilustruje zestawienie</p> <figure class="figure mt-3"> <img src="/images/11095.png" class="figure-img img-fluid rounded" alt="Ilustracja do pytania" itemprop="image"> </figure> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. wypunktowaną.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>B. numerowaną.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. skrótów.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. odnośników.</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Kod HTML zawierający znaczniki <ol> oraz <li> tworzy listę numerowaną ponieważ <ol> oznacza ordered list czyli listę uporządkowaną co skutkuje automatycznym numerowaniem każdego elementu w przeglądarkach internetowych. Znaczniki <li> reprezentują pojedyncze elementy listy zapewniając organizację danych w czytelnej formie. Taki sposób przedstawiania informacji jest powszechnie stosowany w tworzeniu dokumentów HTML i stron internetowych gdzie hierarchia i kolejność elementów ma kluczowe znaczenie. Za pomocą CSS można dodatkowo dostosować styl numerowania oraz wizualne aspekty listy co pozwala na większą elastyczność w projektowaniu interfejsu użytkownika. Standardy internetowe takie jak te rekomendowane przez W3C zachęcają do stosowania semantycznych znaczników co poprawia dostępność i SEO strony. Ponadto listy numerowane są użyteczne w sytuacjach gdy wymagana jest jasna kolejność wykonywania zadań lub prezentacja kroków w procesie co czyni je idealnym narzędziem zarówno w dokumentacji technicznej jak i w interaktywnych przewodnikach online. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 32</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="fragment-kodu-napisany-w-jezyku-html-zamieszczony-a4aa97bd" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Zawartość kodu w języku HTML umieszczona w ramce ilustruje zestaw <table style="border: 2px solid black; border-collapse: collapse; margin-bottom: 20px;"> <tr> <td style="border: 1px solid black; padding: 10px; font-family: monospace;"> <ol><br> <li>Pierwszy</li><br> <li>Drugi</li><br> <li>Trzeci</li><br> </ol> </td> </tr> </table></p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. skróconych</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>B. numerowanej</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. linków</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. wypunktowanej</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Fragment kodu HTML używa tagu <ol> co oznacza listę numerowaną. Tag <ol> jest skrótem od ordered list i jest używany do tworzenia listy elementów, które są automatycznie numerowane przez przeglądarkę. Wewnątrz tego tagu znajdują się tagi <li>, które oznaczają poszczególne elementy listy. Każdy z tych elementów będzie wyświetlany z kolejnym numerem w przeglądarce internetowej. Na przykład w przypadku zamieszczonego kodu HTML przeglądarka wyświetli listę z numerami 1 2 3 przed elementami Pierwszy Drugi Trzeci. Listy numerowane są użyteczne w sytuacjach gdy ważna jest kolejność elementów na przykład w instrukcjach krok po kroku lub rankingach. Tworzenie list numerowanych z użyciem <ol> jest zgodne ze standardami HTML i jest dobrym rozwiązaniem gdyż pozwala na łatwe zarządzanie kolejnością elementów bez konieczności ręcznego numerowania co redukuje ryzyko błędów i automatycznie aktualizuje numerację w przypadku dodania bądź usunięcia elementów z listy. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 33</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="podczas-tworzenia-formularza-wymagane-jest-umieszc-3d8bea9c" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Podczas tworzenia formularza konieczne jest dodanie kontrolki, która odnosi się do kontrolki w innym formularzu. Jakie działania w bazie danych Access są w tym przypadku możliwe?</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. możliwe o ile dotyczą danych liczbowych.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-danger bg-opacity-10 border-danger text-danger "> <div class="flex-grow-1"> <span>B. niemożliwe.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded bg-success bg-opacity-10 text-success "> <div class="flex-grow-1"> <span>C. możliwe poprzez określenie ścieżki do kontrolki w atrybucie „Źródło kontrolki”.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. niemożliwe we wszystkich trybach z wyjątkiem trybu projektowania.</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-danger mb-0"> Wiesz co, nie zgadza się z prawdą to, że nie możesz umieścić kontrolki, która odnosi się do innej w innym formularzu. Microsoft Access naprawdę ma sporo możliwości w tym zakresie. Często ludzie myślą, że mogą odnosić się tylko do danych liczbowych w innych formularzach, co jest błędnym założeniem. Access obsługuje wszelkie rodzaje danych – teksty, daty, logiczne. I nie ma takiej zasady, że odwołania są niemożliwe w trybie innym niż projektowy. W rzeczywistości Access potrafi dynamicznie aktualizować źródła danych, co jest ważne w zarządzaniu informacjami. Właściwość „Źródło kontrolki” jest elastyczna, co pozwala na wyciąganie danych z różnych źródeł, a to jest kluczowe w optymalizacji baz danych. Niektórzy błędnie myślą, że formularze muszą być sztywno zbudowane, a tak naprawdę powinny być elastyczne, żeby móc dostosować się do potrzeb użytkowników. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 34</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="przedstawiony-bad-wygenerowany-podczas-interpret-10f2e3b0" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Przedstawiony błąd, który pojawił się podczas interpretacji kodu PHP, może być spowodowany <table style="border: 2px solid black; border-collapse: collapse;"><tr><td style="border: 1px solid black; padding: 10px; font-family: monospace;"><span style="background-color: #fdd; padding: 5px; display: block;">Notice: Trying to access array offset on value of type null in C:\xampp\htdocs\1\biuro.php on line 38</span></td></tr></table></p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>A. próbą odwołania do nieistniejącego elementu tablicy</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. odwołaniem do niezadeklarowanej zmiennej</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. brakiem bazy danych o nazwie podanej w funkcji mysqli_connect</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. niepowodzeniem w wykonaniu kwerendy na bazie danych</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Próba odwołania się do nieistniejącego elementu tablicy w języku PHP jest częstym źródłem błędów. Komunikat błędu wskazuje, że program próbował uzyskać dostęp do wartości w tablicy, która była typu null, czyli nie istniała. Dzieje się tak zazwyczaj, gdy indeks lub klucz, do którego próbujemy się odwołać, nie został wcześniej zainicjalizowany lub zawiera pustą wartość. Aby uniknąć takich błędów, dobrą praktyką jest zawsze sprawdzanie, czy dany indeks istnieje w tablicy przed próbą jego użycia. Można to zrobić za pomocą funkcji isset() lub array_key_exists(). Przykład poprawnego podejścia: jeżeli chcemy uzyskać dostęp do elementu tablicy $tablica['klucz'], najpierw możemy sprawdzić if(isset($tablica['klucz'])). Taka weryfikacja pozwala na unikanie błędów wykonawczych i zapewnia większą stabilność i niezawodność kodu. W kontekście większych aplikacji, gdzie dane są często przetwarzane dynamicznie, takie podejście znacząco zwiększa odporność na błędy, co jest zgodne z dobrymi praktykami programistycznymi. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 35</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="w-jezyku-html-zdefiniowano-odnosnik-do-strony-int-3b50cfb2" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>W kodzie HTML zamieszczono link do strony internetowej: ```<a href="http://google.com">strona Google</a>``` Jakie dodatkowe zmiany należy wprowadzić, aby link otwierał się w nowym oknie lub zakładce przeglądarki, dodając do definicji linku odpowiedni atrybut?</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. ```rel = "external"```</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. ```rel = "next"```</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>C. ```target = "_blank"```</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. ```target = "_parent"```</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Atrybut target w HTML ma na celu określenie, w jaki sposób ma być otwierany odnośnik. Wartość _blank wskazuje przeglądarkę, że nowa strona powinna zostać otwarta w nowym oknie lub zakładce. Jest to istotne dla poprawy użyteczności strony internetowej, gdyż użytkownicy mogą łatwo wrócić do oryginalnej strony po otwarciu nowego linku. W kontekście dobrych praktyk w projektowaniu stron internetowych, otwieranie odnośników w nowym oknie jest zalecane w przypadku linków zewnętrznych, aby użytkownik nie opuścił aktualnej witryny. Przykładem zastosowania jest link do dokumentacji czy zasobów zewnętrznych, gdzie ma to na celu zachowanie kontekstu przeglądania. Stosując ten atrybut, warto jednak pamiętać o tym, aby nie nadużywać go, ponieważ może to być irytujące dla użytkowników, którzy wolą kontrolować, kiedy nowe okno jest otwierane. Warto również pamiętać, że w nowoczesnych standardach HTML5 atrybut target jest często stosowany w połączeniu z atrybutem rel, aby określić, czy link jest zaufany czy nie. Umożliwia to jeszcze lepsze zarządzanie bezpieczeństwem użytkowników. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 36</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="preselect-countcena-from-uslugi-pre-przeds-e6bc3fea" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Zapytanie przedstawione poniżej zwróci wynik: <br><pre style="font-family: monospace; padding: 10px; border: 2px solid #000; display: inline-block;"> SELECT COUNT(cena) FROM uslugi;</pre></p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. suma wartości cen usług w tabeli</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. średnią wartość cen usług w tabeli</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>C. ilość wszystkich cen usług w tabeli</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. wszystkie wartości cenowe usług w tabeli</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Zapytanie SQL, które zostało przedstawione, korzysta z funkcji agregującej COUNT(), która zlicza ilość wierszy w tabeli, w której znajduje się kolumna 'cena'. W kontekście tego zapytania, COUNT(cena) zbiera wszystkie wartości w kolumnie 'cena', co oznacza, że zwróci liczbę wszystkich wierszy, w których wartość kolumny 'cena' nie jest NULL. Jest to istotne, ponieważ w praktycznych zastosowaniach bazy danych często potrzebujemy znać ilość elementów dostępnych w danym zbiorze danych, co ma kluczowe znaczenie przy analizowaniu danych oraz generowaniu raportów. Na przykład, jeśli prowadzisz firmę oferującą różne usługi, takie zapytanie pozwala Ci szybko określić, ile różnych usług posiadasz w swojej ofercie oraz jakie są ich ceny. Dobrą praktyką jest używanie funkcji COUNT() w połączeniu z klauzulą WHERE, aby dokładnie określić, które wiersze mają być zliczane, co pozwala na bardziej precyzyjne analizy. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 37</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="podczas-obrobki-grafiki-rastrowej-w-programie-z-ob-dfe99ff9" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>W trakcie edycji grafiki rastrowej w oprogramowaniu obsługującym kanały, dodanie kanału alfa wskazuje na</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. wyostrzenie krawędzi obrazu</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. zwiększenie głębi ostrości obrazu</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>C. dodanie warstwy z przezroczystością</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>D. ustalenie prawidłowego balansu bieli</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Dodanie kanału alfa w obróbce grafiki rastrowej oznacza wprowadzenie warstwy odpowiedzialnej za przezroczystość obrazu. Kanał alfa rozszerza możliwości tradycyjnych obrazów, które składają się tylko z trzech podstawowych kanałów kolorystycznych: czerwonego, zielonego i niebieskiego (RGB). Dzięki kanałowi alfa, każdy piksel w obrazie może mieć przypisaną wartość przezroczystości, co pozwala na tworzenie efektów takich jak cienie, rozmycia, a także na precyzyjne maskowanie elementów w projekcie. Przykładem zastosowania kanału alfa może być tworzenie grafik do użycia w reklamach czy wideo, gdzie elementy muszą być płynnie nałożone na różnorodne tła. W profesjonalnym oprogramowaniu graficznym, takim jak Adobe Photoshop czy GIMP, dodanie kanału alfa jest standardową praktyką w procesie tworzenia i edycji obrazów. Ponadto, tworząc animacje czy interaktywne projekty multimedialne, kanał alfa pozwala na bardziej elastyczne zarządzanie przezroczystością poszczególnych warstw, co jest kluczowe dla finalnego efektu wizualnego. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 38</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="na-obrazie-przedstawiono-efekt-formatowania-stylam-61700db5" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Na ilustracji ukazano rezultat stylizacji za pomocą CSS oraz kod HTML generujący ten przykład. Zakładając, że marginesy wewnętrzne wynoszą 50 px, a zewnętrzne 20 px, jak wygląda styl CSS dla tego obrazu?</p> <figure class="figure mt-3"> <img src="/images/53629.png" class="figure-img img-fluid rounded" alt="Ilustracja do pytania" itemprop="image"> </figure> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. D.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. A.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. B.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>D. C.</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Poprawna odpowiedź C wskazuje na właściwe zastosowanie właściwości CSS z użyciem solidnego czarnego obramowania o grubości 4 pikseli oraz marginesów wewnętrznych i zewnętrznych. Właściwa konfiguracja stylów CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, co jest kluczowe w tworzeniu responsywnych i estetycznych stron internetowych. Użycie właściwości background-color z wartością Teal pozwala na ustawienie koloru tła, co może być istotne dla zachowania spójności wizualnej projektu. Padding ustawia wewnętrzne marginesy elementu umożliwiając kontrolę nad przestrzenią wokół zawartości, co może wpływać na czytelność i estetykę. Margins z kolei określają przestrzeń zewnętrzną oddzielając element od innych sąsiednich elementów. Poprawne zrozumienie tych stylów pozwala na efektywne projektowanie UI z myślą o użytkowniku końcowym. Dodatkowo praktyczne zastosowanie solidnych obramowań jest powszechne w podkreślaniu istotnych sekcji wizualnych, co jest zgodne z dobrymi praktykami w projektowaniu stron. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 39</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="w-jezyku-zapytan-sql-aby-dodac-do-tabeli-towar-k-e1ff1301" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>W SQL, aby dodać kolumnę rozmiar typu znakowego o maksymalnej długości 20 znaków do tabeli Towar, należy wykonać następujące polecenie</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded bg-success bg-opacity-10 text-success "> <div class="flex-grow-1"> <span>A. ALTER TABLE Towar ADD rozmiar varchar(20)</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. ALTER TABLE Towar DROP COLUMN rozmiar varchar(20)</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. ALTER TABLE Towar ALTER COLUMN rozmiar varchar(20)</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-danger bg-opacity-10 border-danger text-danger "> <div class="flex-grow-1"> <span>D. ALTER TABLE Towar CREATE COLUMN rozmiar varchar(20)</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-danger mb-0"> Osoby, które wybrały niepoprawne odpowiedzi, mogły zauważyć, że polecenie ALTER TABLE jest używane do modyfikacji struktury tabeli, jednak niektóre z podanych opcji są niewłaściwe w kontekście dodawania kolumny. Przykładowo, użycie DROP COLUMN jest błędne, ponieważ służy ono do usuwania kolumny z tabeli, a nie jej dodawania. Implementacja DROP COLUMN nie jest zgodna z intuicyjnym zrozumieniem modyfikacji tabeli, ponieważ wprowadza chaos w danych, a nie ich rozszerzenie. Kolejna niepoprawna odpowiedź sugeruje użycie ALTER COLUMN, co jest również mylące, ponieważ to polecenie jest przeznaczone do modyfikacji istniejącej kolumny, a nie do dodawania nowej. Modyfikacja kolumny wymaga zdefiniowania jej typu lub atrybutów, co nie jest zgodne z koncepcją dodawania nowego elementu do tabeli. Ostatnia odpowiedź, która sugeruje polecenie CREATE COLUMN, jest niewłaściwa, ponieważ polecenie CREATE nie jest częścią standardowej składni SQL w kontekście zmiany struktury istniejącej tabeli. CREATE jest używane do tworzenia nowych tabel, indeksów, lub innych obiektów w bazie danych, a nie do dodawania kolumn do już istniejących tabel. W związku z tym, wszystkie wymienione odpowiedzi są błędne, ponieważ nie stosują właściwej składni SQL ani nie odzwierciedlają poprawnych operacji na tabelach. </div> </div> </article> <hr class="my-4"> <article class="mb-4"> <!-- Pytanie --> <div class="mb-3"> <div class="d-flex justify-content-between align-items-start mb-3"> <h6 class="mb-0">Pytanie 40</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="znacznik-meta-jezyka-html-nalezy-umiescic-03890bc2" aria-label="Zgłoś błąd"> <i class="fas fa-exclamation-triangle"></i> </button> </div> </div> <!-- Wyświetl pełną treść pytania dla widocznych pytań --> <p>Gdzie powinien być umieszczony znacznik meta w języku HTML?</p> </div> <!-- Odpowiedzi --> <div class="mb-3"> <!-- Wyświetl odpowiedzi dla widocznych pytań --> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>A. w dolnej części witryny internetowej.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>B. w obrębie znaczników paragrafu.</span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-1 border-secondary "> <div class="flex-grow-1"> <span>C. w obrębie znaczników <body> ... </body></span> </div> </div> </div> <div class="mb-3"> <div class="d-flex align-items-start p-2 rounded border border-2 bg-success bg-opacity-10 border-success text-success "> <div class="flex-grow-1"> <span>D. w sekcji nagłówkowej strony.</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Znacznik meta języka HTML jest kluczowym elementem, który powinien znajdować się w sekcji nagłówkowej witryny, oznaczonej znacznikami <head> ... </head>. Znaczniki meta dostarczają przeglądarkom oraz wyszukiwarkom internetowym informacji o stronie, takich jak jej opis, słowa kluczowe, a także informacje dotyczące kodowania czy autorstwa. Przykładowo, znacznik <meta charset="UTF-8"> informuje przeglądarkę o używanym kodowaniu znaków, co jest istotne dla prawidłowego wyświetlania tekstu w różnych językach. Dodatkowo, metadane takie jak <meta name="description" content="Opis strony"> są często wykorzystywane przez wyszukiwarki do generowania opisów w wynikach wyszukiwania, co może wpłynąć na wskaźnik klikalności (CTR) w SERP. Warto również dodać, że znaczniki meta mogą być używane do definiowania polityki prywatności i zabezpieczeń, na przykład poprzez <meta http-equiv="X-UA-Compatible" content="IE=edge">. Użycie odpowiednich metadanych w nagłówku jest zatem kluczowe dla optymalizacji SEO oraz zapewnienia odpowiedniej interakcji użytkowników z witryną. </div> </div> </article> <!-- Przyciski nawigacyjne --> <div class="d-grid gap-2 mt-4"> <div class="d-inline-block mb-2"> <a href="/egzamin/?profession=technik-programista&qualification=inf-03" class="btn btn-outline-primary"> <i class="fas fa-redo me-2"></i>Rozpocznij nowy egzamin </a> </div> <div class="d-inline-block"> <a href="/" class="btn btn-outline-secondary"> <i class="fas fa-home me-2"></i>Powrót do strony głównej </a> </div> </div> </div> </div> </div> </main> <!-- Footer --> <footer class="footer mt-auto py-4"> <div class="container"> <div class="row"> <!-- About Section --> <div class="col-lg-4 footer-section"> <h2 class="h5">O Egzaminach Zawodowych</h2> <p> Portal z kompleksową bazą pytań egzaminacyjnych dla uczniów szkół technicznych. Przygotuj się do egzaminu zawodowego z naszymi materiałami. </p> </div> <!-- FRAGMENT CACHE: Random Qualifications --> <div class="col-lg-4 footer-section"> <h2 class="h5">Losowe kwalifikacje</h2> <div class="row"> <div class="col-6"> <a href="/technik-papiernictwa/DRM.07/" class="footer-link"> <span>DRM.07</span> <small class="text-muted">(177)</small> </a> </div> <div class="col-6"> <a href="/technik-drog-kolejowych-i-obiektow-inzynieryjnych/TKO.03/" class="footer-link"> <span>TKO.03</span> <small class="text-muted">(230)</small> </a> </div> <div class="col-6"> <a href="/technik-handlowiec/HAN.01/" class="footer-link"> <span>HAN.01</span> <small class="text-muted">(1 127)</small> </a> </div> <div class="col-6"> <a href="/technik-usug-fryzjerskich/FRK.01/" class="footer-link"> <span>FRK.01</span> <small class="text-muted">(1 485)</small> </a> </div> <div class="col-6"> <a href="/technik-reklamy/PGF.07/" class="footer-link"> <span>PGF.07</span> <small class="text-muted">(137)</small> </a> </div> <div class="col-6"> <a href="/technik-spedytor/SPL.05/" class="footer-link"> <span>SPL.05</span> <small class="text-muted">(868)</small> </a> </div> <div class="col-6"> <a href="/technik-grafiki-i-poligrafii-cyfrowej/PGF.04/" class="footer-link"> <span>PGF.04</span> <small class="text-muted">(738)</small> </a> </div> <div class="col-6"> <a href="/technik-informatyk/INF.03/" class="footer-link"> <span>INF.03</span> <small class="text-muted">(2 426)</small> </a> </div> <div class="col-6"> <a href="/technik-elektroenergetyk-transportu-szynowego/TKO.06/" class="footer-link"> <span>TKO.06</span> <small class="text-muted">(47)</small> </a> </div> <div class="col-6"> <a href="/technik-eksploatacji-portow-i-terminali/SPL.03/" class="footer-link"> <span>SPL.03</span> <small class="text-muted">(289)</small> </a> </div> </div> </div> <!-- Additional Info --> <div class="col-lg-4 footer-section"> <h2 class="h5">O portalu</h2> <p> Baza pytań do egzaminów zawodowych dla uczniów szkół technicznych i branżowych. Materiały zgodne z wymaganiami CKE. </p> </div> </div> <!-- Copyright & Links --> <hr class="footer-divider"> <div class="row align-items-center"> <div class="col-md-8 text-center text-md-start"> <p class="mb-0">© 2025 <a href="https://brylka.net" class="footer-link" aria-label="brylka.net">brylka.net</a> | <a href="/about-me/" class="footer-link" aria-label="O mnie i zawodowe.edu.pl">Bartosz Bryniarski</a></p> </div> <div class="col-md-4 text-center text-md-end"> <!-- <a href="/sitemap.xml" class="footer-link" aria-label="Mapa strony"> <i class="fas fa-sitemap" aria-hidden="true"></i> <span>Mapa strony</span> </a> --> </div> </div> </div> </footer> <!-- Back to top button --> <button id="backToTop" class="btn btn-outline-primary back-to-top" aria-label="Przewiń do góry strony" style="display: none;"> <i class="fas fa-arrow-up" aria-hidden="true"></i> </button> <!-- Cookie Banner --> <div id="cookieConsent" class="position-fixed start-0 bottom-0 py-3 shadow rounded-end" style="display: none; z-index: 1050; max-width: 50%; background-color: rgba(248, 249, 250, 0.95);"> <div class="container-fluid px-4"> <div class="d-flex flex-column gap-2"> <div> <i class="fas fa-cookie-bite me-2 text-secondary" aria-hidden="true"></i> <span class="small"> Strona wykorzystuje pliki cookies do poprawy doświadczenia użytkownika oraz analizy ruchu. <a href="#" class="footer-link" id="cookieDetails" data-bs-toggle="modal" data-bs-target="#cookieModal"> Szczegóły </a> </span> </div> <div class="d-flex gap-2 justify-content-end"> <button id="cookieAccept" class="btn btn-outline-primary btn-sm">Akceptuję</button> <button id="cookieReject" class="btn btn-outline-secondary btn-sm">Odrzuć</button> </div> </div> </div> </div> <!-- Modal z informacjami o cookies --> <div class="modal fade" id="cookieModal" tabindex="-1" aria-labelledby="cookieModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h2 class="modal-title fs-5" id="cookieModalLabel">Polityka plików cookies</h2> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button> </div> <div class="modal-body"> <h6 class="fw-bold">Czym są pliki cookies?</h6> <p> Cookies to małe pliki tekstowe, które są zapisywane na urządzeniu użytkownika podczas przeglądania stron internetowych. Służą one do zapamiętywania preferencji, śledzenia zachowań użytkowników oraz poprawy funkcjonalności serwisu. </p> <h6 class="fw-bold mt-4">Jakie cookies wykorzystujemy?</h6> <ul class="list-unstyled ps-3"> <li><i class="fas fa-check-circle text-success me-2"></i><strong>Niezbędne cookies</strong> - konieczne do prawidłowego działania strony</li> <li><i class="fas fa-check-circle text-success me-2"></i><strong>Funkcjonalne cookies</strong> - umożliwiające zapamiętanie wybranych ustawień (np. wybrany motyw)</li> <li><i class="fas fa-check-circle text-success me-2"></i><strong>Analityczne cookies</strong> - pozwalające zbierać informacje o sposobie korzystania ze strony</li> </ul> <h6 class="fw-bold mt-4">Jak długo przechowujemy cookies?</h6> <p> Pliki cookies wykorzystywane w naszym serwisie mogą być sesyjne (usuwane po zamknięciu przeglądarki) lub stałe (pozostają na urządzeniu przez określony czas). </p> <h6 class="fw-bold mt-4">Jak zarządzać cookies?</h6> <p> Możesz zarządzać ustawieniami plików cookies w swojej przeglądarce internetowej. Większość przeglądarek domyślnie dopuszcza przechowywanie plików cookies, ale możliwe jest również całkowite zablokowanie tych plików lub usunięcie wybranych z nich. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Zamknij</button> <button type="button" class="btn btn-outline-primary" id="acceptCookiesModal">Akceptuję wszystkie</button> </div> </div> </div> </div> <!-- JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" defer></script> <script src="/static/exams/js/code.js" defer></script> <script src="/static/exams/js/report_modal.js" defer></script> <script> document.addEventListener('DOMContentLoaded', function() { // Dodaj obsługę motywów dla banera cookie function updateCookieBannerTheme() { const cookieBanner = document.getElementById('cookieConsent'); const currentTheme = document.body.getAttribute('data-theme'); if (!cookieBanner) return; // Ustaw domyślny jasny styl cookieBanner.style.backgroundColor = 'rgba(248, 249, 250, 0.95)'; cookieBanner.style.color = '#212529'; cookieBanner.classList.remove('border-top', 'border-white'); // Zastosuj style zgodnie z motywem if (currentTheme === 'dark') { cookieBanner.style.backgroundColor = 'rgba(52, 58, 64, 0.95)'; cookieBanner.style.color = '#fff'; } else if (currentTheme === 'high-contrast') { cookieBanner.style.backgroundColor = '#000'; cookieBanner.style.color = '#fff'; cookieBanner.classList.add('border-top', 'border-white'); } } // Sprawdź, czy użytkownik już dokonał wyboru if (!localStorage.getItem('cookieConsent')) { // Jeśli nie, pokaż banner const cookieBanner = document.getElementById('cookieConsent'); if (cookieBanner) { cookieBanner.style.display = 'block'; updateCookieBannerTheme(); // Dostosuj szerokość na małych ekranach function adjustWidth() { if (window.innerWidth < 768) { cookieBanner.style.maxWidth = '100%'; } else { cookieBanner.style.maxWidth = '50%'; } } // Wywołaj przy ładowaniu i przy zmianie rozmiaru okna adjustWidth(); window.addEventListener('resize', adjustWidth); } } // Obsługa zmiany motywu const themeButtons = document.querySelectorAll('.theme-btn'); themeButtons.forEach(btn => { btn.addEventListener('click', function() { setTimeout(updateCookieBannerTheme, 50); }); }); // Obsługa przycisku akceptacji document.getElementById('cookieAccept')?.addEventListener('click', function() { localStorage.setItem('cookieConsent', 'accepted'); document.getElementById('cookieConsent').style.display = 'none'; }); // Obsługa przycisku odrzucenia document.getElementById('cookieReject')?.addEventListener('click', function() { localStorage.setItem('cookieConsent', 'rejected'); document.getElementById('cookieConsent').style.display = 'none'; }); // Obsługa przycisku akceptacji w modalu document.getElementById('acceptCookiesModal')?.addEventListener('click', function() { localStorage.setItem('cookieConsent', 'accepted'); document.getElementById('cookieConsent').style.display = 'none'; // Zamknij modal var cookieModal = bootstrap.Modal.getInstance(document.getElementById('cookieModal')); cookieModal?.hide(); }); }); </script> <!-- Toast messages initialization --> <script> document.addEventListener('DOMContentLoaded', function() { const copyButton = document.getElementById('copy-link-button'); if (copyButton) { copyButton.addEventListener('click', function() { const input = document.getElementById('share-link-input'); input.select(); document.execCommand('copy'); // Zmień tekst przycisku na potwierdzenie const originalText = this.innerHTML; this.innerHTML = '<i class="fas fa-check me-1"></i> Skopiowano!'; // Przywróć oryginalny tekst po 2 sekundach setTimeout(() => { this.innerHTML = originalText; }, 2000); }); } }); </script> </body> </html>