Big frontend update
This commit is contained in:
parent
e96e0476b9
commit
1e3c311c4a
@ -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):
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -16,6 +16,9 @@
|
||||
</p>
|
||||
{% endfor %}
|
||||
<input type="submit" value="Login">
|
||||
<div class="linkDefault">
|
||||
<a href="{% url 'resetPassword' %}">Reset password</a>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -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,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 %}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>#}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user