{% extends "base.html" %}

{% block title %}Help{% endblock  %}

{% block content %}
    <h1>Pogubiłeś się w działaniu aplikacji? Sprawdź instrukcję obsługi.</h1>
    <h2>1. Ogólny układ strony</h2>
    {% load static %} <img src="{% static "media/SOITA-Home.png" %}" alt="home" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Po lewej stronie mamy menu nawigacji. Będzie nam ono towarzyszyć na wszystkich stronach. Menu umożliwia nam szybkie przechodzenie między poszczególnymi częściami aplikacji. <br>
            <ul>
                <li>
                    Pierwsza sekcja udostępnia nam najważniejsze opcje, czyli te skupiające się na testach. Wchodzą w nie: tworzenie testów, przeglądanie utworzonych testów oraz sprawdzanie historii rozwiązanych testów.
                    Poza tym mamy również przekierowanie do strony głównej, na której znajduje się lista wszystkich dostępnych testów oraz do strony pomocy na której się właśnie znajdujemy.
                </li>
                <li>Druga sekcja to lista wszystkich dostępnych kategorii testów. Wybierając daną kategorię wyświetlisz sobie wyłącznie testy do niej należące.</li>
                <li>Ostatnia sekcja dotyczy twojego konta. Dostępna jest tam zakładka ustawień konta oraz opcja wylogowania się z aplikacji.</li>
            </ul>
            Po prawej stronie znajduje się zawartość danej strony. W tym przypadku (strona główna) jest to lista wszystkich dostępnych testów. Lista ta ma postać ramek zawierających nazwę i informacje o danym teście.
            U dołu znajduje się również przycisk umożliwiający podejście do danego testu.
        </p>
    </div>
    <h2>2. Rozwiązywanie testów</h2>
    <div class="helpText">
        <p>
            W celu rozpoczęcia rozwiązywania testu należy wybrać przycisk "Rozwiąż" w ramce danego testu.
            Przykładowe ramki testów widać na zrzucie ekranu z pierwszego punktu. Widok testu pokazany jest na poniższym zrzucie ekranu:
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Test.png" %}" alt="test" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Na samej górze strony mamy tytuł testu. Poniżej znajduje się lista pytań wraz z odpowiedziami. Do wyboru zawsze są cztery odpowiedzi, jednak tylko jedna z nich jest poprawna.
            Odpowiedź zaznaczasz klikając w kropkę po jej lewej stronie. Możesz wybrać tylko jedną na raz. Nie musisz jednak wybierać żadnej jeżeli nie jesteś pewien. W takim przypadku otrzymasz za pytanie 0 punktów.
            Gdy już uznasz, że wypełniłeś test w satysfakcjonującym stopniu,  kliknij na przycisk "Wyślij odpowiedzi", na samym dole strony. Zostaniesz przekierowany do strony z wynikami,
            przykładowa strona wygląda następująco:
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Result.png" %}" alt="result" class="mainImgCenter"/>
    <h2>3. Tworzenie testów</h2>
    <div class="helpText">
        <p>
            Tworzenie testu rozbite jest na dwa kroki. W pierwszym dostępne są cztery pola, pokazane na zrzucie poniżej. Należy nadać nazwę nowego testu,
            wybrać kategorię z listy a następnie określić ilość pytań i próg zaliczenia. Warto pamiętać, że każde pytanie jest warte 1 punkt. Żeby przejść dalej należy nacisnąć przycisk "Dodaj pytania".
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Create.png" %}" alt="create" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Po przejściu dalej pojawia się strona tworzenia pytań (zrzut poniżej). Dla każdego należy podać opis oraz cztery odpowiedzi. Następnie należy zaznaczyć poprawne.
            Gdy wypełnisz wszystkie pola, naciśnij przycisk "Stwórz test". W taki sposób procedura zostanie zakończona. Nowy test możesz znaleźć w zakłądce "Twoje testy". <br><br>
            <b>Podpowiedź:</b> Możesz spróbować dodawać odpowiedź "Wszystkie powyższe są poprawne" zarówno jako odpowiedź prawdziwą oraz błędną, aby utrudnić nieco testy.

        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Create2.png" %}" alt="create2" class="mainImgCenter"/>
    <h2>4. Edycja testów</h2>
    {% load static %} <img src="{% static "media/SOITA-Your.png" %}" alt="your" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Edytować możesz jedynie testy stworzone przez ciebie. Wszystkie twoje testy znajdują się na stronie "Twoje testy", zaprezentowanej powyżej.
            W przeciwieństwie do testów innych osób, masz tutaj dwie dodatkowe opcje: "Usuń", która usuwa całkowicie test z systemu oraz "Edytuj", która pozowli ci na zmianę treści testu.
            Pamiętaj, że w obecnej wersji nie jest możliwa zmiana ilości pytań, tzn. nie możesz usunąć pytania ani dodać nowego, możesz co najwyżej zmienić całą jego treść.
            Po wybraniu opcji "Edytuj", otworzony zostanie poniższy widok:
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Edit.png" %}" alt="edit" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            W górnej części znajduje się edytowalne pole nazwy testu wraz z przyciskiem służącym do zapisania zmiany. Żeby edytować wybrane pytanie,
            należy zaznaczyć punkt obok jego opisu, na zrzucie wybrane jest drugie pytanie. Po zaznaczeniu pytania i naciśnięciu przycisku "Edytuj wybrane pytanie" pojawi się strona zaprezentowana na zrzucie poniżej.
            Możemy z tego poziomu całkowicie zaktualizować treść zadania a następnie zapsiać wszystkie zmiany.
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-EditQuestion.png" %}" alt="editQuestion" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Naciśnięcie przycisku "Dodaj pytanie", na stronie edycji testu otworzy poniższą stronę, na której można dodać nowe pytanie. Należy wypełnić wszystkie pola i zatwierdzić dodanie przyciskiem u dołu.
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-AddQuestion.png" %}" alt="addQuestion" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Ostatnia z opcji ze strony edycji testu, dostępna pod przyciskiem "Usuwanie pytań" przekierowuje do oddzielnej strony służącej do bezpiecznego usuwania pytań.
            Na tej stronie, możemy usunąć wybrane pytania, poprzez zaznaczenie ich, jak na stronie edycji testu a następnie zatwierdzenie operacji przyciskiem u dołu strony.
            Widok zaprezentowany na zrzucie poniżej.
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Delete.png" %}" alt="deleteQuestion" class="mainImgCenter"/>
    <h2>5. Przeglądanie historii testów</h2>
    {% load static %} <img src="{% static "media/SOITA-Solved.png" %}" alt="solved" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Strona z historią rozwiązanych testów zaprezentowana jest powyżej. Wyświetlone są tutaj wszystkie twoje podejścia do testów, posortowane pod względem daty rozwiązania.
            Jako, że zapisywane są dane o podejściu, tak więc jeden test może być wyświetlony kilka razy, dzięki temu będziesz mógł zauważyć swoje postępy w nauce.
        </p>
    </div>
    <h2>6. Ustawienia konta</h2>
    {% load static %} <img src="{% static "media/SOITA-Account.png" %}" alt="account" class="mainImgCenter"/>
    <div class="helpText">
        <p>
            Na stronie ustawień konta, pokazane są podstawowe informacje o twoim koncie, wraz z możliwością ich edycji. Trzy przyciski u dołu pozwolą ci na zmianę danej informacji.
            Poniżej znajduje się zrzut ekranu ze strony edycji imienia i nazwiska. Pozostałe strony wyglądają analogicznie. W puste pola możesz podać nowe dane i zapisać je klikając na przycisk "Zaktualizuj imię".
            Jeżeli się rozmyślisz, możesz wybrać opcję "Wróć", aby wrócić do strony ustawień konta.
        </p>
    </div>
    {% load static %} <img src="{% static "media/SOITA-Change.png" %}" alt="change" class="mainImgCenter"/>
    <br>
    <h3>Mamy nadzieję, że nasza instrukcja była pomocna i że będziesz mógł teraz na spokojnie wykorzystać cały potencjał aplikacji i zabrać się za rozwiązywanie (lub tworzenie) nowych testów :)</h3>
{% endblock  %}