W zeszłym tygodniu przeprowadziłam na fanpage’u ankietę dotyczącą tematyki następnego wpisu. Wygrały pomysły na własne projekty w JS. Ruszamy więc na blogu z nową serią pt. JavaScript: Pierwszy projekt.
Na sam początek małe wprowadzenie. Nie chciałam Wam tu wrzucać po prostu listy pomysłów na własne projekty. Chcę podejść do tematu praktycznie. W ramach serii będą ukazywały się tutoriale projektów w JS. To nie będzie nic skomplikowanego, bo celem jest nauka podstaw JavaScriptu. Tutoriale nie są też kompletnymi aplikacjami, ale raczej bazą do dalszej pracy. Zupełnie pominęłam w tym tutorialu stylowanie, bo chciałam skupić się na samej logice, więc możecie popisać się w CSS we własnym zakresie. Przeprowadzę Was przez kolejne kroki tworzenia tej prostej aplikacji, a na sam koniec podrzucę kilka pomysłów, jak można rozwijać ją dalej. Zaczynamy!
Projekt w JS: Quiz
Naszym projektem będzie dzisiaj… prosty quiz! O dziwo nie zaczynamy od listy To do, która przewija się dosłownie wszędzie. Chciałam więc zacząć trochę inaczej. Do rzeczy – stworzymy prosty quiz w JS. Będzie to kilka pytań z wylistowanymi możliwymi odpowiedziami. Użytkownik będzie mógł zaznaczyć odpowiedź dla danego pytania, a następnie na końcu sprawdzić, ile punktów uzyskał. Umożliwimy mu także podejrzenie poprawnych odpowiedzi oraz zresetowanie jego wyborów i zagranie jeszcze raz. Jak już pisałam wcześniej, to będzie tylko wyjście do dalszej pracy, więc projekt, który dziś stworzycie nie jest kompletny i na pewno trzeba będzie nad nim jeszcze trochę popracować.
Jak będzie wyglądała praca z tym tutorialem? Zaraz przeczytacie kolejne punkty, które zbliżą Was do zbudowania szkieletu projektu. Polecam pracować nad swoim projektem według kolejnych punktów. Nie podają one szczegółowych instrukcji, co macie zrobić, ale kierują Was w odpowiednią stronę. To nie jest gotowy przepis, ale wskazówka. Musicie więc sami sporo się nagłówkować, poszukać i posprawdzać różne możliwości. Na samym końcu znajdziecie link do mojego projektu na Codepen, gdzie zobaczycie, jak wygląda moja wersja. Pamiętajcie: ten tutorial to tylko pomysł na ujęcie tematu. To nie jest jedyne dobre rozwiązanie, a raczej przykład, jak można podejść do niektórych zagadnień. Równie dobrze możecie przerwać czytanie teraz i spróbować stworzyć swój quiz Koniecznie podzielcie się swoimi projektami w komentarzu albo podeślijcie mi je na joanna[at]wakeupandcode.pl.
Krok 1: Zastanów się nad logiką
Na samym początku warto pomyśleć, jak ma działać tworzona przez nas aplikacja. Najlepiej w tym momencie wziąć kartkę i rozpisać sobie, jakie akcje ma wykonywać aplikacja, tzn. czego potrzebujemy, by użytkownik mógł wziąć udział w naszym quizie. Zachęcam Was, żebyście teraz wzięli kartkę i rozpisali ogólne działanie. Potem spójrzcie na mój pomysł poniżej.
Ja to ujęłam tak: chcemy mieć pytania i trzy odpowiedzi do wyboru. Po kliknięciu na odpowiedź musimy w jakiś sposób użytkownikowi zakomunikować, iż ją wybrał (np. zmienić kolor klikniętego guzika). Jednocześnie skrypt powinien sprawdzać, czy dany guzik ma odpowiednią klasę w CSS, która pokazuje, czy dana odpowiedź jest poprawna. jeżeli ma taką klasę, należy dodać 1 do liczby punktów. Gdy użytkownik wybierze wszystkie odpowiedzi, musi mieć możliwość sprawdzenia, ile punktów zdobył. Posłuży nam do tego odpowiedni guzik. Następnie potrzeba sekcji, gdzie zobaczymy liczbę punktów. Dobrze, gdyby najpierw była ona ukryta i pokazała się dopiero, gdy użytkownik kliknie na guzik Sprawdzam odpowiedzi. Wtedy powinna pokazać się sekcja z punktami.
Fajnie jest też mieć możliwość sprawdzenia, jakie odpowiedzi były poprawne. Po kliknięciu w odpowiedni guzik poprawne odpowiedzi powinny zmienić kolor. Użytkownik powinien mieć także możliwość zagrania jeszcze raz, więc po kliknięciu w dedykowany guzik sekcja z punktami ma się ukryć, punkty muszą się zresetować, trzeba także ukryć odpowiedzi użytkownika, czyli wrócić do pierwotnego stanu aplikacji. Wszelkie zmiany kolorów, wskazywanie poprawności odpowiedzi itp będę robić dzięki odpowiednich klas w CSS. Będę nadawać te klasy dynamicznie w JS, dzięki czemu od razu będzie widać w aplikacji, czy odpowiedź została wybrana albo jakie odpowiedzi są poprawne.
Krok 2: HTML
Zaczynamy klasycznie, czyli od zbudowania szkieletu naszej aplikacji w HTML. Czego nam potrzeba? Na pewno sekcji, gdzie będą pytania i odpowiedzi oraz sekcji, gdzie znajdą się guziki umożliwiające sprawdzenie ilości punktów, pokazanie odpowiedzi oraz zresetowanie punktów i odpowiedzi. Ja to ujęłam tak: stworzyłam dwie osobne sekcje w HTML. W pierwszej umieściłam pytania, a pod każdym pytaniem 3 guziki z odpowiedziami. Nadałam im odpowiednie klasy (guzik z poprawną odpowiedzią ma klasę correct, żeby potem łatwo było sprawdzić, czy użytkownik dobrze odpowiedział). W kolejnej sekcji z kolei jest miejsce, gdzie będą wyświetlać się punkty oraz guziki Sprawdzam odpowiedzi, Pokaż poprawne odpowiedzi oraz Zagraj jeszcze raz. Możecie od razu ostylować HTML, jeżeli macie ochotę. Ja na razie pominęłam ten krok, bo bardzo chciałam od razu zająć się JS Tutaj znajdziecie moją wersją projektu. Spójrzcie na szkielet zbudowany w HTML.
Krok 3: Ruszamy z JS, czyli zaczynamy od zmiennych
Nadszedł czas na JavaScript. Mamy już szkielet w HTML, teraz musimy zapisać do zmiennych odpowiednie elementy. Stwórzcie zmienne dla wszystkich potrzebnych guzików i sekcji, a następnie przypiszcie do nich odpowiednie elementu DOM. Najlepiej wykorzystać do tego document.querySelector(“nazwa selektora”), a dla wielu elementów document.querySelectorAll(“nazwa selektora”). Pamiętajcie, iż druga opcja zapisuje nam wszystkie elementy danego selektora do tablicy. Gdy będziemy do nich podłączać jakąś akcję, musimy zrobić to używając pętli. Dobrą praktyką jest wypisanie w konsoli każdej zmiennej po zdefiniowaniu jej, żeby widzieć, czy odpowiedni element się do niej przypisał.
Krok 4: Pierwsza funkcja
Gdy mamy zmienne, możemy stworzyć pierwszą funkcję. Będzie to funkcja dodająca punkty. Jakie jest jej zadanie? Musi ona odpalać się za każdym razem, gdy użytkownik wciśnie przycisk z odpowiedzią. jeżeli w HTML guzik z daną odpowiedzią ma klasę wskazującą, iż jest to odpowiedź poprawna, dodajemy do punktów jeden. Na początek stwórzcie zmienną, która będzie kumulowała punkty i ustawcie jej wartość na 0. Następnie napiszcie funkcję, która dodaje punkt, gdy element ma odpowiednią klasę. Kolejny krok to podpięcie tej funkcji na wydarzenie click. Najlepiej użyć tutaj element.addEventListener(“click”, nazwaFunkcji). Podłączamy tę funkcję do wszystkich guzików z odpowiedziami, więc warto użyć tu pętli, by nie przypisywać wydarzenia pojedynczo do każdego guzika. Spójrzcie na mój projekt, jeżeli zupełnie nie wiecie, jak się do tego zabrać.
Krok 5: Jeszcze więcej funkcji!
Tak jest! Potrzeba nam więcej funkcji. Musimy bowiem zadbać, by obsłużone zostały wszystkie akcje, które użytkownik może wykonać. Pozostaje Wam więc do napisania kilka dodatkowych funkcji. Musicie zadbać o to, by:
- po naciśnięciu przycisku Sprawdzam odpowiedzi pokazała się liczba uzyskanych przez użytkownika punktów
- po naciśnięciu przycisku Pokaż poprawne odpowiedzi przyciski z poprawnymi odpowiedziami zmieniły kolor wskazując użytkownikowi, które z nich są poprawne
- po naciśnięciu przycisku Zagraj jeszcze raz zresetowały się punkty, ukryła się sekcja z punktami, zniknęły zaznaczone przez użytkownika odpowiedzi oraz zniknęły zaznaczenia poprawnych odpowiedzi, jeżeli były włączone
To na pewno trochę pracy. Spójrzcie na moje rozwiązania, jeżeli szukacie inspiracji albo gdy utkniecie z jakąś funkcją.
Krok 6: Koduj dalej
Po przejściu powyższych kroków powinniście mieć bardzo prosty quiz z obsłużonymi podstawowymi akcjami. Jednak, jak pewnie już sami widzicie, można tutaj jeszcze dopisać parę rzeczy. Od razu chcę zaznaczyć, iż raz jeszcze, iż to tylko projekt do ćwiczeń. W normalnym życiu bowiem pewnie byśmy skądś pobieramy pytania i odpowiedzi, a tutaj wpisujemy je na stałe. Ale moim zdaniem to świetny sposób, by nauczyć się płynnie poruszać po podstawowych zagadnieniach z JavaScriptu. Co więc możesz dopisać do projektu, jeżeli masz ochotę kodować dalej? Poniżej kilka moich propozycji:
- stylowanie – ja pominęłam stylowanie w tutorialu, ale ten quiz może wyglądać sto razy lepiej;
- możliwość wyboru tylko jednej odpowiedzi dla danego pytania – teraz użytkownik może sobie dowolnie klikać, a fajnie byłoby, gdyby mógł wybrać tylko jedną odpowiedź na dane pytanie; chcemy więc, by wybrana odpowiedź zmieniała się, gdy użytkownik kliknie na inną opcję
- więcej pytań: możesz dopisać więcej pytań i w inny sposób przedstawić odpowiedzi; może pozwolisz użytkownikowi samemu wpisać odpowiedź? Zastanów się, jak wtedy zweryfikować jej poprawność
- pytania w formie slidera – teraz mamy listę pytań, a możemy je pokazać w formie tzw. karuzeli, gdzie użytkownik klika następne pytanie lub poprzednie pytanie – jest tu sporo to napisania, ale to na pewno fajne wyzwanie
- odejmowanie punktów za złe odpowiedzi – możemy za każdą źle zaznaczoną odpowiedź odejmować punkty użytkownikowi, trzeba by wtedy zmodyfikować naszą funkcję zliczającą punkty.
Jak widzicie, można jeszcze wiele zrobić z tym projektem Moje pomysły mają być dla Was inspiracją i pomóc Wam ćwiczyć JS na realnych przykładach. Mam nadzieję, iż uda Wam się zbudować jakieś fajne aplikacje na podstawie tego tutoriala Koniecznie dajcie znać, jak Wam poszło i czy uważacie, iż warto kontynuować serię JavaScript: Pierwszy projekt na blogu! Ja sama mam jeszcze kilka pomysłów na fajne, proste aplikacje, dzięki którym można ćwiczyć podstawowe zagadnienia w JS.
Chcesz się czymś podzielić? O coś zapytać? Napisz komentarz pod postem, maila do mnie na joanna@wakeupandcode.pl, wiadomość na fanpage Wake up and Code albo post w grupie Programuj, dziewczyno!
