A. znacznik</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. znacznik <charset></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. atrybut znacznika <p></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. atrybut znacznika <meta></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ź to atrybut znacznika <meta>, który pozwala na określenie kodowania znaków w dokumencie HTML. Użycie znacznika <meta> w sekcji <head> dokumentu jest standardową praktyką, aby zapewnić prawidłowe wyświetlanie polskich znaków, takich jak ą, ć, ę, ł, ń, ó, ś, ź, ż. Przykładowa linia kodu, która definiuje kodowanie UTF-8, wygląda następująco: <meta charset="UTF-8">. Kodowanie UTF-8 jest zalecane, ponieważ obsługuje wszystkie znaki w standardzie Unicode, co jest szczególnie ważne w kontekście wielojęzycznych stron internetowych. W praktyce, jeśli nie zdefiniujemy odpowiedniego kodowania, przeglądarki mogą niepoprawnie interpretować znaki, co prowadzi do ich zniekształcenia. Zgodnie z W3C, przypisywanie kodowania w metadanych jest kluczowe dla zapewnienia dostępności oraz poprawności wyświetlania treści, co w konsekwencji wpływa na doświadczenia użytkowników przeglądających strony internetowe. </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="wskaz-poprawna-zasade-dotyczaca-spojnosci-danych-w-1f81e7b7" 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ściwą zasadę związaną z integralnością danych w bazie danych?</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 relacji 1..n pole klucza obcego łączy się z polem klucza obcego innej 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. pole klucza podstawowego musi mieć utworzony indeks</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. pole klucza obcego nie może być puste</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. pole klucza podstawowego nie może pozostawać puste</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Pole klucza podstawowego, definiujące unikalność wierszy w tabeli, nie może być puste. Jest to fundamentalna zasada normalizacji baz danych, która zapewnia integralność danych oraz ich jednoznaczność. W praktyce oznacza to, że każda tabela w relacyjnej bazie danych musi mieć przynajmniej jeden klucz podstawowy, który nie dopuszcza do pojawienia się dwóch identycznych rekordów. Na przykład, w bazie danych klientów, numer identyfikacyjny klienta (np. PESEL lub ID) powinien być kluczem podstawowym. Dzięki temu można jednoznacznie identyfikować każdy rekord, co jest kluczowe dla operacji takich jak aktualizacja lub usunięcie danych. Dobrą praktyką jest także zapewnienie, aby klucz podstawowy był prosty w użyciu, zrozumiały dla użytkowników oraz, w miarę możliwości, niemożliwy do zmiany, co zmniejsza ryzyko błędów przy zarządzaniu danymi. Dodatkowo, klucz podstawowy powinien być indeksowany, co przyspiesza operacje wyszukiwania, ale jego podstawową cechą pozostaje unikalność i obowiązek posiadania wartości. </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="dla-przedstawionego-fragmentu-kodu-walidator-html-5ced383b" 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 przypadku przedstawionego fragmentu kodu walidator HTML zgłosi błąd, ponieważ <table style="border: 2px solid black; border-collapse: collapse; margin-bottom: 20px;"> <tr> <td style="border: 1px solid black; padding: 10px; font-family: monospace;"> <img src="kwiat.jpg alt="kwiat"> </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. wprowadzono nieznany atrybut alt</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żyto niewłaściwego znacznika do wyświetlenia 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. nie zamknięto cudzysłowu</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. nie odnaleziono pliku kwiat.jpg</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ź to nie domknięto cudzysłowu ponieważ w kodzie HTML atrybuty muszą być poprawnie zamknięte aby poprawnie interpretować ich wartości. W przedstawionym fragmencie kodu dla znacznika img brakuje końcowego cudzysłowu po wartości src co stanowi błąd składniowy. Tego typu błędy mogą prowadzić do nieprawidłowego działania strony ponieważ przeglądarka nie jest w stanie jednoznacznie określić końca wartości atrybutu co może skutkować nieprawidłowym renderowaniem danych. Zgodnie z najlepszymi praktykami każde otwarte cudzysłowie powinno być zamknięte aby zapewnić poprawną interpretację kodu. Ponadto stosowanie poprawnego zamykania cudzysłowów zwiększa czytelność kodu co jest istotne przy współpracy zespołowej i ułatwia jego utrzymanie. Warto także korzystać z walidatorów HTML które automatycznie wykrywają takie błędy pomagając w ich szybkim usunięciu. Tego rodzaju narzędzia są kluczowe w procesie tworzenia stron internetowych ponieważ umożliwiają weryfikację zgodności kodu z obowiązującymi standardami co ma bezpośredni wpływ na jego wydajność i kompatybilność z różnymi przeglądarkami. </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="aby-przy-pomocy-zapytania-sql-zmodyfikowac-strukt-02072dc8" 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>Aby zmienić strukturę już istniejącej tabeli przy użyciu zapytania SQL, należy użyć kwerendy</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. ALTER TABLE</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. UPDATE</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. CREATE TABLE</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. INSERT INTO</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Odpowiedź 'ALTER TABLE' jest poprawna, ponieważ ta kwerenda jest używana do modyfikacji struktury istniejącej tabeli w bazach danych SQL. Dzięki komendzie ALTER TABLE można dodawać nowe kolumny, usuwać istniejące kolumny, zmieniać typy danych kolumn, a także modyfikować ograniczenia (constraints) dotyczące tabeli. Dla przykładu, aby dodać nową kolumnę 'wiek' do tabeli 'pracownicy', można użyć następującej kwerendy: 'ALTER TABLE pracownicy ADD wiek INT;'. Warto również wspomnieć, że ALTER TABLE może być używane w różnych systemach zarządzania bazami danych, takich jak MySQL, PostgreSQL czy SQL Server, co czyni go uniwersalnym narzędziem w pracy z bazami danych. Podczas modyfikacji tabeli należy jednak zachować ostrożność, aby nie wprowadzić niezgodności w aplikacjach korzystających z tej tabeli. Praktyką zalecaną jest wykonywanie kopii zapasowej danych przed wprowadzeniem większych zmian. Zrozumienie tej komendy i jej zastosowania jest kluczowe dla efektywnego zarządzania danymi w systemach bazodanowych. </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="w-jezyku-javascript-zapisano-kod-ktorego-wynikiem-17e9d2c1" 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 JavaScript zapisano kod, którego wynikiem działania jest <table style="border: 2px solid black; border-collapse: collapse; margin-bottom: 20px;"> <tr> <td style="border: 1px solid black; padding: 10px; font-family: monospace;"> var osoba = prompt("Podaj imię", "Adam"); </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. wyświetlenie okna z pustym polem edycyjnym.</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. pobranie z formularza wyświetlonego na stronie HTML imienia "Adam".</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. wyświetlenie okna z polem edycyjnym, w którym jest wpisany domyślny tekst "Adam".</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. bezpośrednie wpisanie do zmiennej osoba wartości "Adam".</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Twoja odpowiedź jest poprawna. W JavaScript metoda prompt() służy do wyświetlenia okna dialogowego z polem tekstowym dla użytkownika. Pierwszy argument metody to wiadomość, która jest wyświetlana w oknie dialogowym, natomiast drugi argument to domyślna wartość, jaka jest wpisana w polu tekstowym. W przypadku podanego kodu, drugi argument to 'Adam', co oznacza, że w polu edycyjnym domyślnie będzie wpisany tekst 'Adam'. Metoda ta jest często stosowana do zbierania od użytkownika informacji w prosty i szybki sposób. Pamiętaj jednak, że nie jest to bezpieczny sposób przekazywania danych, ponieważ informacje wpisane przez użytkownika mogą być łatwo przechwycone przez nieautoryzowane osoby. </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="kolor-zapisany-kodem-heksadecymalnym-1510fe-w-k-37e3835a" 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>Jaką wartość w systemie RGB uzyskamy dla koloru zapisanego w kodzie heksadecymalnym: #1510FE?</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. rgb(21,16,FE)</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. rgb(15,10,FE)</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. rgb(21,16,254)</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. rgb(21,16,255)</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Odpowiedź rgb(21,16,254) jest poprawna, ponieważ kolor zapisany w systemie heksadecymalnym #1510FE można rozłożyć na składowe RGB. W kodzie heksadecymalnym każdy z trzech kolorów (czerwony, zielony, niebieski) jest reprezentowany przez dwie cyfry. W przypadku #1510FE, pierwsze dwie cyfry (15) odnoszą się do wartości czerwonej, drugie dwie (10) do wartości zielonej, a ostatnie dwie (FE) do wartości niebieskiej. Te wartości musimy przeliczyć na system dziesiętny: czerwony to 21 (15 w systemie szesnastkowym to 21 w dziesiętnym), zielony to 16 (10 w szesnastkowym to 16 w dziesiętnym), a niebieski to 254 (FE w szesnastkowym to 254 w dziesiętnym). Tak więc końcowy wynik to rgb(21,16,254). W praktyce, znajomość konwersji kolorów jest kluczowa w projektowaniu graficznym, stron internetowych oraz aplikacji, gdzie precyzyjne odwzorowanie kolorów jest niezbędne dla uzyskania poprawnej estetyki i spójności wizualnej. Warto zaznaczyć, że standardy takie jak sRGB są powszechnie stosowane do definiowania kolorów w cyfrowych mediach, co zapewnia zgodność i przewidywalność w różnych urządzeniach wyświetlających te kolory. </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="w-jezyku-html-semantycznym-odpowiednikiem-znacznik-def3ddf7" 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 semantycznym HTML odpowiednikiem elementu <b>, który nie tylko pogrubia tekst, ale także wskazuje na jego większe znaczenie, jest</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. <ins></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. <mark></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. <em></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. <strong></span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Znacznik <strong> w HTML semantycznym służy nie tylko do pogrubienia tekstu, ale także do wskazania, że dany fragment ma większe znaczenie w kontekście semantycznym. Zgodnie z zaleceniami W3C, użycie tego znacznika poprawia dostępność treści, ponieważ technologie wspomagające, takie jak czytniki ekranu, interpretują <strong> jako tekst o podwyższonej wadze, co może pomóc w lepszym zrozumieniu struktury dokumentu przez osoby z niepełnosprawnościami. Przykładem zastosowania może być podkreślenie ważnych informacji na stronie, takich jak zasady, ostrzeżenia czy kluczowe dane, które użytkownicy powinni zauważyć. W praktyce, stosowanie elementów semantycznych, takich jak <strong>, zamiast czysto stylistycznych, jest zgodne z zasadami budowania stron przyjaznych dla użytkowników i poprawia SEO, ponieważ wyszukiwarki mogą lepiej analizować kontekst treści. Warto pamiętać, że w przypadku użycia <strong>, nie zmienia to tylko sposobu wyświetlania, ale także wzbogaca znaczenie tekstu w kontekście całej 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 31</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="przekierowanie-301-suzace-przekierowaniu-uzytkow-796113fc" 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>Aby zrealizować przekierowanie 301, które przenosi użytkownika z jednego URL na inny, należy skonfigurować plik serwera Apache zwany</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. conf.php</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. configuration.php</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. apacheConf</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. .htaccess</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Przekierowanie 301 to stałe przekierowanie, które informuje przeglądarki i wyszukiwarki, że zasób został trwale przeniesiony na inny adres URL. Ustawienie takiego przekierowania w pliku .htaccess jest kluczowe dla optymalizacji SEO oraz utrzymania integralności linków. Plik .htaccess, znajdujący się w głównym katalogu serwera Apache, pozwala na konfigurowanie różnych aspektów działania serwera, w tym przekierowań. Przykład zastosowania przekierowania 301 w pliku .htaccess to: "Redirect 301 /stary-adres http://www.example.com/nowy-adres". Istotnym aspektem jest, że przekierowanie 301 przekazuje również wartość SEO z poprzedniego adresu URL na nowy, co pomaga w utrzymaniu pozycji w wynikach wyszukiwania. Warto również zauważyć, że standardy W3C oraz wytyczne Google dotyczące SEO rekomendują używanie przekierowania 301 do przenoszenia treści i eliminowania błędów 404. Dlatego prawidłowe skonfigurowanie .htaccess jest niezbędne dla każdej strony internetowej, która zmienia strukturę URL. </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="jaka-wartosc-zostanie-wypisana-na-standardowym-wyj-376be989" 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>Jaka wartość zostanie wypisana na standardowym wyjściu dla zamieszczonego w ramce fragmentu programu napisanego w języku C++ ? <table style="border: 2px solid black; border-collapse: collapse; margin-bottom: 20px;"> <tr> <td style="border: 1px solid black; padding: 10px; font-family: monospace;"> int obliczenia( int x ){<br> x %= 3;<br> x++;<br> return x;<br> }<br><br> int main( ){<br> std::cout << obliczenia(32);<br> } </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. 2</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. 3</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. 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>D. 32</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Dobra robota! Wybrałeś opcję 3, co oznacza, że zrozumiałeś, jak działają operatorzy w C++. W tym przykładzie mamy funkcję 'obliczenia', która przyjmuje argument 'x' równy 32. W środku tej funkcji wykonuje się operacja modulo (x %= 3), co w praktyce oznacza, że dzielimy 32 przez 3 i zostaje nam reszta, czyli 2. Później dodajemy 1 do 'x' (x++), co daje nam w sumie 3. I to właśnie ta liczba jest zwracana przez funkcję i wypisywana na ekranie przez 'std::cout'. Fajnie jest pamiętać, że '%=' skraca zapis do x = x % 3, a 'x++' to z kolei x = x + 1. Te skróty to codzienność w programowaniu, dlatego warto je znać. No i pamiętaj, że w C++ każda funkcja zwraca wartość przy użyciu 'return', a ta wartość jest potem używana tam, gdzie funkcję wywołujesz. </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="w-jezyku-javascript-poprawnie-nazwana-zmienna-to-0cb0f78c" 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 JavaScript poprawnie zdefiniowana zmienna 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. imię2</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. imie2</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. imię%</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. #imie</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Odpowiedź 'imie2' jest prawidłowa, ponieważ spełnia wszystkie zasady dotyczące nazewnictwa zmiennych w języku JavaScript. Zgodnie z tymi zasadami, nazwy zmiennych mogą zaczynać się od litery (a-z, A-Z), znaku podkreślenia (_) lub znaku dolara ($). Następnie, dozwolone są litery, cyfry (0-9), znaki podkreślenia oraz znaki dolara. Nazwa 'imie2' jest zgodna z tymi zasadami, ponieważ zaczyna się od litery, a następnie zawiera cyfrę, co jest akceptowalne. Przykładowo, dobra praktyka w programowaniu polega na nadawaniu zmiennym nazw związanych z ich przeznaczeniem, na przykład 'userAge' dla wieku użytkownika. Warto pamiętać, że unikanie użycia polskich znaków oraz specjalnych symboli w nazwach zmiennych, takich jak znaki procentu czy hashtagi, zwiększa czytelność i przenośność kodu, szczególnie w międzynarodowych projektach. Dobra praktyka sugeruje również używanie camelCase, co ułatwia identyfikację zmiennych w większych projektach. </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="w-jezyku-php-aby-usunac-spacje-z-poczatku-i-konca-94bb7f27" 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, aby wyeliminować białe znaki na początku i końcu łańcucha znaków, należy zastosować funkcję</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. time( )</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. trim( )</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. sort( )</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. strlen( )</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Funkcja trim() w języku PHP jest kluczowym narzędziem do usuwania zbędnych spacji oraz innych białych znaków z początku i końca ciągu znaków. Jest to istotne, gdyż nieprawidłowe białe znaki mogą prowadzić do błędów w przetwarzaniu danych wejściowych, np. przy porównywaniu czy zapisywaniu do bazy danych. Przykład użycia funkcji trim() może wyglądać następująco: $str = ' Hello World! '; $result = trim($str); echo $result; // Wyświetli 'Hello World!'. Warto zauważyć, że funkcja trim() działa nie tylko na spacji, ale również na tabulatorach i innych znakach białych. Z perspektywy dobrych praktyk, warto stosować trim() przed zapisem danych użytkownika w celu uniknięcia nieprzewidzianych błędów w aplikacji. W kontekście bezpieczeństwa, usuwanie niepotrzebnych spacji pomoże również w walidacji i sanitizacji danych, co jest kluczowe w kontekście ochrony przed atakami typu injection. </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="program-zapisany-w-jezyku-php-ma-za-zadanie-oblicz-ac8c8114" 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>Program napisany w PHP ma na celu obliczenie średniej pozytywnych ocen ucznia w zakresie od 2 do 6.<br> Warunek selekcji ocen w pętli liczącej średnią powinien zawierać wyrażenie logiczne</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. $ocena > 2 and $ocena < 6</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. $ocena > 2 or $ocena < 6</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. $ocena >= 2 or $ocena <= 6</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. $ocena >= 2 and $ocena <= 6</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Wybór odpowiedzi $ocena >= 2 and $ocena <= 6 jest poprawny, ponieważ precyzyjnie określa zakres, w jakim dopuszczalne są oceny ucznia. Operator logiczny 'and' zapewnia, że obie części warunku muszą być spełnione jednocześnie: ocena musi być większa lub równa 2 oraz mniejsza lub równa 6. Taki sposób definiowania zakresu jest zgodny z dobrymi praktykami programowania, gdzie ważne jest, aby warunki logiki były jednoznaczne i precyzyjne. Dla przykładu, w kontekście obliczania średniej, wykorzystanie tego warunku pozwala na uwzględnienie wszystkich ocen, które są zgodne z regulaminem szkoły, co jest kluczowe dla uzyskania dokładnego wyniku. W praktyce, przy implementacji tego typu logiki w PHP, możemy spotkać się z używaniem podobnych zapytań w kontekście przetwarzania danych uczniów, co podkreśla znaczenie poprawnego definiowania warunków w programach. Dodatkowo, stosowanie takich wyrażeń pozwala na łatwe rozbudowywanie kodu, gdyż łatwo można dodawać nowe warunki lub modyfikować istniejące, co wpisuje się w założenia elastyczności i czytelności kodu. </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="baza-danych-fizycznie-umieszczona-na-wiekszej-licz-cde46545" 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>Baza danych, która fizycznie znajduje się na wielu komputerach, lecz logicznie postrzegana jako całość, opiera się na architekturze</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. relacyjną</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. lokalną</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. rozproszoną</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. abstrakcyjną</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Architektura rozproszona baz danych polega na tym, że dane są przechowywane na wielu fizycznych komputerach, które razem tworzą jedną logiczną całość. Taki system umożliwia zwiększenie dostępności, niezawodności oraz wydajności baz danych, co jest szczególnie istotne w dużych organizacjach czy systemach, które wymagają obsługi dużej ilości danych. Przykładem zastosowania architektury rozproszonej może być system zarządzania danymi w chmurze, gdzie dane użytkowników są przechowywane w wielu lokalizacjach geograficznych. Dzięki temu, nawet w przypadku awarii jednego z serwerów, system może dalej funkcjonować, co minimalizuje ryzyko utraty danych. Dodatkowo, architektury rozproszone często korzystają z technologii takich jak replikacja danych, co pozwala na synchronizowanie danych pomiędzy różnymi lokalizacjami. Warto podkreślić, że w kontekście rozwoju technologii SQL i NoSQL, architektura rozproszona zyskuje na znaczeniu, stając się standardem w nowoczesnych rozwiązaniach bazodanowych. </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="ktore-z-zadan-programistycznych-powinno-byc-wykon-197e42e2" 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>Jakie zadania programistyczne należy realizować po stronie serwera?</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. Ukrywanie oraz odkrywanie elementów strony w zależności od bieżącej pozycji kursora</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. Zapisanie danych pobranych z aplikacji internetowej do bazy danych</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. Walidacja danych wpisanych w pole tekstowe w czasie rzeczywistym</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. Zmiana stylu HTML na stronie spowodowana ruchem kursora</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Zapis danych z aplikacji internetowej w bazie to super ważna sprawa. Ogólnie mówiąc, to serwer się tym zajmuje. To on trzyma i zarządza informacjami, które wysyłamy, jak się rejestrujemy czy wypełniamy jakieś formularze. Kiedy użytkownik coś wpisuje, te dane muszą lecieć do serwera, gdzie są przetwarzane i lądować w bazie danych. Przykładowo, w relacyjnych bazach danych, jak MySQL czy PostgreSQL, używa się zapytań SQL do zarządzania tymi danymi, co ułatwia ich późniejsze szukanie. Warto też pamiętać o bezpieczeństwie – serwer musi robić walidację danych, żeby nie dać się nabrać na ataki typu SQL Injection. No i architektura MVC świetnie pokazuje, jak ważne jest miejsce serwera dla danych. Zapis danych to po prostu kluczowy element w działaniu aplikacji webowych. </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="w-jezyku-html-aby-uzyskac-efekt-jak-na-przykadzi-7c3da98c" 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, aby uzyskać rezultat jak w podanym przykładzie, należy użyć struktury `<p><big>Duży tekst</big> zwykły tekst</p>`</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. <p><strike>Duży tekst zwykły tekst</p></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. <p><big>Duży tekst</big> zwykły tekst</p></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. <p><big>Duży tekst</p> zwykły tekst</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. <p><strike>Duży tekst</strike> zwykły tekst</p></span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Odpowiedź <p><big>Duży tekst</big> zwykły tekst</p> jest poprawna, ponieważ wykorzystuje znacznik <big>, który jest zgodny z semantyką HTML i odpowiednio formatuje tekst, zwiększając jego rozmiar. Warto zauważyć, że użycie znacznika <big> jest zgodne z praktykami, które rekomendują wykorzystanie odpowiednich znaczników do modelowania treści w dokumentach HTML. Taki zabieg nie tylko pozwala na lepszą prezentację tekstu, ale także ułatwia dostępność strony, co jest istotne w kontekście WCAG (Web Content Accessibility Guidelines). Przykładem zastosowania może być sytuacja, w której chcemy wyróżnić istotne informacje w tekście, np. nagłówki sekcji lub kluczowe dane. Zastosowanie <big> w tym kontekście zwiększa czytelność oraz zwraca uwagę użytkowników, co jest szczególnie ważne w długich dokumentach. Warto również pamiętać, że stosowanie znaczników odpowiadających ich przeznaczeniu wspiera SEO, gdyż wyszukiwarki lepiej interpretują strukturę treści. Z tego powodu, używanie semantycznych i odpowiednich znaczników, takich jak <big>, jest kluczowe dla tworzenia poprawnych i funkcjonalnych stron 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 39</h6> <div class="d-inline-block"> <button type="button" class="btn btn-sm btn-outline-danger" data-report-question="przedstawiony-fragment-kodu-php-dziaa-poprawnie-46e38693" 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>Czy poniższy kod PHP działa poprawnie, wyświetlając na stronie dane pobrane z bazy danych? Ile pól zostanie zaprezentowanych?<table style="border: 2px solid black; border-collapse: collapse;"><tr><td style="border: 1px solid black; padding: 10px; font-family: monospace;">$ile = mysqli_num_rows($zapytanie);<br>for ($i = 0; $i < $ile; $i++)<br>{<br> $wiersz = mysqli_fetch_row($zapytanie);<br> echo "<p>Klient: $wiersz[0] $wiersz[1], adres: $wiersz[2] </p>";<br>}</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. Z dwóch pól</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. Z trzech pól</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. Z jednego pola</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. Z czterech pól</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Kod PHP wykorzystuje funkcję mysqli_fetch_row aby pobrać dane z bazy danych które są następnie wyświetlane. W funkcji tej każda wiersz z wyników zapytania jest reprezentowany jako tablica indeksowana liczbowo. W zaprezentowanym fragmencie kodu mamy dostęp do trzech indeksów: $wiersz[0] $wiersz[1] oraz $wiersz[2]. Oznacza to że z każdego wiersza wyniku kwerendy pobierane są trzy pola. Kod ten wyświetla dane w formacie paragrafu HTML zawierającego imię i nazwisko klienta oraz jego adres. W praktyce taka konstrukcja jest często wykorzystywana do generowania dynamicznych treści na stronie internetowej. Należy jednak pamiętać o zabezpieczeniach takich jak filtrowanie danych wejściowych aby uniknąć zagrożeń związanych z SQL injection. Warto również rozważyć wykorzystanie bardziej złożonych struktur danych jak tablice asocjacyjne które pozwalają na bardziej czytelne i zrozumiałe odwoływanie się do poszczególnych pól wiersza danych zwłaszcza w przypadku większych projektów. Użycie mysqli_fetch_row jest zgodne z dobrą praktyką jeśli chcemy uzyskać dostęp do danych w sposób sekwencyjny i wydajny </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="ktory-kod-jezyka-html-da-efekt-formatowania-jak-na-c78cc1cb" 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>Który kod HTML spowoduje identyczne formatowanie jak przedstawione na obrazku? <table style="border: 2px solid black; border-collapse: collapse;"><tr><td style="border: 1px solid black; padding: 10px; font-family: monospace;"><table style="border: 2px solid black; border-collapse: collapse;"><tr><td style="border: 1px solid black; padding: 10px; font-family: monospace;"><p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p></td></tr></table><br><ol style="list-style-type: upper-alpha;"><li><p><p>W tym <i>paragrafie zobaczysz sposoby formatowania</i> tekstu w HTML</p></p></li><li><p><p>W tym <b>paragrafie <i>zobaczysz</i> sposoby formatowania</b> tekstu w HTML</p></p></li><li><p><p>W tym <i>paragrafie <b>zobaczysz</b> sposoby formatowania</i> tekstu w HTML</p></p></li><li><p><p>W tym <i>paragrafie </i><b>zobaczysz</b><i> sposoby formatowania</i> tekstu w HTML</p></p></li></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. Odpowiedź 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>B. Odpowiedź C</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. Odpowiedź 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>D. Odpowiedź D</span> </div> </div> </div> </div> <!-- Feedback --> <div class="mt-3"> <!-- Wyświetl feedback dla widocznych pytań --> <div class="alert alert-success mb-0"> Wybór odpowiedzi C jest trafny, bo stosujesz odpowiednie znaczniki HTML, aby osiągnąć zamierzony efekt formatowania. Przykład świetnie pokazuje, jak używać znaczników <i> i <b>, które służą do pochylania i pogrubiania tekstu. Znak <p> to z kolei paragraf, który odseparowuje tekst i zaczyna nową linię. Tutaj znacznik <i> przed słowem 'paragrafie' sprawia, że jest ono kursywą, a <b> wokół 'zobaczysz' wyróżnia go na pogrubionym tle. To takie podstawowe zasady HTML, które pokazują, jak można różne style formatowania łączyć, żeby uczynić treści bardziej estetycznymi i przyjemnymi do czytania. Warto pamiętać o odpowiednim używaniu znaczników, bo to nie tylko poprawia wygląd, ale też dostępność treści, co jest ważne dla osób korzystających z czytników ekranu. Z mojego doświadczenia, im lepiej rozumiesz te zasady, tym łatwiej tworzyć strony, które będą dobrze odbierane przez użytkowników. </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-informatyk&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> <!-- Popular Qualifications --> <div class="col-lg-4 footer-section"> <h2 class="h5">Losowe kwalifikacje</h2> <div class="row"> <div class="col-6"> <a href="/technik-architektury-krajobrazu/OGR.03/" class="footer-link"> <span>OGR.03</span> <small class="text-muted">(919)</small> </a> </div> <div class="col-6"> <a href="/technik-technologii-drewna/DRM.04/" class="footer-link"> <span>DRM.04</span> <small class="text-muted">(332)</small> </a> </div> <div class="col-6"> <a href="/technik-ochrony-srodowiska/CHM.05/" class="footer-link"> <span>CHM.05</span> <small class="text-muted">(934)</small> </a> </div> <div class="col-6"> <a href="/technik-agrobiznesu/ROL.04/" class="footer-link"> <span>ROL.04</span> <small class="text-muted">(1 076)</small> </a> </div> <div class="col-6"> <a href="/zlotnik-jubiler/MEP.05/" class="footer-link"> <span>MEP.05</span> <small class="text-muted">(155)</small> </a> </div> <div class="col-6"> <a href="/technik-przetworstwa-mleczarskiego/SPC.06/" class="footer-link"> <span>SPC.06</span> <small class="text-muted">(69)</small> </a> </div> <div class="col-6"> <a href="/technik-reklamy/PGF.08/" class="footer-link"> <span>PGF.08</span> <small class="text-muted">(1 274)</small> </a> </div> <div class="col-6"> <a href="/technik-ekonomista/EKA.05/" class="footer-link"> <span>EKA.05</span> <small class="text-muted">(830)</small> </a> </div> <div class="col-6"> <a href="/stolarz/DRM.04/" class="footer-link"> <span>DRM.04</span> <small class="text-muted">(332)</small> </a> </div> <div class="col-6"> <a href="/opiekun-w-domu-pomocy-spoecznej/SPO.03/" class="footer-link"> <span>SPO.03</span> <small class="text-muted">(363)</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>