Live Demo: https://oskars24.github.io/Quiz-cards-generator/

Quiz Cards Generator

Description (PL below):

The application allows you to create cards with your own questions for the quiz game, personalize their appearance and generate a pdf file ready for double-sided printing. Works 100% on the browser side.

Used technologies:

• HTML
• CSS
• JavaScript
• pdfmake

How it's working:

1. Download the repository or open https://oskars24.github.io/Quiz-cards-generator/ and go to step 3
2. Run the index.html file
3. Enter the questions in the format given below and click the button "Importuj pytania" (ie. "Import questions"):

['Question No. 1','Answer No. 1'], ['Question No. 2','Answer No. 2'], ...

4. In the next step, make sure that all questions and answers will fit on the card (too long questions will be highlighted in red). Then click "Dalej" (ie. "Next")
5. Adjust the appearance as you like and click "Generuj pdf" (ie. "Generate pdf")

Card personalization:

The application includes an extensive appearance editor. Most card elements can be changed. The preview is generated in the "Canvas" object and the changes appear in real time. However, due to the limitations of pdfmake, the final look may be slightly different. Personalization includes:

• Category arrows (colors, border, glow)
• Card background (color, opacity, rounded corners)
• Card background border (width, color, opacity and others)
• Table background (color, opacity, rounded corners)
• Table background border (width, color, opacity and others)
• Content (text color, table line color)
• Images (left and right logo in back card)

---

Opis:

Aplikacja pozwala stworzyć karty z własnymi pytaniami do quizu, spersonalizować ich wygląd i wygenerować plik pdf gotowy do dwustronnego druku. Działa w 100% po stronie przeglądarki.

Wykorzystane technologie:

• HTML
• CSS
• JavaScript
• pdfmake

Uruchamianie:

1. Pobierz repozytorium lub wejdź na https://oskars24.github.io/Quiz-cards-generator/ i przejdź do kroku 3
2. Uruchom plik index.html
3. Wprowadź pytania w formacie podanym poniżej i kliknij przycisk "Importuj pytania":

['Pytanie nr 1','Odpowiedź nr 1'], ['Pytanie nr 2','Odpowiedź nr 2'], ...

4. W następnym kroku sprawdź czy wszystkie pytania i odpowiedzi zmieszczą się na karcie (zbyt długie pytania zostaną podświetlone na czerwono). Nastepnie kliknij "Dalej"
5. Dopasuj wyglą do swoich potrzeb i kliknij "Generuj pdf".

Persnalizacja kart:

Aplikacja zawiera rozbudowany edytor wyglądu. Zmienić można większość elementów karty. Podgląd generowany jest w obiekcie "Canvas" i zmiany ukazują sięw czasie rzeczyststym. Natomiast ze względu na ograniczenia pdfmake finalny wygląd może się minimalnie różnić. Personalizacja obejmuje między innymi:

• Strzałki kategorii (kolory, obrys, podświetlenie)
• Tło karty (kolor, krycie, zaokrąglenie narożników)
• Obramowanie tła karty (grubość, kolor, krycie i inne)
• Tło tabeli (kolor, krycie, zaokrąglenie narożników)
• Obramowanie tła tabeli (grubość, kolor, krycie i inne)
• Kontent (kolor tekstu, kolor linii tabeli)
• Obrazy (lewe i prawe logo tylnej karty)