Help page

config/urls.py

@@ -17,6 +17,7 @@ from django.contrib import admin
 from django.urls import include
 from django.urls import path
 from .views import home, welcome, help
+from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 
 urlpatterns = [
     path('', welcome, name='welcome'),
@@ -28,3 +29,5 @@ urlpatterns = [
     path('tests/', include("trials.urls")),
     path('category/', include("categories.urls")),
 ]
+
+urlpatterns += staticfiles_urlpatterns()

static/style.css

@@ -38,6 +38,11 @@
 
 }
 
+.helpText {
+    font-size: 18px;
+    padding-bottom: 15px;
+}
+
 .main {
    margin-left: 190px;
    padding: 0px 40px;
@@ -49,6 +54,31 @@
     padding-bottom: 50px;
 }
 
+.main h2 {
+    font-weight: bold;
+    padding-bottom: 20px;
+}
+
+.main h3 {
+    font-weight: bold;
+    text-align: center;
+    padding-top: 50px;
+    padding-bottom: 20px;
+    font-size: 20px;
+}
+
+.main img {
+  width: 60%;
+  height: auto;
+}
+
+.mainImgCenter {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}
+
 .mainTestContainer {
     border-radius: 25px;
     border: 2px solid #FF0B7E;
@@ -329,6 +359,12 @@ background-color:#FF0B7E
 }
 
 .accountInfoText {
+    padding-bottom: 20px;
+}
+
+.accountInfoContainer img {
+  width: auto;
+  height: auto;
 }
 
 .accountInfoContainer button{

templates/help.html

@@ -3,6 +3,93 @@
 {% block title %}Help{% endblock  %}
 
 {% block content %}
-    <h1>In the future, there will be an app manual here</h1>
+    <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>
+            Możesz zmienić wartości wszystkich zaprezentowanych pól według uznania. Gdy skończysz pracę, kliknij przycisk "Zapisz test". Jeżeli chcesz przerwać, możesz wrócić do poprzedniej strony lub przejść do innej strony z menu.
+        </p>
+    </div>
+    <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  %}
 

templates/home.html

@@ -3,7 +3,7 @@
 {% block title %}Główna{% endblock  %}
 
 {% block content %}
-    <h1>Rozwiąż sobie jakiś test!</h1>
+    <h1>Rozwiąż jakiś test!</h1>
         {% for test in tests %}
             <div class="mainTestContainer">
                 <div class="mainTestName">

templates/result.html

@@ -24,7 +24,7 @@
             <h5 class="resultText">Twój wynik: {{ points }}</h5>
             <h5 class="resultText">Próg zaliczenia: {{ passing }}</h5>
             <h5 class="resultText">Maksymalny wynik: {{ max }}</h5>
-            <h5 class="resultText">Wynik procentowy: {{ percentage }}</h5>
+            <h5 class="resultText">Wynik procentowy: {{ percentage }}%</h5>
             <button class="defaultButton"><a href="{% url 'home' %}">Strona główna</a></button>
 {#            <p class="resultText">Correct answers: 3</p>#}
 {#            <p class="resultText">Incorrect answers: 2</p>#}

templates/solvedTests.html

@@ -12,7 +12,7 @@
                 <div class="solvedTestText">Twój wynik: {{test.score}}</div>
                 <div class="solvedTestText">Próg zaliczenia: {{test.passing_score}}</div>
                 <div class="solvedTestText">Maksymalny wynik: {{test.max}}</div>
-                <div class="solvedTestText">Wynik procentowy: {{test.percentage}}</div>
+                <div class="solvedTestText">Wynik procentowy: {{test.percentage}}%</div>
             </div>
             <br>
         {% endfor %}

trials/views.py

@@ -171,9 +171,9 @@ class TestModelViewSet(viewsets.ModelViewSet):
 
 
 class TestTemplateView(TemplateView):
-    PASSED = "passed"
+    PASSED = "Zaliczony"
-    FAILED = "failed"
+    FAILED = "Nie zaliczony"
-    UNKNOWN = "unknown"
+    UNKNOWN = "nieznany"
 
     PASSED = {
         True: PASSED,