Trening egzaminacyjny: część praktyczna

<nav>
  <button id="btn-uczestnik" onclick="pokazKarte('uczestnik')">Uczestnik</button>
  <button id="btn-szkola" onclick="pokazKarte('szkola')">Szkoła</button>
  <button id="btn-kontakt" onclick="pokazKarte('kontakt')">Kontakt</button>
</nav>
<div id="pasek"><div id="postep"></div></div>
<section id="uczestnik" class="karta">
  <label>Imię: <input id="imie"></label>
  <label>Nazwisko: <input id="nazwisko"></label>
</section>
<section id="szkola" class="karta">
  <label>Szkoła: <input id="nazwaSzkoly"></label>
  <label>Klasa: <input id="klasa"></label>
</section>
<section id="kontakt" class="karta">
  <label>E-mail: <input id="email"></label>
  <label><input type="checkbox" id="rodo"> Zgoda na przetwarzanie danych</label>
  <button type="button" onclick="zatwierdz()">Zatwierdź</button>
</section>
<p><small>Wynik „Zatwierdź” pojawia się w konsoli pod podglądem.</small></p>

.karta { display: none; padding: 10px 0; }
#uczestnik { display: block; }
#pasek { width: 300px; height: 20px; background: #ddd; margin: 8px 0; }
#postep { width: 0; height: 20px; background: green; }
nav button { background: white; border: 1px solid #999; padding: 6px 12px; }
input { width: 110px; }

// 1. zakładki – jedna funkcja z parametrem
const NAZWY_KART = ['uczestnik', 'szkola', 'kontakt'];

function pokazKarte(idKarty) {
  for (const nazwa of NAZWY_KART) {
    document.getElementById(nazwa).style.display = 'none';               // ukryj każdą kartę
    document.getElementById('btn-' + nazwa).style.backgroundColor = 'white'; // odznacz każdy przycisk
  }
  document.getElementById(idKarty).style.display = 'block';
  document.getElementById('btn-' + idKarty).style.backgroundColor = 'LightGreen';
}
pokazKarte('uczestnik'); // stan początkowy: pierwszy przycisk podświetlony

// 2. pasek postępu – stan poza funkcją, limit 100
let szerokoscPaska = 0;

function zwiekszPostep() {
  szerokoscPaska = Math.min(szerokoscPaska + 20, 100);
  document.getElementById('postep').style.width = szerokoscPaska + '%';
}

const polaTekstowe = ['imie', 'nazwisko', 'nazwaSzkoly', 'klasa', 'email'];
for (const idPola of polaTekstowe) {
  document.getElementById(idPola).addEventListener('blur', zwiekszPostep);
}

// 3. zatwierdzenie – wynik w konsoli, jak żąda arkusz
function zatwierdz() {
  const imie = document.getElementById('imie').value;
  const nazwisko = document.getElementById('nazwisko').value;
  const szkola = document.getElementById('nazwaSzkoly').value;
  const klasa = document.getElementById('klasa').value;
  const email = document.getElementById('email').value;
  const rodo = document.getElementById('rodo').checked ? 'tak' : 'nie';
  console.log('Zgłoszenie: ' + imie + ' ' + nazwisko + ', ' + szkola + ', kl. ' + klasa + ', ' + email + '; RODO: ' + rodo);
}

<p><label>Plik z projektem (PNG): <input type="file" id="plik" accept="image/png"></label></p>
<p><label>Liczba sztuk: <input type="number" id="sztuki" value="1" min="1"></label>
<label>Format:
  <select id="format">
    <option value="12">A3 – 12 zł</option>
    <option value="20">A2 – 20 zł</option>
    <option value="35">A1 – 35 zł</option>
  </select>
</label>
<label><input type="checkbox" id="laminowanie"> Laminowanie (+3 zł/szt.)</label></p>
<button type="button" onclick="dodajDoKoszyka()">Dodaj do koszyka</button>
<section id="koszyk"><h2>Koszyk</h2><p id="suma">Razem: 0 zł</p></section>

.pozycja { border: 1px solid #ccc; padding: 6px; margin: 6px 0; display: flex; gap: 10px; align-items: center; }
.pozycja p { margin: 0; }
.miniatura { width: 60px; height: 40px; background: #eee; font-size: 11px; }
input[type=number] { width: 50px; }
h2 { font-size: 16px; margin: 8px 0 4px; }

let sumaKoszyka = 0; // stan: suma wszystkich pozycji

function nazwaPlikuBezSciezki(sciezka) {
  // 'C:\fakepath\plakat.png' → 'plakat.png'; pusta wartość → ''
  return sciezka.slice(sciezka.lastIndexOf('\\') + 1);
}

function dodajDoKoszyka() {
  const nazwaPliku = nazwaPlikuBezSciezki(document.getElementById('plik').value);
  const sztuki = parseInt(document.getElementById('sztuki').value);
  const listaFormatow = document.getElementById('format');
  const cenaFormatu = parseFloat(listaFormatow.value);                        // np. 20
  const nazwaFormatu = listaFormatow.options[listaFormatow.selectedIndex].text.slice(0, 2); // 'A2'
  const laminowanie = document.getElementById('laminowanie').checked;

  let cenaSztuki = cenaFormatu;
  if (laminowanie) cenaSztuki += 3;
  const cenaPozycji = sztuki * cenaSztuki;

  // nowy blok pozycji – elementy DOM
  const pozycja = document.createElement('div');
  pozycja.className = 'pozycja';

  const miniatura = document.createElement('img');
  miniatura.src = nazwaPliku;      // plik z folderu strony
  miniatura.alt = nazwaPliku;
  miniatura.className = 'miniatura';

  const opis = document.createElement('p');
  opis.textContent = 'Plik: ' + nazwaPliku + ', format ' + nazwaFormatu + ', ' + sztuki + ' szt.';

  const cena = document.createElement('p');
  cena.textContent = 'Cena: ' + cenaPozycji + ' zł';

  pozycja.appendChild(miniatura);
  pozycja.appendChild(opis);
  pozycja.appendChild(cena);
  document.getElementById('koszyk').appendChild(pozycja); // na końcu koszyka

  sumaKoszyka += cenaPozycji;
  document.getElementById('suma').textContent = 'Razem: ' + sumaKoszyka + ' zł';
}

<div id="miniatury"></div>
<div id="galeria">
  <button id="poprzedni">&lt;</button>
  <img id="duzy" alt="Rower 1">
  <button id="nastepny">&gt;</button>
</div>
<p id="opis">Rower 1 – miejski, 10 zł/h</p>
<p><label>Liczba godzin: <input type="number" id="godziny" value="1" min="1"></label>
<button id="oblicz">Oblicz</button></p>
<p id="koszt"></p>

.miniatura { width: 48px; height: 32px; margin-right: 4px; cursor: pointer; }
#galeria { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#duzy { width: 200px; height: 110px; }
input[type=number] { width: 50px; }
p { margin: 6px 0; }

// Zamiennik plików rowerN.jpg / rowerNd.jpg – na egzaminie wpisujesz nazwy plików.
function obrazek(numer, szer, wys) {
  const kolor = numer <= 3 ? 'SteelBlue' : 'DarkOliveGreen';
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + szer + '" height="' + wys + '">' +
    '<rect width="' + szer + '" height="' + wys + '" fill="' + kolor + '"/>' +
    '<text x="' + szer / 2 + '" y="' + (wys / 2 + 6) + '" font-size="' + wys / 3 + '" fill="white" text-anchor="middle" font-family="system-ui">rower' + numer + '</text></svg>';
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
}
function plikMiniatury(numer) { return obrazek(numer, 48, 32); }   // egzamin: 'rower' + numer + '.jpg'
function plikDuzy(numer) { return obrazek(numer, 200, 110); }      // egzamin: 'rower' + numer + 'd.jpg'

const LICZBA_ROWEROW = 6;
let numerRoweru = 1; // stan: który rower jest wyświetlony

const duzy = document.getElementById('duzy');

function stawka(numer) { return numer <= 3 ? 10 : 16; }
function typRoweru(numer) { return numer <= 3 ? 'miejski' : 'górski'; }

function pokazRower(numer) {
  numerRoweru = numer;
  duzy.src = plikDuzy(numer);
  duzy.alt = 'Rower ' + numer;
  document.getElementById('opis').textContent =
    'Rower ' + numer + ' – ' + typRoweru(numer) + ', ' + stawka(numer) + ' zł/h';
}

// 1. miniatury generowane pętlą
const blokMiniatur = document.getElementById('miniatury');
for (let i = 1; i <= LICZBA_ROWEROW; i++) {
  const miniatura = document.createElement('img');
  miniatura.src = plikMiniatury(i);
  miniatura.alt = 'Rower ' + i;
  miniatura.title = 'Rower ' + i;            // dymek
  miniatura.className = 'miniatura';
  miniatura.addEventListener('click', () => pokazRower(i)); // każda zna swój numer
  blokMiniatur.appendChild(miniatura);
}

// 3. galeria z zawijaniem
document.getElementById('nastepny').addEventListener('click', () => {
  let nowy = numerRoweru + 1;
  if (nowy > LICZBA_ROWEROW) nowy = 1;
  pokazRower(nowy);
});
document.getElementById('poprzedni').addEventListener('click', () => {
  let nowy = numerRoweru - 1;
  if (nowy < 1) nowy = LICZBA_ROWEROW;
  pokazRower(nowy);
});

// 4. obliczenie zależne od stanu
document.getElementById('oblicz').addEventListener('click', () => {
  const godziny = parseInt(document.getElementById('godziny').value);
  const koszt = godziny * stawka(numerRoweru);
  document.getElementById('koszt').textContent =
    'Rower ' + numerRoweru + ', ' + godziny + ' h: ' + koszt + ' zł';
});

pokazRower(1); // stan początkowy zgodny z HTML