s470629/SOITA
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Big frontend update

Browse Source
This commit is contained in:
Piotr Kopycki 2022-01-19 20:56:00 +01:00
parent e96e0476b9
commit 1e3c311c4a
15 changed files with 122 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config/views.py
View File

@ -10,7 +10,7 @@ def home(request):
# TODO replace # TODO replace
#context['tests'] = Test.objects.filter(owner=request.user) #context['tests'] = Test.objects.filter(owner=request.user)
context['tests'] = Test.objects.all context['tests'] = Test.objects.all
return render(request, 'myTests.html', context) return render(request, 'home.html', context)
def welcome(request): def welcome(request):

72
static/style.css
View File

@ -1,6 +1,6 @@
.sidenav { .sidenav {
height: 100%; height: 100%;
width: 160px; width: 175px;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
top: 0; top: 0;
@ -8,6 +8,7 @@
background-color: #FF0B7E; background-color: #FF0B7E;
overflow-x: :hidden; overflow-x: :hidden;
padding-top: 20px; padding-top: 20px;
overflow-y: scroll;
} }
.sidenav a { .sidenav a {
@ -66,6 +67,25 @@
font-size: 13px; font-size: 13px;
padding-bottom: 15px; padding-bottom: 15px;
color: #808080; color: #808080;
/*transform: translate(150%,0%);*/
width:100%;
text-align:center;
}
.left {
float:left;
width: 175px;
}
.center {
display: inline-block;
margin:0 auto;
width: 175px;
}
.right {
float:right;
width: 175px;
} }
.mainTestContainer button { .mainTestContainer button {
@ -82,7 +102,7 @@
} }
.mainTestContainerDoubleButton button{ .doubleButton button{
height: 30px; height: 30px;
width: 150px; width: 150px;
color: #FFF; color: #FFF;
@ -95,6 +115,23 @@
transform: translate(150%,0%); transform: translate(150%,0%);
} }
.defaultButton {
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.defaultButton a {
color: inherit;
text-decoration: inherit;
}
.mainTestContainer a { .mainTestContainer a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
@ -102,6 +139,7 @@
.mainTestDesc{ .mainTestDesc{
padding-bottom: 15px; padding-bottom: 15px;
text-align: center;
} }
.mainTestQuest { .mainTestQuest {
@ -277,14 +315,40 @@ background-color:#FF0B7E
color: #00916E; color: #00916E;
} }
.testContent{
padding-bottom: 15px;
padding-left: 20px;
}
.testContent input[type=submit]{ .testContent input[type=submit]{
height: 30px; height: 30px;
width: 150px;
color: #FFF; color: #FFF;
font-size: 15px; font-size: 17px;
background: #00916E;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
}
.linkDefault {
padding-top: 15px;
}
.linkDefault a {
color: #00916E;
text-decoration: none;
}
.newContainer input[type=submit]{
height: 30px;
width: 150px;
color: #FFF;
font-size: 17px;
background: #00916E; background: #00916E;
cursor: pointer; cursor: pointer;
border-radius: 25px; border-radius: 25px;
border: none; border: none;
outline: none; outline: none;
margin-top: 15px;
} }

4
templates/addQuestions.html
View File

@ -31,7 +31,7 @@
<input id="ans4" type="text" name="ans4"> <input id="ans4" type="text" name="ans4">
<br> <br>
<br> <br>
<label for="category">correct: </label> <label for="category">Correct: </label>
<select name="category" id="category"> <select name="category" id="category">
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option value="2">2</option>
@ -41,7 +41,7 @@
<br> <br>
<br> <br>
{% endfor %} {% endfor %}
<input type="submit" value="Add questions"> <input type="submit" value="Create test">
</form> </form>
</div> </div>
{% endblock %} {% endblock %}

3
templates/base.html
View File

@ -12,9 +12,10 @@
<body> <body>
<div class="sidenav"> <div class="sidenav">
<a href="/home">Home</a> <a href="{% url 'home' %}">Home</a>
<a href="{% url 'newTest' %}">Create test</a> <a href="{% url 'newTest' %}">Create test</a>
<a href="{% url 'myTests' %}">Your tests</a> <a href="{% url 'myTests' %}">Your tests</a>
<a href="{% url 'solvedTests' %}">Solved tests</a>
<p>Categories</p> <p>Categories</p>
<a href="/category/JezykPolski">Język polski</a> <a href="/category/JezykPolski">Język polski</a>
<a href="/category/JezykAngielski">Język angielski</a> <a href="/category/JezykAngielski">Język angielski</a>

7
templates/category.html
View File

@ -10,15 +10,14 @@
{{test.name}} {{test.name}}
</div> </div>
<div class="mainTestMeta"> <div class="mainTestMeta">
Category: {{test.category}} <div class="left">Category: {{test.category}}</div>
<div class="center">Passing score: {{test.passing_score}}</div>
<div class="right">Questions: {{test.questions|length}}</div>
</div> </div>
<div class="mainTestDesc"> <div class="mainTestDesc">
<!-- TODO 250 words limit--> <!-- TODO 250 words limit-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat scelerisque tortor, id sodales leo finibus id. Vivamus id viverra nunc, ac faucibus metus. Nulla a mauris imperdiet sapien lobortis dapibus. Quisque ornare posuere pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat scelerisque tortor, id sodales leo finibus id. Vivamus id viverra nunc, ac faucibus metus. Nulla a mauris imperdiet sapien lobortis dapibus. Quisque ornare posuere pulvinar.
</div> </div>
<div class="mainTestMeta">
Passing score: {{test.passing_score}}
</div>
<button><a href="/tests/{{test.id}}/show">Start</a></button> <button><a href="/tests/{{test.id}}/show">Start</a></button>
</div> </div>
<br> <br>

12
templates/generic_test.html
View File

@ -23,14 +23,14 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="card"> <div class="card" style="border: none;">
<div class="card-body test_body"> <div class="card-body test_body">
<div class="card-header test_title"> <div class="card-header test_title" style="background:#00916E; color: #FFF;">
{{ test.name }} {{ test.name }}
</div> </div>
{% for question in test.questions.all %} {% for question in test.questions.all %}
<div class="question_title"> <div class="question_title" style="padding-top:15px; padding-bottom:10px; padding-left:5px;">
{{ question.description }} {{ question.description }}
</div> </div>
<div class="list-group"> <div class="list-group">
@ -45,9 +45,9 @@
{% endfor %} {% endfor %}
</div> </div>
<input class="testContent" type="submit" value="Send answers"> <div class="testContent">
<input type="submit" value="Send answers">
{# <button type="submit" class="testContent" value="Send answers"></button>#} </div>
</form> </form>
</div> </div>

48
templates/generic_test_2.html
View File

@ -1,48 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ test.name }}</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
.test_title {
font-size: 40px;
}
.test_body {
width: 50%;
}
.question_title {
font-size: 20px;
}
</style>
</head>
<body>
<div class="card">
<div class="card-body test_body">
<div class="card-header test_title">
{{ test.name }}
</div>
{% for question in test.questions.all %}
<div class="question_title">
{{ question.description }}
</div>
<div class="list-group">
{% for answer in question.answers.all %}
<label class="list-group-item">
<input class="form-check-input me-1" type="radio" name={{ question.id }} value="">
{{ answer.description }}
</label>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</body>
</html>

7
templates/home.html
View File

@ -10,15 +10,14 @@
{{test.name}} {{test.name}}
</div> </div>
<div class="mainTestMeta"> <div class="mainTestMeta">
Category: {{test.category}} <div class="left">Category: {{test.category}}</div>
<div class="center">Passing score: {{test.passing_score}}</div>
<div class="right">Questions: {{test.questions|length}}</div>
</div> </div>
<div class="mainTestDesc"> <div class="mainTestDesc">
<!-- TODO 250 words limit--> <!-- TODO 250 words limit-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat scelerisque tortor, id sodales leo finibus id. Vivamus id viverra nunc, ac faucibus metus. Nulla a mauris imperdiet sapien lobortis dapibus. Quisque ornare posuere pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat scelerisque tortor, id sodales leo finibus id. Vivamus id viverra nunc, ac faucibus metus. Nulla a mauris imperdiet sapien lobortis dapibus. Quisque ornare posuere pulvinar.
</div> </div>
<div class="mainTestMeta">
Passing score: {{test.passing_score}} / Questions: {{test.questions|length}}
</div>
<button><a href="/tests/{{test.id}}/show">Start</a></button> <button><a href="/tests/{{test.id}}/show">Start</a></button>
</div> </div>
<br> <br>

3
templates/login.html
View File

@ -16,6 +16,9 @@
</p> </p>
{% endfor %} {% endfor %}
<input type="submit" value="Login"> <input type="submit" value="Login">
<div class="linkDefault">
<a href="{% url 'resetPassword' %}">Reset password</a>
</div>
</form> </form>
{% endblock %} {% endblock %}

120
templates/login_old.html
View File

@ -1,120 +0,0 @@
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
background: #7abecc !important;
}
.user_card {
width: 350px;
margin-top: auto;
margin-bottom: auto;
background: #74cfbf;
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
padding: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 5px;
}
.form_container {
margin-top: 20px;
}
#form-title{
color: #fff;
}
.login_btn {
width: 100%;
background: #33ccff !important;
color: white !important;
}
.login_btn:focus {
box-shadow: none !important;
outline: 0px !important;
}
.login_container {
padding: 0 2rem;
}
.input-group-text {
background: #f7ba5b !important;
color: white !important;
border: 0 !important;
border-radius: 0.25rem 0 0 0.25rem !important;
}
.input_user,
.input_pass:focus {
box-shadow: none !important;
outline: 0px !important;
}
#messages{
background-color: grey;
color: #fff;
padding: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100">
<div class="user_card">
<div class="d-flex justify-content-center">
<h3 id="form-title">LOGIN</h3>
</div>
<div class="d-flex justify-content-center form_container">
<form method="POST" action="">
{% csrf_token %}
<div class="input-group mb-3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" name="username" placeholder="Username..." class="form-control">
</div>
<div class="input-group mb-2">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" name="password" placeholder="Password..." class="form-control" >
</div>
<div class="d-flex justify-content-center mt-3 login_container">
<input class="btn login_btn" type="submit" value="Login">
</div>
</form>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center links">
Don't have an account? <a href="{% url 'register' %}" class="ml-2">Sign Up</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

