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
#context['tests'] = Test.objects.filter(owner=request.user)
context['tests'] = Test.objects.all
return render(request, 'myTests.html', context)
return render(request, 'home.html', context)
def welcome(request):

72
static/style.css
View File

@ -1,6 +1,6 @@
.sidenav {
height: 100%;
width: 160px;
width: 175px;
position: fixed;
z-index: 1;
top: 0;
@ -8,6 +8,7 @@
background-color: #FF0B7E;
overflow-x: :hidden;
padding-top: 20px;
overflow-y: scroll;
}
.sidenav a {
@ -66,6 +67,25 @@
font-size: 13px;
padding-bottom: 15px;
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 {
@ -82,7 +102,7 @@
}
.mainTestContainerDoubleButton button{
.doubleButton button{
height: 30px;
width: 150px;
color: #FFF;
@ -95,6 +115,23 @@
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 {
color: inherit;
text-decoration: inherit;
@ -102,6 +139,7 @@
.mainTestDesc{
padding-bottom: 15px;
text-align: center;
}
.mainTestQuest {
@ -277,14 +315,40 @@ background-color:#FF0B7E
color: #00916E;
}
.testContent{
padding-bottom: 15px;
padding-left: 20px;
}
.testContent input[type=submit]{
height: 30px;
width: 150px;
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;
cursor: pointer;
border-radius: 25px;
border: none;
outline: none;
margin-top: 15px;
}

4
templates/addQuestions.html
View File

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

3
templates/base.html
View File

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

7
templates/category.html
View File

@ -10,15 +10,14 @@
{{test.name}}
</div>
<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 class="mainTestDesc">
<!-- 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.
</div>
<div class="mainTestMeta">
Passing score: {{test.passing_score}}
</div>
<button><a href="/tests/{{test.id}}/show">Start</a></button>
</div>
<br>

12
templates/generic_test.html
View File

@ -23,14 +23,14 @@
{% endblock %}
{% block content %}
<div class="card">
<div class="card" style="border: none;">
<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 }}
</div>
{% 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 }}
</div>
<div class="list-group">
@ -45,9 +45,9 @@
{% endfor %}
</div>
<input class="testContent" type="submit" value="Send answers">
{# <button type="submit" class="testContent" value="Send answers"></button>#}
<div class="testContent">
<input type="submit" value="Send answers">
</div>
</form>
</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}}
</div>
<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 class="mainTestDesc">
<!-- 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.
</div>
<div class="mainTestMeta">
Passing score: {{test.passing_score}} / Questions: {{test.questions|length}}
</div>
<button><a href="/tests/{{test.id}}/show">Start</a></button>
</div>
<br>

3
templates/login.html
View File

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

9
templates/myTests.html
View File

@ -10,16 +10,15 @@
{{test.name}}
</div>
<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 class="mainTestDesc">
<!-- 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.
</div>
<div class="mainTestMeta">
Passing score: {{test.passing_score}} / Questions: {{test.questions|length}}
</div>
<div class="mainTestContainerDoubleButton">
<div class="doubleButton">
<button><a href="/tests/{{test.id}}/show">Start</a></button>
<button><a href="/tests/{{test.id}}/edit">Edit</a></button>
</div>

17
templates/result.html
View File

@ -6,10 +6,23 @@
<div class="resultContainer ">
<img class="resultImage" src="http://kmit.in/emagazine/wp-content/uploads/2018/02/karnataka-results.jpg" alt="Card image cap">
<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">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">Correct answers: 3</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 TestTemplateView
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.register("items", TestModelViewSet)
@ -16,7 +16,8 @@ urlpatterns = [
path('<int:test_id>/edit', editTest),
path('add/test', addTest, name="newTest"),
path('add/questions', addQuestions, name="addQuestions"),
path('mytests', myTests, name="myTests")
path('my', myTests, name="myTests"),
path('solved', solvedTests, name="solvedTests")
]
urlpatterns += router.urls

9
trials/views.py
View File

@ -51,6 +51,15 @@ def myTests(request):
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):
pass
# TODO