Jak dodać quiz na swojej stronie?

  • Poziom trudności:

Popularność zyskują te witryny, które potrafią otworzyć się na odwiedzających przygotowując dla nich coś wyjątkowego. Dlatego – o ile ktoś ma czas na dbanie o społeczność gromadzącą się wokół witryny – zawsze zachęcam do otwarcia komentarzy oraz skorzystania z innych dostępnych sposobów na aktywizację czytelników. Jednym z takich sposobów jest przygotowanie quizu.

Zanim rozpoczniesz czytać poniższy materiał zachęcam Cię do przetestowania quizu, który będziesz mógł samodzielnie wykonać. Po jego stworzeniu zaproponuję pewne podrasowanie, ale o tym później.

Znajdziesz poniżej trzy pytania i po pięć odpowiedzi. Tylko jedna odpowiedź jest poprawna. Musisz udzielić odpowiedzi przed przejściem do kolejnego pytania. Nie masz możliwości w tej edycji powrotu do poprzednich pytań. Poprawną odpowiedź poznasz od razu po wybraniu jednej i kliknięciu na przycisk „Sprawdź”. Powodzenia!

Z powodzeniem korzystam na prywatnym blogu z wtyczki, która posiada naprawdę bardzo dużo możliwości w przygotowywaniu zaawansowanego, kilkustopniowego quizu. W poniższym kursie zaprezentuję Ci prezentację najciekawszych funkcjonalności wtyczki, pokażę w jaki sposób poprawić wygląd w nowo stworzonym quizie przy pomocy kodu CSS oraz zaprezentuję kilka rodzajów quizu.

Instalacja wtyczki

Wtyczka z której korzystam nazywa się WP-Pro-Quiz i jest dostępna bezpłatnie w repozytorium wtyczek WordPressa. Instalacja przebiega bezproblemowo, a cała magia zaczyna się po pierwszym włączeniu.

wtyczka-wp-pro-quiz

Przygotowujemy pierwszy quiz

W pierwszej kolejności zostaniemy poproszeni o wprowadzenie danych dotyczących tworzonego quizu. Moje najczęstsze ustawienia znajdziesz w nagraniu poniżej, wspomnę tylko że zostawiam aktywowane następujące opcje:

  • Ukryj tytuł quizu – ustalam sam tytuł w edytorze wizualnym jeśli mam taką potrzebę
  • Ukryj przycisk „Restartuj quiz” – nic bardziej nie bulwersuje jak przypadkiem wciśnięty przycisk resetu
  • Ukryj przycisk „Widok pytań”
  • Statystyki (blokadę IP w statystykach zostawiam na 1440 minut)
  • Pokaż punkty
  • Tryb Quizu – Sprawdź -> kontynuuj

Nie zapomnij wpisać opis quizu. Jest to pole obowiązkowe.

ustawienia-quizu

Wtyczka WP-Pro-Quiz oferuje cztery tryby quizu. Zastanów się czy Twoi czytelnicy będą chcieli sprawdzać poprawne odpowiedzi po każdym pytaniu (Sprawdź -> kontynuuj), sprawdzać je po zakończeniu quizu (Normalny), a może będą chcieli wracać do poprzednich pytań aby na nowo się nad nimi zastanowić (Normalny + Przycisk „wróć”)? Jest jeszcze jedna alternatywa, mianowicie wyświetlenie wszystkich pytań jedno pod drugim na jednej stronie (nie polecam kiedy quiz jest dłuższy niż 10 pytań bo tego typu rozwiązanie może odstraszyć czytelników).

Po wprowadzeniu najpotrzebniejszych ustawień czas przejść do znacznie przyjemniejszej części czyli wymyślania pytań i odpowiedzi do Twojego quizu.

Poniżej pokazuję jak dodać pojedyncze pytanie w trybie pojedynczego wyboru (jedna odpowiedź jest prawidłowa).

dodaj-nowe-pytanie

Aby dodać wszystkie pytania należy powtórzyć powyższą czynność tyle razy ile będzie pytań.

Wtyczka oferuje kilka typów odpowiedzi:

  • pojedynczy wybór – jedna poprawna odpowiedź
  • wielokrotny wybór – jedna lub więcej poprawnych odpowiedzi
  • „Free” choice – pytanie otwarte
  • Sortowanie – porządkowanie odpowiedzi według określonej kolejności
  • Dopasowywanie – przeciąganie/przypisywanie elementów do określonych kryteriów
  • Puste pole – wstaw właściwe słowo
  • Ocena – skala liczbowa albo w formie liter

Publikujemy wpis z quizem

Skoro masz już komplet pytań, teraz wystarczy przejść do sekcji WP-Pro-Quiz -> WP-Pro-Quiz i znaleźć shortcode dla quizu, który chcesz opublikować. Po jego skopiowaniu wystarczy że przejdziesz do trybu tekstowego wpisu lub strony, wkleisz shortcode i zaktualizujesz wpis.

Poniżej przedstawiam także jak wygląda wykonany przeze mnie na potrzebę tego kursu quiz. Mi nie poszło z odpowiedziami za dobrze ale myślę że bez problemu sobie poradzisz.

Dodatkowe modyfikacje

Ponieważ przycisk do rozpoczęcia quizu jest najsłabszym ogniwem całej wtyczki, dlatego postanowiłem wprowadzić kilka modyfikacji. Aby je wprowadzić musisz wejść do sekcji Wygląd -> Edytor i edytować plik style.css. Wklejenie poniższego fragmentu kodu:

.wpProQuiz_button, .wpProQuiz_button:hover {
    margin: 0 auto!important;    
    display: block;
    padding: 5px 25px!important;
    box-shadow: none!important;
    border: none!important;
    cursor: pointer!important; 
    background: #ca3436!important;
}

sprawi, że przycisk będzie wyglądał nie tak:

rozpocznij-quiz

a tak:

rozpocznij-quiz2

Prawda, że wygląda nieco lepiej? Oczywiście kolor może być inny, możesz o nim zadecydować wybierając inny kod HEX w linii 8. W wyborze może Ci pomóc Color Picker od Google.

Warto eksperymentować

Oprócz prostych zmian o których wspominałem w poprzednim akapicie zachęcam do testowania ustawień i sprawdzania dostępnych opcji. Gorąco polecam także opcję Statystyki, która pozwoli Ci stwierdzić czy przygotowany quiz jest wystarczająco trudny.

UDOSTĘPNIJ