4
templates/logout.html
View File

@ -4,6 +4,8 @@
{% block content %} {% block content %}
<p>You have been logged out successfully</p> <p>You have been logged out successfully</p>
<a class="btn btn-primary" href="/home">Home</a> <div class="linkDefault">
<a href="{% url 'welcome' %}">Continue</a>
</div>
{% endblock %} {% endblock %}

9
templates/myTests.html
View File

@ -10,16 +10,15 @@
{{test.name}} {{test.name}}
</div> </div>
<div class="mainTestMeta"> <div class="mainTestMeta">
Category: {{test.category}} <div class="left">Category: {{test.category}}</div>
<div class="center">Passing score: {{test.passing_score}}</div>
<div class="right">Questions: {{test.questions|length}}</div>
</div> </div>
<div class="mainTestDesc"> <div class="mainTestDesc">
<!-- TODO 250 words limit--> <!-- TODO 250 words limit-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat scelerisque tortor, id sodales leo finibus id. Vivamus id viverra nunc, ac faucibus metus. Nulla a mauris imperdiet sapien lobortis dapibus. Quisque ornare posuere pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus volutpat scelerisque tortor, id sodales leo finibus id. Vivamus id viverra nunc, ac faucibus metus. Nulla a mauris imperdiet sapien lobortis dapibus. Quisque ornare posuere pulvinar.
</div> </div>
<div class="mainTestMeta"> <div class="doubleButton">
Passing score: {{test.passing_score}} / Questions: {{test.questions|length}}
</div>
<div class="mainTestContainerDoubleButton">
<button><a href="/tests/{{test.id}}/show">Start</a></button> <button><a href="/tests/{{test.id}}/show">Start</a></button>
<button><a href="/tests/{{test.id}}/edit">Edit</a></button> <button><a href="/tests/{{test.id}}/edit">Edit</a></button>
</div> </div>

