Commit 722eeced authored by Samarth Joshi's avatar Samarth Joshi

Dashboard Page UI Webview

parent c63643b9
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.77 5.03l1.4 1.4L8.43 19.17l-5.6-5.6 1.4-1.4 4.2 4.2L19.77 5.03m0-2.83L8.43 13.54l-4.2-4.2L0 13.57 8.43 22 24 6.43 19.77 2.2z"/></svg>
\ No newline at end of file
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Source Sans Pro', sans-serif;
}
body {
margin: 0px;
background: #F1F3F4;
}
@media all and (min-width: 800px) {
#main_form {
display: grid;
grid-template-columns: 300px 1fr;
}
#question_palette {
width: 300px;
height: 100vh;
grid-column-start: 1;
grid-row-start: 1;
display: grid;
grid-template-rows: 60px 1fr 140px;
background-color: white;
}
#questions_area {
height: 100vh;
overflow-y:scroll;
grid-column-start: 2;
grid-row-start: 1;
}
#nav_btn {
display: none;
}
}
@media all and (max-width: 800px) {
#main_form {
display: grid;
grid-template-rows: 1fr 140px;
}
#question_palette {
width: 100%;
overflow: hidden;
height: 140px;
display: grid;
grid-column-start: 1;
grid-row-start: 2;
position: fixed;
bottom: 0px;
grid-template-rows: 0px 0px 140px;
background-color: white;
}
#questions_area {
height: 100%;
overflow-y:scroll;
grid-column-start: 1;
grid-row-start: 1;
}
#nav_btn {
display: block;
}
}
table, th, td {
border: 1px solid black;
}
border: 1px solid black;
}
.dashboard {
display: grid;
margin-top: 20px;
grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}
.quiz_info {
text-align: center;
}
.quiz_info > h1 {
font-size: 2em;
margin-top: 40px;
margin-bottom: 0px;
}
.quiz_info > h3 {
margin-top: 0px;
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding-left: 0px;
}
.list_quiz_info {
text-decoration: none;
margin-top: 10px;
display: block;
height: 70px;
width: 100%;
color: black;
background-color: white;
transition: background-color 0.2s ease, color 0.2s ease;
}
.list_quiz_info:hover {
color: white;
background-color: #4CAF50;
}
.list_quiz_info > h1 {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 30px;
}
.list_quiz_info > h3 {
margin-top: 0px;
margin-bottom: 10px;
margin-left: 30px;
}
.quizScheduleInfo {
display: flex;
justify-content: center;
align-items: center;
}
.vsep {
display: block;
margin: 20px;
font-size: 2em;
}
.quizStatus {
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 1.2em;
}
.quizStatus > img{
height: 20px;
margin-right: 10px;
position: relative;
top: 4px;
}
.dashboard_card {
border: solid 1px #b3b3b3;
margin: 20px;
background-color: white;
box-shadow: #999999 3px 5px 6px;
text-align: center;
transition: box-shadow 0.3s ease;
}
.dashboard_card:hover {
box-shadow: #999999 5px 10px 15px;
}
.crib_table {
border: none;
width: 100%;
max-height: 500px;
overflow-y: scroll;
}
.crib_table th {
border-left: solid 1px #e6e6e6;
border-right: none;
border-top: none;
border-bottom: none;
padding: 15px;
background-color: #3F51B5;
color: white;
}
.crib_table td {
border-left: solid 1px #e6e6e6;
border-right: none;
border-top: none;
border-bottom: none;
padding: 15px;
}
#question_palette > h2 {
text-align: center;
}
</style>
</head>
<body>
<h1> Quiz :{{quiz_id}}</h1>
<form><input type="hidden" id="quizId" name="quizId" value="123"></form>
<div id="dashboard">
{{quiz_id}}
{{graph|safe}}
{{graph2|safe}}
<table >
<th>Question</th><th>StudentId</th><th>Cribs</th>
{%for crib in cribs%}
<tr>
<td>{{crib.0}}</td>
<td>{{crib.1}}</td>
<td>{{crib.2}}</td>
</tr>
{%endfor%}
</table>
<div id="main_form">
<aside id="question_palette">
<h2>Quiz list:</h2>
<ul>
{%for q in all_quizes %}
<li><a href="/instructor/?quiz_id={{quiz.quizId}}" class="list_quiz_info">
<h1>{{q.quizInfo}}</h1>
<h3>{{q.quizCode}}</h3>
</a>
</li>
{%endfor%}
</ul>
</aside>
<div id="questions_area">
<section class="quiz_info">
<h1>{{quiz.quizInfo}}</h1>
<h3> Quiz Code: {{quiz.quizCode}}</h3>
<div class="quizScheduleInfo">
{% if quizDone %}
<div class="quizStatus done"><img src="{% static 'img/done-24px.svg' %}"><label>Completed</label></div>
{% else %}
<div class="quizStatus"><img src="{% static 'img/schedule-24px.svg' %}"><label>Scheduled</label></div>
{% endif %}
<div class="vsep">
{
</div>
<div>
<span>{{quiz.date}}, {{quiz.startTime}}</span><br/>
<span>Duration: {{quiz.length}} minutes</span>
</div>
</div>
<form><input type="hidden" id="quizId" name="quizId" value="123"></form>
</section>
<div class="dashboard">
<section class="dashboard_card">{{graph|safe}}</section>
<section class="dashboard_card">{{graph2|safe}}</section>
<section class="dashboard_card">
<table class="crib_table" cellspacing="0">
<thead><th>Question</th><th>StudentId</th><th>Cribs</th></thead>
<tbody>
{%for crib in cribs%}
<tr>
<td>{{crib.0}}</td>
<td>{{crib.1}}</td>
<td>{{crib.2}}</td>
</tr>
{%endfor%}
</tbody>
</table>
</section>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -65,42 +65,42 @@
#menucard_createquiz {
background-color: #00fff0;
background-color: #c6cceb;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
color: black;
}
#menucard_createquiz:hover {
background-color: #2595d6;
background-color: #6877ca;
color: white;
}
#menucard_dashboard {
background-color: #f0dcc8;
background-color: #e9ccaf;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
color: black;
}
#menucard_dashboard:hover {
background-color: #ce9a66;
background-color: #c88037;
color: white;
}
#menucard_monitor {
background-color: #fffee0;
background-color: #fffc99;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
color: black;
}
#menucard_monitor:hover {
background-color: #d4ce50;
background-color: #ccc500;
color: white;
}
#menucard_logout {
background-color: #ffeada;
background-color: #ffc599;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, width 0.2s ease, height 0.2s ease;
color: black;
}
#menucard_logout:hover {
background-color: #d4b59e;
background-color: #ff6f00;
}
@media only screen and (min-width: 800px) {
.profile {
......
......@@ -31,6 +31,7 @@ import matplotlib.pyplot as plt, mpld3
import json
import random
import string
from datetime import datetime
lst = []
answers = []
......@@ -141,7 +142,9 @@ def upload_file(request):
def instructor(request):
print('Hello World')
q_id = request.GET['quiz_id']
print(q_id)
quizId = int(q_id)
quizInstance = quiz.objects.all().filter(quizId=quizId, quizInstructor=request.user)[0]
allquizs = quiz.objects.all().filter(quizInstructor=request.user).order_by('-date', '-startTime');
students = results.objects.all().filter(quizId=q_id).values('studentId')
marks = results.objects.all().filter(quizId=q_id).values('marks')
cribs=crib.objects.raw('select 1 as id, c.cribs,c.studentId,q.question from cribs c ,Questions q where c.quizId_id=q.quizId_id and c.quizId_id='+str(q_id))
......@@ -168,7 +171,10 @@ def instructor(request):
x = np.linspace(mu - 3*sigma, mu + 3*sigma, 100)
ax1.plot(x, stats.norm.pdf(x, mu, sigma))
html_graph1 = mpld3.fig_to_html(fig1)
return render(request, 'instructor.html',{"graph": html_graph, "graph1": html_graph, "graph2": html_graph1,'quiz_id':q_id,'cribs':cribbs})
quizDone = False
if quizInstance.end_datetime < datetime.now():
quizDone = True
return render(request, 'instructor.html',{"graph": html_graph, "graph1": html_graph, "graph2": html_graph1,'quiz':quizInstance,'cribs':cribbs, 'all_quizes': allquizs, 'quizDone':quizDone})
def quizTable(request):
quizs = quiz.objects.filter(quizInstructor=request.user).all()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment