Skip to content
Codex13

14. System ankiet i głosowania

This content is not available in your language yet.

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz platformę do tworzenia i rozwiązywania ankiet — użytkownik może tworzyć pytania z opcjami odpowiedzi, zbierać głosy i przeglądać wyniki w postaci pasków procentowych lub wykresów.

Czego się nauczycie?

  • Dynamiczne formularze (dodawanie pytań i opcji)
  • Obliczenia procentowe i wizualizacja wyników
  • Zapobieganie wielokrotnemu głosowaniu (localStorage)
  • Udostępnianie ankiety przez URL (parametry)
  • Praca zespołowa — jeden robi tworzenie ankiet, drugi głosowanie i wyniki

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Główne funkcjonalności

Dział zatytułowany „Główne funkcjonalności”

  1. Tworzenie ankiety — tytuł, opis, pytania z opcjami odpowiedzi

  2. Głosowanie — wybór odpowiedzi i wysłanie głosu

  3. Wyniki — wizualizacja wyników jako paski postępu z procentami

  4. Lista ankiet — przeglądanie dostępnych ankiet ze statusem (aktywna / zakończona)

  5. Historia głosowania — localStorage zapobiega głosowaniu dwa razy

Struktura danych

Dział zatytułowany „Struktura danych”
{
  "surveys": [
    {
      "id": "survey-001",
      "title": "Jaki jest Twój ulubiony framework JavaScript?",
      "description": "Krótka ankieta dla developerów",
      "active": true,
      "createdAt": "2025-03-01",
      "questions": [
        {
          "id": "q-001",
          "text": "Wybierz framework:",
          "type": "single",
          "options": [
            { "id": "opt-1", "text": "React", "votes": 42 },
            { "id": "opt-2", "text": "Vue", "votes": 18 },
            { "id": "opt-3", "text": "Angular", "votes": 11 }
          ]
        }
      ]
    }
  ]
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Lista predefiniowanych ankiet (3-5 z danych lokalnych)
  • Głosowanie na jedną odpowiedź
  • Wyniki jako paski procentowe
  • Zapis głosu w localStorage (nie można głosować dwa razy)
  • Routing: /, /survey/:id, /survey/:id/results
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Obliczanie procentów wyników

Dział zatytułowany „Obliczanie procentów wyników”
function calculateResults(options) {
  const total = options.reduce((sum, opt) => sum + opt.votes, 0);
  return options.map((opt) => ({
    ...opt,
    percentage: total > 0 ? Math.round((opt.votes / total) * 100) : 0,
  }));
}


function ResultBar({ option, isWinner }) {
  const { text, votes, percentage } = option;
  return (
    <div className={`result-bar ${isWinner ? 'winner' : ''}`}>
      <div className="result-label">
        <span>{text}</span>
        <span>{votes} głosów ({percentage}%)</span>
      </div>
      <div className="bar-track">
        <div
          className="bar-fill"
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
}

Zapobieganie wielokrotnemu głosowaniu

Dział zatytułowany „Zapobieganie wielokrotnemu głosowaniu”
function hasVoted(surveyId) {
  const voted = JSON.parse(localStorage.getItem('voted-surveys') || '[]');
  return voted.includes(surveyId);
}


function markAsVoted(surveyId) {
  const voted = JSON.parse(localStorage.getItem('voted-surveys') || '[]');
  localStorage.setItem('voted-surveys', JSON.stringify([...voted, surveyId]));
}

Zasoby

Dział zatytułowany „Zasoby”
CSS custom properties dla animacji Animowanie szerokości paska wyników.
crypto.randomUUID Generowanie unikalnych ID ankiet.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

System ankiet to doskonały projekt do nauki dynamicznych formularzy — dodawanie pytań i opcji “w locie” jest nietrywialnym problemem React. Zacznijcie od gotowych danych i głosowania, a tworzenie ankiet dodajcie potem. Obliczenia procentowe muszą być odporne na “brak głosów” — podzielenie przez zero to klasyczny błąd!