17
templates/result.html
View File

@ -6,10 +6,23 @@
<div class="resultContainer "> <div class="resultContainer ">
<img class="resultImage" src="http://kmit.in/emagazine/wp-content/uploads/2018/02/karnataka-results.jpg" alt="Card image cap"> <img class="resultImage" src="http://kmit.in/emagazine/wp-content/uploads/2018/02/karnataka-results.jpg" alt="Card image cap">
<div class="resultBody"> <div class="resultBody">
<h5 class="resultMsg">Quite good! All the best for next quiz!</h5> <h5 class="resultMsg">
Quite good! All the best for next quiz!
<!-- {% if max_score == 100 %}-->
<!-- Idealnie, widzę że ten temat nie ma dla ciebie tajemnic! -->
<!-- {% elif max_score >= 75 %}-->
<!-- Bardzo dobrze, ale są jeszcze pewne braki ;)-->
<!-- {% elif max_score >= 50 %}-->
<!-- Nie jest źle, wiedziałeś więcej niż mniej-->
<!-- {% elif max_score >= 25 %}-->
<!-- Masz spore braki, powinieneś trochę więcej się pouczyć-->
<!-- {% else %}-->
<!-- Słabiutko, ale następnym razem będzie lepiej-->
<!-- {% endif %}-->
</h5>
<h5 class="resultScore">Result: {{ status }}</h5> <h5 class="resultScore">Result: {{ status }}</h5>
<h5 class="resultScore">Score: {{ points }}</h5> <h5 class="resultScore">Score: {{ points }}</h5>
<a class="btn btn-primary" href="/home">Home</a> <button class="defaultButton"><a href="{% url 'home' %}">Home</a></button>
{# <p class="resultText">Percentage: 60%</p>#} {# <p class="resultText">Percentage: 60%</p>#}
{# <p class="resultText">Correct answers: 3</p>#} {# <p class="resultText">Correct answers: 3</p>#}
{# <p class="resultText">Incorrect answers: 2</p>#} {# <p class="resultText">Incorrect answers: 2</p>#}

5
trials/urls.py
View File

@ -4,7 +4,7 @@ from rest_framework.routers import DefaultRouter
from trials.views import TestModelViewSet from trials.views import TestModelViewSet
from trials.views import TestTemplateView from trials.views import TestTemplateView
from trials.views import TestValidateAPIView from trials.views import TestValidateAPIView
from trials.views import TestResultView, addTest, addQuestions, myTests, editTest from trials.views import TestResultView, addTest, addQuestions, myTests, editTest, solvedTests
router = DefaultRouter(trailing_slash=False) router = DefaultRouter(trailing_slash=False)
router.register("items", TestModelViewSet) router.register("items", TestModelViewSet)
@ -16,7 +16,8 @@ urlpatterns = [
path('<int:test_id>/edit', editTest), path('<int:test_id>/edit', editTest),
path('add/test', addTest, name="newTest"), path('add/test', addTest, name="newTest"),
path('add/questions', addQuestions, name="addQuestions"), path('add/questions', addQuestions, name="addQuestions"),
path('mytests', myTests, name="myTests") path('my', myTests, name="myTests"),
path('solved', solvedTests, name="solvedTests")
] ]
urlpatterns += router.urls urlpatterns += router.urls

9
trials/views.py
View File

@ -51,6 +51,15 @@ def myTests(request):
return render(request, 'myTests.html', context) return render(request, 'myTests.html', context)
def solvedTests(request):
# TODO implementation
context = {}
# context['tests']=Test.objects.filter(category=request.user)
context['tests']=Test.objects.filter(category="Matematyka")
#context['tests'] = Test.objects.all
return render(request, 'myTests.html', context)
def editTest(request): def editTest(request):
pass pass
# TODO # TODO