Skip to content

P
Pariksha
Commit 873350ff authored by Samarth Joshi's avatar Samarth Joshi
Browse files
Options

Redirect to score page after submitting

parent 15dade56
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 42 deletions
db.sqlite3
View file @ 873350ff
No preview for this file type
quiz/static/css/quiz_attempt_page.css
View file @ 873350ff
......@@ -6,10 +6,58 @@
margin: 0px;
background: #F1F3F4;
}
form {
display: grid;
grid-template-columns: 1fr 300px;
}
@media all and (min-width: 800px) {
form {
display: grid;
grid-template-columns: 1fr 300px;
}
#question_palette {
width: 300px;
grid-column-start: 2;
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: 1;
grid-row-start: 1;
}
#nav_btn {
display: none;
}
}
@media all and (max-width: 800px) {
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;
}
}
/* ---- Custom Radio Button Styles START ---- */
......@@ -32,10 +80,10 @@
background-color: white;
border: solid 1px #cdcfcf;
box-shadow: 3px 3px 5px #cdcfcf;
transition: border 0.3s ease-in-out;
transition: border 0.2s ease-in-out;
}
.op_box > span:hover {
border: solid 2px #black;
/*border: solid 2px black;*/
}
.op_box > span > strong {
width: 40px;
......@@ -59,24 +107,19 @@
.question_header {
display: flex;
justify-content: space-between;
align-items: center;
}
.marksarea {
text-align: right;
}
#blankspace {
font-size: 2em;
}
/* ----- Quiz Pallete Start ----- */
#question_palette {
width: 300px;
grid-column-start: 2;
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: 1;
grid-row-start: 1;
}
#questions_area_wrapper {
margin: auto;
max-width: 800px;
......@@ -97,12 +140,13 @@
.questions_list > li {
padding: 15px;
border-bottom: solid 1px #fccde2;
transition: backround-color 0.2s ease-in-out;
}
.questions_list > li:hover {
padding: 15px;
background-color: #fee7f1;
border-bottom: solid 1px #fccde2;
#pallete_info {
grid-column-start: 1;
grid-row-start: 1;
}
.pallete_structure {
list-style-type: none;
}
/* ----- QUIZ CONTROLS Start ----- */
......@@ -110,7 +154,8 @@
#toolbar {
grid-column-start: 1;
grid-row-start: 3;
padding: 20px
padding: 20px;
background-color: white;
}
.button_group {
display: flex;
......@@ -179,4 +224,14 @@
border-left: solid 1px white;
}
/* ----- End ----- */
\ No newline at end of file
/* ----- End ----- */
.rubrics {
font-size: 1.2em;
}
.rubrics_wrapper {
margin: 20px;
border-radius: 6px;
padding: 20px;
}
quiz/static/js/quiz_attempt_page.js
View file @ 873350ff
"use strict";
var current_question = 0;
var selected_questions = 0;
var questions = document.getElementById('questions_area_wrapper').children;
questions[current_question].style.display = 'block';
var questions_len = parseInt(document.getElementById('question_count').value);
var selected_color = '#f4fa9c';
var deselected_color = '#ffffff';
var qtotal = document.getElementById('qtotal');
var qselected = document.getElementById('qselected');
qtotal.innerHTML = questions_len;
var pallete_view = false;
function show_nav() {
if(!pallete_view) {
var pallete = document.getElementById('question_palette');
pallete.style.gridTemplateRows = "60px 1fr 140px";
pallete.style.height = "100%";
pallete_view = true;
} else {
var pallete = document.getElementById('question_palette');
pallete.style.gridTemplateRows = "0px 0px 140px";
pallete.style.height = "140px";
pallete_view = false;
}
}
function next_question () {
var previous_question = current_question;
......@@ -37,6 +56,7 @@ function goto_question(x) {
}
function set_option( question_id, option_id ) {
var pallete_q = document.getElementById('pallete_question_'+question_id);
if(typeof question_id == "number" && typeof option_id == "number") {
if(question_id>=0 && question_id<questions_len && option_id>=0 && option_id<4) {
var ans = document.getElementById('q'+question_id);
......@@ -44,19 +64,35 @@ function set_option( question_id, option_id ) {
ans.value = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = selected_color;
pallete_q.style.backgroundColor = selected_color;
selected_questions = selected_questions + 1;
qselected.innerHTML = selected_questions;
} else {
if(option_id == ans.value) {
var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
obox.style.backgroundColor = deselected_color;
pallete_q.style.backgroundColor = deselected_color;
ans.value = "NA";
selected_questions = selected_questions - 1;
qselected.innerHTML = selected_questions;
} else {
var obox = document.getElementById("lbl_"+question_id+"_"+ans.value);
obox.style.backgroundColor = deselected_color;
pallete_q.style.backgroundColor = deselected_color;
ans.value = option_id;
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = selected_color;
pallete_q.style.backgroundColor = selected_color;
}
}
}
}
}
\ No newline at end of file
}
function submit_form() {
var main_form = document.getElementById('main_form');
var x = confirm("Are you sure you want to submit?");
if(x) {
main_form.submit();
}
}
quiz/templates/index.html
View file @ 873350ff
......@@ -8,23 +8,30 @@
</head>
<body>
<form method="POST" action="/result/">{% csrf_token %}
<form id="main_form" method="POST" action="/result/">{% csrf_token %}
<!-- <h1>{{questions.quizId}} Question {{ questions.end_index }} of {{count}}</h1> -->
<aside id="question_palette">
<section id="pallete_info">
<ul class="pallete_structure">
<li>Selected <span id="qselected">0</span> of <span id="qtotal">0</span></li>
</ul>
</section>
<ul class="questions_list">
{% for i in questions%}
<li onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
<li id="pallete_question_{{ forloop.counter0 }}" onclick="goto_question({{ forloop.counter0 }})">{{ forloop.counter }}. {{ i.question }}</li>
{%endfor%}
</ul>
<section id="toolbar">
<div class="button_group">
<button class="quiz_btn submit" type="button" onclick="submit_form()"><strong>Submit</strong></button>
</div>
<div class="button_group">
<button class="quiz_btn prev_ques" type="button" onclick="prev_question()"><strong>Previous</strong></button>
<span class="separator"></span>
<button id="nav_btn" class="quiz_btn next_ques" type="button" onclick="show_nav()"><strong>Nav</strong></button>
<span class="separator"></span>
<button class="quiz_btn next_ques" type="button" onclick="next_question()"><strong>Next</strong></button>
</div>
<div class="button_group">
<button class="quiz_btn submit" type="submit"><strong>Preview and Submit</strong></button>
</div>
</section>
</aside>
<section id="questions_area">
......@@ -32,10 +39,10 @@
<div id="questions_area_wrapper">
{% for i in questions%}
<div class="question">
<div class="question_header">
<p>{{ i.negative }}</p>
<p>Question {{ forloop.counter }} of {{ count }}</p>
<p>{{ i.marks }}</p>
<div class="rubrics_header">
<p>Question <br/>{{ forloop.counter }} of {{ count }}</p>
<p id="blankspace"></p>
<p class="marksarea">Marks: {{ i.marks }}<br/>Negative: -{{ i.negative }}</p>
</div>
<!-- <h1 id ='quizId'>{{i.quizId}}<h1> -->
<h1 id ='questionId' hidden>{{i.questionId}} </h1>
......
quiz/templates/view_submissions.html
View file @ 873350ff
<!DOCTYPE html>
<head>
{% load static %}
<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">
<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
<link href="{% static 'css/quiz_attempt_page.css' %}" rel="stylesheet">
<style>
.score_area {
margin: auto;
max-width: 800px;
background-color: white;
padding: 40px;
text-align: center;
}
.score {
font-size: 8em;
font-family: 'Fredericka the Great', cursive;
}
.sepa {
font-size: 8em;
position:relative;
top: 20px;
}
.tota {
font-size: 6em;
position:relative;
top: 40px;
}
#questions_area_wrapper {
background-color: white;
padding: 40px;
margin: auto;
max-width: 800px;
}
</style>
</head>
<body>
<section id="ques_area">
<div class="score_area">
<span class="score">{{ score }}</span>
<span class="score sepa">/</span>
<span class="score tota">{{ total }}</span>
</div>
<div id="questions_area_wrapper">
{% for sub in submissions %}
test {{ sub.questionId.question }}
<div class="sadsad">
<h2 class="actual_question">{{forloop.counter}}. {{ sub.questionId.question }}</h2>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_0"><strong>A</strong><span>{{sub.questionId.option1}}</span></span></label>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_1"><strong>B</strong><span>{{sub.questionId.option2}}</span></span></label>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_2"><strong>C</strong><span>{{sub.questionId.option3}}</span></span></label>
<label class="op_box"><span id="lbl_{{forloop.counter0}}_3"><strong>D</strong><span>{{sub.questionId.option4}}</span></span></label>
<br/>
<div class="rubrics_wrapper">
<div class="question_header">
<p class="rubrics">
You selected: {{sub.option}} <br/>
Correct answer: {{sub.questionId.answer}}
</p>
<p id="blankspace"></p>
<p class="marksarea rubrics">Marks: {{ sub.questionId.marks }}<br/>Negative: -{{ sub.questionId.negative }}</p>
</div>
<br/>
<p style="font-size: 1.2em">
{{ sub.questionId.explainations }}
</p>
</div>
</div>
<br/>
<hr/>
{%endfor%}
</div>
</section>
<script>
var correct_color = '#f4fa9c';
var wrong_color = '#ffb174';
function set_subs( question_id, option_id, colorss ) {
if(typeof question_id == "number" && typeof option_id == "number") {
var cbox = document.getElementById("lbl_"+question_id+"_"+option_id);
cbox.style.backgroundColor = colorss;
}
}
{% for sub in submissions %}
set_subs({{forloop.counter0}}, {{sub.option}}, wrong_color);
set_subs({{forloop.counter0}}, {{sub.questionId.answer}}, correct_color);
{%endfor%}
</script>
</body>
</html>
quiz/views.py
View file @ 873350ff
......@@ -10,6 +10,7 @@ from .models import cribs
from . newQuiz import readCSV
from .models import quiz
from django.db.models import Max
from django.shortcuts import redirect
import csv
#for login
from django.contrib.auth.models import User
......@@ -62,7 +63,7 @@ def result(request):
score-=q[0]['negative']
t=submission(questionId=questionInstance, option=request.POST[questionno], studentId=request.user, quizId=quizInstance)
t.save()
return HttpResponse(f"Successfully Submitted. Score:{score}")
return redirect('/view_submission/?q='+str(quizId))
else:
return HttpResponse("You have already submitted this quiz")
......@@ -184,8 +185,15 @@ def view_sub(request):
quizId = int(request.GET.get('q'))
quizInstance = quiz.objects.get(pk=quizId)
subs = submission.objects.filter(quizId=quizInstance, studentId=request.user).select_related().all()
score = 0
total = 0
message = ''
for sub in subs:
print(sub.questionId.question)
return render(request,'view_submissions.html', { 'submissions' : subs })
if sub.option == sub.questionId.answer:
score = score + sub.questionId.marks
else:
score = score - sub.questionId.negative
total = total + sub.questionId.marks
return render(request,'view_submissions.html', { 'submissions' : subs , 'score': score, 'total': total })
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