Projekt JavaScript — quiz z punktacją i podsumowaniem odpowiedzi

Quiz to dobry projekt końcowy dla początkujących: łączy tablicę obiektów, funkcje, pętlę i instrukcje warunkowe, a efekt jest od razu widoczny. Zanim jednak quiz dostanie przyciski i kolorowe odpowiedzi, warto oddzielić logikę od wyglądu: pytania, sprawdzanie i punktację da się napisać i przetestować bez kodu strony. Na lekcji uczniowie piszą właśnie tę logikę, którą później podłączą do DOM.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej obiekty, funkcje i pętle w JavaScript — na przykład po lekcjach o obiektach i walidacji formularza.

Przygotowanie stanowisk

Potrzebna jest przeglądarka z konsolą (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. W folderze start jest index.html (nie zmieniasz go) oraz app.js z funkcją pokaz, która wypisuje tekst w konsoli i na stronie. Po zapisaniu app.js odśwież stronę. Gotowe rozwiązanie jest w folderze rozwiazanie. Serwer i Node.js nie są wymagane.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• opisać pytanie jako obiekt (treść, odpowiedzi, numer poprawnej) i trzymać pytania w tablicy;
• napisać funkcje sprawdz, podsumuj i ocena;
• obliczyć procent poprawnych odpowiedzi i zaokrąglić go;
• przetestować funkcje na wartościach granicznych progów ocen.

Model danych

Pytanie to obiekt: { tresc: "Ile bitow ma bajt?", odpowiedzi: ["4", "8", "16"], poprawna: 1 }. Pole poprawna zawiera indeks poprawnej odpowiedzi w tablicy odpowiedzi (liczymy od zera, więc 1 to „8”). Wszystkie pytania leżą w tablicy PYTANIA. Odpowiedzi użytkownika zapisujemy jako tablicę wybranych indeksów: [1, 0, 1, 2].

Funkcje

• sprawdz(pytanie, wybor) zwraca true, gdy wybrany indeks zgadza się z poprawna.
• podsumuj(wybory) przechodzi pętlą po pytaniach, liczy punkty, procent (Math.round(punkty / liczba * 100)) i zwraca obiekt { punkty, procent, ocena }.
• ocena(procent) zamienia procent na opis: od 90% „celujaco”, od 70% „dobrze”, od 50% „dostatecznie”, poniżej — „do poprawy”.

Brakujące odpowiedzi (krótsza tablica) dają undefined, które nie jest równe żadnemu indeksowi, więc liczą się jako błędne. Wartości graniczne progów (49, 50, 69, 70, 89, 90) warto sprawdzić osobno — to tam najłatwiej o pomyłkę > zamiast >=.

Podłączenie do strony (przyciski, textContent, zdarzenie click) jest tematem kolejnych zajęć; po oddzieleniu logiki wystarczy wywołać te same funkcje w obsłudze zdarzeń.

Zadania

Zadanie 1. Pytania. Utwórz tablicę czterech pytań i napisz sprawdz. Sprawdź poprawną i błędną odpowiedź na pierwsze pytanie oraz wypisz wszystkie pytania z poprawnymi odpowiedziami.

Zadanie 2. Podsumowanie. Napisz podsumuj(wybory) zwracającą punkty, procent i ocenę. Sprawdź odpowiedzi [1, 0, 1, 2] i [0, 1, 0, 0].

Zadanie 3. Progi ocen. Napisz ocena(procent) i sprawdź wartości 0, 49, 50, 69, 70, 89, 90 i 100. Sprawdź też podsumuj([]) (brak odpowiedzi).

Dla chętnych: dodaj losowe mieszanie kolejności pytań (algorytm Fishera–Yatesa) i sprawdź, czy liczba pytań się nie zmieniła.

Rozwiązanie i wyniki

function pokaz(...czesci) {
  const tekst = czesci.join(" ");
  console.log(tekst);
  document.querySelector("#wynik").textContent += tekst + "\n";
}

const PYTANIA = [
  { tresc: "Ile bitow ma bajt?", odpowiedzi: ["4", "8", "16"], poprawna: 1 },
  { tresc: "Jaki jest wynik 7 // 2 w Pythonie?", odpowiedzi: ["3", "3.5", "4"], poprawna: 0 },
  { tresc: "Ktory znacznik tworzy najwazniejszy naglowek?", odpowiedzi: ["h6", "h1", "header"], poprawna: 1 },
  { tresc: "Co zwraca fetch?", odpowiedzi: ["tekst", "liczbe", "obietnice"], poprawna: 2 }
];

function sprawdz(pytanie, wybor) {
  return pytanie.poprawna === wybor;
}

function ocena(procent) {
  if (procent >= 90) return "celujaco";
  if (procent >= 70) return "dobrze";
  if (procent >= 50) return "dostatecznie";
  return "do poprawy";
}

function podsumuj(wybory) {
  let punkty = 0;
  for (let i = 0; i < PYTANIA.length; i++) {
    if (sprawdz(PYTANIA[i], wybory[i])) {
      punkty++;
    }
  }
  const procent = Math.round(punkty / PYTANIA.length * 100);
  return { punkty, procent, ocena: ocena(procent) };
}

// Zadanie 1
pokaz(sprawdz(PYTANIA[0], 1), sprawdz(PYTANIA[0], 2));
PYTANIA.forEach((p, i) => pokaz((i + 1) + ".", p.tresc, "->", p.odpowiedzi[p.poprawna]));

// Zadanie 2
const wyniki = podsumuj([1, 0, 1, 2]);
pokaz(wyniki.punkty, wyniki.procent + "%", wyniki.ocena);
const slabe = podsumuj([0, 1, 0, 0]);
pokaz(slabe.punkty, slabe.procent + "%", slabe.ocena);

// Zadanie 3
for (const p of [0, 49, 50, 69, 70, 89, 90, 100]) {
  pokaz(p + "%", ocena(p));
}
pokaz(JSON.stringify(podsumuj([])));

Program wypisze:

true false
1. Ile bitow ma bajt? -> 8
2. Jaki jest wynik 7 // 2 w Pythonie? -> 3
3. Ktory znacznik tworzy najwazniejszy naglowek? -> h1
4. Co zwraca fetch? -> obietnice
4 100% celujaco
0 0% do poprawy
0% do poprawy
49% do poprawy
50% dostatecznie
69% dostatecznie
70% dobrze
89% dobrze
90% celujaco
100% celujaco
{"punkty":0,"procent":0,"ocena":"do poprawy"}

Typowe błędy

Pytania kontrolne i punktacja

1. Co przechowuje pole poprawna?
2. Jaką ocenę dostanie wynik 70%?
3. Dlaczego warto oddzielić logikę quizu od wyglądu strony?

Odpowiedzi: Indeks poprawnej odpowiedzi w tablicy odpowiedzi. „dobrze” (próg 70% jest włączony). Bo logikę można wtedy testować bez przeglądarki i podłączyć do dowolnego interfejsu.

Proponowana punktacja (razem 10 punktów): zadanie 1 — pytania jako obiekty 2 pkt, sprawdz 1 pkt, wypisanie wszystkich pytań 1 pkt; zadanie 2 — pętla z punktami 2 pkt, procent i obiekt wyniku 1 pkt; zadanie 3 — ocena z poprawnymi progami 2 pkt, osiem wartości i brak odpowiedzi 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet JavaScript: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to przyciski i wyświetlanie pytań na stronie przez DOM oraz zapisywanie najlepszych wyników w localStorage. Ten materiał domyka dział podstaw JavaScript w kursie JavaScript w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: tablice w MDN oraz Math.round. Zobacz też lekcję o DOM w JavaScript.