Projekt ten ma za zadanie pomóc w nauce pytań zamkniętych, a także wzbogacić moją wiedzę z poznawanego ostatnim czasem frameworka VueJS. Aplikacja powstała dla mojej dziewczyny, aby ułatwić jej naukę podczas sesji. Efektem korzystania z aplikacji jest zdana sesja i zadowolenie. Wtedy to postanowiłem rozwijać dalej projekt, tak aby więcej osób mogło skorzystać ze stworzonej aplikacji.
Quizomania – założenia projektu
Użytkownik ucząc się pytań będzie miał do dyspozycji dwa tryby:
-
Nauki
-
Egzaminu
Tryb nauki będzie polegał na udzielaniu odpowiedzi na wszystkie pytania istniejące w bazie.
Tryb egzaminu będzie zawierał zestaw pytań, składający się z wcześniej określonej przez użytkownika ilości. Na koniec zostanie wyświetlony uzyskany wynik oraz wszystkie udzielone odpowiedzi na pytania.
Zatem wiemy już, że w aplikacji będą dwa tryby nauki. Jednak, aby użytkownik mógł odpowiadać na pytania potrzeba będzie stworzyć narzędzie do tworzenia bazy pytań. Domyślna baza będzie zawierała kilka pytań, tak aby każdy mógł przetestować działanie aplikacji. Kolejną opcją będzie wykorzystanie pamięci podręcznej przeglądarki do przechowywania pytań. W przyszłości chciałbym dodać jeszcze jedno rozwiązanie.
Realizacja
Jeśli jesteś moim stałym czytelnikiem, to z wcześniejszego wpisu wiesz, że projekt ten powstał w frameworku VueJS pisząc w JS. Tworząc aplikacje w tej technologii mamy możliwość pisania również w TypeScript. Za wygląd odpowiada Bootstrap, choć początkowo w projekt był zaimplementowany framework Materialize. Jednak, wygodniej jest mi się poruszać w przygotowanych komponentach Bootstrapa.
Obecny stan projektu
Projekt ten możecie zobaczyć i przetestować pod adresem https://quizomania.eu, a kod projektu jest dostępny na moim GitHubie. Aplikacja posiada dwa tryby nauki, o czym wspomniałem na początku wpisu. W chwili obecenej tryb egzaminu po zakończeniu wyświetla jedynie ocenę wraz z ilością poprawnych i błędnych odpowiedzi. Pytania mają odpowiedzi wyświetlane za każdym razem w losowej kolejności.
Obecnie jestem na etapie refaktoryzacji kodu, by był prostszy i czytelniejszy. Dokładniej pozostał mi komponent Question.vue do podzielenia na TitleQuestion, BodyQuestion i FooterQuestion.
-
TitleQuestion
-
BodyQuestion wyświetlał będzie dostępne odpowiedzi na pytanie.
-
FooterQuestion będzie miał za zadanie zatwierdzanie odpowiedzi.
W BodyQuestion będą znajdowały się kolejne 3 komponenty, wyświetlane pod warunkiem czy pytanie posiada jedna odpowiedz, wiele odpowiedzi oraz czy odpowiedzi nie są wyświetlane jako np. rezultat egzaminu. Zatem powstaną komponenty:
-
SingleAnswer
-
MultiAnswer
-
ResultAnswer
Taki zabieg refaktoryzacyjny sprawi, że będziemy mieli więcej możliwości np. wyświetlanie rezultatów egzaminu za pomocą komponentu Question.
Po zrefaktoryzowaniu obecnego kodu, przyjdzie czas na utworzenie dwóch nowych zakładek Ustawienia oraz Bazy danych. W ustawieniach będzie możliwość wybrania aktualnie używanej bazy danych. Zaś w drugiej zakładce użytkownik będzie mógł tworzyć własne bazy, tak aby aplikacja mogła być przydatna dla każdego.
Podsumowanie
Projekt Quizomania powstał dla mojej dziewczyny, aby mogła szybciej przyswoić wiedzę potrzebną do zdania sesji. Inicjatywa ta sprawiła, że postanowiłem projekt ten rozwijać dalej i dać innym użytkownikom możliwość efektywnej nauki. Aplikacja na razie nie pokazuje swoich możliwości, ale po dodaniu możliwości tworzenia własnych baz z pytaniami, sytuacja ta się zmieni. A to nie wszystko co planuje zaimplementować do tego projektu.
Obecny stan aplikacji możecie zobaczyć pod adresem https://quizomania.eu
Zaś kod wersji udostępnionej do podglądu na moim GitHubie
